.op-page .op-head{margin-bottom:18px}.op-head,.op-below{transition:opacity .4s}html[data-focus-mode] :is(.op-head,.op-below):not(:hover):not(:focus-within){opacity:.14}.op-panel{--bg:#0d1018;--surface:#151a25;--cap:#202737;--cap-edge:#080b11;--line:#2a3246;--grid:#222a3b;--ink:#e8ecf5;--ink-2:#a9b1c4;--ink-3:#8a93a8;--accent:#8e9eff;--accent-ink:#0d1120;--accent-soft:#252e57;--err:#ff7d73;--good:#3ccf6e;--err-soft:#3a1f22;--op-gold:#ffd36e;--op-cyan:#6fe3ff;--op-violet:#a98bff;color:var(--ink);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#0b0f1f;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 1px 2px #0000004d,0 24px 48px -28px #0a0c28bf}.op-sky{height:clamp(230px,31vw,340px);position:relative}.op-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.op-hud{pointer-events:none;font-family:var(--font-body);text-shadow:0 1px 3px #0009;transition:opacity .3s;position:absolute;inset:0}.op-game:is([data-stage=ready],[data-stage=over]) .op-hud{opacity:0}.op-hud-top{justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;display:flex}.op-where{align-items:center;gap:12px;display:flex}.op-skyname{font:700 .95rem/1 var(--font-display);letter-spacing:.03em}.op-progress{background:#ffffff29;border-radius:3px;width:clamp(70px,12vw,140px);height:5px;display:block;overflow:hidden}.op-progress>span{background:linear-gradient(90deg, #ffbf4d, var(--op-gold));border-radius:3px;width:0;height:100%;transition:width .18s linear;display:block}.op-charge{color:#ffe8b0;background:#ffd36e21;border:1px solid #ffd36e6b;border-radius:999px;padding:5px 10px;font-size:.82rem}.op-charge b{font:700 .95rem/1 var(--font-mono);color:#fff;margin-left:2px}.op-lights{gap:7px;display:flex}.op-lights span{border:1.5px solid #b4e6ff80;border-radius:50%;width:13px;height:13px;transition:background .3s,box-shadow .3s}.op-lights span[data-on="1"]{background:radial-gradient(circle at 40% 40%, #fff, var(--op-cyan) 60%);border-color:#0000;box-shadow:0 0 10px #6fe3ffcc}.op-hud-bottom{gap:clamp(14px,3vw,30px);display:flex;position:absolute;bottom:12px;left:18px;right:18px}.op-stat{font:600 1.05rem/1.1 var(--font-mono);flex-direction:column;gap:3px;display:flex}.op-stat small{font:600 .66rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#b9c2dc}.op-stat-night span{color:#cdb8ff}.op-banner{pointer-events:none;white-space:nowrap;font:700 clamp(1rem, 2.2vw, 1.35rem)/1.2 var(--font-display);color:#fff;text-shadow:0 2px 10px #0009;opacity:0;background:#080a1a8c;border-radius:12px;padding:8px 16px;transition:opacity .25s,transform .25s;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%)scale(.94)}.op-banner[data-show]{opacity:1;transform:translate(-50%,-50%)scale(1)}.op-card{background:#080b1ce0;border:1px solid #ffffff14;border-radius:14px;max-width:min(440px,100% - 36px);padding:18px 20px;position:absolute;top:50%;left:18px;transform:translateY(-50%);box-shadow:0 18px 40px -20px #000c}.op-card h2{margin:.1em 0 .35em;font-size:1.35rem}.op-card p{color:var(--ink-2);margin:0 0 .6em;font-size:.92rem;line-height:1.45}.op-card p b{color:var(--ink)}.op-eyebrow{letter-spacing:.1em;text-transform:uppercase;font:700 .72rem/1 var(--font-body)!important;color:var(--op-gold)!important}.op-how{color:var(--ink-2);margin:0 0 .7em;padding-left:1.1em;font-size:.88rem;line-height:1.45}.op-how li{margin:.2em 0}.op-best{color:var(--op-gold)!important}.op-go{font-weight:600;color:var(--ink)!important;margin:0!important}.op-key{text-align:center;min-width:1.6em;font:700 .9em/1.4 var(--font-mono);color:#2a1d00;background:var(--op-gold);border-radius:6px;padding:1px 6px;display:inline-block;box-shadow:inset 0 -2px #00000040}.op-paused{text-align:center;left:50%;transform:translate(-50%,-50%)}.op-paused .btn{margin-top:4px}.op-tape{--lh:1.65em;height:calc(var(--lh) + 30px);cursor:text;font-family:var(--font-mono);background:#0e1326;border-top:1px solid #ffffff0f;padding:15px 0;font-size:clamp(1.2rem,2.1vw,1.65rem);position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 5% 95%,#0000);mask-image:linear-gradient(90deg,#0000,#000 5% 95%,#0000)}.op-tape[hidden]{display:none}.op-text{will-change:transform;flex-wrap:nowrap;column-gap:.62em;width:max-content;transition:transform .12s ease-out;display:flex;position:relative}.op-text .word{height:var(--lh);line-height:var(--lh);white-space:nowrap}.op-text .l{color:#8b94b0}.op-text .l.ok{color:#f4f6ff}.op-text .l.stuck{color:#ffb0a8;-webkit-text-decoration:underline wavy var(--err);text-decoration:underline wavy var(--err);text-underline-offset:.3em;background:#ff7d7338;border-radius:3px}.op-text .op-charged{box-shadow:inset 0 -2px #ffd36e8c}.op-text .op-charged .l{color:#e2c272}.op-text .op-charged .l.ok{color:#fff1c6}.op-text .caret{z-index:2;height:1.25em;margin-top:calc((var(--lh) - 1.25em) / 2);background:var(--op-cyan);box-shadow:0 0 10px #6fe3ffd9}.op-gate{background:linear-gradient(#fff0c2,#ffbf4d);border-radius:2px;flex:none;align-self:center;width:4px;height:1.35em;box-shadow:0 0 12px #ffc85ae6}.op-dusk{z-index:1;pointer-events:none;will-change:transform;background:linear-gradient(90deg,#050310f0 0% 97%,#05031000 100%);width:6000px;margin-left:-6000px;position:absolute;top:-24px;bottom:-24px;left:0}.op-tape[data-focused]{box-shadow:inset 0 0 0 1px #6fe3ff2e}.op-results{border-top:1px solid #ffffff0f;padding:22px 24px 18px}.op-results h2{outline:none;margin:0 0 10px;font-size:1.45rem}.op-skies{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:16px;display:flex}.op-skies>span:not(.op-skies-text){background:#ffffff1f;border-radius:4px;width:18px;height:8px}.op-skies>span[data-on]{background:linear-gradient(90deg, #ffbf4d, var(--op-gold));box-shadow:0 0 8px #ffc85a80}.op-skies-text{color:var(--ink-2);margin-left:8px;font-size:.92rem}.op-new{background:var(--op-gold);color:#2a1d00;border-radius:999px;margin-left:8px;padding:2px 8px;font-size:.78rem}.op-tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 16px;display:grid}.op-tiles>div{background:#ffffff0d;border:1px solid #ffffff12;border-radius:12px;padding:12px 14px}.op-tiles dt{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-size:.74rem}.op-tiles dd{font:700 1.45rem/1.1 var(--font-mono);margin:4px 0 2px}.op-tiles p{color:var(--ink-3);margin:0;font-size:.82rem}.op-up{color:#5fe08a!important}.op-down{color:#ffb07a!important}.op-focus h3{margin:0 0 8px;font-size:1rem}.op-focus ul{gap:6px;margin:0 0 14px;padding:0;list-style:none;display:grid}.op-focus li{color:var(--ink-2);align-items:center;gap:10px;font-size:.92rem;display:flex}.op-focus li b{margin-left:auto;font-size:.82rem}.op-note{color:var(--ink-2);max-width:70ch;margin:10px 0 0;font-size:.88rem}.op-break{color:#d9ccff}.op-actions{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.op-actions kbd{margin-left:4px}.op-foot{color:var(--ink-3);border-top:1px solid #ffffff0f;align-items:center;gap:18px;padding:9px 18px;font-size:.8rem;display:flex}.op-sound{appearance:none;color:inherit;font:inherit;cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:0;text-decoration:underline}.op-sound:hover{color:var(--ink)}.op-today{margin-left:auto}.op-touch{color:var(--ink-2);margin:10px 2px 0;font-size:.88rem;display:none}@media (hover:none) and (pointer:coarse){.op-touch{display:block}}@media (max-width:640px){.op-hud-top{flex-wrap:wrap;padding:10px 12px}.op-charge{order:3}.op-hud-bottom{bottom:8px;left:12px;right:12px}.op-card{max-width:none;padding:14px;left:10px;right:10px}.op-card .op-how{display:none}.op-results{padding:18px 16px}}@media (prefers-reduced-motion:reduce){.op-text,.op-progress>span,.op-banner{transition:none}}