:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#fafaf7;--fg:#1d1d1b;--muted:#6b6b66;--line:#deded8;--panel:#fff;--accent:#b5562b;--key-white:#fdfdfb;--key-black:#1f1f1f;--key-down:#e08a52;font-family:system-ui,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#161614;--fg:#ecece6;--muted:#9b9b94;--line:#34342f;--panel:#1f1f1c;--accent:#f0a070;--key-white:#e9e9e3;--key-black:#0c0c0b;--key-down:#e08a52}}body{background:var(--bg);color:var(--fg);margin:0}a{color:var(--accent)}header,main,footer{max-width:56rem;margin:0 auto;padding:0 1rem}header{justify-content:space-between;align-items:flex-start;gap:1rem;padding-top:2rem;display:flex}h1{letter-spacing:-.02em;margin:0;font-size:2.25rem}h2{margin:2rem 0 .75rem;font-size:1.1rem}.tagline{color:var(--muted);margin:.25rem 0 0}.repo{border:1px solid var(--line);color:var(--fg);border-radius:999px;flex-shrink:0;align-items:center;gap:.4rem;padding:.4rem .75rem;font-size:.9rem;text-decoration:none;display:inline-flex}.repo:hover{border-color:var(--muted)}.stage{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-top:1.5rem;padding:1rem;position:relative}#start{z-index:2;font:inherit;background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:0;border-radius:999px;padding:.6rem 1.6rem;font-size:1.15rem;font-weight:600;position:absolute;top:1rem;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0003}#start:disabled{cursor:wait;opacity:.8}.piano{-webkit-user-select:none;user-select:none;touch-action:none;height:clamp(5rem,14vw,9rem);position:relative}.piano .key{box-sizing:border-box;border-radius:0 0 3px 3px;position:absolute;top:0}.piano .white{background:var(--key-white);border:1px solid #999;height:100%}.piano .black{z-index:1;background:var(--key-black);height:62%}.piano .key.down{background:var(--key-down)}.status{grid-template-columns:max-content 1fr;gap:.15rem 1rem;margin:1rem 0 0;font-size:.9rem;display:grid}.status dt{color:var(--muted)}.status dd{margin:0}#controls{max-width:32rem}.coopiano-controls{grid-template-columns:max-content 1fr 5.5em;align-items:center;gap:.35rem .75rem;display:grid}.coopiano-controls label{display:contents}.coopiano-controls input{width:100%;min-width:6rem;accent-color:var(--accent);margin:0}.coopiano-controls output{font-variant-numeric:tabular-nums;text-align:right;color:var(--muted)}.hint{color:var(--muted);font-size:.85rem}ul{padding-left:1.25rem}li+li{margin-top:.4rem}kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 .3em;font:.85em ui-monospace,monospace}footer{border-top:1px solid var(--line);color:var(--muted);margin-top:3rem;padding-top:1rem;padding-bottom:2rem;font-size:.85rem}@media (max-width:30rem){header{flex-direction:column}.coopiano-controls{grid-template-columns:1fr 5em}.coopiano-controls span{grid-column:1/-1;margin-top:.25rem}}