@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap";:root{--bg-primary:#0a0d16;--bg-surface:#121826bf;--bg-surface-elevated:#1c2438d9;--bg-card:#ffffff0a;--bg-card-hover:#ffffff14;--border-subtle:#ffffff14;--border-focus:#00f2fe;--accent-win-blue:#0078d4;--accent-cyan:#00f2fe;--accent-magenta:#f43f5e;--accent-purple:#a855f7;--accent-gold:#fbbf24;--accent-green:#22c55e;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--font-main:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--shadow-window:0 16px 36px #00000080;--shadow-glow:0 0 20px #00f2fe59}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{font-family:var(--font-main);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;flex-direction:column;height:100vh;display:flex;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#00f2fe66}.top-navbar{background:var(--bg-surface);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);z-index:100;justify-content:space-between;align-items:center;gap:16px;height:56px;padding:0 16px;display:flex}.brand-section{align-items:center;gap:12px;display:flex}.logo-badge{letter-spacing:-.02em;background:linear-gradient(135deg,#00f2fe,#4facfe,#0078d4);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:8px;font-size:1.15rem;font-weight:800;display:flex}.logo-icon{-webkit-text-fill-color:initial;filter:drop-shadow(0 0 8px #00f2fe99);font-size:1.4rem}.episode-picker-wrap{background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);align-items:center;gap:6px;padding:4px 10px;display:flex}.episode-select{color:var(--text-primary);font-family:var(--font-main);cursor:pointer;background:0 0;border:none;outline:none;font-size:.85rem;font-weight:600}.episode-select option{color:#fff;background:#111827}.playback-controls{align-items:center;gap:8px;display:flex}.speed-picker-wrap{background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);align-items:center;gap:4px;padding:4px 10px;transition:all .15s;display:flex}.speed-picker-wrap:hover{border-color:var(--accent-cyan)}.speed-icon{font-size:.9rem}.speed-select{color:var(--accent-cyan);font-family:var(--font-main);cursor:pointer;background:0 0;border:none;outline:none;font-size:.82rem;font-weight:700}.speed-select option{color:#fff;background:#111827}.btn-ctrl{background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:var(--radius-sm);font-family:var(--font-main);cursor:pointer;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:600;transition:all .15s;display:flex}.btn-ctrl:hover{background:var(--bg-card-hover);border-color:#fff3}.btn-ctrl.btn-small{border-radius:4px;padding:3px 7px;font-size:.72rem}.btn-ctrl.btn-primary{color:#fff;background:linear-gradient(135deg,#0078d4,#00f2fe);border:none;padding:6px 18px;box-shadow:0 2px 10px #0078d466}.btn-ctrl.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn-ctrl.btn-primary.playing{background:linear-gradient(135deg,#f59e0b,#ef4444)}.btn-ctrl.btn-stop{color:#fca5a5;background:#ef444424;border-color:#ef444466;font-weight:700}.btn-ctrl.btn-stop:hover{color:#fff;background:#ef444447;border-color:#ef4444}.btn-ctrl.btn-series-glow{color:#fff;background:linear-gradient(135deg,#7c3aed,#db2777);border:1px solid #db277799;font-weight:700;box-shadow:0 0 12px #7c3aed73}.btn-ctrl.btn-series-glow:hover{transform:translateY(-1px);box-shadow:0 0 18px #db2777b3}.btn-ctrl.btn-series{color:#fbbf24;background:linear-gradient(135deg,#f59e0b29,#ef444429);border:1px solid #f59e0b8c;font-weight:700;transition:all .2s}.btn-ctrl.btn-series:hover{background:linear-gradient(135deg,#f59e0b52,#ef444452);border-color:#fbbf24;transform:translateY(-1px);box-shadow:0 0 12px #fbbf2466}.btn-ctrl.btn-series.active{color:#fff;background:linear-gradient(135deg,#f59e0b,#ef4444);border-color:#fef08a;animation:2s ease-in-out infinite pulse-series;box-shadow:0 0 16px #f59e0bb3}@keyframes pulse-series{0%,to{box-shadow:0 0 10px #f59e0b80}50%{box-shadow:0 0 20px #ef4444cc}}.frame-counter-pill{font-family:var(--font-mono);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);color:#38bdf8;background:#0006;padding:6px 12px;font-size:.82rem;font-weight:600}.nav-actions{align-items:center;gap:8px;display:flex}.btn-action{background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:6px;padding:6px 12px;font-size:.82rem;font-weight:600;transition:all .15s;display:flex}.btn-action:hover{background:var(--bg-card-hover);border-color:#ffffff40}.btn-action.btn-export{background:linear-gradient(135deg,#a855f7,#ec4899);border:none;box-shadow:0 2px 12px #a855f759}.btn-action.btn-export:hover{transform:translateY(-1px);box-shadow:0 0 18px #ec489980}.studio-main{flex:1;display:flex;position:relative;overflow:hidden}.tools-palette{background:var(--bg-surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-right:1px solid var(--border-subtle);flex-direction:column;gap:16px;width:200px;padding:12px;display:flex;overflow-y:auto}.sidebar-tabs{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:#0006;gap:4px;margin-bottom:8px;padding:3px;display:flex}.sidebar-tab{color:var(--text-secondary);font-family:var(--font-main);cursor:pointer;text-align:center;white-space:nowrap;background:0 0;border:none;border-radius:4px;flex:1;padding:6px 4px;font-size:.74rem;font-weight:700;transition:all .15s}.sidebar-tab.active{background:var(--bg-surface-elevated);color:#00f2fe;box-shadow:0 2px 8px #0006}.tab-content{flex-direction:column;gap:12px;display:flex}.color-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;display:inline-block;box-shadow:0 0 6px}.section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:6px;font-size:.72rem;font-weight:700}.tool-group{flex-direction:column;gap:6px;display:flex}.tool-btn{background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;text-align:left;align-items:center;gap:8px;padding:8px 10px;font-size:.8rem;font-weight:600;transition:all .15s;display:flex}.tool-btn:hover{background:var(--bg-card-hover);border-color:var(--accent-cyan);transform:translate(2px)}.tool-btn.danger{color:#f87171}.tool-btn.danger:hover{background:#ef444426;border-color:#ef4444}.stage-viewport{background:#06080e;flex:1;justify-content:center;align-items:center;padding:12px;display:flex;position:relative;overflow:hidden}.canvas-wrapper{aspect-ratio:16/9;border-radius:8px;justify-content:center;align-items:center;max-width:100%;max-height:100%;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 50px #000000bf,0 0 0 1px #ffffff14}#stageCanvas{cursor:default;background:#000;width:100%;height:100%;display:block}.inspector-panel{background:var(--bg-surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-left:1px solid var(--border-subtle);flex-direction:column;gap:16px;width:290px;padding:14px;display:flex;overflow-y:auto}.panel-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);flex-direction:column;gap:10px;padding:12px;display:flex}.card-title{letter-spacing:.04em;color:#38bdf8;align-items:center;gap:6px;font-size:.8rem;font-weight:700;display:flex}.prop-row{justify-content:space-between;align-items:center;gap:8px;font-size:.78rem;display:flex}.prop-label{color:var(--text-secondary);font-weight:500}.input-text,.input-select{border:1px solid var(--border-subtle);color:#fff;border-radius:var(--radius-sm);font-family:var(--font-main);background:#0006;outline:none;flex:1;padding:4px 8px;font-size:.78rem}.input-text:focus,.input-select:focus{border-color:var(--accent-cyan)}.input-color{border:1px solid var(--border-subtle);cursor:pointer;background:0 0;border-radius:4px;width:32px;height:26px}.input-range{accent-color:var(--accent-cyan);cursor:pointer;flex:1}.pose-grid{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.pose-btn{border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff0d;align-items:center;gap:6px;padding:6px 8px;font-size:.74rem;font-weight:600;transition:all .15s;display:flex}.pose-btn:hover{border-color:var(--accent-cyan);color:#38bdf8;background:#00f2fe26}.timeline-drawer{background:var(--bg-surface-elevated);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border-subtle);z-index:90;flex-direction:column;height:160px;display:flex}.timeline-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:12px;height:38px;padding:0 14px;font-size:.78rem;display:flex}.timeline-actions{align-items:center;gap:6px;display:flex}.btn-mini{background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-primary);cursor:pointer;border-radius:4px;align-items:center;gap:4px;padding:4px 8px;font-size:.74rem;font-weight:600;display:flex}.btn-mini:hover{background:var(--bg-card-hover);border-color:#ffffff40}.btn-mini.accent{color:#38bdf8;background:#00f2fe1f;border-color:#00f2fe66}.sfx-pill-group{align-items:center;gap:4px;display:flex}.sfx-trigger-btn{color:#fb7185;cursor:pointer;background:#f43f5e1f;border:1px solid #f43f5e59;border-radius:12px;padding:3px 8px;font-size:.7rem;font-weight:700;transition:all .15s}.sfx-trigger-btn:hover{color:#fff;background:#f43f5e;box-shadow:0 0 10px #f43f5e80}.timeline-track-container{background:#080b12;flex:1;align-items:center;padding:8px 14px;display:flex;position:relative;overflow:auto hidden}.timeline-track{align-items:flex-end;gap:3px;height:80px;display:flex}.timeline-frame{cursor:pointer;background:#ffffff08;border:1px solid #ffffff0f;border-radius:4px;flex-direction:column;justify-content:flex-end;align-items:center;width:24px;height:65px;padding-bottom:4px;transition:background .1s;display:flex;position:relative}.timeline-frame:hover{background:#ffffff14}.timeline-frame.active{background:#00f2fe33;border-color:#00f2fe;box-shadow:0 0 12px #00f2fe66}.timeline-frame.has-keyframe:before{content:"";background:#00f2fe;width:10px;height:10px;position:absolute;top:8px;transform:rotate(45deg);box-shadow:0 0 8px #00f2fe}.audio-marker{background:#f43f5e;border-radius:50%;width:6px;height:6px;position:absolute;top:24px;box-shadow:0 0 6px #f43f5e}.frame-number{font-family:var(--font-mono);color:var(--text-muted);font-size:.65rem}.timeline-frame.active .frame-number{color:#38bdf8;font-weight:700}.modal-overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:999;background:#000000bf;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal-card{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:480px;max-width:90vw;box-shadow:var(--shadow-window);background:#111827;flex-direction:column;gap:16px;padding:24px;display:flex}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-title{color:#fff;font-size:1.15rem;font-weight:700}.modal-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.2rem}.modal-close-btn:hover{color:#fff}.export-progress-bar-bg{background:#ffffff1a;border-radius:5px;width:100%;height:10px;margin-top:8px;overflow:hidden}.export-progress-bar-fill{background:linear-gradient(90deg,#0078d4,#00f2fe,#f43f5e);width:0%;height:100%;transition:width .1s}.tip-box{color:#bfdbfe;background:#0078d41f;border-left:3px solid #0078d4;border-radius:4px;padding:10px 12px;font-size:.8rem;line-height:1.4}.animator-tutorial-bar{z-index:50;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#e2e8f0;pointer-events:auto;background:#0f172ae0;border:1px solid #00f2fe66;border-radius:30px;align-items:center;gap:10px;padding:6px 18px;font-size:.78rem;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #00000080,0 0 15px #00f2fe33}.step-tag{color:#00f2fe;letter-spacing:.05em;font-size:.74rem;font-weight:800}.step-text{font-weight:600}.step-arrow{color:#64748b;font-size:.75rem}.btn-step-action{color:#fff;font-family:var(--font-main);cursor:pointer;background:linear-gradient(135deg,#0078d4,#00f2fe);border:none;border-radius:20px;padding:4px 12px;font-size:.76rem;font-weight:700;transition:all .15s;box-shadow:0 0 10px #00f2fe66}.btn-step-action:hover{transform:scale(1.05);box-shadow:0 0 16px #00f2feb3}.btn-accent-glow{animation:2.5s infinite alternate pulse-glow;color:#fff!important;background:linear-gradient(135deg,#0284c7,#00f2fe)!important;border:none!important;font-weight:700!important;box-shadow:0 0 14px #00f2fe73!important}@keyframes pulse-glow{0%{box-shadow:0 0 8px #00f2fe4d}to{box-shadow:0 0 18px #00f2fecc}}.studio-toast{color:#38bdf8;opacity:0;pointer-events:none;z-index:999;background:#0f172af2;border:1px solid #00f2fe;border-radius:30px;padding:10px 22px;font-size:.85rem;font-weight:700;transition:all .25s cubic-bezier(.16,1,.3,1);position:fixed;bottom:175px;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 8px 30px #0009,0 0 20px #00f2fe66}.studio-toast.visible{opacity:1;transform:translate(-50%)translateY(0)}.cinema-hud{z-index:10000;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#0a0f1cf0;border:1px solid #00f2fe73;border-radius:40px;align-items:center;gap:20px;padding:8px 24px;animation:.3s cubic-bezier(.16,1,.3,1) slide-up-hud;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #000000d9,0 0 25px #00f2fe59}@keyframes slide-up-hud{0%{opacity:0;transform:translate(-50%)translateY(25px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.cinema-badge{color:#38bdf8;white-space:nowrap;align-items:center;gap:10px;font-size:.9rem;font-weight:700;display:flex}.cinema-live-dot{background:#22c55e;border-radius:50%;width:9px;height:9px;animation:1.5s infinite pulse-dot;box-shadow:0 0 8px #22c55e}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.cinema-ctrls{align-items:center;gap:8px;display:flex}.btn-cinema{color:#fff;font-family:var(--font-main);cursor:pointer;white-space:nowrap;background:#ffffff14;border:1px solid #ffffff26;border-radius:20px;padding:6px 14px;font-size:.82rem;font-weight:700;transition:all .15s}.btn-cinema:hover{background:#fff3;border-color:#00f2fe}.btn-cinema-primary{background:linear-gradient(135deg,#0078d4,#00f2fe);border:none;box-shadow:0 0 10px #00f2fe66}.btn-cinema-close{color:#fca5a5;background:#ef444433;border-color:#ef444480}.btn-cinema-close:hover{color:#fff;background:#ef444466;border-color:#ef4444}:-webkit-any(:fullscreen .stage-viewport,:-webkit-full-screen .stage-viewport,.stage-viewport.is-fullscreen){z-index:9999!important;background:#000!important;width:100vw!important;max-width:100vw!important;height:100vh!important;max-height:100vh!important;margin:0!important;padding:0!important;position:fixed!important;top:0!important;left:0!important}:is(:fullscreen .stage-viewport,:fullscreen .stage-viewport,.stage-viewport.is-fullscreen){z-index:9999!important;background:#000!important;width:100vw!important;max-width:100vw!important;height:100vh!important;max-height:100vh!important;margin:0!important;padding:0!important;position:fixed!important;top:0!important;left:0!important}.stage-viewport.is-fullscreen .canvas-wrapper{width:100vw!important;max-width:100vw!important;height:100vh!important;max-height:100vh!important;box-shadow:none!important;border-radius:0!important}:fullscreen .canvas-wrapper{width:100vw!important;max-width:100vw!important;height:100vh!important;max-height:100vh!important;box-shadow:none!important;border-radius:0!important}:-webkit-full-screen .canvas-wrapper{width:100vw!important;max-width:100vw!important;height:100vh!important;max-height:100vh!important;box-shadow:none!important;border-radius:0!important}.top-navbar{scrollbar-width:none;-ms-overflow-style:none;overflow:auto hidden}.top-navbar::-webkit-scrollbar{display:none}.timeline-header{scrollbar-width:thin;overflow-x:auto}@media (width<=1500px){.btn-ctrl,.btn-action{gap:4px;padding:5px 9px;font-size:.8rem}.brand-section{gap:8px}.logo-badge{font-size:1.05rem}.playback-controls{gap:6px}.tools-palette{width:210px}.inspector-panel{width:275px}}@media (width<=1280px){.top-navbar{gap:10px;padding:0 10px}.btn-action.btn-template{display:none}.tools-palette{width:195px}.inspector-panel{width:255px}}