:root{--ink-900:#0a0f14;--ink-800:#101820;--ink-700:#16212b;--ink-600:#1e2b37;--ink-500:#2b3a48;--text:#e7eef4;--text-dim:#93a4b3;--text-faint:#64748b;--teal-400:#2dd4bf;--teal-500:#14b8a6;--teal-600:#0d9488;--amber-400:#fbbf24;--radius:10px}*{box-sizing:border-box}html,body{background:var(--ink-900);min-height:100%;color:var(--text);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-text-size-adjust:100%;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}body{-webkit-user-select:none;user-select:none;overscroll-behavior:none}button,select,input{font:inherit;color:inherit}kbd{border:1px solid var(--ink-500);background:var(--ink-700);color:var(--text);border-bottom-width:2px;border-radius:5px;padding:.05rem .35rem;font-family:inherit;font-size:.85em;font-weight:600}.app{flex-direction:column;justify-content:center;gap:1rem;max-width:1180px;min-height:100dvh;margin:0 auto;padding:1.25rem 1.25rem 2rem;display:flex}.start{z-index:20;text-align:center;background:radial-gradient(circle at 50% 30%, #152630, var(--ink-900) 70%);flex-direction:column;justify-content:center;align-items:center;gap:1.1rem;padding:2rem;display:flex;position:fixed;inset:0}.start h1{letter-spacing:-.04em;color:var(--teal-400);margin:0;font-size:clamp(2.75rem,11vw,5rem);font-weight:700}.start p{max-width:34rem;color:var(--text-dim);margin:0;line-height:1.55}.start kbd{color:var(--text)}.start button{background:var(--teal-500);color:#04201c;cursor:pointer;border:0;border-radius:999px;margin-top:.4rem;padding:.85rem 2.25rem;font-size:1.05rem;font-weight:650}.start button:hover{background:var(--teal-400)}.start button:focus-visible{outline:2px solid var(--teal-400);outline-offset:3px}.start .fine{color:var(--text-faint);font-size:.8rem}.bar{flex-wrap:wrap;align-items:center;gap:.6rem .75rem;display:flex}.bar .spacer{flex:auto}.brand{letter-spacing:-.02em;color:var(--teal-400);margin:0;font-size:1.05rem;font-weight:650}.field{color:var(--text-faint);align-items:center;gap:.4rem;font-size:.8rem;display:flex}select{border:1px solid var(--ink-500);border-radius:var(--radius);background:var(--ink-700);padding:.4rem .6rem;font-size:.9rem}.chip{border:1px solid var(--ink-500);background:var(--ink-700);color:var(--text-dim);cursor:pointer;border-radius:999px;padding:.4rem .8rem;font-size:.82rem}.chip:hover{border-color:var(--teal-600);color:var(--text)}.chip[aria-pressed=true]{border-color:var(--teal-500);color:var(--teal-400);background:#14b8a629}.readout{align-items:baseline;gap:.9rem;min-height:3.4rem;display:flex}.readout .name{letter-spacing:-.03em;font-size:clamp(2rem,5vw,2.9rem);font-weight:700;line-height:1}.readout .numeral{color:var(--teal-400);font-size:1.1rem}.readout .notes{color:var(--text-faint);font-variant-numeric:tabular-nums;margin-left:auto;font-size:.85rem}.readout .idle{color:var(--text-faint);letter-spacing:0;font-size:1.4rem;font-weight:500}.piano{border-radius:var(--radius);background:var(--ink-800);height:118px;box-shadow:inset 0 0 0 1px var(--ink-600);position:relative;overflow:hidden}.piano .whites{height:100%;display:flex}.piano .white{border-right:1px solid var(--ink-900);background:linear-gradient(#e9eef3,#c9d3dc);border-radius:0 0 4px 4px;flex:1 1 0;position:relative}.piano .white:last-child{border-right:0}.piano .white .octave{text-align:center;color:#7b8794;width:100%;font-size:9px;position:absolute;bottom:4px;left:0}.piano .black{background:linear-gradient(#2a3540,#121a22);border-radius:0 0 3px 3px;height:62%;position:absolute;top:0;box-shadow:0 1px 2px #00000080}.piano .white.on-left,.piano .black.on-left{background:linear-gradient(var(--amber-400), #d99a06)}.piano .white.on-right,.piano .black.on-right{background:linear-gradient(var(--teal-400), var(--teal-600))}.map{grid-template-columns:1fr 1fr;gap:.75rem 1.75rem;display:grid}.map .side{flex-direction:column;gap:.35rem;padding-bottom:.2rem;display:flex;overflow-x:auto}.map h2{text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);align-items:baseline;gap:.5rem;margin:0 0 .15rem;font-size:.78rem;font-weight:600;display:flex}.map h2 small{text-transform:none;letter-spacing:0;color:var(--ink-500);font-weight:400}.row{gap:.3rem;display:flex}.row.indent-1{padding-left:.9rem}.row.indent-2{padding-left:1.7rem}.row.indent-3{padding-left:2.6rem}.cap{border:1px solid var(--ink-600);background:var(--ink-800);text-align:center;border-radius:7px;flex-direction:column;flex:0 0 3.9rem;justify-content:center;align-items:center;gap:1px;min-width:0;min-height:46px;padding:.25rem .1rem;display:flex}.cap .letter{color:var(--text-faint);font-size:.65rem;font-weight:600}.cap .label{white-space:nowrap;text-overflow:ellipsis;width:100%;font-size:.88rem;font-weight:600;line-height:1.1;overflow:hidden}.cap .label.long{letter-spacing:-.01em;font-size:.7rem}.cap .sub{color:var(--teal-600);font-size:.6rem}.cap.empty{border-style:dashed;border-color:var(--ink-700);background:0 0}.cap.empty .letter{color:var(--ink-500)}.cap.chord{border-color:#4a3a12}.cap.melody{border-color:#13403c}.cap.down.chord{border-color:var(--amber-400);background:#fbbf242e}.cap.down.melody{border-color:var(--teal-400);background:#2dd4bf2e}.cap.latched{background:#fbbf2417;border-color:#8a6a16}.panel{border:1px solid var(--ink-600);border-radius:var(--radius);background:var(--ink-800);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem 1.5rem;padding:1rem 1.1rem;display:grid}.panel label{color:var(--text-faint);flex-direction:column;gap:.35rem;font-size:.78rem;display:flex}.panel .row-of-chips{gap:.35rem;display:flex}.panel input[type=range]{width:100%;accent-color:var(--teal-500)}.status{color:var(--text-faint);flex-wrap:wrap;gap:.35rem 1.1rem;font-size:.78rem;display:flex}.status b{color:var(--text-dim);font-weight:600}.help{z-index:30;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#05090cd1;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.help .sheet{border:1px solid var(--ink-600);background:var(--ink-800);border-radius:14px;width:min(44rem,100%);max-height:100%;padding:1.5rem 1.6rem 1.25rem;overflow:auto}.help h2{letter-spacing:-.02em;margin:0 0 .75rem;font-size:1.3rem}.help ul{color:var(--text-dim);margin:0 0 1rem;padding-left:1.1rem;line-height:1.6}.help li+li{margin-top:.3rem}.help strong{color:var(--text)}.help .done{background:var(--teal-500);color:#04201c;cursor:pointer;border:0;border-radius:999px;padding:.6rem 1.5rem;font-weight:650}.touch-note{border-radius:var(--radius);color:#f3d79a;background:#fbbf241a;border:1px solid #4a3a12;padding:.7rem .9rem;font-size:.85rem;line-height:1.5}@media (max-width:900px){.map{grid-template-columns:1fr}.piano{height:84px}.cap{flex-basis:3.2rem}}