:root{color-scheme:dark;--bg:#141418;--surface:#18181e;--surface-2:#1c1c23;--border:#303039;--text:#f2f1f5;--muted:#a7a5b2;--quiet:#777585;--accent:#a78bef;--accent-hover:#b69df8;--radius:6px;font-family:Inter,"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:680px;min-height:100vh;background:var(--bg);color:var(--text);font-size:14px}.topbar{height:66px;display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0 28px;background:#111114}.brand{color:var(--text);font-size:29px;font-weight:850;letter-spacing:-1.7px;text-decoration:none}.brand span{color:var(--accent)}.nav{align-self:stretch;display:flex;gap:28px;margin-left:116px}.nav-link{position:relative;border:0;background:none;color:#d7d5e0;font:500 14px inherit;padding:0 3px;cursor:pointer}.nav-link.active{color:#c5afff}.nav-link.active:after{position:absolute;content:"";height:2px;background:var(--accent);bottom:8px;left:0;right:0}.button{height:42px;border:0;border-radius:4px;padding:0 18px;font:600 13px inherit;cursor:pointer}.button-primary{background:var(--accent);color:#17131f}.button-primary:hover{background:var(--accent-hover)}.button:disabled{opacity:.42;cursor:not-allowed}.top-export{margin-left:auto;height:39px}.workspace{display:grid;grid-template-columns:270px minmax(0,1fr) 292px;height:calc(100vh - 66px);min-height:620px}.rail{overflow:auto;padding:25px 20px;background:linear-gradient(180deg,#18181d,#15151a)}.project-rail{border-right:1px solid var(--border)}.settings-rail{border-left:1px solid var(--border)}.rail-section+.rail-section{border-top:1px solid var(--border);margin-top:23px;padding-top:22px}.rail h2{margin:0 0 18px;color:#d9d8e2;font-size:12px;font-weight:720;letter-spacing:.045em}.dropzone{height:139px;border:1px dashed #777485;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#dddbe4;cursor:pointer}.dropzone.dragging{border-color:var(--accent);background:#211c2b}.dropzone input,.audio-upload input{display:none}.dropzone strong{font-size:13px;font-weight:550}.dropzone>span{color:var(--muted);font-size:12px}.upload-icon{width:26px;height:26px;color:#bdb9c9}.audio-upload{height:73px;margin-top:15px;border:1px solid var(--border);display:flex;align-items:center;gap:13px;padding:0 16px;cursor:pointer}.audio-upload>svg{width:21px;height:21px;color:#c7c1d6}.audio-upload strong,.audio-upload small{display:block}.audio-upload strong{font-size:13px;font-weight:550}.audio-upload small{margin-top:5px;color:var(--muted);font-size:10px}.metadata>div{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px;color:#e8e6ec}.metadata>div:last-child{margin-bottom:0}.metadata strong{font-size:12px;font-weight:500;color:#d2cfdc}.patterns-section{min-height:190px}.pattern-list{display:flex;flex-direction:column;gap:11px}.pattern-row{display:flex;align-items:center;min-width:0;gap:10px}.pattern-swatch{width:22px;height:16px;border-radius:2px;border:0;padding:0;cursor:pointer}.pattern-name{flex:1;overflow:hidden;color:#ebeaf0;font-size:12px;white-space:nowrap;text-overflow:ellipsis}.pattern-toggle{width:24px;height:24px;background:none;border:0;color:#cbc9d3;cursor:pointer}.pattern-toggle svg{width:17px;height:17px}.pattern-row.muted-pattern{opacity:.36}.muted{color:var(--muted);font-size:12px;line-height:1.6}.stage{display:flex;flex-direction:column;min-width:0;background:#15151a}.preview-area{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:16px 14px 8px}.preview-frame{height:100%;max-height:calc(100vh - 166px);max-width:100%;aspect-ratio:9/16;overflow:hidden;background:#fff;box-shadow:0 9px 38px #09090b55}.preview-frame canvas{display:block;width:100%;height:100%}.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#15151a;text-align:center}.empty-state h1{font-size:40px;line-height:1.04;letter-spacing:-2px;margin:0}.empty-state p{color:#aaa7b4;margin:16px 0 22px}.empty-state .button{display:flex;align-items:center}.empty-state.hidden{display:none}.transport{height:79px;flex-shrink:0;margin:8px 12px 14px;padding:0 12px;border:1px solid var(--border);border-radius:5px;display:flex;align-items:center;gap:10px}.transport-button{width:34px;height:34px;border:0;background:none;color:#d9d5e3;cursor:pointer}.transport-button:disabled{opacity:.4}.transport-button svg{width:20px;height:20px}.transport-button.play{width:44px;height:44px;border:1px solid var(--border);border-radius:4px;color:#d5c9f2}.timecode{display:flex;gap:6px;align-items:center;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px}.timecode .divider{color:#777585}.timeline{flex:1;min-width:30px}.rail input[type="range"],.timeline{accent-color:var(--accent);height:4px}.control-row{display:flex;align-items:center;justify-content:space-between;min-height:42px;margin:3px 0 12px;font-size:13px}.control-row input[type="color"]{width:58px;height:35px;border:1px solid var(--border);border-radius:4px;padding:5px;background:var(--bg)}.stacked-control{display:flex;flex-direction:column;gap:10px;margin:18px 0;font-size:13px}.stacked-control>span{display:flex;justify-content:space-between}.stacked-control output{font-size:11px;color:var(--muted)}.stacked-control select{height:41px;border:1px solid #41404b;border-radius:4px;padding:0 10px;background:#19191f;color:#eeedf2;font-size:12px}.switch{appearance:none;width:39px;height:22px;border-radius:15px;background:#383740;position:relative;cursor:pointer}.switch:before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;border-radius:50%;background:#e6e4eb;transition:transform .17s}.switch:checked{background:#9477df}.switch:checked:before{transform:translateX(17px)}.export-section{margin-top:28px!important}.render-button,.button-quiet{width:100%;margin-top:11px}.button-quiet{background:none;color:#d8d3e8;border:1px solid var(--border)}.render-progress{margin-top:16px}.render-progress.hidden{display:none}.progress-track{height:5px;background:#34333c;border-radius:4px;overflow:hidden}.progress-track div{height:100%;width:0;background:var(--accent);transition:width .1s}.render-progress>span{display:block;margin-top:8px;color:var(--muted);font-size:11px}.toast{position:fixed;left:50%;bottom:26px;padding:11px 16px;border:1px solid var(--border);border-radius:6px;background:#202027;color:#eeeaf7;opacity:0;transform:translate(-50%,10px);transition:.2s;pointer-events:none;font-size:12px}.toast.visible{opacity:1;transform:translate(-50%,0)}@media(max-width:1040px){.workspace{grid-template-columns:225px minmax(0,1fr) 248px}.rail{padding:22px 15px}.nav{margin-left:60px}}@media(max-width:760px){body{min-width:360px}.topbar{height:58px;padding:0 15px}.brand{font-size:23px}.nav{margin-left:24px;gap:14px}.nav-link{font-size:12px}.top-export{height:33px;padding:0 10px;font-size:11px}.workspace{height:auto;min-height:calc(100vh - 58px);grid-template-columns:1fr}.stage{grid-row:1;min-height:calc(100vh - 58px)}.preview-area{min-height:440px}.preview-frame{max-height:calc(100vh - 180px)}.project-rail,.settings-rail{border:0;border-top:1px solid var(--border)}.rail{padding:22px 18px}.pattern-list{display:grid;grid-template-columns:1fr 1fr}.transport{margin:8px 12px 12px}}
.pattern-mode{width:25px;height:25px;flex-shrink:0;border:1px solid transparent;border-radius:4px;background:none;color:#a9a5b5;cursor:pointer;display:grid;place-items:center}.pattern-mode:hover{border-color:#43414c;color:#ddd8ed;background:#201f27}.pattern-mode.step-mode{color:#b59af3}.pattern-mode svg{width:16px;height:16px}.pattern-toggle{flex-shrink:0}.pattern-row{gap:7px}
.layer-controls{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;width:18px;height:27px}.layer-button{display:grid;place-items:center;width:18px;height:14px;border:0;padding:0;background:none;color:#aaa7b5;cursor:pointer}.layer-button:hover:not(:disabled){color:#c9b1ff}.layer-button:disabled{opacity:.2;cursor:default}.layer-button svg{width:13px;height:13px}.pattern-row[draggable=true]{cursor:grab}.pattern-row.dragging-layer{opacity:.42}.pattern-row.drop-target{outline:1px solid #9279d3;outline-offset:3px;border-radius:2px}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.section-heading h2{margin-bottom:18px}.selection-actions{display:flex;gap:8px}.selection-actions button{border:0;padding:0;background:none;color:#a995df;font:600 10px inherit;cursor:pointer}.selection-actions button:disabled{color:#5f5c68;cursor:default}.selection-count{color:var(--muted);font-size:10px;white-space:nowrap}.pattern-list{gap:8px}.pattern-row{padding:4px 5px;border:1px solid transparent;border-radius:4px}.pattern-row.selected-pattern{border-color:#725da8;background:#211d2b}.pattern-select{appearance:none;width:14px;height:14px;flex:0 0 14px;margin:0;border:1px solid #5b5866;border-radius:3px;background:#18181e;cursor:pointer}.pattern-select:checked{border-color:#a78bef;background:#a78bef}.pattern-select:checked:after{content:"";display:block;width:7px;height:4px;margin:3px 0 0 2px;border:solid #17131f;border-width:0 0 2px 2px;transform:rotate(-45deg)}.pattern-swatch{flex:0 0 22px}.layer-style-controls{min-width:0;margin:0;padding:0;border:0}.layer-style-controls:disabled{opacity:.42}.layer-style-empty{margin:0}.layer-style-empty.hidden,.gradient-color-row.hidden,.hidden{display:none}.mixed-hint{margin:0 0 7px;padding:8px 9px;border:1px solid #3c364c;border-radius:4px;background:#211d2b;color:#c4b7e7;font-size:10px;line-height:1.4}@media(max-width:1040px){.pattern-row{padding-left:2px;padding-right:2px}}

/* FL Studio default-inspired application chrome. Exported canvas colors remain user-controlled. */
:root{
  --bg:#242b30;
  --surface:#303940;
  --surface-2:#39454d;
  --border:#526069;
  --text:#e7eaec;
  --muted:#aab3b8;
  --quiet:#7f8b92;
  --accent:#f5a24a;
  --accent-hover:#ffb65e;
}
body{background:var(--bg);color:var(--text);scrollbar-color:#647179 #293136}
.topbar{border-color:#56636b;background:linear-gradient(180deg,#46545c 0%,#3d494f 100%);box-shadow:inset 0 1px #65717a,0 2px 8px #10151866}
.brand{color:#f3f5f5;text-shadow:0 1px #1c2428}.brand span{color:var(--accent)}
.nav-link{color:#d0d6d9}.nav-link:hover{color:#fff1df}.nav-link.active{color:#ffd09d}.nav-link.active:after{background:var(--accent);box-shadow:0 0 5px #f5a24a66}
.button-primary{border:1px solid #ffbd70;background:linear-gradient(180deg,#ffb65e,#e88c32);color:#2d2115;box-shadow:inset 0 1px #ffd6a6,0 1px 2px #11181c88}.button-primary:hover{background:linear-gradient(180deg,#ffc476,#f09a40)}
.button-quiet{border-color:#5a6870;background:#2a3237;color:#d8dee1}.button-quiet:hover{border-color:#78858c;background:#343e44}
.rail{background:linear-gradient(180deg,#343e45,#2b343a)}
.project-rail,.settings-rail{border-color:#526069}
.rail-section+.rail-section{border-color:#4b575e}
.rail h2{color:#e1e6e8;text-shadow:0 1px #1d2529}
.dropzone{border-color:#718087;color:#e3e7e9;background:#2d363c}.dropzone:hover{border-color:#98a4a9;background:#333e44}.dropzone.dragging{border-color:var(--accent);background:#41372b}.dropzone>span,.audio-upload small{color:#909ca2}.upload-icon,.audio-upload>svg{color:#c5ced2}
.audio-upload{border-color:#536169;background:#2d363c}.audio-upload:hover{border-color:#6d7a81;background:#343e44}
.metadata>div{color:#e0e5e7}.metadata strong{color:#c7d0d4}
.selection-actions button{color:#f4b56f}.selection-actions button:hover:not(:disabled){color:#ffd09d}.selection-actions button:disabled{color:#6f7a80}
.pattern-row.selected-pattern{border-color:#d9903f;background:#463725}.pattern-name{color:#e7ebed}
.pattern-select{border-color:#6b777e;background:#293136}.pattern-select:checked{border-color:#ffc06f;background:var(--accent)}.pattern-select:checked:after{border-color:#342517}
.pattern-mode{color:#a8b3b8}.pattern-mode:hover{border-color:#69767d;color:#ecf0f1;background:#3a454b}.pattern-mode.step-mode{color:#ffc06f}
.layer-button{color:#a6b1b6}.layer-button:hover:not(:disabled){color:#ffc06f}.pattern-row.drop-target{outline-color:var(--accent)}
.stage,.empty-state{background:#222a2f}.preview-frame{box-shadow:0 9px 38px #10171bbb,0 0 0 1px #536169}
.empty-state p{color:#a8b2b7}
.transport{border-color:#526069;background:linear-gradient(180deg,#303a40,#293238);box-shadow:inset 0 1px #3f4a51}
.transport-button{color:#c8d0d4}.transport-button:hover:not(:disabled){color:#fff1df}.transport-button.play{border-color:#66737a;color:#b9d67d;background:#303a3a}.transport-button.play:hover:not(:disabled){border-color:#81965f;background:#3a4638;color:#d5eda0}
.timecode .divider{color:#7f8b92}
.rail input[type="range"],.timeline{accent-color:var(--accent)}
.control-row input[type="color"]{border-color:#59666d;background:#283035}
.stacked-control select{border-color:#59666d;background:#252d32;color:#e6ebed}.stacked-control select:hover{border-color:#748188}
.switch{background:#4a555b;box-shadow:inset 0 1px 2px #1a2226}.switch:before{background:#dce1e3}.switch:checked{background:var(--accent)}
.mixed-hint{border-color:#765c3f;background:#403528;color:#f3c68f}
.progress-track{background:#465259}.progress-track div{background:var(--accent)}
.render-progress>span{color:#aab3b8}
.toast{border-color:#68757d;background:#364148;color:#f0f3f4;box-shadow:0 8px 28px #10171bcc}
.pattern-swatch,.control-row input[type="color"],.stacked-control select,.transport-button.play,.button{transition:border-color .15s,background .15s,color .15s,box-shadow .15s}
.layer-gradient-controls{margin-top:20px;padding-top:18px;border-top:1px solid #4b575e}.layer-gradient-controls.hidden{display:none}.layer-gradient-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.layer-gradient-heading strong{font-size:12px;font-weight:650;color:#e1e6e8}.layer-gradient-heading span{font-size:10px;color:var(--muted)}.layer-gradient-controls .control-row{margin-bottom:5px}.layer-gradient-apply{height:36px;margin-top:9px}
.playhead-customization,.shadow-customization{margin:-4px 0 16px;padding:6px 0 2px;border:0;border-top:1px solid #4b575e}.playhead-customization:disabled,.shadow-customization:disabled{opacity:.42}.playhead-customization .stacked-control,.shadow-customization .stacked-control{margin:13px 0}.playhead-customization .control-row,.shadow-customization .control-row{margin-bottom:5px}
.playhead-offset-control{gap:7px!important}.playhead-offset-control small{color:var(--muted);font-size:10px}.reset-playhead-offset{height:34px;margin:0 0 14px!important;font-size:11px!important}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ffc06f;outline-offset:2px}

.preview-frame:fullscreen{
  display:grid;
  place-items:center;
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  aspect-ratio:auto;
  padding:0;
  background:#222a2f;
  box-shadow:none;
}
.preview-frame:fullscreen canvas{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.background-solid-controls.hidden,.background-gradient-controls.hidden,.background-image-controls.hidden{display:none}
.background-image-button{display:flex;align-items:center;justify-content:center}
.background-image-button input{display:none}
.background-image-name{display:block;overflow:hidden;margin:8px 0 2px;color:var(--muted);font-size:10px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.background-image-controls .stacked-control{margin-top:12px}