:root{--rail: 0px;--bg: #222b3a;--ink: #eaf2fa;--ink-dim: #9fb3c7;--accent: #3f8dff;--accent-soft: rgba(63, 141, 255, .16);--good: #4fe0a6;--bad: #ff7a6b;--panel: rgba(26, 35, 50, .94);--control: rgba(255, 255, 255, .1);--control-hover: rgba(255, 255, 255, .2);--stroke: rgba(150, 190, 225, .26);--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;color-scheme:dark;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#app{position:fixed;inset:0;display:block;touch-action:none;isolation:isolate}#game{position:absolute;inset:0;width:100%;height:100%;display:block}.crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(40,55,70,.045) 0 1px,transparent 1px 3px),radial-gradient(circle at center,#141e2d00 45%,#141e2d29)}.hud{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;gap:clamp(14px,2.8vh,30px);padding:max(10px,env(safe-area-inset-top)) 14px 6px;pointer-events:none}.hud-bar{display:flex;align-items:center;justify-content:space-between;gap:6px}.hud-bar-end{display:flex;align-items:center;gap:6px}.hud-meta{display:flex;flex-wrap:wrap;gap:clamp(6px,1.3vh,12px);margin-top:clamp(10px,2vh,20px);font-variant-numeric:tabular-nums}.stat{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:clamp(4px,.9vh,7px) clamp(10px,1.6vw,14px);border-radius:999px;border:1px solid rgba(130,200,255,.28);background:#101a2a94}.stat-k{font-size:clamp(9px,min(1.3vw,2vh),12px);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-dim)}.stat-v{font-size:clamp(13px,min(1.9vw,3vh),19px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}.hud-center{text-align:center;flex:1;min-width:0}.hud-title{font-size:clamp(16px,min(2.6vw,4.2vh),28px);font-weight:650;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-button{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:clamp(32px,min(4.6vw,7.4vh),40px);height:clamp(32px,min(4.6vw,7.4vh),40px);flex:0 0 auto;font-size:clamp(14px,min(2vw,3.2vh),17px);border-radius:12px;border:1px solid var(--stroke);background:var(--control);color:var(--ink);line-height:1;cursor:pointer;transition:background .15s ease,transform .1s ease}.icon-button svg{width:1.08em;height:1.08em;fill:currentColor}.icon-button:hover{background:var(--control-hover)}.icon-button:active{transform:scale(.94)}.icon-button.off{color:var(--ink-dim);opacity:.6}.controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px max(12px,env(safe-area-inset-bottom));pointer-events:none}.pill{pointer-events:auto;border-radius:999px;border:1px solid var(--stroke);background:var(--control);color:var(--ink);font-family:inherit;font-size:13px;font-weight:550;padding:9px 18px;cursor:pointer;transition:background .15s ease,transform .1s ease,opacity .15s ease}.pill:hover:not(:disabled){background:var(--control-hover)}.pill:active:not(:disabled){transform:scale(.96)}.pill:disabled{opacity:.35;cursor:default}.pill.primary{background:var(--accent);border-color:transparent;color:#08121f;font-weight:700}.pill.primary:hover:not(:disabled){background:#6aa8ff}.hint{position:absolute;left:50%;top:50%;width:min(90vw,420px);transform:translate(-50%,calc(50dvh - 100% - 14px - env(safe-area-inset-bottom)));text-align:center;font-size:clamp(11px,min(2vw,3.2vh),15px);line-height:1.45;color:var(--ink-dim);pointer-events:none;animation:fade-up .4s ease both;transition:transform .34s cubic-bezier(.3,.8,.3,1),font-size .34s ease,padding .34s ease,background-color .34s ease,border-color .34s ease,color .34s ease}.hint.ready{transform:translate(-50%,-50%);width:min(78vw,92vh,520px);font-size:clamp(15px,min(4.2vw,6.2vh),27px);line-height:1.3;font-weight:600;color:var(--ink);padding:clamp(12px,min(2.8vw,4.4vh),26px) clamp(14px,min(3.2vw,5vh),30px);border-radius:18px;border:1px solid var(--stroke);background-color:var(--panel);box-shadow:0 18px 44px #0c182447}.hint .hint-go{display:none}.hint.ready .hint-go{display:block;margin-top:clamp(6px,min(1.8vw,2.6vh),14px);font-size:clamp(11px,min(2.6vw,3.8vh),16px);font-weight:500;color:var(--accent);animation:hint-pulse 1.8s ease-in-out infinite}@keyframes hint-pulse{50%{opacity:.72}}.hint.nudge{color:#ffbe5c;font-weight:600}.hint[hidden]{display:none}@keyframes fade-up{0%{opacity:0}to{opacity:1}}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(8px,2vh,20px);background:#101722ad;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10;transition:opacity .18s ease}body[data-panel=start] #overlay{background:repeating-linear-gradient(0deg,rgba(150,190,225,.06) 0 1px,transparent 1px 54px),repeating-linear-gradient(90deg,rgba(150,190,225,.06) 0 1px,transparent 1px 54px),radial-gradient(130% 95% at 50% 4%,#3d4a5f,#2a3446 55%,#1b2330);backdrop-filter:none;-webkit-backdrop-filter:none}body[data-panel=levels] #overlay{background:repeating-linear-gradient(0deg,rgba(150,190,225,.06) 0 1px,transparent 1px 54px),repeating-linear-gradient(90deg,rgba(150,190,225,.06) 0 1px,transparent 1px 54px),radial-gradient(130% 95% at 50% 4%,#3d4a5f,#2a3446 55%,#1b2330);backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}body[data-panel=levels] .panel{width:min(760px,100%);height:100%;max-height:100%;overflow:hidden;background:none;border:0;box-shadow:none;padding:0;animation:none}.levels-screen{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;padding:clamp(8px,2vh,14px) 16px max(14px,env(safe-area-inset-bottom))}.levels-head{flex:none}.levels-head h2{font-size:clamp(22px,5vw,30px)}.levels-head p{margin-bottom:10px}.levels-bar{width:min(280px,70%);height:5px;margin:0 auto 14px;border-radius:999px;background:#96bee129;overflow:hidden}.levels-bar span{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .3s ease}body[data-panel=start] .panel{width:min(1040px,100%);overflow-x:hidden;background:none;border:0;box-shadow:none;padding:8px 20px;animation:none}body[data-panel=start] .hud-title,body[data-panel=start] .hud-meta,body[data-panel=start] #btn-restart{visibility:hidden}.overlay.hidden{display:none}.panel{width:min(440px,100%);max-height:100%;overflow-y:auto;background:var(--panel);border:1px solid var(--stroke);border-radius:20px;padding:24px;text-align:center;box-shadow:0 24px 60px #00000080;animation:pop .22s cubic-bezier(.2,.9,.3,1.4) both}@keyframes pop{0%{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}.panel h1{margin:0 0 4px;font-size:26px;letter-spacing:-.01em}.panel h2{margin:0 0 4px;font-size:20px}.panel p{margin:0 0 16px;color:var(--ink-dim);font-size:13.5px;line-height:1.55}.panel .verdict{color:var(--good);font-weight:650}#splash{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:#4e4957;transition:opacity .45s ease}#splash.out{opacity:0;pointer-events:none}#splash svg{width:min(62vmin,360px);animation:splash-in .55s ease-out}@keyframes splash-in{0%{opacity:0;transform:scale(.93)}}.panel h1.wordmark{margin:4px 0 2px;display:block;font-size:clamp(30px,min(13vw,13vh),96px);line-height:1;letter-spacing:-.03em;font-weight:800}.panel p.tagline{margin:0 0 clamp(10px,2.6vh,22px);font-size:clamp(12px,min(3.6vw,3.4vh),16px);color:var(--ink-dim)}.start-actions{margin-bottom:clamp(6px,1.8vh,14px)}.start-hero,.start-art{display:block;width:min(320px,62vw,34vh);height:auto;margin:0 auto -6px}.start-hero[hidden],.start-art[hidden]{display:none}.start-art{filter:drop-shadow(0 0 clamp(14px,4vw,42px) rgba(80,190,255,.4))}.start-title{display:block;width:100%;max-width:min(620px,88vw);height:auto;margin:0 auto}.start-screen{display:grid;gap:clamp(4px,1.6vh,18px);align-items:center;width:100%}.start-portrait{display:grid;place-items:center}@media(min-width:480px)and (min-aspect-ratio:5 / 4){.start-screen{grid-template-columns:.72fr 1.28fr;gap:clamp(8px,1.4vw,24px)}.start-hero,.start-art{width:min(420px,40vw,62vh)}}@media(max-height:380px)and (max-aspect-ratio:5 / 4){.start-hero,.start-art,.start-motes{display:none}}.start-bg{display:none}body[data-panel=start] .start-bg,body[data-panel=levels] .start-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}body[data-panel=levels] #overlay:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:#0b1019b8}body[data-panel=levels] .panel{position:relative;z-index:2}body[data-panel=start] #overlay:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,#0d121b4d,#0d121b85 48%,#0d121bc7)}body[data-panel=start] .panel{position:relative;z-index:2}.panel p.footnote.start-next{margin:-8px 0 16px;font-weight:600;color:var(--ink)}.pill.big{font-size:clamp(15px,min(4.4vw,4.6vh),19px);font-weight:700;padding:clamp(9px,1.9vh,15px) clamp(30px,7vw,52px);min-width:min(260px,70vw)}.panel-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(46px,min(12vw,15vh),78px),1fr));align-content:safe center;gap:clamp(6px,1.6vw,10px);overflow-y:auto;overscroll-behavior:contain;padding:2px;margin:0;mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%)}.level-cell{aspect-ratio:1;border-radius:11px;border:1px solid var(--stroke);background:var(--control);color:var(--ink);font-family:inherit;font-size:clamp(13px,2.6vw,16px);font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;position:relative;transition:transform .1s ease,background .15s ease}.level-cell:hover:not(:disabled){background:var(--control-hover)}.level-cell:active:not(:disabled){transform:scale(.94)}.level-cell:disabled{opacity:.28;cursor:default}.level-cell.done{border-color:#4fe0a673;color:var(--good)}.level-cell.perfect{background:#4fe0a629}.level-cell.current{outline:2px solid var(--accent);outline-offset:1px}.footnote{font-size:11.5px;color:var(--ink-dim);opacity:.75;margin:14px 0 0}.footnote button{background:none;border:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}.editor{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 10px max(10px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 60%,transparent)}.editor[hidden]{display:none}.editor-brushes{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.brush{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:46px;padding:4px 6px;border:1px solid var(--stroke);border-radius:8px;background:var(--panel);color:var(--ink-dim);font:inherit;font-size:15px;line-height:1.1;cursor:pointer}.brush small{font-size:9.5px;letter-spacing:.02em;opacity:.8}.brush.active{color:var(--ink);border-color:var(--accent);background:var(--accent-soft)}.editor-status{min-height:15px;font-size:12px;color:var(--ink-dim);text-align:center}.editor-status.ok{color:var(--good)}.editor-status.bad{color:var(--bad)}.editor-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.editor-actions .pill{padding:6px 12px;font-size:13px}.editor-actions .pill.active{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}.field{display:block;margin:12px 0 0;font-size:13px;color:var(--ink-dim)}.field input{display:block;width:100%;margin-top:5px;padding:9px 11px;border:1px solid var(--stroke);border-radius:8px;background:#080e1873;color:var(--ink);font:inherit}.field input:focus{outline:none;border-color:var(--accent)}.version{position:absolute;right:10px;bottom:calc(6px + env(safe-area-inset-bottom,0px));z-index:11;font-size:11.5px;letter-spacing:.03em;color:var(--ink-dim);opacity:.7;pointer-events:none;user-select:none;animation:version-fade 5.2s ease forwards}@keyframes version-fade{0%,76%{opacity:.7}to{opacity:0}}.fps{position:absolute;left:10px;bottom:calc(6px + env(safe-area-inset-bottom,0px));z-index:11;font-size:11.5px;letter-spacing:.03em;font-variant-numeric:tabular-nums;color:var(--good);opacity:.7;pointer-events:none;user-select:none}.fps.warn{color:var(--accent)}.fps.bad{color:var(--bad)}.stuck-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pill.reward{border-color:#ffbe5c8c;color:#ffbe5c}.pill.reward:hover{background:#ffbe5c24}@keyframes start-float{0%,to{transform:translateY(-2.5%) rotate(-1.1deg)}50%{transform:translateY(2.5%) rotate(1.1deg)}}.start-art{animation:start-float 5.5s ease-in-out infinite;will-change:transform}.start-motes{position:absolute;inset:-26% auto auto -34%;width:138%;height:144%;pointer-events:none;z-index:0}.start-portrait{position:relative}.start-portrait .start-art,.start-portrait .start-hero{position:relative;z-index:1}@media(prefers-reduced-motion:reduce){.start-art{animation:none}}.start-main .pill{display:inline-flex;align-items:center;justify-content:center;gap:.6em;text-transform:uppercase;letter-spacing:.06em;font-weight:700;border-color:#82c8ff73;background:#101a2a9e}.start-main .pill:hover:not(:disabled){background:#1e304ab8;border-color:#96d7ffbf}.pill-icon{width:1.15em;height:1.15em;flex:0 0 auto;fill:currentColor}body[data-panel=levels] .pill.primary,.start-main .pill.primary{background:linear-gradient(180deg,#4ea6ff,#2f7ff0);border-color:#bee6ffe6;color:#04101d;box-shadow:0 0 0 1px #78c8ff59,0 0 26px #3c96ff80,0 8px 22px #040c1c73}body[data-panel=levels] .pill.primary:hover:not(:disabled),.start-main .pill.primary:hover:not(:disabled){background:linear-gradient(180deg,#65b4ff,#4090ff);box-shadow:0 0 0 1px #96d7ff80,0 0 34px #50aaff99,0 8px 22px #040c1c73}.start-card{display:grid;gap:1px;justify-items:center;margin:0 auto clamp(10px,2vh,18px);padding:clamp(7px,1.4vh,11px) clamp(16px,3vw,24px);border:1px solid rgba(130,200,255,.34);border-radius:14px;background:#0e182699;width:fit-content}.start-card-no{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}.start-card-name{font-size:clamp(14px,2.4vw,17px);font-weight:700;color:var(--ink)}@media(max-height:420px){.panel p.tagline{margin-bottom:clamp(6px,1.4vh,12px)}.start-actions{margin-bottom:clamp(4px,1vh,8px)}.start-screen{gap:2px}.panel h1.wordmark{margin:0 0 2px}.start-title{width:auto;max-width:100%;max-height:26vh}}.levels-head{position:relative}.levels-back{position:absolute;left:0;top:0;z-index:1}.levels-title h2{margin-top:0}@media(max-width:460px){.levels-back span{display:none}}body[data-panel=levels] .pill{display:inline-flex;align-items:center;justify-content:center;gap:.6em;text-transform:uppercase;letter-spacing:.06em;font-weight:700;border-color:#82c8ff73;background:#101a2a9e}body[data-panel=levels] .pill:hover:not(:disabled){background:#1e304ab8;border-color:#96d7ffbf}body[data-panel=levels] .level-cell{background:#101a2a9e;border-color:#82c8ff57}body[data-panel=levels] .level-cell:hover:not(:disabled){background:#223652c7;border-color:#96d7ffb3}body[data-panel=levels] .level-cell.done{background:#4fe0a624;border-color:#4fe0a680}body[data-panel=levels] .level-cell.perfect{background:#4fe0a642}body[data-panel=levels] .level-cell.current{outline:2px solid var(--accent);outline-offset:1px;box-shadow:0 0 18px #3c96ff8c}body[data-panel=levels] .level-cell:disabled{opacity:.4;background:#0a101a80;border-color:#82c8ff24}body[data-panel=levels] .levels-bar{background:#080e1899;border:1px solid rgba(130,200,255,.2)}.rail-probe{position:absolute;top:0;left:0;width:var(--rail);height:0;pointer-events:none;visibility:hidden}@media(min-aspect-ratio:5 / 4){:root{--rail: clamp(148px, min(20vw, 40vh), 268px)}.hud{right:auto;width:var(--rail);padding:max(14px,env(safe-area-inset-top)) clamp(10px,1.4vw,16px) 0 max(14px,env(safe-area-inset-left))}.hud-center{text-align:left}.hud-title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}.hud-meta{flex-direction:column;align-items:stretch}}.rotate{display:none}@media(orientation:portrait)and (pointer:coarse){.rotate{position:fixed;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:18px;padding:24px;text-align:center;background:var(--bg)}.rotate svg{width:clamp(56px,18vw,92px);height:clamp(56px,18vw,92px);fill:none;stroke:var(--accent);stroke-width:1.4;animation:rotate-hint 2.6s ease-in-out infinite}.rotate p{margin:0;font-size:clamp(15px,4.4vw,19px);font-weight:600;color:var(--ink)}}@keyframes rotate-hint{0%,40%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media(prefers-reduced-motion:reduce){.rotate svg{animation:none;transform:rotate(-90deg)}}