*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a0c;--sidebar: #111113;--field: #18181b;--hairline: rgba(255, 255, 255, .07);--hairline-strong: rgba(255, 255, 255, .16);--text: #ededf0;--text-2: #a1a1a8;--text-3: #63636b;--primary: #fafafa;--primary-text: #111113}html,body{height:100%}body{font-family:Segoe UI Variable Text,Segoe UI,Hiragino Sans,Yu Gothic UI,sans-serif;font-size:13px;background:var(--bg);color:var(--text);overflow:hidden;-webkit-font-smoothing:antialiased}#app{display:flex;height:100vh}#sidebar{width:300px;min-width:300px;background:var(--sidebar);border-right:1px solid var(--hairline);overflow-y:auto;padding:0 16px 24px;display:flex;flex-direction:column}#sidebar::-webkit-scrollbar{width:8px}#sidebar::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px;background-clip:padding-box;border:2px solid transparent}#sidebar::-webkit-scrollbar-track{background:transparent}.brand{padding:18px 2px 16px;border-bottom:1px solid var(--hairline);margin-bottom:4px}.brand h1{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--text)}.brand p{font-size:11px;color:var(--text-3);margin-top:3px}.panel{padding:16px 2px 18px;border-bottom:1px solid var(--hairline)}.panel:last-of-type{border-bottom:none}.panel h2{font-size:10.5px;font-weight:600;color:var(--text-3);letter-spacing:.09em;margin-bottom:10px}.dropzone{border:1px dashed var(--hairline-strong);border-radius:8px;background:transparent;padding:12px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:border-color .12s,background .12s}.dropzone:hover,.dropzone.dragover{border-color:#ffffff59;background:#ffffff05}.dropzone img{width:44px;height:44px;border-radius:10px;object-fit:cover;display:none}.dropzone.has-icon img{display:block}.dz-text{display:flex;flex-direction:column;gap:2px;min-width:0}.dz-text strong{font-size:12px;font-weight:500;color:var(--text-2)}.dz-text span{font-size:11px;color:var(--text-3)}.ghost-btn{margin-top:8px;width:100%;padding:6px;font-size:11.5px;font-family:inherit;color:var(--text-2);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:color .12s,background .12s}.ghost-btn:hover{color:var(--text);background:#ffffff0d}.panel input[type=text]{width:100%;padding:8px 10px;margin-bottom:8px;font-size:12.5px;font-family:inherit;color:var(--text);background:var(--field);border:1px solid var(--hairline);border-radius:6px;outline:none;transition:border-color .12s}.panel input[type=text]:last-child{margin-bottom:0}.panel input[type=text]:focus{border-color:var(--hairline-strong)}.panel input::placeholder{color:var(--text-3)}.theme-list{display:flex;flex-direction:column;gap:2px}.theme-card{display:flex;align-items:center;gap:10px;padding:7px 8px;background:transparent;border:1px solid transparent;border-radius:7px;cursor:pointer;text-align:left;font-family:inherit;transition:background .12s,border-color .12s}.theme-card:hover{background:#ffffff0a}.theme-card.active{background:#ffffff0f;border-color:var(--hairline-strong)}.theme-swatch{width:26px;height:26px;border-radius:7px;flex-shrink:0;box-shadow:inset 0 0 0 1px #ffffff1a}.theme-info{min-width:0}.theme-info strong{font-size:12.5px;font-weight:500;display:block;color:var(--text)}.theme-info span{font-size:11px;color:var(--text-3)}.opt-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.opt-row:last-child{margin-bottom:0}.opt-row label{font-size:11.5px;color:var(--text-3);width:28px;flex-shrink:0}.seg-group{display:flex;flex:1;background:var(--field);border:1px solid var(--hairline);border-radius:7px;padding:2px;gap:2px}.seg-group button{flex:1;padding:5px 0;font-size:11.5px;font-family:inherit;color:var(--text-3);background:transparent;border:none;border-radius:5px;cursor:pointer;transition:color .12s,background .12s}.seg-group button:hover{color:var(--text-2)}.seg-group button.active{color:var(--text);background:#ffffff17;box-shadow:0 1px 2px #0000004d}.export-panel{margin-top:auto;padding-bottom:0}.primary-btn{width:100%;padding:9px;font-size:12.5px;font-weight:600;font-family:inherit;color:var(--primary-text);background:var(--primary);border:none;border-radius:7px;cursor:pointer;transition:background .12s}.primary-btn:hover:not(:disabled){background:#fff}.primary-btn:active:not(:disabled){background:#e4e4e7}.primary-btn:disabled{opacity:.4;cursor:wait}.progress{margin-top:10px;display:flex;align-items:center;gap:10px}.progress.hidden{display:none}.progress-bar{flex:1;height:3px;background:var(--field);border-radius:2px;overflow:hidden}#progress-fill{height:100%;width:0%;background:var(--primary);border-radius:2px;transition:width .15s}#progress-label{font-size:11px;color:var(--text-3);min-width:32px;text-align:right;font-variant-numeric:tabular-nums}.note{margin-top:9px;font-size:11px;color:var(--text-3);text-align:center}#stage-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 32px 24px;gap:16px;min-width:0;background:var(--bg)}#canvas-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;flex:1;min-height:0}#stage-canvas{border-radius:6px;box-shadow:0 0 0 1px var(--hairline),0 16px 48px #00000080;max-width:100%;max-height:100%}#timeline-bar{width:min(480px,80%);height:2px;background:#ffffff14;border-radius:1px;overflow:hidden}#timeline-fill{height:100%;width:0%;background:#ffffff8c}