:root{--ink: rgba(255, 255, 255, .92);--ink-dim: rgba(255, 255, 255, .66);--ink-faint: rgba(255, 255, 255, .52);--ink-warn: #ff2d55;--ink-note: #ffd426;--hair: rgba(255, 255, 255, .14);--hair-faint: rgba(255, 255, 255, .18);--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--text-scale: 1}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden;background:#06070c;color:var(--ink);font-family:-apple-system,system-ui,Apple SD Gothic Neo,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-variant-numeric:tabular-nums}#app{position:fixed;inset:0}#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#ui{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column}button,.tappable{pointer-events:auto;font:inherit;color:inherit;background:none;border:none;cursor:pointer;transition:opacity .12s ease}button:active,.tappable:active{opacity:.5}.hud-top{display:flex;flex-direction:column;flex:0 0 auto}.bar{display:flex;align-items:center;gap:14px;padding:0 20px;flex:0 0 auto}.bar.top{padding-top:calc(var(--safe-t) + 14px);padding-bottom:14px}.bar.stats{padding-top:4px;padding-bottom:14px}.bar.bottom{padding-bottom:calc(var(--safe-b) + 26px);padding-top:14px;gap:14px}.spacer{flex:1 1 auto}.icon-btn{width:44px;height:44px;display:grid;place-items:center;font-size:calc(20px * var(--text-scale));color:var(--ink-dim);border-radius:12px}.label{font-size:calc(13px * var(--text-scale));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}.label strong{color:var(--ink);font-weight:600}.screen{pointer-events:auto;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;background:#06070c}.title-screen{justify-content:center;align-items:center;gap:0;text-align:center;padding:0 28px;background:radial-gradient(ellipse at center,#06070cc7,#06070cf0 65%)}.wordmark{font-size:clamp(46px,17vw,88px);font-weight:200;letter-spacing:.34em;text-indent:.34em;line-height:1}.tagline{margin-top:18px;font-size:calc(14px * var(--text-scale));color:var(--ink-dim);letter-spacing:.06em}.title-actions{margin-top:52px;display:flex;flex-direction:column;gap:6px;width:100%;max-width:280px}.big-btn{height:54px;border-radius:14px;border:1px solid var(--hair);font-size:calc(15px * var(--text-scale));letter-spacing:.16em;text-transform:uppercase}.big-btn.ghost{border-color:transparent;color:var(--ink-dim)}.title-foot{position:absolute;bottom:calc(var(--safe-b) + 14px);left:0;right:0;display:flex;justify-content:center;align-items:center;gap:8px;font-size:calc(13px * var(--text-scale));color:var(--ink-faint)}.title-foot .progress{min-height:44px;display:flex;align-items:center;padding:0 4px}.scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 20px calc(var(--safe-b) + 32px)}.chapter-head{display:flex;align-items:baseline;gap:10px;margin:26px 0 12px}.chapter-no{font-size:calc(11px * var(--text-scale));letter-spacing:.2em;color:var(--ink-faint)}.chapter-name{font-size:calc(17px * var(--text-scale));font-weight:500}.chapter-count{margin-left:auto;font-size:calc(12px * var(--text-scale));color:var(--ink-faint)}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.level-btn{aspect-ratio:1;border-radius:13px;border:1px solid var(--hair-faint);display:grid;place-items:center;position:relative;font-size:calc(15px * var(--text-scale));color:var(--ink-dim)}.level-btn.cleared{border-color:#ffffff4d;color:var(--ink)}.level-btn.perfect{border-color:#ffd4268c;color:#ffd426;box-shadow:inset 0 0 18px #ffd4261a}.level-btn.next{border-color:#ffffffb8;color:var(--ink)}.level-btn .pip{position:absolute;bottom:7px;font-size:calc(8px * var(--text-scale));line-height:1;color:currentColor;opacity:.85}.play-screen{justify-content:space-between;pointer-events:none;background:none}.crystals{display:inline-flex;align-items:center;gap:7px;font-size:calc(19px * var(--text-scale));font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}.crystals svg{width:15px;height:16.5px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;opacity:.85}.crystals .of{color:var(--ink-dim)}.crystals.done svg{fill:currentColor;opacity:1}.taps{font-size:calc(13px * var(--text-scale));color:var(--ink-dim);font-variant-numeric:tabular-nums}.taps .par{color:var(--ink-dim)}.taps.last,.taps.last .par{color:var(--ink)}.taps.lost .par{color:var(--ink-warn)}.par-note{font-size:calc(11px * var(--text-scale));letter-spacing:.02em;padding:2px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}.par-note.last{color:var(--ink-note)}.par-note.lost{color:var(--ink-warn)}.bar.stats.cleared>*{visibility:hidden}.cleared-banner{pointer-events:auto;position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 44px);display:flex;flex-direction:column;align-items:center;gap:20px;animation:rise .34s cubic-bezier(.2,.9,.2,1) both}@keyframes rise{0%{opacity:0;transform:translateY(16px)}}.cleared-mark{pointer-events:none;font-size:calc(30px * var(--text-scale));font-weight:250;letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:var(--ink)}.cleared-mark.perfect{color:#ffd426;text-shadow:0 0 28px rgba(255,212,38,.3)}.perfect-intro{pointer-events:none;margin-top:-8px;max-width:30ch;text-align:center;font-size:calc(13px * var(--text-scale));line-height:1.5;color:var(--ink-dim)}.cleared-banner .next-btn{min-width:260px}.next-btn{min-width:220px;height:52px;border-radius:14px;border:1px solid var(--hair);font-size:calc(15px * var(--text-scale));letter-spacing:.16em;text-transform:uppercase;background:#ffffff0a}.settings{padding:8px 20px}.row{pointer-events:auto;display:flex;align-items:center;min-height:calc(54px * var(--text-scale));padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:calc(15px * var(--text-scale))}.row .sub{display:block;font-size:calc(12px * var(--text-scale));color:var(--ink-faint);margin-top:2px}.switch{margin-left:auto;width:50px;height:30px;border-radius:15px;background:#ffffff1a;position:relative;transition:background .18s ease;flex:0 0 auto}.switch:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#ffffff8c;transition:transform .18s cubic-bezier(.2,.9,.2,1)}.switch.on{background:#32ff9a47}.switch.on:after{transform:translate(20px);background:#32ff9a}.legal{font-size:calc(11px * var(--text-scale));line-height:1.7;color:var(--ink-faint);padding:22px 2px}.optics-card-backdrop{pointer-events:auto;position:absolute;inset:0;background:#030408d1;display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .2s ease both}@keyframes fade{0%{opacity:0}}.optics-card{width:100%;max-width:340px;max-height:100%;overflow-y:auto;background:#0b0d16;border:1px solid var(--hair);border-radius:20px;padding:22px 22px 18px;text-align:center;animation:rise .28s cubic-bezier(.2,.9,.2,1) both}.optics-card h2{font-size:calc(19px * var(--text-scale));font-weight:600;margin:14px 0 10px}.optics-card .next-btn{margin-top:18px;width:100%;min-width:0}.optics-goal{font-size:calc(15px * var(--text-scale));font-weight:600;line-height:1.55;color:var(--ink);text-align:left;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07)}.optics-diagram svg{width:100%;height:auto;display:block}.optics-compare{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;margin:14px 0 16px}.optics-compare figure{min-width:0}.optics-frame{border:1px solid var(--hair);border-radius:10px;background:#ffffff04;padding:6px}.optics-frame.lit{border-color:#ffffff42;background:#ffffff0b}.optics-frame svg{width:100%;height:auto;display:block}.optics-compare figcaption{margin-top:6px;text-align:center;font-size:calc(11px * var(--text-scale));letter-spacing:.06em;color:var(--ink-faint)}.optics-arrow{color:var(--ink-faint);font-size:calc(15px * var(--text-scale));transform:translateY(-9px)}.optics-real,.optics-game{font-size:calc(14px * var(--text-scale));line-height:1.65;color:var(--ink-dim);text-align:left}.optics-game{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}.optics-tag{color:var(--ink-faint);font-size:calc(12px * var(--text-scale));letter-spacing:.06em}.optics-pager{flex:1 1 auto;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}.optics-pager::-webkit-scrollbar{display:none}.optics-page{flex:0 0 100%;width:100%;scroll-snap-align:center;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 22px;display:flex;align-items:flex-start}.optics-page-inner{width:100%;max-width:360px;margin:0 auto;padding:10px 0 20px}.optics-page h2{font-size:calc(20px * var(--text-scale));font-weight:600;margin:16px 0 12px}.optics-page p{font-size:calc(14px * var(--text-scale));line-height:1.7;color:var(--ink-dim);margin-bottom:12px}.optics-dots{flex:0 0 auto;display:flex;justify-content:center;align-items:center;gap:6px;padding:10px 0 calc(var(--safe-b) + 14px)}.optics-dot{width:30px;height:44px;position:relative;border-radius:8px}.optics-dot:after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:var(--hair-faint);transition:background .18s ease,transform .18s ease}.optics-dot.on:after{background:var(--ink);transform:scale(1.25)}.optics-diverge{padding-left:18px}.optics-diverge li{font-size:calc(14px * var(--text-scale));line-height:1.7;color:var(--ink-dim);margin-bottom:10px}.title-foot .foot-btn{min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--hair);color:var(--ink-dim);font-size:calc(13px * var(--text-scale))}.row-value{margin-left:auto;color:var(--ink-dim);font-size:calc(14px * var(--text-scale));flex:0 0 auto;padding-left:12px}.row-value.danger{color:#ff2d55d9;font-size:calc(18px * var(--text-scale))}.pick-card{max-width:300px}.pick-card h2{margin-bottom:4px}.pick-card .row-value{color:var(--ink)}.pick-card .next-btn{width:100%;min-width:0;margin-top:12px}.confirm-card{max-width:300px}.confirm-message{font-size:calc(15px * var(--text-scale));line-height:1.6;color:var(--ink);text-align:center;margin-bottom:20px}.confirm-card .next-btn{width:100%;min-width:0;margin-top:8px}.next-btn.danger{border-color:#ff2d5580;color:#ff5a78;background:#ff2d5514}.next-btn.ghost{border-color:transparent;color:var(--ink-dim);background:none}@media(prefers-reduced-motion:reduce){@keyframes rise{0%{opacity:0}}.hud-bottom,.optics-card{animation-duration:.16s}.icon-btn,.next-btn,.lv{transition-property:background,border-color,color}}.tap-counter{display:inline-flex;align-items:center;gap:10px}.demo-note{margin-top:calc(10px * var(--text-scale));max-width:26ch;text-align:center;font-size:calc(13px * var(--text-scale));line-height:1.5;color:var(--ink-dim)}.demo-end{display:flex;flex-direction:column;align-items:center;gap:10px}.demo-end p{max-width:28ch;text-align:center;font-size:calc(14px * var(--text-scale));line-height:1.55;color:var(--ink-dim)}.demo-end .next-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}