:root{--bg:#11161a;--surface:#171f24;--ink:#e8eeec;--ink-muted:#93a3a1;--line:#ffffff24;--accent:#74d0b8;--accent-strong:#a8f0dc}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:system-ui,sans-serif;line-height:1.6}a{color:var(--accent)}.brand-mark{z-index:20;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:999px;align-items:center;gap:.5rem;padding:.35rem .7rem;text-decoration:none;display:inline-flex;position:fixed;top:1rem;right:1.25rem}.brand-mark:hover{border-color:var(--accent)}.brand-mark:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.brand-logo{flex:none;width:1.5rem;height:1.5rem}.brand-logo polygon{fill:none;stroke:var(--accent);stroke-width:2px;stroke-linejoin:round}.brand-logo circle,.brand-note ellipse,.brand-note path{fill:var(--accent-strong)}.brand-note line{stroke:var(--accent-strong);stroke-width:1.6px}.brand-name{letter-spacing:.02em;white-space:nowrap;font-size:.95rem;font-weight:700}@media (width<=640px){.brand-name{display:none}.brand-mark{padding:.3rem;top:.6rem;right:.6rem}.brand-mark .brand-logo{width:1.15rem;height:1.15rem}}.page{align-items:flex-start;min-height:100vh;display:flex}.nav-rail{flex:none;align-self:flex-start;padding:2rem .5rem;position:sticky;top:0}.nav-toggle{background:var(--surface);width:2.25rem;height:2.25rem;color:var(--ink);border:1px solid var(--line);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;font-size:1.1rem;display:inline-flex}.nav-toggle:hover{border-color:var(--accent)}.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.level-nav{border-right:1px solid var(--line);background:#0f5e56;flex-direction:column;flex:none;align-self:stretch;width:12rem;height:100vh;padding:2rem 1rem;transition:width .2s,padding .2s;display:flex;position:sticky;top:0;overflow:hidden}.level-nav.is-collapsed{border-right-color:#0000;width:0;padding-left:0;padding-right:0}.level-nav.is-collapsed .level-nav-title,.level-nav.is-collapsed ol{opacity:0;pointer-events:none}.level-nav-title{letter-spacing:.02em;color:#fff;align-items:center;gap:.5rem;margin:0 0 1.25rem;font-weight:700;display:flex}.level-nav-logo{flex:none;width:1.4rem;height:1.4rem}.level-nav ol{flex-direction:column;flex:1;justify-content:space-evenly;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.level-link{color:var(--ink-muted);border-radius:8px;align-items:center;gap:.7rem;padding:.55rem .7rem;text-decoration:none;display:flex}.level-num{border:1px solid var(--line);font-variant-numeric:tabular-nums;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.6rem;height:1.6rem;font-size:.85rem;display:inline-flex}a.level-link:hover{background:var(--surface);color:var(--ink)}.level-link.is-current{color:#fff;background:var(--surface)}.level-link.is-current .level-num{border-color:var(--accent);color:var(--accent-strong);background:#74d0b81f}.level-link.is-disabled{cursor:default;opacity:.5}.level-link.is-disabled .level-name{font-style:italic}.level-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}main{flex:auto;width:100%;min-width:0;max-width:40rem;margin:0 auto;padding:2rem 1.25rem 4rem;container-type:inline-size}main.main-wide{max-width:56rem}@media (width<=40rem){.page{flex-direction:column;align-items:stretch}.level-nav{border-right:none;border-bottom:1px solid var(--line);align-self:stretch;width:auto;height:auto;padding:1.25rem 1rem;position:static}.level-nav ol{flex:initial;grid-template-columns:repeat(2,1fr);gap:.5rem .75rem;display:grid}.level-link{height:100%}.nav-rail{align-self:stretch;padding:.75rem 1rem;position:static}.level-nav.is-collapsed{display:none}}h1{margin-bottom:.4rem}.page-heading{align-items:center;gap:.6rem;display:flex}.heading-logo{width:1em;height:1em}.dek{color:var(--ink-muted);margin-top:0}kbd{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:.05em .4em;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em}.instrument{flex-direction:column;align-items:center;gap:1.5rem;margin-top:2rem;display:flex}#canvas{touch-action:none;width:min(360px,90vw);height:auto}#guide-circle{fill:none;stroke:var(--line);stroke-width:1px;stroke-dasharray:3 6}#shape-outline{fill:none;stroke:var(--accent);stroke-width:2px;stroke-linejoin:round;transition:points 50ms linear}#playhead{stroke:var(--ink-muted);stroke-width:1.5px;opacity:.25;transition:opacity .2s}#playhead.live{opacity:.9;stroke:var(--accent-strong)}.vertex{fill:var(--surface);stroke:var(--accent);stroke-width:2px;cursor:grab;touch-action:none}.vertex:hover{fill:var(--accent)}.vertex.dragging{cursor:grabbing;fill:var(--accent)}.vertex.firing{fill:var(--accent-strong);stroke:var(--accent-strong)}.hud{font-variant-numeric:tabular-nums;gap:1.75rem;display:flex}.hud-item{flex-direction:column;align-items:center;gap:.15rem;display:flex}.hud-label{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);font-size:.7rem}.hud-value{font-size:1.15rem;font-weight:600}.bpm-readout{text-align:center;font-variant-numeric:tabular-nums;min-width:5.75rem;display:inline-block}.transport{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}.transport button{background:var(--surface);color:var(--ink);border:1px solid var(--line);cursor:pointer;border-radius:8px;align-items:center;gap:.4em;padding:.5rem .9rem;font-size:.95rem;display:inline-flex}.transport button:hover{border-color:var(--accent)}.transport button:focus-visible,.tempo-control input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#play-toggle{border-color:var(--accent);font-weight:600}.control-group{align-items:center;gap:.4rem;display:flex}.tempo-control{color:var(--ink-muted);align-items:center;gap:.5rem;font-size:.85rem;display:flex}.instructions{text-align:center;max-width:32rem;color:var(--ink-muted);font-size:.9rem}.ensemble-transport{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin-top:1.5rem;display:flex}.ensemble-transport button{background:var(--surface);color:var(--ink);border:1px solid var(--accent);cursor:pointer;border-radius:8px;align-items:center;gap:.4em;padding:.5rem .9rem;font-size:.95rem;font-weight:600;display:inline-flex}.ensemble-transport button:focus-visible,.ensemble-transport input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ensemble-transport--start{justify-content:flex-start}.ensemble-grid{grid-template-columns:1fr;gap:1.25rem;max-width:48rem;margin-top:1.75rem;display:grid}@container (width>=40rem){.ensemble-grid{grid-template-columns:1fr 1fr}}.panel{--voice-accent:var(--accent);--voice-accent-strong:var(--accent-strong);border:1px solid var(--line);background:var(--surface);border-radius:12px;flex-direction:column;align-items:center;gap:.75rem;padding:1rem;display:flex}.panel-header{justify-content:space-between;align-items:center;gap:.75rem;width:100%;display:flex}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.voice-select-label select{background:var(--bg);color:var(--ink);border:1px solid var(--voice-accent);cursor:pointer;border-radius:6px;padding:.35rem .5rem;font-size:.9rem;font-weight:700}.voice-select-label select:focus-visible{outline:2px solid var(--voice-accent);outline-offset:2px}.voice-label{color:var(--voice-accent-strong);border:1px solid var(--voice-accent);border-radius:6px;padding:.35rem .5rem;font-size:.9rem;font-weight:700}.mute-toggle{color:var(--ink-muted);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:6px;padding:.3rem .6rem;font-size:.8rem}.mute-toggle:hover{border-color:var(--voice-accent)}.mute-toggle.is-muted{color:var(--ink);border-color:var(--voice-accent);background:#ffffff0f}.panel-canvas{touch-action:none;width:min(220px,80vw);height:auto}.panel-canvas .guide-circle{fill:none;stroke:var(--line);stroke-width:1px;stroke-dasharray:3 6}.panel-canvas .shape-outline{fill:none;stroke:var(--voice-accent);stroke-width:2px;stroke-linejoin:round}.panel-canvas .panel-playhead{stroke:var(--ink-muted);stroke-width:1.5px;opacity:.25;transition:opacity .2s}.panel-canvas .panel-playhead.live{opacity:.9;stroke:var(--voice-accent-strong)}.panel-canvas .vertex{fill:var(--surface);stroke:var(--voice-accent);stroke-width:2px;cursor:grab;touch-action:none}.panel-canvas .vertex:hover{fill:var(--voice-accent)}.panel-canvas .vertex.dragging{cursor:grabbing;fill:var(--voice-accent)}.panel-canvas .vertex.firing{fill:var(--voice-accent-strong);stroke:var(--voice-accent-strong)}.panel-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;display:flex}.panel-controls button{color:var(--ink);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:8px;padding:.4rem .7rem}.panel-controls button:hover{border-color:var(--voice-accent)}.panel-controls button:focus-visible{outline:2px solid var(--voice-accent);outline-offset:2px}.performance-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;width:100%;display:flex}.performance-row #canvas{flex:none;width:min(260px,45vw)}.staff-wrap{flex:380px;justify-content:center;min-width:0;max-width:480px;display:flex}.staff-svg{width:min(480px,100%);height:auto}.staff-line{stroke:var(--line);stroke-width:1.5px}.staff-clef{fill:var(--ink);font-family:Bravura Text,Noto Music,Segoe UI Symbol,serif;font-size:64px}.staff-sharp,.staff-note-sharp{fill:var(--ink-muted);font-size:20px}.staff-notehead{fill:var(--accent);stroke:var(--accent)}.staff-notehead.is-open{fill:var(--surface);stroke-width:2px}.staff-stem,.staff-ledger{stroke:var(--ink);stroke-width:1.5px}.staff-ledger{stroke:var(--line)}.staff-flag{fill:var(--ink)}.staff-cursor{stroke:var(--ink-muted);stroke-width:1.5px;opacity:.25;transition:opacity .2s}.staff-cursor.live{opacity:.9;stroke:var(--accent-strong)}.panel-staff{width:min(320px,100%);height:auto;margin-top:-1.25rem;margin-bottom:-.75rem}.panel-staff .staff-notehead{fill:var(--voice-accent);stroke:var(--voice-accent)}.panel-staff .staff-notehead.is-open{fill:var(--surface)}.panel-staff .staff-cursor.live{stroke:var(--voice-accent-strong)}.record-panel{border-top:1px solid var(--line);width:100%;max-width:48rem;margin-top:2rem;padding-top:1.5rem}.record-panel h2{margin:0 0 .75rem;font-size:1rem}.record-panel h2~h2{margin-top:1.5rem}.composition-form{flex-wrap:wrap;gap:.75rem;display:flex}.ensemble-transport+.composition-form{margin-top:1.5rem}.level-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;width:100%;display:flex}.level-heading h1{margin:0}.level-heading+.dek{margin-top:1.5rem}.composition-name-label input{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:6px;min-width:14rem;padding:.5rem .7rem;font-size:.9rem}.composition-name-label input:focus-visible,.composition-form button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.composition-form button{background:var(--surface);color:var(--ink);border:1px solid var(--accent);cursor:pointer;border-radius:8px;padding:.5rem .9rem;font-size:.9rem;font-weight:600}.composition-empty{color:var(--ink-muted);font-size:.9rem;font-style:italic}.composition-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.composition-item{border:1px solid var(--line);background:var(--surface);border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.6rem .9rem;display:flex}.composition-label{flex:1;font-size:.9rem}.composition-select{cursor:pointer;flex:none;width:1.1rem;height:1.1rem}.composition-repeat-label,.composition-gap-label{color:var(--ink-muted);white-space:nowrap;flex:none;align-items:center;gap:.35rem;font-size:.8rem;display:flex}.composition-repeat-label input,.composition-gap-label input{background:var(--bg);width:3.5rem;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:.3rem .4rem;font-size:.85rem}.composition-repeat-label input:focus-visible,.composition-gap-label input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.composition-item button{background:var(--bg);color:var(--ink);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:.35rem .7rem;font-size:.85rem}.composition-item button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.composition-item button:disabled{opacity:.35;cursor:default}.composition-reorder{flex-direction:column;flex:none;gap:.15rem;display:flex}.composition-reorder button{padding:.1rem .4rem;font-size:.7rem;line-height:1}.record-panel-actions{flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.75rem;display:flex}[data-role=song-play-button],[data-role=paste-composition-button]{background:var(--surface);color:var(--ink);border:1px solid var(--accent);cursor:pointer;border-radius:8px;padding:.5rem .9rem;font-size:.9rem;font-weight:600}[data-role=song-play-button]:hover,[data-role=paste-composition-button]:hover{border-color:var(--accent-strong);color:var(--accent-strong)}[data-role=song-play-button]:focus-visible,[data-role=paste-composition-button]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.paste-status{color:var(--ink-muted);min-height:1.2em;margin-top:.5rem;font-size:.85rem}.save-status{color:#ef8b8b;min-height:1.2em;margin-top:.5rem;font-size:.85rem}.song-status{color:var(--ink-muted);min-height:1.2em;font-size:.9rem}.song-score{border:1px solid var(--line);background:var(--surface);border-radius:8px;flex-direction:column;display:flex;overflow:hidden}.song-system{border-top:1px solid var(--line);padding:.75rem 1rem}.song-system:first-child{border-top:none}.song-system h3{margin:0 0 .5rem;font-size:.95rem}.song-system.is-playing{background:color-mix(in srgb, var(--accent) 10%, var(--surface))}.song-gap-divider{text-align:center;color:var(--ink-muted);border-top:1px dashed var(--line);margin:0;padding:.35rem 1rem;font-size:.8rem;font-style:italic}.song-system-row{align-items:center;gap:.75rem;display:flex}.song-system-row .voice-label{min-width:5rem;color:var(--ink-muted);flex:none;font-size:.85rem}