/* Echo: nine light pads on a dark box. */
:root{--bg:#1f2029;--fg:#f2f1ec;--box:#14151b;--btn:#33343f;--btn-fg:#f2f1ec;--go:#f2f1ec;--go-fg:#1f2029}
.pads{--size:min(100cqw,100cqh,460px);width:var(--size);height:var(--size);display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--size)*.035);padding:calc(var(--size)*.045);border-radius:calc(var(--size)*.08);background:var(--box)}
.pad{position:relative;border-radius:16%}
.pad::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--c);opacity:.3;transition:opacity .1s}
.pad.lit::before{opacity:1;box-shadow:0 0 calc(var(--size)*.07) var(--c)}
.pads[data-state=show] .pad,.pads[data-state=idle] .pad,.pads[data-state=over] .pad{cursor:default}
.pad.miss{outline:4px solid var(--fg);outline-offset:-4px}
.pad.was::before{animation:flash .5s 4 alternate}
@keyframes flash{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.pad::before{transition:none}.pad.was::before{animation:none;opacity:1}}