:root{color-scheme:dark;--echo-bg:#101a19;--echo-ink:#eaf2eb;--echo-muted:#97aba5;--echo-mint:#bdecca;--echo-border:#34453f;--echo-pad:#1b2a26;--paper:var(--echo-bg);--ink:var(--echo-ink);--muted:var(--echo-muted);--line:var(--echo-border);--accent:var(--echo-mint)}
*{box-sizing:border-box}
body{margin:0;min-width:280px;min-height:100svh;background:var(--echo-bg);color:var(--echo-ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit}
.echo-header{max-width:1160px;margin:0 auto;min-height:88px;padding:24px 38px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.echo-header h1{margin:0;display:flex;align-items:center;gap:11px;font-size:25px;font-weight:570;letter-spacing:-1px}
.echo-header h1 span{color:var(--echo-mint);font-size:31px;font-weight:400}
#game-menu{color:var(--echo-muted)}
#game-menu select,#game-menu button{color:var(--echo-ink);background:var(--echo-pad);border-color:var(--echo-border)}
.echo-main{width:min(100%,540px);margin:18px auto 0;padding:0 30px 32px}
.guidance{color:var(--echo-muted);font-size:14px;line-height:1.7;text-align:center;margin:0 auto 34px;max-width:310px;text-wrap:balance}
.echo-game{max-width:370px;margin:auto}
.round-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--echo-muted);font-size:10px;letter-spacing:1.3px;font-weight:600;font-variant-numeric:tabular-nums}
.rounds{display:flex;gap:5px}.rounds i{height:4px;width:4px;border-radius:50%;background:#3e5149}.rounds i.done{background:var(--echo-mint)}.rounds i.current{box-shadow:0 0 0 2px #91baa244;background:var(--echo-mint)}
.status{height:109px;text-align:center;padding-top:25px}.status h2{margin:0;font-size:29px;letter-spacing:-1px;font-weight:500;line-height:1.2}.status p{margin:10px 0 0;color:var(--echo-muted);font-size:13px;line-height:1.45;min-height:20px;font-variant-numeric:tabular-nums}
.board-shell{position:relative}.echo-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pad{position:relative;aspect-ratio:1;border:1px solid var(--echo-border);border-radius:23px;background:var(--echo-pad);color:var(--echo-muted);cursor:default;display:grid;place-items:center;padding:0;touch-action:manipulation;outline-offset:4px;transition:border-color .16s,background .16s}
.pad .pad-key{position:absolute;left:15px;top:12px;font-size:11px;font-weight:500}.pad .pad-light{display:block;width:18px;height:18px;border:1px solid #648271;border-radius:50%;background:#52706018;transition:background .1s}
.pad .pad-mark{position:absolute;bottom:8px;font-size:11px;line-height:15px;color:inherit}
.pad:hover:not(:disabled){background:var(--echo-pad)}
.pad[aria-disabled="false"]{cursor:pointer}.pad[aria-disabled="false"]:hover{border-color:#7b9b86;background:#24382f}.pad[aria-disabled="false"]:active{background:var(--echo-mint);color:var(--echo-bg)}
.pad.cue{animation:echo-cue 760ms linear both}.pad.cue .pad-light{background:currentColor;border-color:currentColor}
.pad.hit{background:#324c3b;border-color:#9abb9e;color:var(--echo-mint)}.pad.hit .pad-light{background:var(--echo-mint);border-color:var(--echo-mint)}
.pad.miss{background:#432d2c;border-color:#d78e81;color:#edb2a6}.pad.miss .pad-light{background:#edb2a6;border-color:#edb2a6}.pad.expected{border-color:var(--echo-mint);color:var(--echo-mint)}.pad.expected .pad-light{background:var(--echo-mint);border-color:var(--echo-mint)}
.echo-board.finished .pad{border-color:#617e65}.echo-board.finished .pad-light{background:#a8ceb1;border-color:#a8ceb1}
@keyframes echo-cue{0%,69%{background:var(--echo-mint);border-color:var(--echo-mint);color:var(--echo-bg)}85%,100%{background:var(--echo-pad);border-color:var(--echo-border);color:var(--echo-muted)}}
.pause-cover{position:absolute;inset:-1px;z-index:1;background:#15221ff5;border:1px solid var(--echo-border);border-radius:24px;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none}.pause-cover[hidden]{display:none}.pause-cover span{font-size:32px;letter-spacing:5px;color:var(--echo-mint)}.pause-cover p{color:var(--echo-muted);font-size:14px}
.progress{display:flex;justify-content:center;gap:7px;margin:21px 0 22px;height:5px}.progress i{height:5px;width:20px;border-radius:10px;background:#354a40;transition:background .12s}.progress i.filled{background:var(--echo-mint)}.progress i.failed{background:#db9b8c}
.actions{display:flex;align-items:center;justify-content:center;gap:9px;min-height:47px}.actions button{min-height:46px;border-radius:100px;padding:11px 23px;font-size:13px;font-weight:560;cursor:pointer;touch-action:manipulation}.actions button[hidden]{display:none}.actions .primary{color:var(--echo-bg);background:var(--echo-mint);border:1px solid var(--echo-mint);min-width:130px}.actions .primary[aria-disabled="true"]{color:var(--echo-muted);background:transparent;border-color:var(--echo-border);cursor:default}.secondary{color:var(--echo-muted);background:transparent;border:1px solid var(--echo-border)}.actions .primary:hover:not([aria-disabled="true"]){background:#d5f5dc}.secondary:hover{color:var(--echo-ink);border-color:#779b84}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #ecda96;outline-offset:4px}
.keyboard-note{margin:21px 0 0;text-align:center;color:var(--echo-muted);font-size:10px;letter-spacing:.25px}.error{margin:16px 0 0;color:#edb2a6;font-size:12px;text-align:center;line-height:1.5}
@media(max-width:480px){.echo-header{padding:19px 22px;min-height:75px}.echo-main{margin-top:10px;padding:0 24px 24px}.guidance{margin-bottom:28px;font-size:13px}.echo-game{max-width:340px}.status{height:105px}.status h2{font-size:28px}.pad{border-radius:21px}.pad .pad-key{left:13px;top:11px}}
@media(max-width:340px){.echo-main{padding-inline:16px}.echo-board{gap:8px}.round-bar{font-size:9px;letter-spacing:.8px}.actions button{padding-inline:16px}.status h2{font-size:26px}}
@media(max-height:760px) and (min-width:600px){.echo-header{min-height:66px;padding-block:16px}.echo-main{margin-top:0}.guidance{margin-bottom:20px}.echo-game{max-width:322px}.status{height:95px;padding-top:19px}.progress{margin-block:17px}.keyboard-note{margin-top:15px}}
@media(max-height:510px) and (min-width:600px){.echo-header{min-height:58px;padding-block:12px}.echo-main{width:min(100%,680px);margin:0 auto;padding-bottom:15px}.guidance{max-width:none;margin:0 0 12px}.echo-game{max-width:none;display:grid;grid-template-columns:260px 1fr;column-gap:35px;align-items:center}.board-shell{grid-column:1;grid-row:1 / 6}.round-bar{grid-column:2;align-self:end}.status{grid-column:2;height:auto;padding-top:10px}.status h2{font-size:25px}.progress{grid-column:2;margin:12px 0 0}.actions{grid-column:2;flex-wrap:wrap;gap:6px;margin-top:10px}.actions button{padding-inline:16px}.keyboard-note{grid-column:2;margin-top:12px;line-height:1.7}.error{grid-column:1 / 3}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.pad.cue{animation:none;background:var(--echo-mint);border-color:var(--echo-mint);color:var(--echo-bg)}}

#game-menu .game-menu-list a:hover,#game-menu .game-menu-list a[aria-current]{background:#2b4136}#game-menu .game-menu summary{color:var(--echo-muted)}
.actions .secondary:hover:not(:disabled){background:#24382f;color:var(--echo-ink);border-color:#779b84}.actions .primary[aria-disabled="true"]:hover{background:transparent}

@media(max-height:510px) and (min-width:600px){.game-help{grid-column:2;grid-row:5;margin-top:0}}