html,body{margin:0;height:100%;background:#e6e6e3;overflow:hidden}canvas{display:block;width:100vw;height:100vh;touch-action:none}.swatches{position:fixed;left:50%;bottom:14px;transform:translate(-50%);display:flex;gap:14px;padding:0;touch-action:none;user-select:none;-webkit-user-select:none}.sw{display:flex;flex-direction:column;align-items:center;gap:7px;width:88px;padding:0;border:0;background:transparent;cursor:pointer;font:11px ui-monospace,Menlo,monospace;color:#444;opacity:.75;-webkit-tap-highlight-color:transparent}.sw i{display:block;width:84px;height:84px;background-position:center;background-repeat:no-repeat}.sw span{padding-bottom:3px;border-bottom:2px solid transparent}.sw:hover{opacity:1}.sw.active{opacity:1;color:#111}.sw.active span{border-bottom-color:#111}.sw i.auto{background:conic-gradient(from 200deg,#7fb83f,#2b5a19,#a9b394,#8fd642,#7fb83f)}.sw i.feather{background:radial-gradient(circle at 35% 30%,#8cc24a,#3f6f1e 75%)}.sw i.star{background:radial-gradient(circle at 35% 30%,#4a7a2a,#163a0e 75%)}.sw i.lichen{background:radial-gradient(circle at 35% 30%,#cbd3b6,#8f9a78 75%)}.sw i.cushion{background:radial-gradient(circle at 35% 30%,#a2e04a,#2d6b14 75%)}.scrape-btn{position:fixed;bottom:14px;left:calc(50% + 320px);display:flex;flex-direction:column;align-items:center;gap:7px;width:88px;padding:0;border:0;background:transparent;cursor:pointer;font:11px ui-monospace,Menlo,monospace;color:#444;opacity:.75;-webkit-tap-highlight-color:transparent}.scrape-btn i{display:block;width:66px;height:84px;background-position:center;background-repeat:no-repeat;background-size:contain;transition:transform .12s ease}.scrape-btn span{padding-bottom:3px;border-bottom:2px solid transparent}.scrape-btn:hover,.scrape-btn.active{opacity:1;color:#111}.scrape-btn.active i{transform:translateY(-4px) rotate(-8deg)}.scrape-btn.active span{border-bottom-color:#111}@media(max-width:640px),(pointer:coarse){.scrape-btn{inset:10px 10px auto auto;transform:none;width:64px}.scrape-btn i{width:52px;height:52px}}.swatches.carousel{left:0;right:0;transform:none;width:100%;height:120px;gap:0;overflow:hidden;cursor:grab}.swatches.carousel .sw{position:absolute;left:50%;bottom:0;transition:opacity .15s ease}.swatches.carousel .sw i{width:96px;height:96px}.size-ring{display:none;position:fixed;pointer-events:none;transform:translate(-50%,-50%);border:1.5px solid rgba(0,0,0,.6);border-radius:50%;box-shadow:0 0 0 1px #fff9}.touch-hint{display:none;position:fixed;left:50%;top:70%;transform:translate(-50%);font:11px ui-monospace,Menlo,monospace;color:#444;opacity:.7;pointer-events:none;transition:opacity .6s ease}.touch-hint.done{opacity:0}@media(pointer:coarse),(max-width:640px){.touch-hint{display:block}}.letter-btn{position:fixed;top:8px;left:8px;width:64px;height:64px;padding:0;background:transparent;border:0;border-radius:10px;cursor:pointer;opacity:.92;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background .12s ease}.letter-btn i{display:block;width:100%;height:100%;background:center / contain no-repeat}.letter-btn:hover{transform:scale(1.06)}.letter-btn[aria-expanded=true]{background:#0000000f;opacity:1}.letter-pop{position:fixed;top:76px;left:12px;z-index:10;display:grid;grid-template-columns:repeat(6,40px);gap:4px;padding:8px;background:#f0f0ecf5;border-radius:10px;box-shadow:0 6px 24px #00000024}.letter-pop[hidden]{display:none}.letter-pop button{width:40px;height:40px;padding:0;border:0;border-radius:6px;background:transparent;cursor:pointer;font:700 22px Helvetica Neue,Helvetica,Arial,sans-serif;color:#222;-webkit-tap-highlight-color:transparent}.letter-pop button:hover{background:#0000000f}.letter-pop button.active{background:#222;color:#eee}.letter-pop button.rock{grid-column:1 / -1;width:auto;height:56px}.letter-pop button.rock.active{background:#0000001a}.letter-pop button.rock i{display:block;width:56px;height:56px;margin:0 auto;background:center / contain no-repeat}.sw span,.scrape-btn span{font-size:0;line-height:0;width:18px;padding-bottom:0}@media(hover:hover)and (pointer:fine){.swatches:not(.carousel) .sw{position:relative}.swatches:not(.carousel) .sw:before,.swatches:not(.carousel) .sw:after{position:absolute;left:50%;transform:translate(-50%,4px);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease,transform .15s ease}.swatches:not(.carousel) .sw:before{content:attr(data-latin);bottom:calc(100% + 18px);font:italic 500 13px Georgia,Times New Roman,serif;color:#222}.swatches:not(.carousel) .sw:after{content:attr(data-common);bottom:calc(100% + 4px);font:10px ui-monospace,Menlo,monospace;color:#666}.swatches:not(.carousel) .sw:hover:before,.swatches:not(.carousel) .sw:hover:after{opacity:1;transform:translate(-50%)}}.letter-btn .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}.letter-btn .ring circle{fill:none;stroke-width:2.5}.letter-btn .ring .track{stroke:#00000014}.letter-btn .ring .fill{stroke:#5c9a2a;stroke-linecap:round;transition:stroke-dashoffset .4s ease,stroke .4s ease}.letter-btn.full .ring .fill,.letter-btn.unlocked .ring .fill{stroke:#3f7d18}.letter-btn.just-unlocked{animation:unlock 2.4s ease}@keyframes unlock{0%{transform:scale(1)}12%{transform:scale(1.22)}30%{transform:scale(.96)}45%{transform:scale(1.06)}to{transform:scale(1)}}.letter-btn:not(.unlocked){cursor:default}.letter-btn:not(.unlocked):hover{transform:none}.letter-btn .ring{transition:opacity .6s ease .8s}.letter-btn.unlocked .ring{opacity:0}.letter-pop button:not(.rock){color:#3f7d18;background:center / contain no-repeat}.letter-pop button.thumb{color:transparent}.letter-pop button.thumb.active{background-color:#0000001a}.letter-pop{grid-template-columns:repeat(6,44px)}.letter-pop button{width:44px;height:44px}.debug{position:fixed;top:12px;right:12px;z-index:5;padding:6px 10px;font:11px ui-monospace,Menlo,monospace;color:#333;background:#f0f0ece6;border-radius:8px;box-shadow:0 2px 10px #00000014}.debug[hidden]{display:none}.debug summary{cursor:pointer;user-select:none;list-style:none;color:#666}.debug summary::-webkit-details-marker{display:none}.debug summary:before{content:"▸ "}.debug[open] summary:before{content:"▾ "}.debug-body{display:flex;flex-direction:column;gap:4px;margin-top:6px}.debug label{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}.debug select{font:inherit;padding:1px 2px}.debug button{font:inherit;padding:2px 8px;border:1px solid #bbb;border-radius:4px;background:#fff;cursor:pointer}@media(pointer:coarse),(max-width:640px){.debug{top:78px;left:8px;right:auto}}