:root{--bg:#14121c;--surface:#1e1b29;--surface-2:#282436;--line:#363047;--text:#f2eff8;--muted:#a39cb6;--accent:#ff7a59;--accent-ink:#1a0f0a;--accent-2:#7cc6ff;--drums:#c99bff;--error:#ff8a8a;--radius:14px;--gutter:16px;--g0:#ff7a59;--g1:#7cc6ff;--g2:#c99bff;--g3:#6ee7a8;--g4:#ffd166;--g5:#ff8fc7;--g6:#5eead4;--g7:#b5e655;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.4}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);min-height:100%;margin:0}h1,h2,h3,p,ul,dl,dd{margin:0}ul{padding:0;list-style:none}.app{min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.app--dragging{outline:3px dashed var(--accent);outline-offset:-8px}.topbar{padding:12px var(--gutter);align-items:center;display:flex}.logo{letter-spacing:-.01em;align-items:center;gap:10px;font-size:1.25rem;font-weight:750;display:flex}.logo-mark{background:linear-gradient(90deg, transparent 0 18%, var(--bg) 18% 30%, transparent 30% 44%, var(--bg) 44% 56%, transparent 56% 70%, var(--bg) 70% 82%, transparent 82%) bottom / 100% 55% no-repeat, linear-gradient(135deg, var(--accent), #ffb259);border-radius:8px;width:26px;height:26px}.main{max-width:760px;padding:0 var(--gutter) 32px;gap:16px;margin:0 auto;display:grid}.import{gap:10px;display:grid}.btn-import{border-radius:var(--radius);background:var(--accent);min-height:64px;color:var(--accent-ink);font:inherit;cursor:pointer;touch-action:manipulation;border:0;font-size:1.15rem;font-weight:700;transition:transform 80ms,filter .15s}.btn-import:hover{filter:brightness(1.06)}.btn-import:active{transform:scale(.985)}.btn-import:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}.btn-import:disabled{opacity:.7;cursor:progress}.help{color:var(--muted);font-size:.85rem}.notice{border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);gap:4px;padding:12px 14px;display:grid}.notice--error{border-color:color-mix(in srgb, var(--error) 50%, transparent)}.notice--error strong{color:var(--error);overflow-wrap:anywhere}.projects h2,.tracks h3,.markers h3,.changes h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;font-size:.8rem;font-weight:650}.empty{color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);text-align:center;padding:20px}.summary{gap:16px;display:grid}.summary-head{align-items:center;gap:10px;min-width:0;display:flex}.file-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:1.1rem;font-weight:650;overflow:hidden}.pill{background:var(--surface-2);color:var(--muted);border-radius:99px;flex:none;padding:3px 8px;font-size:.75rem}.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.stat{background:var(--surface);border-radius:var(--radius);gap:2px;min-width:0;padding:10px 12px;display:grid}.stat dt{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.72rem}.stat dd{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1.35rem;font-weight:700}.stat dd small{color:var(--muted);font-size:.75rem;font-weight:500}.stat-note{color:var(--muted);font-size:.72rem}.changes ul{flex-wrap:wrap;gap:6px;display:flex}.changes li{background:var(--surface);border-radius:99px;padding:4px 10px;font-size:.85rem}.marker-strip{scrollbar-width:thin;gap:6px;padding-bottom:4px;display:flex;overflow-x:auto}.marker{background:color-mix(in srgb, var(--accent-2) 18%, var(--surface));border-left:3px solid var(--accent-2);border-radius:10px;flex:none;padding:8px 12px;display:grid}.marker-name{font-size:.9rem;font-weight:600}.marker-bar{color:var(--muted);font-size:.75rem}.count{color:var(--text);margin-left:4px}.track-list{gap:6px;display:grid}.track{background:var(--surface);border-radius:12px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;display:grid}.track-ch{background:var(--surface-2);font-variant-numeric:tabular-nums;border-radius:10px;place-items:center;width:40px;height:40px;padding-top:8px;font-weight:700;display:grid;position:relative}.track-ch:before{content:"CH";letter-spacing:.08em;color:var(--muted);font-size:.55rem;font-weight:600;position:absolute;top:4px}.track--drums .track-ch{background:color-mix(in srgb, var(--drums) 25%, var(--surface-2))}.track-main{min-width:0;display:grid}.track-name,.track-inst{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track-name{font-weight:600}.track-inst{color:var(--muted);text-transform:capitalize;font-size:.8rem}.track--drums .track-inst{color:var(--drums)}.track-notes{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}.track-notes small{color:var(--muted);font-weight:400}.muted{color:var(--muted)}.stat--key dd{font-size:1.15rem}.key-alts{flex-wrap:wrap;align-items:center;gap:6px;margin-top:-6px;font-size:.85rem;display:flex}.chip{background:var(--surface-2);border-radius:99px;padding:3px 10px;font-size:.85rem;font-weight:600;display:inline-block}.chip--main{background:var(--accent);color:var(--accent-ink)}.chords{gap:10px;display:grid}.chords-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.chords-head h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.8rem;font-weight:650}.seg{background:var(--surface);border-radius:10px;padding:3px;display:inline-flex}.seg button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;min-height:32px;padding:6px 10px;font-size:.8rem;font-weight:600}.seg button[aria-pressed=true]{background:var(--surface-2);color:var(--text)}.chord-grid{gap:6px;display:grid}.chord-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.bar{background:var(--surface);min-height:58px;color:var(--text);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;border:1px solid #0000;border-radius:10px;align-content:end;padding:18px 8px 8px;display:grid;position:relative}.bar:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.bar--selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--surface))}.bar-num{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.65rem;position:absolute;top:5px;left:8px}.bar-marker{text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 28px);color:var(--accent-2);font-size:.62rem;font-weight:700;position:absolute;top:4px;right:6px;overflow:hidden}.bar-chords{white-space:nowrap;text-overflow:ellipsis;font-size:1.05rem;font-weight:700;overflow:hidden}.bar-chords--split{grid-template-columns:1fr 1fr;gap:4px;font-size:.9rem;display:grid}.bar-chords--split span{text-overflow:ellipsis;overflow:hidden}.bar-chords--split span+span{border-left:1px solid var(--line);padding-left:4px}.bar--repeat .bar-chords{color:var(--muted);font-weight:500}.bar--unsure .bar-chords{-webkit-text-decoration:underline dotted var(--muted);text-decoration:underline dotted var(--muted);text-underline-offset:4px}.bar-detail{border-radius:var(--radius);background:var(--surface);gap:8px;padding:12px;display:grid}.bar-detail-row{flex-wrap:wrap;align-items:center;gap:6px;font-size:.9rem;display:flex}.file-details{border-top:1px solid var(--line);padding-top:12px}.file-details>summary{cursor:pointer;padding:6px 0;font-weight:600;list-style-position:inside}.file-details[open]>summary{margin-bottom:12px}.file-details>div+div{margin-top:16px}.label{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.8rem;font-weight:650}.btn-icon,.btn-small,.btn-tap,.chip--btn{font:inherit;color:var(--text);cursor:pointer;touch-action:manipulation}.btn-icon{background:var(--surface);border:0;border-radius:10px;width:40px;height:40px;font-size:1.2rem}.btn-icon--small{width:32px;height:32px;margin-left:auto;font-size:.9rem}.btn-icon:disabled,.btn-small:disabled{opacity:.35;cursor:default}.undo{flex:none;gap:6px;display:flex}.btn-small{border:1px solid var(--line);background:var(--surface-2);border-radius:9px;min-height:36px;padding:6px 10px;font-size:.85rem;font-weight:600}.btn-tap{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;justify-self:start;margin-top:4px;padding:4px 8px;font-size:.72rem;font-weight:600}.btn-tap:active{background:var(--accent);color:var(--accent-ink)}.chip--btn{border:1px solid #0000;min-height:32px}.chip--btn:hover{border-color:var(--line)}.chip--ghost{border-color:var(--line);color:var(--muted);background:0 0}.sections{gap:10px;display:grid}.strip{scrollbar-width:thin;gap:4px;padding-bottom:6px;display:flex;overflow-x:auto}.strip-block{flex:1 0 max(116px, calc(var(--bars) * 15px));background:color-mix(in srgb, var(--c) 22%, var(--surface));border:2px solid #0000;border-top:4px solid var(--c);color:var(--text);font:inherit;text-align:left;cursor:pointer;border-radius:10px;gap:2px;padding:8px 10px;display:grid}.strip-block--selected{border-color:var(--c);background:color-mix(in srgb, var(--c) 36%, var(--surface))}.strip-name{white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:700;overflow:hidden}.strip-bars{color:var(--muted);font-size:.72rem}.section-panel{border-radius:var(--radius);background:var(--surface);border-left:4px solid var(--c);gap:12px;padding:12px;display:grid}.field{gap:4px;font-size:.8rem;display:grid}.field input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:9px;min-height:42px;padding:8px 10px;font-size:1rem;font-weight:600}.field input:focus{outline:2px solid var(--accent-2);outline-offset:1px}.section-facts{flex-wrap:wrap;align-items:center;gap:8px;font-size:.85rem;display:flex}.energy{align-items:center;gap:6px;display:flex}.energy-dot{border:2px solid var(--line);cursor:pointer;background:0 0;border-radius:50%;width:30px;height:30px;padding:0}.energy-dot--on{background:var(--c);border-color:var(--c)}.energy-hint{margin-left:4px}.section-actions{flex-wrap:wrap;align-items:center;gap:6px;font-size:.8rem;display:flex}.sec{border-left:3px solid var(--c);gap:6px;padding-left:10px;scroll-margin-top:12px;display:grid}.sec--highlighted{background:color-mix(in srgb, var(--c) 8%, transparent);border-radius:0 10px 10px 0;padding:6px 6px 6px 10px}.sec-head{color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;align-items:baseline;gap:8px;padding:4px 0 0;font-size:.85rem;display:flex}.sec-name{color:var(--c);font-weight:700}.bar-detail-head{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.bar-detail-slot{border-top:1px solid var(--line);gap:8px;padding-top:8px;display:grid}.picker{gap:8px;display:grid}.picker-row{flex-wrap:wrap;align-items:center;gap:6px;font-size:.8rem;display:flex}.picker-all{gap:6px;max-height:260px;padding-right:4px;display:grid;overflow-y:auto}.bar--playing{border-color:var(--accent-2);box-shadow:inset 0 -3px 0 var(--accent-2)}.transport{z-index:5;margin:0 calc(-1 * var(--gutter)) -32px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);align-items:center;gap:12px;display:flex;position:sticky;bottom:0}.btn-play{background:var(--accent);width:56px;height:56px;color:var(--accent-ink);cursor:pointer;touch-action:manipulation;border:0;border-radius:50%;flex:none;place-items:center;display:grid}.btn-play svg{fill:currentColor;width:26px;height:26px}.btn-play--on{background:var(--text)}.btn-play:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}.transport-info{flex:1;min-width:0;display:grid}.transport-label{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.72rem}.transport-what{white-space:nowrap;text-overflow:ellipsis;font-weight:650;overflow:hidden}.transport-click{flex:none}.transport-click[aria-pressed=false]{color:var(--muted)}@media (width<=380px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (height<=520px){.topbar{padding-block:8px}.btn-import{min-height:52px}.main,.summary{gap:12px}.stat{padding:8px 10px}.stat dd{font-size:1.15rem}.track{padding:8px 10px}.track-ch{width:34px;height:34px}}
