:root{--sky:#ece4cd;--hud-panel-height:78px;--cream:#fff6e0;--ink:#2b2140;--pop:#ff4f8b;--sun:#ffd23f}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--sky);height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:ui-rounded,Trebuchet MS,Avenir Next,system-ui,sans-serif;overflow:hidden}html:before,html:after{content:"";background:var(--sky);pointer-events:none;z-index:4;position:fixed;left:0;right:0}html:before{height:env(safe-area-inset-top,0px);top:0}html:after{height:env(safe-area-inset-bottom,0px);bottom:0}canvas{z-index:0;display:block;position:relative}#hud{pointer-events:none;z-index:5;position:fixed;inset:0}.plate{background:var(--cream);border:3px solid var(--ink);border-radius:18px;padding:10px 14px}#size,#clock{height:var(--hud-panel-height);flex-direction:column;justify-content:center;width:128px;display:flex}#size{bottom:max(16px, env(safe-area-inset-bottom));position:absolute;left:16px}#size .cap{letter-spacing:.02em;opacity:.6;font-variant-numeric:tabular-nums;font-size:12px;font-weight:600}#sizeval{white-space:nowrap;transform-origin:0;font-size:34px;font-weight:700;line-height:1.05}#progress{left:50%;bottom:max(16px, env(safe-area-inset-bottom,0px));border-radius:18px;width:min(440px,100vw - 600px);padding:12px 14px;position:absolute;transform:translate(-50%)}#next-panel,#record-panel{top:calc(16px + env(safe-area-inset-top,0px));flex-direction:column;gap:4px;max-width:calc(50vw - 24px);display:flex;position:absolute}#next-panel{left:16px}#record-panel{text-align:right;right:16px}#next-name,#record-label{font-size:13px;font-weight:600;line-height:1.3}#next-size,#record-size{font-variant-numeric:tabular-nums;font-size:16px;line-height:1.3}#record-panel.record-passed #record-size{color:#87601b}#bar{height:14px;margin:0 6px;position:relative}.bar-track{border:2px solid var(--ink);background:#e5d9ba;border-radius:99px;position:absolute;inset:0;overflow:hidden}#barfill{background:var(--pop);border-radius:99px;width:0%;height:100%;transition:width .25s ease-out}#bar-ticks{position:absolute;inset:0}.tick{background:#2b214040;width:2px;height:6px;position:absolute;top:2px}#bar-current{border:3px solid var(--ink);background:var(--pop);width:18px;height:18px;box-shadow:inset 0 0 0 2px var(--cream);z-index:3;border-radius:50%;transition:left .25s ease-out;position:absolute;top:-2px;left:0;transform:translate(-50%)}#bar-next{border:2px solid var(--ink);background:var(--cream);z-index:2;border-radius:2px;width:10px;height:10px;transition:left .25s ease-out;position:absolute;top:2px;left:0;transform:translate(-50%)rotate(45deg)}#bar-record{border:2px solid var(--ink);background:var(--sun);z-index:1;border-radius:5px;width:7px;height:22px;transition:left .25s ease-out;position:absolute;top:-4px;left:100%;transform:translate(-50%)}#progress.record-passed #bar-current{background:var(--sun)}#clock{bottom:max(16px, env(safe-area-inset-bottom));text-align:right;position:absolute;right:16px}#clock .cap{opacity:.6;font-size:12px;font-weight:600}#time{font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;line-height:1.05}#clock.low #time{color:var(--pop)}#wanted{border:2px solid var(--ink);opacity:0;pointer-events:none;background:#2b2140c7;border-radius:99px;gap:5px;padding:7px 12px;transition:opacity .35s;display:flex;position:absolute;bottom:148px;left:50%;transform:translate(-50%)}#wanted.show{opacity:1}#wanted i{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#ffffff38;width:14px;height:14px;display:block}#wanted i.on{background:var(--sun)}#devbadge{background:var(--ink);color:var(--sun);text-align:right;border-radius:99px;padding:5px 11px;font-size:11px;font-weight:600;line-height:1.5;position:absolute;bottom:110px;right:16px}#banner{left:50%;top:calc(64px + env(safe-area-inset-top,0px));background:var(--pop);color:var(--cream);border:3px solid var(--ink);text-align:center;opacity:0;border-radius:16px;max-width:min(86vw,540px);padding:9px 22px;font-size:19px;font-weight:600;line-height:1.3;transition:opacity .35s,transform .35s;position:absolute;transform:translate(-50%,-8px)scale(.9)}#banner.show{opacity:1;transform:translate(-50%)scale(1)}#flash{opacity:0;pointer-events:none;z-index:3;background:#fff;position:absolute;inset:0}#flash.go{animation:.16s ease-out forwards flash}@keyframes flash{0%{opacity:.82}to{opacity:0}}#nay{color:var(--cream);opacity:0;letter-spacing:-.01em;z-index:4;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;font-size:56px;font-weight:700;position:absolute;top:47%;left:50%;transform:translate(-50%,-50%)}#nay.go{animation:.78s cubic-bezier(.2,.9,.3,1) forwards nay}@keyframes nay{0%{opacity:0;transform:translate(-50%,-42%)scale(.72)rotate(-5deg)}16%{opacity:1;transform:translate(-50%,-56%)scale(1.05)rotate(-2.5deg)}64%{opacity:1;transform:translate(-50%,-62%)scale(1)rotate(-2deg)}to{opacity:0;transform:translate(-50%,-82%)scale(.98)rotate(-1deg)}}#picked{flex-direction:column-reverse;align-items:center;gap:5px;width:min(90vw,420px);display:flex;position:absolute;bottom:148px;left:50%;transform:translate(-50%)}.pick{background:var(--ink);color:var(--cream);opacity:0;border-radius:99px;padding:5px 13px;font-size:14px;font-weight:500;animation:1.6s ease-out forwards pop}.pick b{color:var(--sun);margin-left:6px;font-weight:600}@keyframes pop{0%{opacity:0;transform:translateY(8px)scale(.85)}14%{opacity:1;transform:translateY(0)scale(1)}72%{opacity:1}to{opacity:0;transform:translateY(-14px)}}#hint{left:50%;top:calc(18px + env(safe-area-inset-top,0px));color:var(--cream);background:#2b2140b8;border-radius:99px;padding:7px 16px;font-size:13px;font-weight:500;transition:opacity .6s;position:absolute;transform:translate(-50%)}.veil{pointer-events:auto;z-index:5;background:radial-gradient(120% 90% at 50% 10%,#9ce0fb 0%,#66c6ee 55%,#3ea6d8 100%);place-items:center;padding:24px;display:grid;position:fixed;inset:0;overflow:auto}.card{text-align:center;background:var(--cream);border:4px solid var(--ink);border-radius:26px;width:100%;max-width:460px;padding:30px 28px 24px}#startveil .card{max-width:660px}.card h1{letter-spacing:-.03em;font-size:56px;font-weight:700;line-height:.92}.card h1.brand{letter-spacing:0;flex-direction:column;align-items:stretch;margin:0 0 4px;line-height:1;display:inline-flex}.card h1.brand .word{gap:.08em;width:max-content;display:flex}.card h1.brand .word i,.card h1.brand .jp i{font-style:normal}.card h1.brand .jp{letter-spacing:0;color:#2b214061;justify-content:space-between;width:0;min-width:100%;margin:8px 0 0;font-family:Hiragino Maru Gothic ProN,Hiragino Sans,Yu Gothic,Noto Sans JP,sans-serif;font-size:1em;font-weight:700;display:flex}.card p{opacity:.85;margin-top:14px;font-size:15px;font-weight:400;line-height:1.55}#gloss{margin-top:16px;font-size:15px;font-weight:400;line-height:1.45}#gloss b{font-weight:600}#gloss i{opacity:.55;font-style:italic}.card p.intro{white-space:nowrap;margin-top:0;font-size:clamp(10px,2.6vw,15px);line-height:1.45}.instructions{width:max-content;max-width:100%;margin:26px auto 0}.instructions-panel{border:1px solid #2b21403d;border-radius:16px;padding-top:18px}.instructions-title{letter-spacing:0;margin:0;font-size:30px;line-height:1.15}.keys{gap:4px;width:100%;margin:12px auto 0;padding:0 0 8px;list-style:none;display:grid}.keys li{text-align:center;color:var(--ink);background:0 0;border-radius:14px;justify-content:center;align-items:center;padding:7px 12px;font-size:16px;font-weight:600;display:flex}.keys .camera-instruction{text-align:left;grid-template-columns:78px 1fr;gap:16px;padding:12px 24px;display:grid}.camera-keys{grid-template-rows:repeat(2,26px);grid-template-columns:repeat(3,26px);gap:0;display:grid}.camera-keys kbd{color:var(--ink);background:var(--cream);border:1px solid #d8cdb4;border-bottom-width:3px;border-radius:5px;place-items:center;font-family:inherit;font-size:15px;font-weight:700;display:grid}.key-w{grid-area:1/2}.key-a{grid-area:2/1}.key-d{grid-area:2/3}.key-s{grid-area:2/2}.btns{grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;display:grid}.instructions .btns{width:280px;max-width:calc(100vw - 96px);position:relative;left:50%;transform:translate(-50%)}.btns button{width:100%;min-width:0;margin-top:0;padding-left:12px;padding-right:12px}button{color:var(--ink);background:var(--sun);border:3px solid var(--ink);cursor:pointer;border-radius:16px;margin-top:22px;padding:13px 34px;font-family:inherit;font-size:19px;font-weight:600;transition:transform 70ms}button:active{transform:scale(.98)}button:focus-visible{outline:3px solid var(--pop);outline-offset:3px}button.secondary{background:var(--cream)}#clock.done{pointer-events:auto;cursor:pointer}#final{color:var(--pop);margin-top:6px;font-size:62px;font-weight:700;line-height:1}#final span{font-size:28px}#tally{opacity:.7;margin-top:8px;font-size:14px;font-weight:500}#expr{background:#efe6cc;border-radius:12px;margin-top:16px;padding:9px 14px;font-size:15px;font-weight:500;display:inline-block}#expr em{opacity:.45;margin:0 5px;font-style:normal}.seedline{opacity:.5;margin-top:16px;font-size:12px;font-weight:500}.seedline a{color:inherit}#kingline,#kingend{opacity:.85}#kingline b,#kingend b{color:var(--pop);font-weight:700}.devnote{color:var(--pop);margin-top:10px;font-size:12px;font-weight:600}.hidden{display:none!important}#stick{z-index:4;touch-action:none;width:168px;height:168px;margin-left:-84px;position:fixed;bottom:0;left:50%}#look{pointer-events:auto;touch-action:none;position:absolute;inset:0 0 50%}#knob{width:110px;height:110px;left:50%;bottom:max(16px, env(safe-area-inset-bottom));pointer-events:none;z-index:4;background:#fff6e047;border:3px solid #2b214080;border-radius:50%;margin-left:-55px;display:none;position:fixed}#knob i{background:var(--cream);border:3px solid var(--ink);border-radius:50%;width:46px;height:46px;margin:-23px 0 0 -23px;position:absolute;top:50%;left:50%}@media (hover:hover) and (width>=561px){#stick,#look,#knob{display:none!important}}@media (hover:none),(width<=560px){#knob{display:block}}@media (width<=560px){:root{--hud-panel-height:72px}#progress{padding-top:6px;padding-bottom:6px}#size,#clock{width:min(110px,50vw - 76px);height:60px;padding:6px 10px}#sizeval,#time{font-size:24px}#knob{width:84px;height:84px;margin-left:-42px}#knob i{width:36px;height:36px;margin:-18px 0 0 -18px}#stick{width:140px;height:140px;bottom:calc(8px + env(safe-area-inset-bottom,0px));margin-left:-70px}#devbadge{top:calc(96px + env(safe-area-inset-top,0px));bottom:auto;right:12px}#hint{top:calc(18px + env(safe-area-inset-top,0px))}.instructions-title{font-size:30px}.keys li{font-size:clamp(13px,3.5vw,16px)}.card h1{font-size:42px}.card h1.brand{font-size:34px}#hint{display:none}#nay{font-size:42px}#banner{font-size:16px}}@media (width<=1000px),(hover:none){#progress{width:min(520px,100vw - 24px);bottom:calc(12px + env(safe-area-inset-bottom,0px))}#size,#clock,#knob{bottom:calc(var(--hud-panel-height) + 24px + env(safe-area-inset-bottom,0px))}#stick{bottom:calc(var(--hud-panel-height) + 10px + env(safe-area-inset-bottom,0px))}#wanted,#picked{bottom:calc(var(--hud-panel-height) + 148px + env(safe-area-inset-bottom,0px))}#devbadge{top:calc(96px + env(safe-area-inset-top,0px));bottom:auto}}@media (width<=380px){#progress{padding-left:10px;padding-right:10px}}@media (prefers-reduced-motion:reduce){#barfill,#bar-current,#bar-next,#bar-record{transition:none}.pick{opacity:1;animation-duration:10ms}#nay.go{animation-duration:.4s}#flash.go{animation-duration:10ms}}