:root{color:#dbeafe;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;letter-spacing:0;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#070a12;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0;overflow:hidden}button,input,select,textarea{letter-spacing:0}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline-offset:2px;outline:2px solid #40f3ff}@media (width<=920px){body{overflow:auto}}.app-shell{color:#dbeafe;background:linear-gradient(90deg,#40f3ff0f,#0000 24%),linear-gradient(#ff4fd80d,#0000 42%),#070a12;grid-template:"header header header"78px"assets workspace settings"minmax(0,1fr)"transport transport transport"118px"footer footer footer"32px/300px minmax(0,1fr) 340px;height:100svh;min-height:100svh;display:grid;overflow:hidden}.app-header{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#040814bd;border-bottom:1px solid #94a3b829;grid-area:header;justify-content:space-between;align-items:center;gap:20px;min-width:0;padding:0 22px;display:flex;position:relative}.app-brand{grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;min-width:0;display:grid}.app-brand>div{min-width:0}.app-brand-logo{object-fit:cover;background:#070a12;border:1px solid #40f3ff33;border-radius:8px;width:44px;height:44px;display:block;box-shadow:0 0 18px #40f3ff24,0 0 24px #ff4fd81a}.app-header h1{color:#f8fbff;letter-spacing:0;margin:0;font-size:24px;font-weight:760}.app-header p{color:#8ea3b8;margin:2px 0 0;font-size:13px}.workspace{border-inline:1px solid #94a3b829;grid-area:workspace;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;display:grid;position:relative}.workspace.has-guide{grid-template-rows:auto minmax(0,1fr)}.workspace-guide{background:linear-gradient(90deg,#40f3ff14,#0000 38%),#050a18eb;border-bottom:1px solid #94a3b829;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr) 36px;align-items:start;gap:16px;min-width:0;padding:14px 16px;display:grid}.workspace-guide h2,.workspace-guide p{margin:0}.workspace-guide h2{color:#f8fbff;font-size:14px;font-weight:760}.workspace-guide p{color:#b7c7d8;margin-top:4px;font-size:12px;line-height:1.45}.workspace-guide-item span{color:#7dd3fc;font-size:11px;font-weight:760}.guide-close-button{align-self:start}.status-pill{color:#8ea3b8;text-transform:uppercase;justify-items:end;gap:2px;min-width:180px;font-size:11px;display:grid}.status-pill strong{color:#ecfeff;text-overflow:ellipsis;text-transform:none;white-space:nowrap;max-width:260px;font-size:13px;font-weight:620;overflow:hidden}.status-pill span{text-overflow:ellipsis;white-space:nowrap;max-width:260px;overflow:hidden}.notice-banner{z-index:4;color:#d1fae5;text-align:center;background:#072624eb;border:1px solid #37ff8b57;border-radius:7px;max-width:min(520px,100% - 44px);padding:9px 14px;font-size:12px;font-weight:680;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 14px 40px #00000047}.side-panel{background:#080d1bf0;min-height:0;overflow:auto}.asset-panel{grid-area:assets}.settings-panel{grid-area:settings}.panel-heading{z-index:2;background:#080d1bf0;border-bottom:1px solid #94a3b829;justify-content:space-between;align-items:center;gap:16px;padding:17px 18px;display:flex;position:sticky;top:0}.panel-heading span{color:#90a4b8;text-transform:uppercase;font-size:12px;font-weight:700}.panel-heading strong{color:#f8fbff;font-size:13px;font-weight:720}.panel-section{border-bottom:1px solid #94a3b821;padding:17px 18px}.panel-section h2{color:#f8fbff;margin:0 0 12px;font-size:14px;font-weight:720}.upload-button{color:#e0f2fe;cursor:pointer;background:#0f172adb;border:1px solid #40f3ff47;border-radius:7px;grid-template-columns:20px minmax(0,1fr) 18px;align-items:center;gap:10px;min-height:42px;padding:0 12px;font-size:13px;font-weight:650;display:grid}.upload-button:hover{background:#112236f5;border-color:#40f3ffb8}.upload-button input{display:none}.asset-readout{color:#90a4b8;justify-content:space-between;align-items:center;gap:12px;min-height:31px;margin-top:10px;font-size:12px;display:flex}.asset-readout span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.asset-readout strong{color:#f7ff5c;font-size:12px}.asset-remove-button{color:#fecaca;cursor:pointer;background:#7f1d1d33;border:1px solid #fecaca38;border-radius:6px;place-items:center;min-width:28px;min-height:28px;display:grid}.asset-remove-button:hover{background:#7f1d1d57;border-color:#fecacaa3}.error-text{color:#fecaca;margin:10px 0 0;font-size:12px;line-height:1.5}.preview-frame{background-color:#020617d6;background-image:linear-gradient(#94a3b80f 1px,#0000 1px),linear-gradient(90deg,#94a3b80f 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;place-items:center;min-width:0;min-height:0;padding:22px;display:grid}.preview-canvas{object-fit:contain;background:#020617;border:1px solid #e2e8f029;border-radius:8px;width:auto;max-width:100%;height:auto;max-height:100%;display:block;box-shadow:0 24px 70px #0000006b}.preview-canvas.draggable-artwork{cursor:grab}.preview-canvas.draggable-artwork:active{cursor:grabbing}.field-row{color:#90a4b8;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:10px;min-height:36px;font-size:12px;display:grid}.field-row+.field-row,.toggle-row+.toggle-row{margin-top:8px}.field-row span,.toggle-row span{min-width:0}input,select,button{font:inherit}input[type=text],select{box-sizing:border-box;color:#f8fbff;background:#0f172ae6;border:1px solid #94a3b838;border-radius:6px;outline:none;width:100%;min-width:0;min-height:34px}input[type=text]{padding:0 10px}select{padding:0 8px}input[type=color]{background:0 0;border:1px solid #94a3b838;border-radius:6px;width:100%;height:32px;padding:0}input[type=range]{accent-color:#40f3ff;width:100%}.template-actions{grid-template-columns:minmax(0,1fr) 36px 36px 36px;gap:8px;margin-top:10px;display:grid}.select-with-swatches{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;display:grid}.inline-swatches{align-items:center;gap:4px;display:inline-flex}.inline-swatches i{border:1px solid #ffffff38;border-radius:50%;width:16px;height:16px;display:block}.font-select{grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:8px;min-width:0;display:grid}.font-preview{color:#f8fbff;background:#02061794;border:1px solid #94a3b838;border-radius:6px;place-items:center;min-height:34px;font-size:15px;font-weight:800;display:grid}.icon-button,.round-button,.export-button{color:#e0f2fe;cursor:pointer;border:1px solid #94a3b838}.icon-button{background:#0f172ae6;border-radius:6px;place-items:center;min-width:36px;min-height:34px;display:grid}.icon-button:hover,.round-button:hover,.export-button:hover{border-color:#40f3ffad}.icon-button:disabled{cursor:not-allowed;opacity:.42}.danger-button{color:#fecaca}.danger-button:hover:not(:disabled){background:#7f1d1d38;border-color:#fecacaa3}.toggle-row{color:#dbeafe;align-items:center;gap:10px;min-height:30px;font-size:12px;display:flex}.toggle-row input{accent-color:#37ff8b}.transport-bar{background:#050a18fa;border-top:1px solid #94a3b829;grid-area:transport;grid-template-rows:minmax(28px,auto) 48px;grid-template-columns:180px minmax(0,1fr) 190px;align-items:stretch;gap:8px 16px;padding:16px 18px;display:grid}.transport-buttons{grid-area:2/1;align-self:center;gap:10px;display:flex}.volume-control{color:#90a4b8;grid-area:1/1;grid-template-columns:16px minmax(0,1fr) 38px;align-self:center;align-items:center;gap:8px;min-width:0;font-size:11px;display:grid}.volume-control svg{color:#dbeafe}.volume-control input{min-width:0}.volume-control strong{color:#f8fbff;text-align:right;font-size:11px;font-weight:680}.round-button{background:#0f172aeb;border-radius:50%;place-items:center;width:42px;height:42px;display:grid}.round-button:disabled,.export-button:disabled{cursor:not-allowed;opacity:.45}.timeline{grid-area:1/2/3;gap:8px;min-width:0;display:grid}.waveform-toolbar{grid-template-columns:minmax(120px,1fr) auto;align-items:center;gap:14px;display:grid}.time-readout{color:#90a4b8;justify-content:space-between;font-size:12px;display:flex}.time-readout strong{color:#f8fbff}.waveform-controls{align-items:center;gap:8px;display:flex}.waveform-controls label{color:#90a4b8;grid-template-columns:auto minmax(78px,auto);align-items:center;gap:6px;font-size:11px;display:inline-grid}.waveform-controls select{min-height:28px;padding:0 7px;font-size:12px}.waveform-strip{cursor:pointer;border:1px solid #94a3b82e;border-radius:6px;width:100%;height:48px}.export-actions{grid-area:2/3;align-self:center;min-width:0;display:grid}.export-button{color:#f8fbff;background:linear-gradient(135deg,#40f3ff3d,#37ff8b29);border-radius:7px;justify-content:center;align-items:center;gap:9px;min-height:42px;padding:0 15px;font-size:13px;font-weight:760;display:inline-flex}.export-button span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.app-footer{color:#90a4b8;background:#040814f5;border-top:1px solid #94a3b829;grid-area:footer;justify-content:space-between;align-items:center;gap:14px;min-width:0;padding:0 18px;font-size:11px;display:flex}.app-footer strong{color:#f8fbff;font-size:12px;font-weight:760}.app-footer span{text-align:right;text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.app-footer a{color:#7dd3fc;text-decoration:none}.app-footer a:hover{color:#bae6fd;text-decoration:underline}@media (width<=1180px){.app-shell{grid-template-columns:260px minmax(0,1fr) 300px}.field-row{grid-template-columns:96px minmax(0,1fr)}}@media (width<=920px){.app-shell{grid-template:"header""workspace""assets""settings""transport""footer"/1fr;height:auto;overflow:visible}.app-header{flex-direction:column;align-items:flex-start;padding:18px 22px}.notice-banner{max-width:100%;position:static;transform:none}.status-pill{justify-items:start;min-width:0}.workspace{border-inline:0;min-height:66svh}.workspace-guide{grid-template-columns:minmax(0,1fr) 36px;gap:10px 12px;padding:12px 16px}.workspace-guide-intro,.workspace-guide-item{grid-column:1}.workspace-guide-item{grid-template-columns:52px minmax(0,1fr);align-items:start;gap:8px;display:grid}.workspace-guide-item p{margin-top:0}.guide-close-button{grid-area:1/2}.side-panel{overflow:visible}.transport-bar{grid-template-rows:minmax(28px,auto) 48px auto;grid-template-columns:minmax(160px,auto) minmax(0,1fr);position:static}.volume-control{grid-area:1/1}.transport-buttons{grid-area:2/1}.timeline{grid-area:1/2/3}.waveform-toolbar{grid-template-columns:1fr}.waveform-controls{justify-content:space-between}.export-actions{grid-area:3/1/auto/-1}}@media (width<=560px){.transport-bar{grid-template-rows:auto auto auto auto;grid-template-columns:1fr}.volume-control,.transport-buttons,.timeline,.export-actions{grid-column:1}.volume-control{grid-row:1}.transport-buttons{grid-row:2}.timeline{grid-row:3}.export-actions{grid-row:4}.app-footer{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 18px}.app-footer span{text-align:left;white-space:normal}}