: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{display:block}#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,#progress{height:var(--hud-panel-height)}#size,#clock{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:8px 14px;position:absolute;transform:translate(-50%)}.progress-heading{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.progress-record{text-align:right;flex-direction:column;align-items:flex-end;gap:1px;min-width:0;display:flex}.progress-cap{color:#776d7e;align-items:center;gap:4px;font-size:10px;font-weight:700;line-height:1.2;display:flex}.progress-heading strong{font-variant-numeric:tabular-nums;font-size:15px;line-height:1.2}.crown{width:14px;height:12px;fill:var(--sun);stroke:var(--ink);stroke-width:1.6px;stroke-linejoin:round}#record-size{font-size:13px;line-height:18px}#progress.record-passed #record-size{color:#87601b}#bar{height:14px;margin:8px 6px 0;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)}#progress.no-record .progress-record{display:none}.progress-next{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.next-detail{align-items:center;gap:8px;height:12px;display:flex}.next-caption{min-width:0;color:var(--ink);align-items:center;gap:6px;font-size:13px;line-height:18px;display:flex}#next-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.next-key{border:1.5px solid var(--ink);border-radius:1px;flex-shrink:0;width:7px;height:7px;transform:rotate(45deg)}#next-size{color:#776d7e;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:10px;font-weight:700;line-height:12px}#next-meter{background:#e5d9ba;border-radius:99px;flex-shrink:0;width:42px;height:6px;overflow:hidden}#next-fill{background:var(--ink);border-radius:inherit;width:0;height:100%;transition:width .25s ease-out}#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}.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{opacity:1;min-height:52px;margin-top:16px;font-size:15px;font-weight:400;line-height:1.45;transition:opacity .34s}#gloss b{font-weight:600}#gloss i{opacity:.55;font-style:italic}.keys{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;display:flex}.keys b{background:var(--ink);color:var(--cream);border-radius:9px;padding:6px 11px;font-size:13px;font-weight:600}.btns{grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;display:grid}.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{z-index:4;touch-action:none;width:50vw;position:fixed;top:0;bottom:150px;right:0}#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}#look{bottom:calc(150px + 8px + env(safe-area-inset-bottom,0px))}#devbadge{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto;right:12px}#hint{top:calc(18px + env(safe-area-inset-top,0px))}.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))}#look{bottom:calc(var(--hud-panel-height) + 158px + env(safe-area-inset-bottom,0px))}#wanted,#picked{bottom:calc(var(--hud-panel-height) + 148px + env(safe-area-inset-bottom,0px))}#devbadge{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto}}@media (width<=380px){#progress{padding-left:10px;padding-right:10px}#next-meter{width:28px}.next-detail{gap:6px}}@media (prefers-reduced-motion:reduce){#barfill,#bar-current,#bar-next,#bar-record,#next-fill{transition:none}.pick{opacity:1;animation-duration:10ms}#nay.go{animation-duration:.4s}#flash.go{animation-duration:10ms}}