:root{--mz-bg:#07111f;--mz-panel:#0e2035;--mz-line:#1f4d73;--mz-text:#edf8ff;--mz-muted:#9bb6c9;--mz-cyan:#61e7ff;--mz-yellow:#ffe46b;--mz-pink:#ff6e9e}
*{box-sizing:border-box}.mz-page{min-height:calc(100vh - 67px);padding:27px 12px 48px;background:radial-gradient(circle at 50% 0,#123b61,var(--mz-bg) 62%);color:var(--mz-text);font-family:system-ui,sans-serif}.mz-page section{margin-bottom:10px}.mz-wrap{width:min(850px,100%);margin:auto}.mz-header{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:17px}.mz-eyebrow{color:var(--mz-cyan);font-size:12px;font-weight:800;letter-spacing:.14em}.mz-header h1{margin:5px 0;color:var(--mz-yellow);font-size:clamp(28px,6vw,45px);letter-spacing:.05em}.mz-header p{margin:0;color:var(--mz-muted)}.mz-back{padding:8px 11px;border:1px solid var(--mz-line);border-radius:8px;color:var(--mz-text);font-size:12px;text-decoration:none}.mz-layout{display:grid;grid-template-columns:minmax(300px,570px) 220px;gap:16px;align-items:start}.mz-play{min-width:0}.mz-score-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:9px}.mz-score-row div,.mz-panel,.mz-intro{border:1px solid var(--mz-line);border-radius:8px;background:#0e2035e8}.mz-score-row div{padding:8px;text-align:center}.mz-score-row span{display:block;color:var(--mz-muted);font-size:10px;letter-spacing:.1em}.mz-score-row strong{display:block;margin-top:2px;color:var(--mz-cyan);font-size:20px}.mz-intro{margin-bottom:9px;padding:12px;color:var(--mz-muted);font-size:12px;line-height:1.65}.mz-intro strong{color:var(--mz-yellow)}.mz-intro ol{margin:5px 0;padding-left:20px}.mz-intro p{margin:6px 0 0}.mz-board-wrap{position:relative;width:min(100%,570px);margin:auto}.mz-canvas{display:block;width:100%;height:auto;border:2px solid var(--mz-line);border-radius:8px;background:#020913;box-shadow:0 20px 55px #0009;touch-action:none}.mz-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:25px;border-radius:8px;background:#020913eb;text-align:center}.mz-overlay.show{display:flex}.mz-overlay h2{margin:0;color:var(--mz-yellow);font-size:clamp(22px,5vw,34px)}.mz-overlay p{max-width:360px;margin:0;color:var(--mz-muted);line-height:1.7}.mz-button{min-height:40px;padding:7px 12px;border:1px solid var(--mz-line);border-radius:8px;background:#14314e;color:var(--mz-text);font:700 12px system-ui;cursor:pointer}.mz-button:hover{border-color:var(--mz-cyan)}.mz-primary{border-color:var(--mz-cyan);background:var(--mz-cyan);color:#03121d}.mz-button[aria-pressed=false]{color:var(--mz-muted);opacity:.65}.mz-touch{display:none;grid-template-columns:repeat(3,1fr);grid-template-areas:'. up .' 'left down right';gap:7px;margin-top:9px}.mz-touch button{min-height:45px;touch-action:none}.mz-touch button[data-dir=up]{grid-area:up}.mz-touch button[data-dir=left]{grid-area:left}.mz-touch button[data-dir=down]{grid-area:down}.mz-touch button[data-dir=right]{grid-area:right}.mz-side{display:flex;flex-direction:column;gap:9px}.mz-panel{padding:11px}.mz-panel h2{margin:0 0 7px;color:var(--mz-muted);font-size:10px;letter-spacing:.12em}.mz-actions{display:grid;gap:7px}.mz-sound>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}.mz-sound .mz-button{padding:5px;font-size:11px}.mz-sound label{display:block;margin-top:9px;color:var(--mz-muted);font-size:11px}.mz-sound input{width:100%;accent-color:var(--mz-cyan)}.mz-help{color:var(--mz-muted);font-size:11px;line-height:1.75}.mz-help ol{margin:0 0 8px;padding-left:18px}.mz-help p{margin:0}.mz-note{margin:14px 0 0;color:#7894aa;font-size:11px;text-align:center}
@media (max-width:680px){.mz-page{padding:17px 8px 38px}.mz-header{align-items:start}.mz-header h1{font-size:clamp(25px,9vw,38px)}.mz-header p{font-size:13px}.mz-back{white-space:nowrap}.mz-layout{display:block}.mz-side{display:grid;grid-template-columns:repeat(2,1fr);margin-top:9px}.mz-panel.mz-actions,.mz-panel.mz-help{grid-column:1/-1}.mz-touch{display:grid}.mz-score-row strong{font-size:17px}}
@media (max-width:420px){.mz-score-row{gap:4px}.mz-score-row div{padding:6px 3px}.mz-score-row strong{font-size:15px}.mz-side{display:block}.mz-panel{margin-bottom:9px}.mz-header{display:block}.mz-back{display:inline-block;margin-top:10px}}