:root{--left-width:390px;--right-width:320px;--ui-bg:#111113;--ui-panel:#19191c;--ui-surface:#242429;--ui-border:#39393f;--ui-text:#eeeceb;--ui-muted:#aaa8ac;--ui-accent:#c8c5c7;--ui-accent-text:#171719;--ui-focus:#e4d7dc;--accent:var(--ui-accent);--line:var(--ui-border);--muted:var(--ui-muted);--panel:var(--ui-panel);color:var(--ui-text);background:var(--ui-bg)}
body[data-theme=classic]{--ui-bg:#0e090d;--ui-panel:#181015;--ui-surface:#2a1922;--ui-border:#54323f;--ui-text:#fff0f4;--ui-muted:#bea7af;--ui-accent:#f46085;--ui-accent-text:#240b14;--ui-focus:#ff9cba}
body[data-theme=contrast]{--ui-bg:#080808;--ui-panel:#151515;--ui-surface:#252525;--ui-border:#eee;--ui-text:#fff;--ui-muted:#d4d4d4;--ui-accent:#fff;--ui-accent-text:#090909;--ui-focus:#fff}
body{color:var(--ui-text);background:var(--ui-bg)}button,input,select{border-color:var(--ui-border);color:var(--ui-text);background:var(--ui-surface)}button:hover{border-color:var(--ui-accent);background:color-mix(in srgb,var(--ui-surface) 76%,var(--ui-accent))}.primary{background:var(--ui-accent);color:var(--ui-accent-text);border-color:var(--ui-accent)}.primary:hover{background:var(--ui-text);color:var(--ui-accent-text)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
@media(min-width:901px){#app{grid-template-columns:var(--left-width) 6px minmax(280px,1fr) 6px var(--right-width);grid-template-rows:64px minmax(0,1fr);grid-template-areas:'head head head head head' 'side left-resize main right-resize right'}.editor-sidebar{grid-area:side}.workspace{grid-area:main}.inspector{grid-area:right}.pane-resize#left-resize{grid-area:left-resize}.pane-resize#right-resize{grid-area:right-resize}body.left-closed #app{grid-template-columns:0 6px minmax(280px,1fr) 6px var(--right-width)}body.right-closed #app{grid-template-columns:var(--left-width) 6px minmax(280px,1fr) 6px 0}body.left-closed.right-closed #app{grid-template-columns:0 6px minmax(280px,1fr) 6px 0}body.left-closed .editor-sidebar,body.right-closed .inspector{visibility:hidden;overflow:hidden}.pane-resize{cursor:col-resize;background:var(--ui-border);touch-action:none;z-index:4}.pane-resize:hover{background:var(--ui-accent)}}
.topbar{background:var(--ui-panel);border-color:var(--ui-border);gap:12px}.brand{font-size:17px;letter-spacing:.1em}.brand span{color:var(--ui-muted)}.project-name{font-size:0;margin-right:auto}.project-name input{max-width:26vw;width:210px;background:transparent;border-color:transparent;font-size:13px;text-overflow:ellipsis}.project-name input:focus{border-color:var(--ui-accent);background:var(--ui-surface)}.top-actions{margin-left:0}.top-actions button{min-height:36px}.save-state{align-self:center;font-size:11px;color:var(--ui-muted);white-space:nowrap}.pane-toggle{min-width:35px;padding:7px}
.editor-sidebar{background:var(--ui-panel);border-color:var(--ui-border);grid-template-columns:95px minmax(0,1fr)}.tabs{border-color:var(--ui-border)}.tabs button{color:var(--ui-muted);font-size:12px}.tabs button.active{color:var(--ui-text);background:var(--ui-surface)}.panel-scroll{scrollbar-width:thin;scrollbar-color:var(--ui-border) transparent}.panel{padding:20px 15px}.panel h2{font-size:16px}.panel label{color:var(--ui-text)}.settings-section,.layer-section{border-color:var(--ui-border)}.settings-section>summary,.layer-section>summary{color:var(--ui-text)}.settings-section>summary::after,.layer-section>summary::after{color:var(--ui-accent)}.settings-section[open],.layer-section[open]{border-left-color:var(--ui-accent)}.settings-section>summary:hover,.layer-section>summary:hover{background:var(--ui-surface);color:var(--ui-text)}
.workspace{display:flex;justify-content:center;gap:0;padding:18px;min-height:0;background:var(--ui-bg)}.preview-toolbar,#stage,#status,.transport{max-width:100%}.preview-toolbar{width:min(100%,1000px)}.preview-toolbar #fullscreen{display:none}#stage{border-color:var(--ui-border);flex:none}.transport{width:var(--transport-width,82%);min-height:62px;padding:10px 12px;margin-top:10px;flex:none;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-panel)}.transport button{min-width:auto}.transport #fullscreen{font-size:11px}.transport label{white-space:nowrap}.transport #time{color:var(--ui-muted)}
.timeline{position:relative;flex:1;height:42px;display:flex;align-items:flex-end;min-width:70px;cursor:pointer}.timeline #seek{position:absolute;inset:auto 0 0;width:100%;margin:0;z-index:2;height:14px}.waveform{position:absolute;inset:auto 0 4px;width:100%;height:34px;opacity:0;transform:scaleY(.07);transform-origin:bottom;transition:opacity .18s,transform .18s;pointer-events:none}.timeline:hover .waveform,.timeline.scrubbing .waveform{opacity:.8;transform:scaleY(1)}@media(hover:none){.timeline:focus-within .waveform{opacity:.75;transform:scaleY(1)}}
.inspector{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--ui-panel);border-left:1px solid var(--ui-border)}.inspector>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ui-border);padding:12px 15px}.inspector h2{margin:0}.inspector h3{margin:0 0 4px;font-size:15px;color:var(--ui-text)}.inspector #inspector-scroll{overflow:auto;padding:16px;scrollbar-width:thin}.inspector-field{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ui-muted);font-size:12px;margin:11px 0}.inspector-field input{width:95px;min-width:0;padding:7px}.inspector-field input[type=color]{height:35px;padding:2px}.inspector-field input[type=checkbox]{width:auto}.inspector-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.inspector-grid .inspector-field{display:block}.inspector-grid input{display:block;width:100%;margin-top:4px}.inspector select{padding:8px;width:100%;margin:8px 0}.inspector button{font-size:12px}.inspector-detail{border-top:1px solid var(--ui-border);padding:11px 0}.inspector-detail>summary{cursor:pointer;font-size:13px;font-weight:600}.inspector-detail-body{padding:8px 0}.inspector-detail-body button{margin-top:6px}
.layer-actions button{font-size:11px;margin:0 0 7px}.layer-tools{display:flex;gap:6px;margin:8px 0}.layer-tools button{font-size:11px;margin:0}.layer-tools input{flex:1;min-width:0;padding:7px}.layer-row{display:flex;align-items:center;min-height:42px;gap:3px;padding-left:calc(var(--depth)*13px);border-radius:5px;border:1px solid transparent}.layer-row.chosen{background:var(--ui-surface);border-color:var(--ui-accent)}.layer-row.drop-target{border-top:2px solid var(--ui-accent)}.layer-row button{padding:4px;margin:0;min-width:20px;border:0;background:transparent;color:var(--ui-muted);font-size:12px}.layer-row button:hover{color:var(--ui-text)}.layer-row .layer-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-text);font-size:11px}.layer-row .layer-fold{width:14px;flex:none}.layer-thumb{width:30px;height:30px;flex:none;display:grid;place-items:center;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:4px;font-weight:700;overflow:hidden}.layer-thumb canvas{max-width:100%;max-height:100%}.layer-row .layer-audio:disabled{opacity:.3;cursor:not-allowed}.layer-link[aria-pressed=true]{color:var(--ui-accent)!important}.lock-pulse{animation:lock-pulse .6s ease}@keyframes lock-pulse{50%{background:var(--ui-accent)!important;color:var(--ui-accent-text)!important}}
#stage{touch-action:none}.scene-overlay{position:absolute;inset:0;z-index:4;pointer-events:none}.scene-selection{position:absolute;border:1px solid var(--ui-accent);box-shadow:0 0 0 1px #0009;transform-origin:center;pointer-events:auto;cursor:move}.scene-selection::before{content:'';position:absolute;inset:-7px;border:1px dashed var(--ui-accent);opacity:.4}.scene-selection button{position:absolute;width:22px;height:22px;padding:0;border-radius:50%;background:var(--ui-accent);border:2px solid var(--ui-bg);pointer-events:auto}.handle-resize{right:-11px;bottom:-11px;cursor:nwse-resize}.handle-rotate{left:50%;top:-31px;transform:translateX(-50%);cursor:grab}.scene-inline{position:absolute;z-index:8;padding:6px;font-size:18px;background:var(--ui-panel);color:var(--ui-text);border:2px solid var(--ui-accent)}#start{z-index:6}
.project-commands{margin-bottom:16px}.project-commands .row>*{flex:1;min-width:0}.project-commands button{font-size:11px}.project-commands .file{font-size:10px;padding:6px}.project-commands input[type=file]{font-size:10px}
dialog{background:var(--ui-panel);border-color:var(--ui-border);color:var(--ui-text)}dialog .hint{color:var(--ui-muted)}.settings-dialog{max-width:350px}.settings-dialog select{display:block;width:100%;padding:8px;margin:8px 0}.library-dialog{width:min(650px,calc(100vw - 24px));max-height:85vh;overflow:auto}.library-row{display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--ui-border);padding:12px 0;flex-wrap:wrap}.library-row strong{flex:1}.library-row small{color:var(--ui-muted)}.composition-dialog{width:min(850px,calc(100vw - 24px));max-width:none;max-height:85vh;overflow:auto}.composition-dialog header,.font-dialog header{display:flex;align-items:center;justify-content:space-between}.composition-dialog #composition-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.composition-card{padding:8px;text-align:left}.composition-card.active{border-color:var(--ui-accent);outline:2px solid var(--ui-accent)}.composition-preview{display:block;aspect-ratio:16/9;background:#0e0a0e;position:relative;margin-bottom:8px;overflow:hidden}.composition-preview i{position:absolute;width:42%;aspect-ratio:1;border:3px solid #dcd5d9;border-radius:50%;left:29%;top:13%;box-shadow:0 0 18px #e6b7d0}.composition-preview b,.composition-preview em{position:absolute;left:9%;bottom:22%;font-size:10px;color:#eee}.composition-preview em{bottom:8%;font-size:14px;font-weight:700;font-style:normal}.composition-actions{display:flex;gap:4px}.composition-actions button{font-size:10px}.composition-dialog>.row{justify-content:flex-end;margin-top:18px}.font-dialog{width:min(500px,calc(100vw - 24px));max-height:85vh;overflow:auto}.font-dialog #font-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.font-choice{text-align:left;font-size:19px;min-height:52px}
#app:fullscreen .inspector,#app:fullscreen .pane-resize,#app:fullscreen .topbar,#app:fullscreen .editor-sidebar{display:none}#app:fullscreen .transport{position:absolute;bottom:0;left:50%;transform:translate(-50%,100%);z-index:15;width:min(800px,94vw);opacity:0;transition:opacity .2s,transform .2s}#app:fullscreen:hover .transport,#app:fullscreen .transport:hover,#app:fullscreen .transport:focus-within{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){html,body{height:auto;overflow:auto}#app{display:flex;flex-direction:column;min-height:100dvh}.topbar{order:0;flex-wrap:wrap}.workspace{order:1;position:sticky;top:0;z-index:6;min-height:0;padding:8px 10px;background:var(--ui-bg)}.editor-sidebar{order:2;display:flex;flex-direction:column;min-height:48px;height:min(45dvh,440px);resize:vertical;overflow:auto;border-top:1px solid var(--ui-border)}.editor-sidebar .tabs{flex:none;position:sticky;top:0;z-index:2;background:var(--ui-panel)}.editor-sidebar .panel-scroll{overflow:auto;max-height:none;flex:1}.inspector{order:3;min-height:240px;max-height:45dvh}.pane-resize{display:none}.transport{width:min(100%,560px);margin-top:5px;gap:7px;flex-wrap:nowrap;padding:7px}.transport label{display:none}.transport #fullscreen{font-size:10px}.transport #time{font-size:10px}.workspace #stage{max-height:31dvh!important}.topbar .brand{font-size:14px}.topbar .brand span{display:none}.project-name input{max-width:38vw}.top-actions{width:auto}.top-actions #save-state{display:none}.top-actions button{font-size:11px}.inspector #inspector-scroll{min-height:180px}.scene-selection button{width:26px;height:26px}body.left-closed .editor-sidebar{height:48px;min-height:48px;resize:none}body.left-closed .editor-sidebar .panel-scroll{display:none}body.right-closed .inspector{display:none}}
@media(max-width:550px){.topbar{padding:7px;gap:6px}.brand{width:100%;font-size:13px!important}.top-actions{margin-left:auto}.top-actions #save{padding:6px}.workspace #stage{max-height:26dvh!important}.transport{gap:4px}.transport button{padding:6px}.transport #volume{display:none}.transport #time{font-size:9px}.preview-toolbar{font-size:9px}.inspector-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.waveform,#app:fullscreen .transport,.lock-pulse{animation:none;transition:none}}
.layer-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.sheet-handle{display:none}@media(max-width:900px){.sheet-handle{display:block;flex:none;height:14px;touch-action:none;cursor:ns-resize;position:sticky;top:0;z-index:4;background:var(--ui-panel)}.sheet-handle::before{content:'';display:block;width:42px;height:4px;border-radius:5px;background:var(--ui-border);margin:5px auto}.editor-sidebar{resize:none!important}}
@media(max-width:900px){body.left-closed .sheet-handle{display:none}}
.intro{animation:stage01-intro-appear .7s ease}.intro-core{animation-duration:.7s}@keyframes stage01-intro-appear{from{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.intro{animation:none}}
.composition-preview canvas{display:block;width:100%;height:100%;object-fit:cover}
.scene-guide{position:absolute;z-index:5;pointer-events:none;background:var(--ui-accent);opacity:.85}.scene-guide.vertical{top:0;bottom:0;width:1px}.scene-guide.horizontal{left:0;right:0;height:1px}
#app:fullscreen:hover .transport{opacity:0;transform:translate(-50%,100%)}#app:fullscreen.controls-active .transport,#app:fullscreen .transport:hover,#app:fullscreen .transport:focus-within{opacity:1;transform:translate(-50%,0)}
.font-choice span,.font-choice small{display:block}.font-choice small{font:10px Arial,Helvetica,sans-serif;color:var(--ui-muted);margin-top:3px}