:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:oklch(19.9% .014 285.1);--panel:oklch(23.1% .017 285);--panel-2:oklch(27% .022 284.8);--border:oklch(34.7% 0 0);--border-strong:oklch(46% 0 0);--border-active:oklch(64% 0 0);--text:oklch(95.4% .008 332.1);--muted:oklch(63.9% .023 333.1);--accent:oklch(82.4% .159 330.6);--accent-mute:oklch(63.8% .13 331.4);--accent-melody:oklch(82.4% .142 150.6);--accent-outside:oklch(82.4% .16 295.6);--accent-sharp:oklch(82.4% .127 40.6);--accent-flat:oklch(82.4% .127 210.6);--accent-inverse:oklch(82.4% .127 270.6);--mode-lydian:oklch(84% .075 95);--mode-ionian:oklch(80% .075 125);--mode-mixolydian:oklch(76% .075 155);--mode-dorian:oklch(72% .075 185);--mode-aeolian:oklch(68% .075 215);--mode-phrygian:oklch(64% .075 245);--mode-locrian:oklch(60% .075 275);--mode-harmonicMinor:oklch(70% .085 20);--mode-melodicMinor:oklch(75% .085 45);--row-off:oklch(20.8% .014 285.1);--row-scale:oklch(24.4% .019 284.9);--row-tonic:oklch(27.3% .036 301);--line-row:oklch(0% 0 0/.165);--line-bar:oklch(100% 0 0/.2);--line-beat:oklch(100% 0 0/.09);--c:var(--muted);font-family:Inter Variable,Inter,system-ui,sans-serif;font-size:13px}.on-home{--c:var(--text)}.chromatic{--c:var(--accent)}.on-sharp{--c:var(--accent-sharp)}.on-flat{--c:var(--accent-flat)}.on-inverse{--c:var(--accent-inverse)}.from-lydian{--c:var(--mode-lydian)}.from-ionian{--c:var(--mode-ionian)}.from-mixolydian{--c:var(--mode-mixolydian)}.from-dorian{--c:var(--mode-dorian)}.from-aeolian{--c:var(--mode-aeolian)}.from-phrygian{--c:var(--mode-phrygian)}.from-locrian{--c:var(--mode-locrian)}.from-harmonicMinor{--c:var(--mode-harmonicMinor)}.from-melodicMinor{--c:var(--mode-melodicMinor)}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--bg);color:var(--text);margin:0}button,input,select{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--border);padding:3px 8px}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--accent-mute)}button:disabled{opacity:.4;cursor:default}input[type=checkbox]{accent-color:var(--accent);padding:0}kbd,code{background:var(--panel-2);border:1px solid var(--border);padding:0 4px;font-family:inherit;font-size:11px}.app{grid-template-rows:auto 1fr auto auto auto;height:100vh;display:grid}.toolbar{background:var(--panel);border-bottom:1px solid var(--border);grid-template-columns:1fr auto 1fr;align-items:center;gap:8px 20px;padding:8px 12px;display:grid}.toolbar .tb-section{flex-wrap:wrap;align-items:center;gap:8px 20px;display:flex}.toolbar .tb-right{justify-content:end}.toolbar .tb-group{align-items:center;gap:6px;display:flex}.toolbar label{color:var(--muted);align-items:center;gap:6px;display:flex}.toolbar .tb-projects{max-width:160px}.toolbar .tb-bpm{width:58px}.toolbar .tb-play{border-color:var(--accent);min-width:70px}@media (width<=1080px){.toolbar{flex-wrap:wrap;display:flex}}.timeline{-webkit-user-select:none;user-select:none;background:var(--bg);overflow:auto}.tl-content{min-height:100%;position:relative}.tl-rows{display:grid}.tl-corner,.ruler{background-color:var(--panel);border-bottom:1px solid var(--border);z-index:3;height:22px;position:sticky;top:0}.tl-corner{z-index:4;border-right:1px solid var(--border);left:0}.ruler{cursor:text}.ruler .loop-region{background:color-mix(in oklab, var(--accent) 22%, transparent);border-inline:2px solid var(--accent);cursor:default;position:absolute;top:0;bottom:0}.ruler .loop-region.off{background:color-mix(in oklab, var(--muted) 12%, transparent);border-color:var(--muted)}.ruler .loop-edge{cursor:ew-resize;width:9px;position:absolute;top:0;bottom:0}.ruler .loop-edge.start{left:-6px}.ruler .loop-edge.end{right:-6px}.ruler span{color:var(--muted);pointer-events:none;font-size:11px;position:absolute;top:4px}.track-head{z-index:2;background:var(--panel);border-right:1px solid var(--border);border-bottom:1px solid var(--border);cursor:grab;padding:6px 40px 6px 8px;scroll-margin-top:22px;position:sticky;left:0}.track-head.active{background:var(--panel-2)}.track-head.active .th-name{font-weight:650}.track-head .th-top{gap:4px;display:flex}.track-head .th-name{background:0 0;border-color:#0000;flex:1;min-width:0;padding:2px 4px}.track-head .th-name:hover,.track-head .th-name:focus{border-color:var(--border)}.track-head .th-btn{padding:0 6px;font-size:11px}.track-head .th-btn.on{background:var(--accent);color:var(--bg)}.track-head .th-bass{color:var(--muted);align-items:center;gap:6px;padding:4px 4px 0;font-size:11px;display:flex}.track-head .th-bass input{margin:0}.track-head .th-gain{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;gap:6px;padding:4px 4px 0;font-size:11px;display:flex}.track-head .th-gain input{min-width:0;accent-color:var(--muted);flex:1;margin:0}.track-head .th-gain span{text-align:right;width:44px}.keys{cursor:ns-resize;width:34px;position:absolute;bottom:0;right:0;overflow:hidden}.keys .keys-inner{will-change:translate;flex-direction:column;display:flex}.keys .key{color:oklch(32.1% 0 0);text-align:right;background:oklch(88.5% .014 286.1);border-bottom:1px solid oklch(0% 0 0/.2);flex:0 0 10px;padding-right:2px;font-size:8px;line-height:9px}.keys .key.black{background:oklch(28.9% .018 285.2);margin-right:12px}.keys .key.tonic{box-shadow:inset 3px 0 var(--accent)}.lane{border-bottom:1px solid var(--border);position:relative}:is(.track-head,.lane).active:after{content:"";z-index:1;border-block:1px solid var(--border-active);pointer-events:none;position:absolute;inset:-1px 0}.track-resize{cursor:row-resize;height:5px;position:absolute;bottom:0;left:0;right:0}.track-resize:hover{background:color-mix(in oklab, var(--accent) 50%, transparent)}body.resizing-track,body.resizing-track *{cursor:row-resize!important}body.resizing-loop,body.resizing-loop *{cursor:ew-resize!important}body.panning,body.panning *,body.reordering,body.reordering *{cursor:grabbing!important}.reorder-line{z-index:10;background:var(--accent);pointer-events:none;height:2px;position:fixed}.roll{cursor:crosshair;position:relative;overflow:hidden}.roll-inner{will-change:translate;position:relative}.lane.notes{--note:var(--accent-melody)}.note{white-space:nowrap;color:oklch(0% 0 0/.7);background:var(--note,var(--accent));padding-left:2px;font-size:9px;font-weight:600;line-height:9px;position:absolute;overflow:hidden;box-shadow:inset 0 0 0 1px oklch(0% 0 0/.267)}.note.selected{background:oklch(100% 0 0)}.note.outside{--note:var(--accent-outside)}.note.auto{background:color-mix(in oklab, var(--note,var(--accent)) 45%, var(--bg));color:oklch(100% 0 0/.75)}.note.silent{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--note,var(--accent)) 70%, transparent);color:var(--muted);background:0 0}.note.ghost{background:color-mix(in oklab, var(--accent-melody) 30%, transparent);box-shadow:none;pointer-events:none}.roll>.note:not(.auto){cursor:grab}.chord-col{position:absolute;top:0;bottom:0}.chord-col.alt{background:oklch(100% 0 0/.02)}.chord-col.current{background:oklch(100% 0 0/.039)}.strip{background:var(--panel);border-bottom:1px solid var(--border);cursor:text;position:relative}.chord{white-space:nowrap;cursor:grab;background:color-mix(in oklab, var(--c) 16%, var(--panel-2));border:1px solid color-mix(in oklab, var(--c) 40%, transparent);border-left:2px solid var(--c);padding:3px 6px;position:absolute;top:4px;bottom:4px;overflow:hidden}.chord.current{outline:2px solid var(--text);outline-offset:-1px}.chord.selected{background:color-mix(in oklab, var(--c) 34%, var(--panel-2));border-color:var(--c)}.chord.unknown{--c:oklch(51% 0 0)}.chord.pinned:after{content:"";background:var(--text);border-radius:50%;width:5px;height:5px;position:absolute;top:4px;right:8px}.chord .chord-name{font-size:14px;font-weight:600}.chord .chord-roman{color:var(--muted);font-size:11px}.chord .chord-tag{color:var(--c);margin-left:6px}.chord .chord-handle{cursor:ew-resize;width:6px;position:absolute;top:0;bottom:0;right:0}.tl-line{pointer-events:none;z-index:1;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;left:0}.tl-cursor{background:color-mix(in oklab, var(--accent) 60%, transparent)}.tl-playhead{background:var(--text)}.tl-add{z-index:2;gap:6px;padding:8px;display:flex;position:sticky;left:0}.chord-editor{z-index:5;pointer-events:none;align-items:center;gap:6px;padding:6px 4px;display:flex;position:absolute}.chord-editor input{pointer-events:auto;border-color:var(--accent);background:var(--bg);width:110px;font-size:14px;font-weight:600}.chord-editor input.invalid{color:oklch(79% .121 20.1);border-color:oklch(68.8% .201 24.1)}.chord-editor .chord-hint{color:var(--muted);background:var(--bg);padding:2px 6px}.chord-editor .chord-hint:empty{display:none}.palette{background:var(--panel);border-top:1px solid var(--border);padding:6px 12px 8px}.palette[data-open=false]{padding-bottom:6px}.palette[data-open=false] header{margin-bottom:0}.palette[data-open=false] .palette-body,.palette[data-open=false] .help,.palette[data-open=false] label{display:none}.palette{max-height:34vh;overflow:auto}.palette header{color:var(--muted);align-items:center;gap:16px;margin-bottom:6px;display:flex}.palette header label{align-items:center;gap:4px;display:flex}.palette-body{align-items:start;gap:32px;display:flex}.circle{flex:none;width:260px;height:260px}.circle .circle-chord{cursor:pointer}.circle .circle-chord path{fill:#0000;stroke:color-mix(in oklab, var(--border) 70%, transparent)}.circle .circle-chord:hover path{fill:var(--panel-2)}.circle .circle-chord.here path{fill:color-mix(in oklab, var(--c) 18%, var(--panel));stroke:var(--c)}.circle .circle-chord text{text-anchor:middle;pointer-events:none}.circle .circle-chord .name{fill:var(--c);font-size:12px;font-weight:600}.circle .circle-chord .roman{fill:var(--muted);font-size:8.5px}.circle .circle-chord.minor .name{font-size:10.5px}.palette-row{border-top:1px solid color-mix(in oklab, var(--border) 60%, transparent);grid-template-columns:110px repeat(7,104px);display:grid}.palette-row.on-inverse+.palette-row{border-top-color:var(--border-strong)}.palette-row .palette-mode{color:var(--c);align-content:center;display:grid}.palette-row .palette-mode small{color:var(--muted);font-size:10px}.palette-row.on-home .palette-mode{font-weight:650}.chip{background:0 0;border:none;align-items:baseline;gap:6px;padding:4px 6px;display:flex}.chip b{color:var(--c);font-weight:600}.chip span{color:var(--muted);font-size:11px}.chip:hover{background:var(--panel-2)}.chip.same{opacity:.35}.hints{color:var(--muted);border-top:1px solid var(--border);background:var(--panel);gap:16px;padding:6px 12px;font-size:11px;display:flex}.hints .hint kbd+kbd{margin-left:2px}.tt-dialog{background:var(--panel);color:var(--text);border:1px solid var(--border);width:min(560px,90vw);padding:16px}.tt-dialog::backdrop{background:oklch(0% 0 0/.5)}.tt-dialog h2{margin:0 0 12px;font-size:15px}.tt-dialog .tt-options{gap:6px;max-height:60vh;display:grid;overflow:auto}.tt-dialog .tt-option{text-align:left;grid-template-columns:1fr auto;gap:2px 12px;padding:8px 10px;display:grid}.tt-dialog .tt-option:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.tt-dialog .tt-detail{color:var(--muted)}.tt-dialog .tt-preview{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;grid-column:1/-1;font-size:11px;overflow:hidden}.tt-dialog .tt-preview:empty{display:none}.tt-dialog .tt-cancel{float:right;margin-top:12px}.disclosure{white-space:nowrap;background:0 0;border:none;padding:0;font-size:11px}.disclosure:before{content:"";border-bottom:1.5px solid;border-right:1.5px solid;width:.4em;height:.4em;margin-right:.6em;display:inline-block;position:relative;top:-.17em;transform:rotate(45deg)}.disclosure[aria-expanded=false]:before{top:-.05em;transform:rotate(-45deg)}.help{width:14px;height:14px;color:var(--muted);cursor:help;border:1px solid;border-radius:50%;place-items:center;font-size:9px;font-weight:650;display:inline-grid}.help:hover{color:var(--accent)}.disclosure:hover:not(:disabled){color:var(--accent)}.chord-panel{background:var(--panel);border-top:1px solid var(--border);align-items:center;gap:16px;padding:6px 12px;display:flex}.chord-panel[data-open=true] .chord-panel-body{min-height:26px}.chord-panel .chord-panel-body{flex-wrap:wrap;align-items:center;gap:8px 20px;display:flex}.chord-panel .chord-panel-empty{color:var(--muted);align-self:center}.chord-panel .chord-panel-name{min-width:72px;display:grid}.chord-panel .chord-panel-name b{font-size:16px}.chord-panel .chord-panel-name span{color:var(--muted);font-size:11px}.chord-panel .chord-panel-group{align-items:center;gap:4px;display:flex}.chord-panel .chord-panel-label{color:var(--muted);margin-right:2px}.chord-panel .chord-panel-action{align-items:baseline;gap:6px;padding:3px 8px;display:flex}.chord-panel .chord-panel-action b{font-weight:650}.select-box{z-index:10;pointer-events:none;border:1px solid var(--accent-melody);background:color-mix(in oklab, var(--accent-melody) 15%, transparent);position:fixed}.menu{min-width:170px;color:var(--text);background:var(--panel-2);border:1px solid var(--border);margin:0;padding:4px;inset:auto;box-shadow:0 8px 24px oklch(0% 0 0/.4)}.menu button{text-align:left;background:0 0;border:none;width:100%;padding:5px 10px;display:block}.menu button:hover{background:color-mix(in oklab, var(--accent) 18%, transparent)}.menu hr{border:none;border-top:1px solid var(--border);margin:4px 2px}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2)format("woff2-variations");unicode-range:U+1F??}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2)format("woff2-variations");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}