:root{--bg:#15171d;--surface:#1f222b;--surface-2:#272b36;--border:#2e323d;--text:#eceef3;--muted:#9aa1b2;--accent:#6cc4a1;--primary:#4f8cff;--danger:#e5484d;--correct:#30a46c;--wrong:#e5484d;--hint:#f5a524;--tonic:#5ab4ff;--key-white:#f4f4f1;--key-white-down:#dcdcd6;--key-black:#1b1b1f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,Segoe UI,Leelawadee UI,Noto Sans Thai,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);overscroll-behavior:none;min-height:100%;margin:0}#app{max-width:520px;min-height:100dvh;margin:0 auto}button{font:inherit;color:inherit}.btn{border:1px solid var(--border);background:var(--surface-2);cursor:pointer;touch-action:manipulation;border-radius:12px;min-height:48px;padding:0 16px;font-size:1rem}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn.ghost{background:0 0}.btn.small{min-height:44px;padding:0 12px;font-size:.9rem}.btn.big{width:100%;min-height:56px;font-size:1.15rem}.error{color:var(--danger);margin:0}.muted{color:var(--muted)}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--border);background:var(--surface);cursor:pointer;touch-action:manipulation;border-radius:999px;min-width:44px;min-height:44px;padding:0 12px;font-size:.9rem}.chip.on{background:var(--primary);border-color:var(--primary);color:#fff}.chip:disabled{opacity:.4}.pad{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.pad-btn{border:1px solid var(--border);background:var(--surface-2);cursor:pointer;touch-action:manipulation;border-radius:10px;min-height:48px;padding:0;font-size:1.05rem;font-weight:600}.pad-btn.on{background:var(--primary);border-color:var(--primary);color:#fff}.pad-btn:disabled{opacity:.4}.actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.home{padding:max(24px, env(safe-area-inset-top)) 16px 24px;flex-direction:column;gap:16px;display:flex}.home-head{flex-direction:column;gap:8px;display:flex}.home h1{margin:0;font-size:1.8rem}.subtitle{color:var(--muted);margin:0}.track h2{color:var(--accent);margin:0 0 8px;font-size:1.05rem}.node-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.node-btn{border:1px solid var(--border);background:var(--surface);text-align:left;cursor:pointer;border-radius:12px;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 12px;display:flex}.node-btn.locked{opacity:.55;cursor:default}.node-id{font-variant-numeric:tabular-nums;min-width:38px;font-weight:700}.node-title{flex-direction:column;gap:2px;line-height:1.35;display:flex}.node-title .lock{color:var(--muted);font-size:.8rem}.note{margin:0;font-size:.85rem}.credit{color:var(--muted);font-size:.8rem;line-height:1.5}.credit summary{cursor:pointer;align-items:center;min-height:44px;display:flex}.credit ul{margin:0;padding-left:18px}.train{min-height:100dvh;padding:env(safe-area-inset-top) 0 max(12px, env(safe-area-inset-bottom));-webkit-user-select:none;user-select:none;flex-direction:column;gap:10px;display:flex}.train-head{border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:4px 12px 4px 4px;display:flex}.back{min-width:44px;font-size:1.3rem}.train-title{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:.95rem;overflow:hidden}.train-title span{color:var(--muted)}.key-chip{background:var(--surface-2);color:var(--tonic);border-radius:999px;flex-shrink:0;padding:4px 10px;font-size:.85rem;font-weight:600}.start-card{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;gap:12px;margin:16px;padding:16px;display:flex}.start-card p{margin:0;line-height:1.5}.player{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;gap:8px;margin:0 12px;padding:10px;display:flex}.player-row{align-items:center;gap:12px;display:flex}.play-btn{flex-shrink:0;min-width:88px;padding:0 10px}.tempo-chips{flex:1;justify-content:space-between;gap:4px;display:flex}.tempo-chips .chip{flex:1;padding:0 4px}.player-info{justify-content:space-between;gap:8px;font-size:.85rem;display:flex}.mix-grid{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.mix-part{align-items:center;gap:4px;display:flex}.mix-part.off .mix-name{color:var(--muted);text-decoration:line-through}.mix-name{flex:1;font-size:.9rem}.answer{flex-direction:column;gap:10px;padding:0 12px;display:flex}.answer-tools{align-items:center;gap:6px;display:flex}.sound-mode{margin-left:auto}.chip.silent{color:var(--hint);border-color:var(--hint)}.tool-hint{font-size:.85rem}.sound-badge{font-size:.9rem}.sound-badge.silent{color:var(--hint)}.slots{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.slot{border:1px solid var(--border);background:var(--surface);border-radius:10px;flex-direction:column;gap:4px;padding:4px;display:flex;position:relative}.slot.on{border-color:var(--primary)}.slots.many{grid-template-columns:repeat(8,1fr);gap:3px}.slots.many .slot{gap:2px;padding:2px 0}.slots.many .slot-part{letter-spacing:-.02em;font-size:.78rem}.slots.many .slot-part small,.slots.many .slot-no{display:none}.slot-no{color:var(--muted);font-size:.7rem;position:absolute;top:2px;right:6px}.slot-part{background:var(--surface-2);white-space:nowrap;cursor:pointer;border:none;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;min-height:44px;padding:0 2px;font-weight:600;display:flex;overflow:hidden}.slot-part small{color:var(--muted);font-size:.65rem;font-weight:400}.slot-part.active{background:var(--primary);color:#fff}.slot-part.active small{color:#dfe8ff}.roman-picker{flex-direction:column;gap:8px;display:flex}.reference p{margin:0 0 8px}.submit{width:100%}.review{flex-direction:column;gap:12px;padding:0 12px;display:flex}.review-head{align-items:center;gap:16px;display:flex}.score{font-variant-numeric:tabular-nums;font-size:2.2rem}.review-facts{color:var(--muted);flex-direction:column;gap:2px;font-size:.9rem;display:flex}.review-table{border-collapse:collapse;width:100%;font-size:.95rem}.review-table th{color:var(--muted);text-align:left;padding:4px;font-size:.8rem;font-weight:400}.review-table td{border-top:1px solid var(--border);padding:6px 4px}.review-table td.ok{color:var(--correct)}.review-table td.bad{color:var(--wrong)}.fretboard-wrap{flex-direction:column;gap:6px;margin:0 -12px;display:flex}.fret-map{margin:0 12px}.fret-map-cell{border-left:1px solid var(--border);color:var(--muted);justify-content:center;align-items:center;font-size:.6rem;display:flex;position:absolute;top:0;bottom:0}.fret-viewport{touch-action:none;overflow:hidden}.fretboard{touch-action:none}.fretboard.locked{filter:brightness(.6)}.fret-numbers{height:18px;display:flex}.fret-num{text-align:center;color:var(--muted);flex-shrink:0;font-size:.7rem}.fret-num.marked{color:var(--text);font-weight:700}.string-row{background:linear-gradient(#0000 calc(50% - 1px),#b9b1a0 calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px));display:flex}.fret-cell{touch-action:none;background:#78543040;border-right:2px solid #6b6457;flex-shrink:0;justify-content:center;align-items:center;display:flex}.fret-cell.open{background:0 0;border-right:5px solid #d8d2c2}.fret-cell:active{background:#4f8cff59}.fret-cell .dot.tonic{width:14px;height:14px}.scroller{flex-direction:column;gap:8px;padding-bottom:8px;display:flex}.minimap{background:var(--surface);touch-action:none;cursor:grab;border-radius:8px;height:44px;margin:0 16px;position:relative;overflow:hidden}.mini{position:absolute;top:6px}.mini.white{background:#d9d9d4;border-left:1px solid #9a9a95;bottom:6px}.mini.black{z-index:1;background:#333;height:60%}.mini-window{border:2px solid var(--primary);z-index:2;pointer-events:none;background:#4f8cff2e;border-radius:8px;position:absolute;top:0;bottom:0}.kb-viewport{touch-action:none;overflow:hidden;container-type:inline-size}.kb{--wk:max(44px, calc(100cqw / 8));touch-action:none;height:clamp(180px,31dvh,260px);position:relative}.key{touch-action:none;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;padding-bottom:12px;display:flex;position:absolute;top:0}.key.white{background:var(--key-white);border:1px solid #b7b7b2;border-radius:0 0 8px 8px;bottom:0}.key.black{background:var(--key-black);z-index:1;border-radius:0 0 6px 6px;height:60%;padding-bottom:8px}.key.white:active{background:var(--key-white-down)}.key.correct{background:var(--correct)!important}.key.wrong{background:var(--wrong)!important}.kb.locked .key{filter:brightness(.6)}.dot{pointer-events:none;border-radius:50%;display:block}.dot.hint{background:var(--hint);width:18px;height:18px;box-shadow:0 0 0 3px #f5a52459}.dot.tonic{background:var(--tonic);width:10px;height:10px}.modal{z-index:10;background:#0009;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:16px;width:100%;max-width:360px;padding:20px;display:flex}.modal-card p{margin:0;line-height:1.5}.modal-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.debug{color:#9fef9f;pointer-events:none;z-index:20;background:#000c;border-radius:8px;padding:8px;font:11px/1.4 ui-monospace,monospace;position:fixed;top:60px;left:8px;right:8px}.dev{flex-direction:column;gap:12px;padding:16px;display:flex}.dev-title{margin:0;font-size:1.15rem}.dev-controls{flex-direction:column;gap:8px;display:flex}.dev-select{border:1px solid var(--border);background:var(--surface-2);width:100%;min-height:48px;color:var(--text);font:inherit;border-radius:12px;padding:0 12px}.dev-seed{justify-content:space-between;align-items:center;gap:8px;display:flex}.dev-seed .btn{min-width:64px;font-size:1.25rem}.dev-card{border:1px solid var(--border);background:var(--surface);overflow-wrap:anywhere;border-radius:12px;padding:12px}.dev-card h2{margin:0 0 8px;font-size:1rem}.dev-facts{color:var(--muted);margin:0;padding-left:18px;font-size:.875rem;line-height:1.5}.dev-chords{border-collapse:collapse;width:100%;font-size:.875rem}.dev-chords td{border-bottom:1px solid var(--border);vertical-align:top;padding:4px 6px 4px 0}.dev-line{margin:0 0 6px;font-size:.875rem;line-height:1.5}.dev-abc{background:var(--surface-2);white-space:pre-wrap;word-break:break-all;border-radius:8px;margin:8px 0 0;padding:8px;font-size:.8rem}.notes-answer{flex-direction:column;gap:8px;display:flex}.bar-row{align-items:center;gap:8px;min-height:44px;display:flex}.listen-to{color:var(--muted);flex:1;font-size:.9rem}.listen-to strong{color:var(--text)}.bar-chips{gap:4px;display:flex}.staff-row{position:relative}.staff-bar{font-size:.7rem;position:absolute;top:0;right:0}.staff{color:var(--text);background:var(--surface);border-radius:10px;min-height:60px;padding:2px 6px}.staff.compact{min-height:0}.rgrid{touch-action:none;flex-direction:column;gap:4px;margin:0 -6px;display:flex}.rgrid.locked{filter:brightness(.6)}.rgrid-row{gap:2px;display:grid}.rcell{border:1px solid var(--border);background:var(--surface);touch-action:none;cursor:pointer;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;min-width:44px;min-height:52px;display:flex}.rcell.beat{border-left:3px solid #4a5060}.rcell small{color:var(--muted);font-size:.7rem}.rcell span{font-size:.85rem;font-weight:700;line-height:1.1}.rcell.on{background:var(--primary);border-color:var(--primary);color:#fff}.rcell.on small{color:#dfe8ff}.rcell.sel{box-shadow:inset 0 0 0 2px var(--hint)}.note-strip{scrollbar-width:none;gap:4px;min-height:48px;display:flex;overflow-x:auto}.note-strip.empty{align-items:center;margin:0;font-size:.9rem}.note-chip{border:1px solid var(--border);background:var(--surface-2);cursor:pointer;border-radius:8px;flex-direction:column;flex:none;justify-content:center;align-items:center;min-width:48px;min-height:48px;padding:0 6px;font-weight:700;display:flex}.note-chip small{color:var(--muted);font-size:.65rem;font-weight:400}.note-chip.empty{color:var(--hint)}.note-chip.on{background:var(--primary);border-color:var(--primary);color:#fff}.note-chip.on small{color:#dfe8ff}.pitch-keys{margin:0 -12px}.pitch-keys .kb{--wk:max(30px, calc(100cqw / 11));height:170px}.pitch-keys .scroller{padding-bottom:0}.reference{flex-direction:column;gap:8px;display:flex}.reference .ref-text{margin:0;font-size:.9rem;line-height:1.4}.lock-pad .pad-btn{font-size:.95rem}.notes-review{flex-direction:column;gap:6px;display:flex}.line-shares{flex-wrap:wrap;gap:6px 14px;font-size:.9rem;display:flex}.onset-facts{margin:0;font-size:.85rem}.pitch-marks{flex-wrap:wrap;gap:4px;display:flex}.pitch-marks span{background:var(--surface);border-radius:6px;padding:2px 6px;font-size:.85rem;font-weight:600}.pitch-marks .ok{color:var(--correct)}.pitch-marks .bad{color:var(--wrong);text-decoration:line-through}.staff-title{color:var(--muted);margin:4px 0 0;font-size:.8rem;font-weight:400}.cgrid{touch-action:none;flex-direction:column;gap:4px;display:flex}.cgrid.locked{filter:brightness(.6)}.cgrid-row{gap:2px;display:grid}.ccell{border:1px solid var(--border);background:var(--surface);touch-action:none;cursor:pointer;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:44px;display:flex}.ccell.bar{border-left:3px solid #4a5060}.ccell small{color:var(--muted);white-space:nowrap;font-size:.62rem}.ccell span{font-size:.85rem;font-weight:700}.ccell.on{background:var(--primary);border-color:var(--primary);color:#fff}.ccell.on small{color:#dfe8ff}.ccell.first{cursor:default;opacity:.75}.slot.newkey{border-color:var(--hint);border-style:dashed}.slot.newkey.on{border-style:solid}.key-picker{flex-direction:column;gap:8px;display:flex}.quality-picker .chip{min-width:64px}.chip.wide{flex:1}.color-fields{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.color-fields.two{grid-template-columns:repeat(2,1fr)}.tone-pad .pad-btn{white-space:nowrap;font-size:.95rem}.review-extras p{margin:4px 0;font-size:.9rem}.review-extras .ok{color:var(--correct)}.review-extras .bad{color:var(--wrong)}.sing-body{flex-direction:column;gap:12px;padding:0 12px;display:flex}.sing-names{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-wrap:wrap;gap:8px 16px;padding:12px;font-size:1.3rem;font-weight:600;line-height:1.6;display:flex}.sing-bar{white-space:nowrap}.sing-bar+.sing-bar:before{content:"| ";color:var(--muted)}.actions.three{grid-template-columns:repeat(3,1fr)}.sing-done p,.sing-mark p{margin:0 0 8px}.sing-nodes{flex-wrap:wrap;gap:6px;display:flex}.answer.compact,.answer.compact .roman-picker{gap:6px}a.link-btn{min-height:48px;color:inherit;text-align:center;touch-action:manipulation;justify-content:center;align-items:center;text-decoration:none;display:flex}a.node-btn.link-btn{text-align:left;justify-content:flex-start}a.chip.link-btn{min-height:44px;display:inline-flex}a.btn.primary.link-btn{color:#fff}.page{padding:max(8px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));flex-direction:column;gap:12px;display:flex}.page-head{align-items:center;gap:8px;min-height:48px;display:flex}.page-head h1{margin:0;font-size:1.35rem}.card{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;gap:8px;margin:0;padding:12px;display:flex}.card h2{color:var(--accent);margin:0;font-size:1rem}.card h3{margin:4px 0 0;font-size:.95rem}.good{color:var(--correct)}.ratings{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.rating-cell{border:1px solid var(--border);background:var(--surface);border-radius:10px;flex-direction:column;align-items:center;padding:8px 4px;font-size:.8rem;display:flex}.rating-cell strong{font-variant-numeric:tabular-nums;font-size:1.25rem}.track-links{flex-direction:column;gap:6px;display:flex}.btn.big:disabled{font-size:1rem}.tree-map{-webkit-user-select:none;user-select:none;width:100%;height:auto}.map-cell rect{fill:var(--surface);stroke:var(--border);stroke-width:1.5px}.map-cell.open rect{fill:var(--surface-2);stroke:var(--muted)}.map-cell.boss rect{stroke:var(--correct)}.map-cell.on rect{stroke:var(--primary);stroke-width:2.5px}.map-tier{fill:var(--text);font-size:13px;font-weight:700}.map-count{fill:var(--muted);font-size:11px}.map-label{fill:var(--muted);font-size:10px}.map-label.on{fill:var(--text);font-weight:700}.map-link{fill:none;stroke:var(--hint);stroke-width:2px;stroke-dasharray:4 3;opacity:.8}.map-link.met{stroke:var(--correct);stroke-dasharray:none}.track-tabs{flex-wrap:nowrap;padding-bottom:2px;overflow-x:auto}.track-tabs .chip{flex-shrink:0}.track-title{margin:0;font-size:1.1rem}.tier{flex-direction:column;gap:6px;display:flex}.tier h3{color:var(--accent);margin:8px 0 0;font-size:1rem}.tier h3 .muted{font-size:.8rem;font-weight:400}.node-btn.passed{border-color:var(--correct)}.boss-btn{width:100%}.clock-chip{background:var(--surface-2);font-variant-numeric:tabular-nums;border-radius:999px;flex-shrink:0;padding:4px 8px;font-size:.85rem}.clock-chip.warn{color:var(--hint)}.clock-chip.boss{color:var(--hint);font-weight:600}.session-note{color:var(--hint);margin:0;font-size:.9rem}.session-note.good{color:var(--correct)}.result-card{text-align:center;align-items:center}.result-card p{margin:0}.stat-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:.88rem}.stat-table th,.stat-table td{border-bottom:1px solid var(--border);text-align:left;padding:6px 4px}.stat-table th{color:var(--muted);font-weight:500}.swatch{border-radius:2px;width:10px;height:10px;display:inline-block}.weak ol{margin:0;padding-left:20px;font-size:.88rem;line-height:1.6}.chart{position:relative}.legend{color:var(--muted);flex-wrap:wrap;gap:10px;font-size:.8rem;display:flex}.legend-item{align-items:center;gap:4px;display:inline-flex}.legend-item i{border-radius:2px;width:12px;height:3px;display:inline-block}.chart-svg{touch-action:pan-y;width:100%;height:auto}.grid-line{stroke:var(--border);stroke-width:1px}.axis-text{fill:var(--muted);font-size:9px}.crosshair{stroke:var(--muted);stroke-width:1px}.chart-tip{color:var(--text);font-size:.8rem}.map-arrow{fill:var(--hint)}.map-arrow.met{fill:var(--correct)}.save-error{background:var(--danger);color:#fff;margin:0;padding:8px 16px;font-size:.85rem;line-height:1.4}.map-cell{cursor:pointer}.map-cell.focus rect{stroke:var(--hint);stroke-width:3px}.tier-info-nodes{margin:0;padding-left:18px;font-size:.88rem;line-height:1.6}.start-card .rules{margin:0;padding-left:18px;font-size:.9rem;line-height:1.5}.session-note.progress{color:var(--muted)}.t-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.t-msg{justify-content:space-between;align-items:center;gap:8px;margin:0;display:flex}.t-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.t-row{align-items:center;gap:6px;min-width:0;display:flex}a.t-open.link-btn{border:1px solid var(--border);background:var(--surface-2);border-radius:10px;flex-direction:column;flex:1;align-items:flex-start;min-width:0;padding:4px 12px}.t-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.t-input{border:1px solid var(--border);background:var(--bg);width:100%;min-width:0;min-height:44px;color:var(--text);font:inherit;border-radius:10px;padding:0 10px}.t-line{align-items:center;gap:8px;display:flex}.t-line>.t-input{flex:1}.grow{flex:1;min-width:0}.t-label{font-size:.9rem;display:block}.t-label input[type=range]{width:100%;margin-top:4px;display:block}.transcribe input[type=range]{width:100%;min-height:36px;accent-color:var(--primary);touch-action:manipulation;margin:0}.t-time{font-variant-numeric:tabular-nums;align-items:baseline;gap:4px;display:flex}.t-time strong{font-size:1.5rem}.t-bar{background:var(--surface-2);border-radius:999px;margin-left:auto;padding:2px 8px;font-size:.85rem}.t-loopband{background:var(--surface-2);border-radius:3px;height:6px;margin-top:-4px;position:relative}.t-loopband span{background:var(--hint);border-radius:3px;position:absolute;top:0;bottom:0}.t-transport{grid-template-columns:1fr 1.4fr 1fr;gap:8px;display:grid}.t-tabs{flex-wrap:nowrap}.t-tabs .chip{white-space:nowrap;flex:1;padding:0 6px}.t-jump{font-variant-numeric:tabular-nums;flex:none}.t-tap{-webkit-user-select:none;user-select:none;min-width:112px}.t-keys .pitch-keys,.t-keys .fretboard-wrap{margin:0 -12px}.t-adjust{grid-template-columns:1fr 1fr 1.5fr 1.5fr;gap:6px;display:grid}.t-adjust .btn{white-space:nowrap;padding:0 4px}.t-auto{flex-wrap:wrap}.update-banner{border:1px solid var(--primary);background:var(--surface);border-radius:12px;justify-content:space-between;align-items:center;gap:8px;margin:8px 16px 0;padding:8px 12px;display:flex}.off-mark{color:var(--hint);font-size:.8rem;font-style:normal;font-weight:700;position:absolute;top:1px;right:4px}.sheet-nav,.sheet-play{align-items:center;gap:6px;display:flex}.sheet-bar{text-align:center;font-variant-numeric:tabular-nums}.sheet-play .btn{flex:1}.sheet-settings{flex-direction:column;gap:6px;display:flex}select.t-input{appearance:auto}.sheet .t-keys .pitch-keys,.sheet .t-keys .fretboard-wrap{margin:0 -12px}.chord-picker{flex-direction:column;gap:6px;display:flex}.chord-picker .pad-btn{font-size:.95rem}.sheet-staff{flex-direction:column;gap:2px;display:flex}.tl{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:0 -12px;display:flex}.tl-head{border-right:2px solid var(--border);background:var(--surface);flex:none}.tl-ruler-head,.tl-ruler{height:44px}.tl-ruler-head{align-items:center;padding:0 8px;font-size:.75rem;display:flex}.tl-track-head{border-top:1px solid var(--border);flex-direction:column;display:flex}.tl-name{text-align:left;cursor:pointer;touch-action:manipulation;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;min-height:44px;padding:0 6px;font-size:.8rem;display:flex}.tl-name span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.tl-name small{color:var(--hint);font-weight:700}.tl-name.on{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--primary)}.tl-name.muted-track span{opacity:.55}.tl-piece{align-items:center;padding:0 6px;font-size:.7rem;display:flex}.tl-scroll{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:manipulation;flex:1;min-width:0;overflow:auto hidden}.tl-inner,.tl-ruler{position:relative}.tl-bar-no{font-variant-numeric:tabular-nums;border-left:2px solid #4a5060;align-items:center;padding-left:6px;font-size:.8rem;font-weight:700;display:flex;position:absolute;top:0;bottom:0}.tl-bar-no.playing{background:color-mix(in srgb, var(--accent) 25%, transparent)}.tl-end{gap:4px;padding-left:8px;display:flex;position:absolute;top:0}.tl-row{border-top:1px solid var(--border);position:relative}.tl-row.sel{background:color-mix(in srgb, var(--primary) 8%, transparent)}.tl-bar{flex-direction:column;display:flex;position:absolute;top:0;bottom:0}.tl-cells{flex:1;display:grid}.tl-count{flex:none}.tl-count-cell{color:var(--muted);justify-content:center;align-items:flex-end;padding-bottom:2px;font-size:.65rem;display:flex}.tl-cell{border-left:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;min-width:0;display:flex;position:relative;overflow:hidden}.tl-cell.beat,.tl-count-cell.beat{border-left:1px solid #4a5060}.tl-cell.bar-start{border-left:2px solid #6a7080}.tl-cell small{color:var(--muted);font-size:.65rem}.tl-cell span{white-space:nowrap;max-width:100%;font-size:.75rem;font-weight:700;overflow:hidden}.tl-cell.on{background:var(--primary);color:#fff}.tl-cell.on small{color:#dfe8ff}.tl-cell.drum.on{background:var(--accent)}.tl-cell.rest{background:var(--surface-2);color:var(--muted)}.tl-cell.cur{box-shadow:inset 0 0 0 3px var(--hint)}.sheet-tools{flex-direction:column;gap:8px;padding-top:4px;display:flex}.tl-bar>.tl-cells[style*=height],.tl-track-head>*{flex:none}