:root{--ink:#1e2331;--muted:#8b8f9d;--line:#e9ebf0;--accent:#7158e9;--background:#f5f6f8;--radius:17px;color-scheme:light}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--background);font:14px/1.5 Inter,"Segoe UI",Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button,input,select{outline:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a99afb;outline-offset:3px}button{transition:background .15s,transform .15s}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}h2{font-size:14px;margin:0;font-weight:700;letter-spacing:-.15px}p{margin:8px 0;color:#777d8d}.topbar{height:74px;display:flex;align-items:center;gap:32px;padding:0 32px;background:white;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-size:22px;font-weight:800;letter-spacing:-1px;line-height:1.1}.brand-light{font-weight:500}.brand small{display:block;font-size:8px;letter-spacing:3px;font-weight:600;margin-top:5px;color:#8d91a0}.header-caption{color:#8c91a0;font-size:13px}.top-actions{display:flex;gap:10px;margin-left:auto;align-items:center}.button{border:1px solid #e3e5ed;background:white;padding:9px 14px;border-radius:9px;font-weight:600;color:#464b5c;font-size:12px;white-space:nowrap}.button:hover{background:#f7f7fb;border-color:#cfc9e5}.button.primary{background:var(--accent);border-color:var(--accent);color:white;padding:10px 17px;box-shadow:0 4px 9px #7056e91c}.button.primary:hover{background:#6046d8}.button.quiet{border-color:transparent;background:transparent}.button.quiet:hover{background:#f3f2f8}.button span{font-size:17px;margin-right:5px}.projectbar{display:flex;justify-content:space-between;align-items:center;padding:26px 32px 24px}.eyebrow{display:block;letter-spacing:1.5px;color:#9398a6;font-size:9px;font-weight:700;margin-bottom:4px}.project-title input{padding:0;width:390px;max-width:100%;font-size:23px;font-weight:700;letter-spacing:-.7px;color:var(--ink);border:0;background:transparent}.save-status{display:block;color:#999eaa;font-size:10px;margin-top:4px}.project-actions{display:flex;align-items:center;gap:6px}.iconbutton{width:32px;height:32px;padding:0;border:0;background:transparent;border-radius:8px;color:#747a8a;font-size:22px;line-height:32px}.iconbutton:hover{background:#eaeaf3}.divider{height:19px;width:1px;background:#dce0e8;margin:0 10px}.workspace{display:grid;grid-template-columns:230px minmax(360px,1fr) 300px;gap:18px;margin:0 32px;align-items:start;max-width:1700px}.panel{border:1px solid var(--line);border-radius:var(--radius);background:white;padding:20px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:9px}.badge{font-size:10px;color:#9ca0ac;background:#f4f5f8;padding:3px 7px;border-radius:5px;font-weight:600}.subtle{font-size:10px;color:#9b9fa9;margin:8px 0 20px}.sidebar{min-height:512px;display:flex;flex-direction:column;padding:20px 15px}.sidebar .section-heading,.sidebar .subtle{margin-left:5px;margin-right:5px}.layer-list{display:flex;flex-direction:column;gap:8px}.layer-card{position:relative;border:1px solid #eceef3;border-radius:11px;padding:12px 9px;display:flex;align-items:center;gap:10px;cursor:pointer;background:#fff;min-height:69px}.layer-card:hover{background:#f7f8fb}.layer-card.active{border-color:#bdb0f7;background:#f7f5ff;box-shadow:0 0 0 1px #ddd5fd}.layer-card.drag-over{border-style:dashed;border-color:var(--accent)}.layer-thumb{height:35px;width:35px;flex-shrink:0;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:18px;color:#8171cc}.layer-text{min-width:0;flex:1}.layer-text strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-text span{display:block;font-size:10px;color:#9699a9;margin-top:2px}.layer-order{font-size:9px;color:#b3b5c1;position:absolute;right:8px;top:5px}.reorder{display:flex;flex-direction:column;gap:1px;opacity:0}.layer-card:hover .reorder,.layer-card.active .reorder{opacity:1}.reorder button{width:19px;height:17px;border:0;border-radius:3px;background:transparent;color:#9c94b9;font-size:11px;padding:0}.reorder button:hover{background:#e6dffe}.add-button{border:1px dashed #d9dce7;background:white;color:#8c829e;border-radius:10px;font-size:11px;font-weight:600;width:100%;margin-top:16px;padding:11px}.add-button:hover{background:#f6f3ff;border-color:#a99be2}.sidebar-bottom{margin-top:auto;display:flex;gap:8px;align-items:center;padding:27px 4px 2px}.compat-dot{width:6px;height:6px;border-radius:50%;background:#67b98a}.sidebar-bottom strong{display:block;font-size:10px;color:#8b919e;font-weight:500}.sidebar-bottom span{display:block;font-size:9px;color:#b0b5be;margin-top:1px}.preview-column{display:flex;flex-direction:column;gap:16px;min-width:0}.preview-card{border-radius:17px;background:white;border:1px solid #e4e7ee;overflow:hidden}.preview-toolbar{display:flex;justify-content:space-between;gap:8px;align-items:center;background:#131723;padding:12px 17px;min-height:58px}.segmented{padding:3px;background:#232838;display:flex;gap:3px;border-radius:8px}.segmented button{background:none;border:0;color:#959bab;border-radius:5px;padding:6px 15px;font-size:11px;font-weight:600}.segmented button.selected{background:#394052;color:#e9eaf0}.preview-tools{display:flex;align-items:center;gap:6px;font-size:9px;color:#8b93a7}.live-dot{width:5px;height:5px;background:#6edaae;border-radius:50%;margin-right:2px}.iconbutton.dark{color:#99a2b5;width:25px;font-size:16px}.iconbutton.dark:hover{background:#282e40}.stage{position:relative;height:310px;background:#111521;background-image:radial-gradient(#252a3a 1px,transparent 1px);background-size:19px 19px;overflow:hidden}.stage canvas{display:block;width:100%;height:100%}.stage-meta{position:absolute;left:18px;right:18px;top:17px;display:flex;justify-content:space-between;color:#697386;font-size:9px;pointer-events:none}.stage-footer{position:absolute;bottom:13px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;color:#657087;font-size:9px}.stage-footer label{display:flex;gap:6px;align-items:center}.stage-footer input{accent-color:#8c78ed;width:11px;height:11px}.geometry-controls{padding:15px 17px 12px}.geometry-controls>div{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.geometry-controls label{font-size:10px;color:#9196a4;display:flex;align-items:center;gap:7px}.geometry-controls input{width:58px}.geometry-controls select{max-width:180px}.geometry-note{font-size:9px;color:#b2b6c0;margin:10px 0 0}.geometry-controls input,.geometry-controls select{font-size:10px;border:1px solid #e5e8ef;border-radius:6px;padding:6px 7px;color:#606779;background:#fff}.audio-card{padding:18px}.audio-icon{font-size:17px;color:#9897b3;margin-right:6px}.audio-card .section-heading select{font-size:10px;border:1px solid #e5e8ef;border-radius:6px;padding:6px 8px;color:#7c8292;background:#fff}.audio-info{font-size:9px;color:#a3a8b3;margin-top:5px;min-height:15px}.audio-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:23px;margin:18px 0}.band-control>div:first-child{display:flex;justify-content:space-between;align-items:center}.band-control label{font-size:11px;font-weight:600;color:#6e7687}.band-control span{font-size:10px;color:#a9a8b2}.band-control small{font-size:9px;color:#adb2bd;display:block;margin:4px 0 6px}.band-control input{width:100%;height:12px;accent-color:var(--band)}.bass{--band:#e8a48b}.mid{--band:#78bfb0}.high{--band:#a795dc}.meter{height:4px;border-radius:2px;background:#f0f1f6;margin-top:7px;overflow:hidden}.meter i{display:block;width:0;height:100%;background:var(--band);transition:width 50ms linear}.audio-bottom{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid #f0f1f5;padding-top:13px}.beat-buttons{display:flex;gap:7px}.beat-buttons .button{font-size:10px;padding:7px 9px}.beat-bass{color:#be876f;background:#fffaf8}.beat-high{color:#9b88c2;background:#fcfaff}.beat-buttons button.fired{background:#e4dcfa;transform:scale(.98)}.audio-tempo{display:flex;gap:12px}.audio-tempo label{display:flex;gap:5px;align-items:center;font-size:9px;color:#a5aab5}.audio-tempo input,.audio-tempo select{font-size:10px;border:1px solid #e6e8ef;border-radius:5px;padding:4px 5px;width:45px;color:#858b9a}.audio-tempo select{width:79px}.audio-file{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;font-size:10px;color:#a0a5b0}.audio-file audio{width:100%;height:29px}.global-card{padding:18px}.text-button{border:0;background:none;font-size:10px;color:#9b93c4;padding:0}.text-button:hover{color:var(--accent)}.global-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:19px;margin:17px 0}.global-grid label{font-size:10px;color:#969ba8;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:7px}.global-grid select{width:100%;border:1px solid #e8eaf0;font-size:10px;padding:6px;border-radius:6px;color:#7e8494;background:white}.global-grid input{width:100%;height:13px;accent-color:#a390df}.global-grid span{font-size:9px;color:#b4b7c2}.background-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid #f0f1f6;padding-top:12px;font-size:9px;color:#9b9fae}.checklabel{display:flex;align-items:center;gap:5px}.checklabel input{accent-color:#a593de;width:11px;height:11px;margin:0}.background-row input[type=color]{height:23px;width:28px;padding:1px;border:1px solid #e5e7ee;border-radius:5px;background:#fff}.background-row>label{display:flex;gap:5px;align-items:center}.background-row input[type=number]{width:36px;border:1px solid #e5e7ee;border-radius:4px;font-size:9px;padding:4px;color:#8a91a3}.background-row .exposure{margin-left:auto}.inspector{padding:20px}.inspector .section-heading{margin-bottom:20px}.field{margin-bottom:16px}.field>label{display:block;font-size:10px;color:#9ba0ad;margin-bottom:6px}.field select,.field input[type=number]{width:100%;padding:9px;border:1px solid #e4e7ed;border-radius:7px;color:#6f778a;font-size:11px;background:white}.field .field-top{display:flex;justify-content:space-between;font-size:10px;color:#9ba0ad;margin-bottom:7px}.field .field-top output{color:#797192}.field input[type=range]{width:100%;height:13px;accent-color:#a796df}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-row .field{margin-bottom:14px}.color-control{display:flex;gap:8px}.color-control input[type=color]{width:42px;height:34px;flex-shrink:0;border:1px solid #e4e7ed;padding:2px;border-radius:7px;background:white}.color-control select{min-width:0}.palette-strip{height:4px;border-radius:2px;background:linear-gradient(90deg,#ec6a75,#f0b56c,#bce08f,#77cfcc,#979bf2,#be8be5);margin-top:6px}.inspector details{border-top:1px solid #eff0f5;margin-top:20px;padding-top:13px;font-size:10px;color:#a1a5b4}.inspector summary{cursor:pointer;font-size:10px;color:#8f94a4;list-style:none}.inspector summary::after{content:'+';float:right;font-size:14px}.inspector details[open] summary::after{content:'−'}.inspector details[open] summary{margin-bottom:14px}.layer-actions{display:flex;gap:8px;margin-top:20px;padding-top:17px;border-top:1px solid #eff0f5}.layer-actions .button{font-size:10px;padding:8px 11px;flex:1}.danger{color:#bca0a4;border-color:#eadfe3}.danger:hover{color:#b95966;background:#fff5f7}.inspector-note{color:#b2b7c2;font-size:9px;line-height:1.8;margin-top:19px}.page-footer{margin:22px 32px;display:flex;justify-content:space-between;font-size:9px;color:#b1b5c0}.footer-dot{padding:0 6px}input[type=range]{cursor:pointer}dialog{border:1px solid #e4e5ed;border-radius:19px;padding:28px;width:min(700px,calc(100% - 28px));max-height:85vh;box-shadow:0 25px 100px #0f123633;color:var(--ink)}dialog::backdrop{background:#10132077;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.dialog-heading h2{font-size:21px;letter-spacing:-.6px}.dialog-heading .iconbutton{font-size:25px}.dialog-heading+p{font-size:12px;margin-bottom:20px}.preset-grid,.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.preset-card,.type-card{padding:0;background:white;text-align:left;border:1px solid #e5e7f0;border-radius:12px;overflow:hidden}.preset-card:hover,.type-card:hover{border-color:#b2a5e5;box-shadow:0 3px 16px #8d7dd214}.preset-art{height:85px;background:#151a29;display:flex;gap:7px;align-items:center;justify-content:center}.preset-art i{height:12px;width:12px;border-radius:50%;box-shadow:0 0 15px currentColor}.preset-info{padding:13px;display:flex;flex-direction:column;gap:4px;font-size:12px}.preset-info small{font-size:9px;color:#a2a7b4}.type-card{display:flex;align-items:center;gap:15px;padding:18px;font-size:12px}.type-card>span{font-size:23px;flex-shrink:0;color:#9e8ace}.type-card small{display:block;color:#a0a6b4;font-size:10px;margin-top:5px}.dialog-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}pre{padding:18px;border-radius:11px;background:#131827;color:#c5d5d7;font:11px/1.7 Consolas,monospace;max-height:50vh;overflow:auto;white-space:pre-wrap}.help-steps{padding-left:20px;color:#848b9b;font-size:12px}.help-steps li{padding:7px 0;line-height:1.8}.help-steps b{color:#606b81}#helpDialog details{padding:12px 0;border-top:1px solid #eceef3;font-size:12px;color:#848b9b}#helpDialog summary{cursor:pointer;color:#656f83}#helpDialog p{line-height:1.8}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);padding:11px 18px;border-radius:11px;background:#26283b;color:white;font-size:12px;box-shadow:0 5px 20px #25274528;opacity:0;pointer-events:none;transition:.2s;max-width:90%;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#944c59}.field input[aria-invalid=true],input[aria-invalid=true]{border-color:#da8397;outline:2px solid #e9adbd}.preview-card:fullscreen{width:100%;height:100%;border:0;background:#111521;display:flex;flex-direction:column;border-radius:0}.preview-card:fullscreen .stage{flex:1;height:auto}.preview-card:fullscreen .geometry-controls{background:white}
@media(min-width:1800px){.workspace,.projectbar,.topbar,.page-footer{max-width:1700px;margin-left:auto;margin-right:auto}.workspace{max-width:1636px}.page-footer{padding:0 32px}.stage{height:390px}}
@media(max-width:1180px){.workspace{grid-template-columns:205px minmax(310px,1fr) 265px;gap:13px;margin:0 20px}.topbar{padding:0 20px}.projectbar{padding:22px 20px}.header-caption{display:none}.inspector{padding:17px}.previewState{display:none}.audio-grid{gap:14px}.global-grid{gap:12px}.audio-tempo{gap:8px}.top-actions{gap:5px}.button.quiet{font-size:11px}}
@media(max-width:970px){.workspace{grid-template-columns:220px 1fr;grid-template-areas:'side preview' 'inspector preview'}.sidebar{grid-area:side;min-height:370px}.preview-column{grid-area:preview}.inspector{grid-area:inspector}.preview-tools>span:not(.live-dot){display:none}.stage{height:300px}.topbar{height:64px}.project-title input{width:320px;font-size:21px}.topbar .quiet:first-child{display:none}.background-row .exposure{margin-left:0}.audio-grid{gap:12px}.audio-tempo{width:100%;justify-content:space-between}}
@media(max-width:650px){.topbar{padding:0 15px;height:62px;gap:8px}.brand{font-size:19px;gap:7px}.brand img{width:26px;height:26px}.brand small{font-size:7px}.top-actions .button{font-size:10px;padding:8px 9px}.top-actions .quiet span{display:none}.projectbar{padding:20px 15px 17px;gap:8px}.project-title{min-width:0}.project-title input{width:100%;font-size:19px}.eyebrow{font-size:8px}.project-actions .divider{display:none}.project-actions .button{padding:7px 10px;font-size:10px}.iconbutton{width:25px;font-size:20px}.workspace{display:flex;flex-direction:column;gap:14px;margin:0 12px}.preview-column{order:0;width:100%;gap:12px}.sidebar{order:1;width:100%;min-height:0}.inspector{order:2;width:100%}.sidebar-bottom{display:none}.layer-list{display:grid;grid-template-columns:1fr 1fr}.layer-card{min-height:66px;padding:11px 7px;gap:7px}.layer-text strong{font-size:11px}.reorder{opacity:1}.add-button{margin-top:10px}.stage{height:265px}.geometry-controls{padding:13px}.geometry-controls>div{gap:9px}.geometry-controls select{max-width:163px}.audio-card,.global-card{padding:15px}.audio-grid{gap:15px;margin:14px 0}.audio-tempo{width:auto}.global-grid{gap:14px}.global-grid select{max-width:110px}.background-row{gap:8px}.page-footer{margin:18px 15px 24px;gap:15px}.page-footer>span:first-child{max-width:70%}.field-row{gap:14px}.inspector{padding:19px}.inspector-note{margin-top:13px;font-size:10px}.layer-actions{margin-top:13px}.type-grid,.preset-grid{gap:9px}.type-card{padding:12px;gap:8px;font-size:11px}.type-card small{font-size:9px}.preset-art{height:68px}.preset-info{padding:10px;font-size:11px}.preset-art i{width:9px;height:9px}.dialog-heading h2{font-size:18px}dialog{padding:20px}.top-actions{gap:2px}.field select{padding:11px}.preview-toolbar{padding:11px 13px}.audio-grid input{height:17px}.background-row .exposure{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.live-dot{animation:none}}
.layer-thumb.custom-thumb{background:#292e40}