@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-vietnamese-wdth-normal-rJmnGBSt.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:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-ext-wdth-normal-7khWdh9v.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:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-wdth-normal-DY7AcnAa.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}:root{--bg:#e3e7ed;--panel:#f6f8fb;--panel-2:#eceff4;--ink:#1d2330;--ink-2:#4f596c;--ink-3:#7a8396;--rule:#c7ced9;--rule-strong:#9aa5b6;--focus:#2e5eaa;--ok:#17785a;--warn:#9a6300;--bad:#b83227;--t-drums:#e4572e;--t-bass:#2e5eaa;--t-chords:#7b4fd0;--t-pad:#1b998b;--t-arp:#d9a400;--t-melody:#d7266a;--font:"Archivo Variable", "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--shadow:0 1px 0 #ffffffb3 inset, 0 1px 2px #1d233014;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#12151b;--panel:#1a1e26;--panel-2:#222731;--ink:#e7ebf1;--ink-2:#a3acbc;--ink-3:#737d8f;--rule:#2f3643;--rule-strong:#465063;--focus:#7aa2e8;--ok:#4cc79a;--warn:#e2a93b;--bad:#ff7a6b;--t-bass:#5b8ae0;--t-chords:#9a76ea;--t-pad:#2fbfae;--t-arp:#e8bd2c;--shadow:0 1px 0 #ffffff08 inset, 0 1px 2px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;font-size:15px;font-stretch:100%;line-height:1.45}h1,h2,h3,h4{letter-spacing:-.01em;margin:0;font-weight:720;font-stretch:125%;line-height:1.15}h1{font-size:1.6rem}h2{font-size:1.2rem}h3{font-size:1rem}p{max-width:72ch;margin:0 0 .6em}a{color:var(--focus)}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.muted{color:var(--ink-2)}.small{font-size:.85rem}.tiny{font-size:.78rem}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.stack{flex-direction:column;gap:10px;display:flex}.spacer{flex:1}.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.btn{border:1px solid var(--rule-strong);background:var(--panel);min-height:34px;color:var(--ink);cursor:pointer;box-shadow:var(--shadow);white-space:nowrap;border-radius:6px;justify-content:center;align-items:center;gap:6px;padding:6px 12px;font-weight:560;display:inline-flex}.btn:hover{background:var(--panel-2)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--ink);color:var(--panel);border-color:var(--ink)}.btn.primary:hover{filter:brightness(1.15)}.btn.quiet{box-shadow:none;background:0 0;border-color:#0000}.btn.quiet:hover{background:var(--panel-2)}.btn.danger{color:var(--bad)}.btn.small{min-height:28px;padding:3px 9px;font-size:.85rem}.btn.on{background:var(--ink);color:var(--panel)}.icon-btn{width:34px;padding:0}input[type=text],input[type=email],input[type=password],input[type=number],input[type=datetime-local],select,textarea{background:var(--panel);border:1px solid var(--rule-strong);border-radius:6px;width:100%;min-height:34px;padding:6px 9px}textarea{resize:vertical;min-height:120px;line-height:1.5}select{cursor:pointer}label.field{color:var(--ink-2);flex-direction:column;gap:4px;font-size:.85rem;font-weight:560;display:flex}label.field>input,label.field>select,label.field>textarea{color:var(--ink);font-size:.95rem;font-weight:400}input[type=range]{width:100%;accent-color:var(--ink)}.check{cursor:pointer;align-items:flex-start;gap:8px;display:flex}.check input{accent-color:var(--ink);width:16px;height:16px;margin-top:3px}.shell{grid-template-rows:auto minmax(0,1fr);grid-template-columns:264px minmax(0,1fr);height:100%;display:grid}.topbar{background:var(--panel);border-bottom:1px solid var(--rule);flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:14px;padding:10px 16px;display:flex}.brand{color:var(--ink);align-items:center;gap:9px;font-size:1.05rem;font-weight:760;font-stretch:125%;text-decoration:none;display:flex}.brand svg{flex:none}.rail{background:var(--panel-2);border-right:1px solid var(--rule);flex-direction:column;gap:12px;padding:14px 12px;display:flex;overflow:auto}.main{min-width:0;padding:16px 20px 40px;overflow:auto}@media (width<=860px){.shell{grid-template-rows:auto auto minmax(0,1fr);grid-template-columns:1fr}.rail{border-right:0;border-bottom:1px solid var(--rule);max-height:220px}.main{padding:12px 16px 40px}}.tabs{border-bottom:1px solid var(--rule);gap:2px;margin-bottom:16px;display:flex;overflow-x:auto}.tab{cursor:pointer;color:var(--ink-2);background:0 0;border:0;border-bottom:3px solid #0000;margin-bottom:-1px;padding:9px 14px;font-weight:600;font-stretch:112%}.tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}.panel{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:14px 16px}.panel+.panel{margin-top:14px}.two-col>.panel,.stack>.panel{margin-top:0}.panel-head{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;display:flex}.lib-item{cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:8px;grid-template-columns:6px 1fr;align-items:stretch;gap:10px;width:100%;padding:8px 10px;display:grid}.lib-item:hover{background:var(--panel)}.lib-item[aria-current=true]{background:var(--panel);border-color:var(--rule)}.lib-item .swatch{border-radius:3px}.lib-title{text-overflow:ellipsis;white-space:nowrap;font-weight:620;overflow:hidden}.transport{align-items:center;gap:6px;display:flex}.song-title-input{background:0 0;border:1px solid #0000;border-radius:6px;width:auto;min-width:120px;max-width:360px;padding:3px 6px;font-size:1.1rem;font-weight:720;font-stretch:125%}.song-title-input:hover,.song-title-input:focus{border-color:var(--rule-strong);background:var(--panel-2)}.meter{background:var(--rule);border-radius:2px;width:80px;height:4px;overflow:hidden}.meter>i{background:var(--ink);height:100%;transition:width .15s;display:block}.save-state{color:var(--ink-3);min-width:64px;font-size:.8rem}.arr-wrap{padding-bottom:6px;overflow-x:auto}.arr{grid-template-columns:92px 1fr;min-width:640px;display:grid;position:relative}.arr-label{height:30px;color:var(--ink-2);align-items:center;gap:7px;font-size:.82rem;font-weight:640;display:flex}.arr-label i{border-radius:2px;flex:none;width:10px;height:10px}.arr-lanes{position:relative}.arr-row{align-items:stretch;gap:3px;height:30px;padding:3px 0;display:flex}.arr-head{gap:3px;height:46px;display:flex}.sec-head{border:1px solid var(--rule);background:var(--panel);text-align:left;cursor:pointer;border-radius:6px 6px 2px 2px;min-width:0;padding:4px 7px;overflow:hidden}.sec-head b{white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:660;display:block;overflow:hidden}.sec-head span{color:var(--ink-3);white-space:nowrap;font-size:.72rem}.sec-head[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--ink)}.strip{cursor:pointer;background:repeating-linear-gradient(90deg, transparent 0 calc(var(--bar) - 1px), #0000001f calc(var(--bar) - 1px) var(--bar)), var(--c);border:0;border-radius:3px;min-width:0;padding:0;position:relative}.strip.off{background:var(--panel-2);outline:1px dashed var(--rule-strong);outline-offset:-1px}.strip.sel{box-shadow:0 0 0 2px var(--ink)}.strip.locked:after{content:"";background:#ffffffd9;border-radius:50%;width:6px;height:6px;margin-top:-3px;position:absolute;top:50%;right:4px}.playhead{background:var(--ink);pointer-events:none;z-index:3;width:2px;position:absolute;top:0;bottom:0}.sec-grid{grid-template-columns:300px minmax(0,1fr);align-items:start;gap:14px;margin-top:14px;display:grid}@media (width<=1100px){.sec-grid{grid-template-columns:1fr}}.chords{flex-wrap:wrap;gap:6px;display:flex}.chord-chip{border:1px solid var(--rule-strong);background:var(--panel);cursor:pointer;text-align:left;min-width:64px;box-shadow:var(--shadow);border-radius:6px;padding:8px 10px;font-weight:680;font-stretch:112%}.chord-chip small{color:var(--ink-3);font-size:.7rem;font-weight:500;display:block}.chord-chip[aria-expanded=true]{border-color:var(--ink)}.palette{background:var(--panel-2);border-radius:8px;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;margin-top:8px;padding:10px;display:grid}.palette button{border:1px solid var(--rule);background:var(--panel);cursor:pointer;border-radius:5px;padding:6px;font-weight:640}.palette button small{color:var(--ink-3);font-size:.72rem;font-weight:500;display:block}.palette button:hover{border-color:var(--ink)}.drum-grid{grid-template-columns:74px repeat(16,minmax(22px,1fr));align-items:center;gap:3px;min-width:520px;display:grid}.drum-grid .lbl{color:var(--ink-2);text-align:left;cursor:pointer;background:0 0;border:0;padding:0;font-size:.8rem;font-weight:600}.step{border:1px solid var(--rule);background:var(--panel-2);cursor:pointer;border-radius:4px;height:28px;padding:0}.step.beat{background:color-mix(in srgb, var(--panel-2) 80%, var(--rule-strong))}.step.on{background:var(--t-drums);border-color:#0000}.roll-wrap{border:1px solid var(--rule);background:var(--panel);border-radius:8px;max-height:460px;position:relative;overflow:auto}.roll{-webkit-user-select:none;user-select:none;touch-action:none;position:relative}.roll-keys{z-index:2;background:var(--panel);border-right:1px solid var(--rule);position:sticky;left:0}.roll-key{height:var(--rowh);color:var(--ink-3);cursor:pointer;border-bottom:1px solid #0000;align-items:center;padding-left:6px;font-size:.68rem;display:flex}.roll-key.c{color:var(--ink);font-weight:640}.roll-key.black{background:var(--panel-2)}.roll-row{height:var(--rowh)}.roll-row.out{background:color-mix(in srgb, var(--panel-2) 70%, var(--bg))}.roll-row.c{border-bottom:1px solid var(--rule)}.note{background:var(--c);cursor:grab;border:1px solid #00000040;border-radius:3px;position:absolute}.note .grip{cursor:ew-resize;width:7px;position:absolute;top:0;bottom:0;right:0}.note.ghost{opacity:.35;pointer-events:none}.mixer{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;display:grid}.strip-ch{background:var(--panel);border:1px solid var(--rule);border-top:5px solid var(--c);border-radius:10px;flex-direction:column;gap:8px;padding:10px;display:flex}.strip-ch h3{font-size:.95rem}.knob-row{color:var(--ink-2);grid-template-columns:52px 1fr 34px;align-items:center;gap:6px;font-size:.78rem;display:grid}.knob-row output{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}.genre-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;display:grid}.genre-card{text-align:left;border:1px solid var(--rule);background:var(--panel);cursor:pointer;border-radius:8px;padding:10px 12px}.genre-card b{font-stretch:118%;display:block}.genre-card span{color:var(--ink-2);font-size:.8rem}.genre-card[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.chip{border:1px solid var(--rule-strong);background:var(--panel);cursor:pointer;border-radius:99px;padding:5px 12px}.chip[aria-pressed=true]{background:var(--ink);color:var(--panel);border-color:var(--ink)}.overlay{z-index:50;background:#0f121973;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dialog{background:var(--bg);border:1px solid var(--rule);border-radius:12px;width:min(920px,100%);max-height:92vh;padding:20px;overflow:auto}.checks{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.checks li{grid-template-columns:22px 1fr;gap:8px;display:grid}.dot{border-radius:50%;width:14px;height:14px;margin-top:3px}.dot.pass{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.fail{background:var(--bad)}.dot.info{background:var(--rule-strong)}.verdict{border-radius:8px;padding:8px 12px;font-weight:640}.verdict.ready{background:color-mix(in srgb, var(--ok) 15%, transparent);color:var(--ok)}.verdict.review{background:color-mix(in srgb, var(--warn) 15%, transparent);color:var(--warn)}.verdict.blocked{background:color-mix(in srgb, var(--bad) 15%, transparent);color:var(--bad)}.cover-canvas{border:1px solid var(--rule);border-radius:8px;width:100%;height:auto;display:block}.two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;display:grid}@media (width<=1000px){.two-col{grid-template-columns:1fr}}.progress{background:var(--rule);border-radius:4px;height:8px;overflow:hidden}.progress>i{background:var(--ink);height:100%;transition:width .3s;display:block}.code{background:var(--panel-2);border:1px solid var(--rule);white-space:pre;border-radius:6px;padding:8px 10px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.82rem;overflow-x:auto}.file-list{margin:0;padding:0;list-style:none}.file-list li{border-bottom:1px solid var(--rule);justify-content:space-between;gap:10px;padding:6px 0;font-size:.9rem;display:flex}.auth{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);min-height:100%;display:grid}.auth-art{background:var(--ink);color:var(--panel);flex-direction:column;justify-content:space-between;gap:32px;padding:48px;display:flex;overflow:hidden}.auth-art h1{max-width:14ch;font-size:clamp(2rem,4vw,3.4rem);font-stretch:125%}.auth-bars{align-items:flex-end;gap:6px;height:120px;display:flex}.auth-bars i{border-radius:3px 3px 0 0;flex:1}.auth-form{flex-direction:column;justify-content:center;gap:14px;max-width:480px;padding:48px clamp(20px,5vw,64px);display:flex}@media (width<=800px){.auth{grid-template-columns:1fr}.auth-art{padding:28px 20px}.auth-bars{height:60px}}.toasts{z-index:100;flex-direction:column;gap:8px;max-width:min(420px,100vw - 32px);display:flex;position:fixed;bottom:16px;right:16px}.toast{background:var(--ink);color:var(--panel);border-radius:8px;padding:10px 14px;font-size:.9rem;box-shadow:0 6px 20px #00000040}.toast.error{background:var(--bad);color:#fff}.empty{text-align:center;color:var(--ink-2);padding:60px 20px}.empty h2{color:var(--ink);margin-bottom:8px}.guide h2{margin:22px 0 8px}.guide li{max-width:75ch;margin-bottom:6px}