:root{color-scheme:dark;--bg:#080b16;--panel:#11172a;--line:#27304a;--ink:#f5f7ff;--muted:#9ca8c8;--accent:#6cf0d1;--accent2:#917cff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0,#17234d 0,transparent 34%),var(--bg);color:var(--ink)}
header{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;padding:1.5rem clamp(1rem,3vw,3rem) 1.2rem;border-bottom:1px solid #ffffff14}h1{font-size:clamp(1.8rem,4vw,3.4rem);line-height:.95;margin:.25rem 0 .6rem;letter-spacing:-.05em}.eyebrow{margin:0;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.15em;font-size:.72rem}.lede{margin:0;color:var(--muted);max-width:42rem}.status{display:flex;align-items:center;gap:.55rem;color:var(--muted);white-space:nowrap;font-size:.9rem}.status span:first-child{width:.65rem;height:.65rem;border-radius:50%;background:var(--accent);box-shadow:0 0 1rem var(--accent)}
main{display:grid;grid-template-columns:minmax(0,1fr) minmax(19rem,25rem);gap:1rem;padding:1rem;height:calc(100vh - 114px)}.stage{position:relative;min-height:28rem;overflow:hidden;border:1px solid #ffffff1c;border-radius:1.25rem;background:#050812;box-shadow:0 1.5rem 5rem #0008}.stage canvas{display:block;width:100%;height:100%;touch-action:none}.stage-help{position:absolute;left:1rem;bottom:1rem;display:flex;gap:.45rem;flex-wrap:wrap}.stage-help span{padding:.38rem .65rem;border:1px solid #ffffff1a;border-radius:999px;background:#080b16cc;color:var(--muted);font-size:.72rem;backdrop-filter:blur(10px)}
.controls{overflow:auto;display:flex;flex-direction:column;gap:.8rem;padding-right:.15rem}.card{padding:1rem;border:1px solid #ffffff16;border-radius:1rem;background:linear-gradient(145deg,#151c31dd,#0d1222dd);box-shadow:0 .8rem 2.5rem #0004}.card h2{font-size:.9rem;text-transform:uppercase;letter-spacing:.09em;margin:0 0 .85rem;color:#cbd4f1}.card-head,.row{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.quiet{border:0;background:none;color:var(--accent);padding:.25rem;cursor:pointer}button,select{font:inherit;color:var(--ink);border:1px solid #ffffff20;border-radius:.65rem;background:#202945;padding:.6rem .7rem;cursor:pointer}button:hover,button:focus-visible,select:focus-visible{border-color:var(--accent);outline:none}.keyboard{position:relative;height:6.2rem;display:flex;margin-top:.2rem}.key{position:relative;flex:1;border:1px solid #33405f;border-radius:0 0 .45rem .45rem;background:linear-gradient(#f7f8ff,#cbd2e8);color:#111827;min-width:0;padding:0}.key.black{z-index:2;position:absolute;top:0;width:7%;height:60%;margin-left:-3.5%;background:linear-gradient(#242a3b,#05070d);color:white;border-color:#000}.key.active{background:linear-gradient(var(--accent),#2cafb5);box-shadow:0 0 1rem #6cf0d188}.key.black.active{background:linear-gradient(var(--accent2),#4639a9)}.key span{position:absolute;bottom:.35rem;left:50%;transform:translateX(-50%);font-size:.65rem;font-weight:800}.hint{display:flex;gap:.18rem;margin:.7rem 0 0;justify-content:center;flex-wrap:wrap}.hint kbd{font:700 .62rem ui-monospace,monospace;color:var(--muted);border:1px solid #ffffff1f;border-radius:.25rem;padding:.16rem .28rem}.switch{display:flex;align-items:center;gap:.5rem}.switch input{position:absolute;opacity:0}.switch span{width:2.25rem;height:1.25rem;border-radius:999px;background:#303955;position:relative}.switch span:after{content:"";position:absolute;width:.9rem;height:.9rem;left:.18rem;top:.18rem;border-radius:50%;background:white;transition:.2s}.switch input:checked+span{background:var(--accent2)}.switch input:checked+span:after{transform:translateX(1rem)}label{color:var(--muted);font-size:.8rem}.row select,.settings select{margin-left:.4rem}.chords{display:grid;grid-template-columns:1fr 1fr;margin-top:.8rem}.chords button{font-size:.78rem}.settings{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.settings h2{grid-column:1/-1;margin-bottom:.1rem}.settings label:last-child{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem}.settings input{accent-color:var(--accent2)}output{font-size:.72rem;color:var(--ink)}details summary{cursor:pointer;font-weight:700;color:#cbd4f1}details p{color:var(--muted);font-size:.8rem;line-height:1.55;margin:.8rem 0 0}code{color:var(--accent)}
@media(max-width:900px){header{align-items:flex-start}.status{display:none}main{grid-template-columns:1fr;height:auto}.stage{height:62vh;min-height:24rem}.controls{overflow:visible}.settings{grid-template-columns:1fr 1fr}}@media(max-width:520px){header{padding:1rem}.lede{font-size:.85rem}main{padding:.55rem}.stage{height:55vh;min-height:22rem}.settings{grid-template-columns:1fr}.settings h2,.settings label:last-child{grid-column:1}.row{align-items:flex-start}.chords{grid-template-columns:1fr 1fr}}