:root{--sr-bg:#07101e;--sr-panel:#101d35;--sr-line:#2b4d74;--sr-text:#ecf8ff;--sr-muted:#99b4ca;--sr-cyan:#62e6ff;--sr-pink:#ff6fb5;--sr-yellow:#ffe276}.sr-page{min-height:calc(100vh - 67px);padding:27px 12px 48px;background:radial-gradient(circle at 70% 0,#193c66,transparent 42%),linear-gradient(145deg,#06101e,#111a36 60%,#201331);color:var(--sr-text);font-family:system-ui,sans-serif}.sr-page *{box-sizing:border-box}.sr-wrap{width:min(980px,100%);margin:auto}.sr-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.sr-eyebrow{color:var(--sr-cyan);font-size:10px;font-weight:900;letter-spacing:.2em}.sr-header h1{margin:5px 0;color:#fff;font-size:clamp(30px,7vw,48px);letter-spacing:.07em}.sr-header p{margin:0;color:var(--sr-muted);font-size:13px}.sr-back{margin-top:8px;color:#e5f9ff;font-size:12px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}.sr-layout{display:grid;grid-template-columns:minmax(300px,720px) 220px;gap:18px;align-items:start}.sr-play,.sr-panel{border:1px solid var(--sr-line);border-radius:8px;background:#0e1b31e8;box-shadow:0 18px 55px #0008}.sr-play{padding:clamp(12px,3vw,22px)}.sr-score-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.sr-score-row div{padding:8px;border-radius:8px;background:#071426;text-align:center}.sr-score-row span{display:block;color:var(--sr-muted);font-size:10px;letter-spacing:.1em}.sr-score-row strong{display:block;margin-top:2px;color:var(--sr-cyan);font:800 22px ui-monospace,monospace}.sr-score-row div:first-child strong{color:var(--sr-yellow)}.sr-intro{margin-bottom:12px;padding:11px 13px;border:1px solid #375f86;border-radius:8px;background:#122a46;color:#dceefa;font-size:12px;line-height:1.6}.sr-intro strong{color:var(--sr-yellow)}.sr-intro ol{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:7px 0 0;padding:0;list-style-position:inside}.sr-intro p{margin:7px 0 0;color:var(--sr-muted);font-size:11px}.sr-stage{position:relative;overflow:hidden;width:100%;border:1px solid #3c79a0;border-radius:8px;background:#091426;box-shadow:0 12px 35px #0009}.sr-canvas{display:block;width:100%;height:auto;touch-action:none}.sr-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:#06101ee8;text-align:center}.sr-overlay[hidden]{display:none}.sr-overlay h2{margin:0;color:#fff;font-size:clamp(25px,6vw,42px);letter-spacing:.08em}.sr-overlay p{max-width:350px;margin:0;color:#bdd3e4;font-size:12px;line-height:1.8}.sr-button{min-height:39px;border:1px solid var(--sr-line);border-radius:8px;padding:8px 12px;background:#152d4a;color:var(--sr-text);font:700 12px system-ui,sans-serif;cursor:pointer}.sr-button:hover,.sr-button:focus-visible{border-color:var(--sr-cyan);outline:2px solid #62e6ff55;outline-offset:2px}.sr-primary{border-color:var(--sr-cyan);background:var(--sr-cyan);color:#04121d}.sr-touch{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.sr-touch button{min-height:48px}.sr-jump{background:#15516b}.sr-duck{background:#43274d}.sr-message{min-height:1.5em;margin:10px 0 0;color:var(--sr-muted);font-size:11px;text-align:center}.sr-side{display:flex;flex-direction:column;gap:10px}.sr-panel{padding:13px}.sr-actions{display:grid;gap:8px}.sr-panel h2{margin:0 0 9px;color:var(--sr-muted);font-size:11px;letter-spacing:.13em}.sr-sound>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}.sr-sound .sr-button{padding:6px 3px;font-size:11px}.sr-sound label{display:grid;gap:4px;margin-top:10px;color:var(--sr-muted);font-size:11px}.sr-sound input{width:100%;accent-color:var(--sr-cyan)}.sr-help ol{margin:0;padding-left:19px;color:#dbeaf5;font-size:11px;line-height:1.7}.sr-help p{margin:9px 0 0;color:var(--sr-muted);font-size:10px;line-height:1.7}.sr-help b{color:#fff}.sr-button[aria-pressed=false]{color:var(--sr-muted);opacity:.65}.sr-note{margin:14px 0 0;color:#7f9ab0;font-size:10px;text-align:center}.sr-page section{margin-bottom:10px}
@media (min-width:1181px){.sr-page{padding-right:320px!important}}
@media(max-width:760px){.sr-page{padding:19px 9px 38px}.sr-header{margin-bottom:13px}.sr-layout{display:block}.sr-side{display:grid;grid-template-columns:1fr 1fr;margin-top:10px}.sr-help{grid-column:1/-1}.sr-touch{display:grid}.sr-intro ol{grid-template-columns:1fr}.sr-canvas{min-height:190px}.sr-help p{font-size:10px}}
@media(max-width:440px){.sr-header{display:block}.sr-back{display:inline-block;margin-top:10px}.sr-score-row strong{font-size:17px}.sr-side{display:block}.sr-panel{margin-bottom:9px}}