:root{--bg:#070d24;--bg2:#0e1a45;--panel:#13235a;--ink:#f4f7ff;--mute:#a9b7e6;--line:#2c4086;--acc:#ffc83d;--acc2:#4cc9f0;--ok:#2fd27c;--bad:#ff5c6c;--navy:#0a1a4a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{background:radial-gradient(1200px 700px at 20% -10%,#1a2c76 0,transparent 60%),radial-gradient(900px 600px at 110% 110%,#3a1670 0,transparent 55%),var(--bg);background-attachment:fixed}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.logo{display:block;width:min(100%,26rem);height:auto;margin:0 auto .2em}
.screen .logo{width:min(70vw,34rem)}
.chip{display:inline-block;border-radius:999px;padding:.25em .8em;font-weight:800;font-size:.8em;letter-spacing:.04em;text-transform:uppercase;background:var(--panel);border:2px solid var(--line)}
.chip.d1{border-color:#2fd27c;color:#9bf0c2}.chip.d2{border-color:#ffc83d;color:#ffe29a}.chip.d3{border-color:#ff5c6c;color:#ffb0b8}
.chip.kind{border-color:var(--acc2);color:#b8ecff}
.btn{border:0;border-radius:14px;padding:.8em 1.3em;font-weight:800;background:var(--acc);color:#1a1300;box-shadow:0 4px 0 #b88900}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #b88900}
.btn.alt{background:var(--panel);color:var(--ink);border:2px solid var(--line);box-shadow:none}
.btn.go{background:var(--ok);color:#022813;box-shadow:0 5px 0 #138a4c;font-size:1.4em;letter-spacing:.06em}
.btn[disabled]{opacity:.45;pointer-events:none}
/* pattern grids */
.pgrid{display:flex;flex-direction:column;gap:.35em;width:100%}
.prow{display:flex;gap:.25em;align-items:center}
.plabel{flex:0 0 6.5em;font-size:.8em;font-weight:700;color:var(--mute);text-align:right;padding-right:.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcell{flex:1;aspect-ratio:1.2;min-width:0;border-radius:.3em;background:#1b2d6e;border:2px solid #2a3f8c}
.pcell.beat{border-color:#5a73d1}
.pcell.on{background:var(--acc);border-color:#ffe08a;box-shadow:0 0 .8em rgba(255,200,61,.55)}
.pcell.now{outline:3px solid #fff;outline-offset:1px}
.pgrid.g12 .pcell{aspect-ratio:1.5}
.bar{height:.9em;border-radius:99px;background:#1b2d6e;overflow:hidden}
.bar>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));transform-origin:left;transition:transform .2s linear}
.bar.low>i{background:linear-gradient(90deg,#ff8a5c,var(--bad))}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes eq{0%,100%{height:15%}50%{height:100%}}
.eq{display:flex;gap:.4em;align-items:flex-end;height:5em;justify-content:center}
.eq i{width:.8em;background:var(--acc2);border-radius:.2em;animation:eq .6s ease-in-out infinite}
.eq i:nth-child(2n){animation-duration:.45s;background:var(--acc)}.eq i:nth-child(3n){animation-duration:.8s}
.eq.off i{animation:none;height:15%;opacity:.4}

.pnum{flex:1;min-width:0;text-align:center;font-size:.75em;font-weight:800;color:var(--mute)}.pnum.b{color:var(--acc)}
.prow[data-r].focus,.prow.focus{outline:3px solid var(--acc2);border-radius:.5em}

/* piano keyboard */
.kb{position:relative;height:9em;user-select:none;-webkit-user-select:none;max-width:100%}
.kb .wk{position:absolute;top:0;bottom:0;background:#f4f7ff;border:1px solid #5b6aa6;border-radius:0 0 .45em .45em;padding:0;display:flex;align-items:flex-end;justify-content:center;color:#44508a;font-size:.65em;font-weight:800;touch-action:manipulation}
.kb .bk{position:absolute;top:0;height:60%;background:#111a44;border:1px solid #000;border-radius:0 0 .35em .35em;padding:0;z-index:2;touch-action:manipulation}
.kb .wk.lit{background:var(--acc)}.kb .bk.lit{background:#e29a00}
.kb .wk.sel{background:var(--acc2)}.kb .bk.sel{background:#1b8fb8}
.kb .root{outline:3px solid var(--bad);outline-offset:-3px}.kb .wk.ghost,.kb .bk.ghost{box-shadow:inset 0 0 0 3px var(--acc);}
.kl{padding-bottom:.25em}