@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-base:#030712;--bg-surface:#0b0f19;--bg-surface-glass:#0b0f19b3;--bg-elevated:#111827;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-tertiary:#64748b;--accent-primary:#3b82f6;--accent-primary-glow:#3b82f64d;--accent-secondary:#8b5cf6;--accent-secondary-glow:#8b5cf64d;--border-subtle:#ffffff14;--border-focus:#fff3;--radius-sm:8px;--radius-md:14px;--radius-lg:24px;--radius-full:9999px;--shadow-sm:0 4px 6px -1px #00000080;--shadow-md:0 10px 20px -3px #0009;--shadow-lg:0 20px 35px -5px #000000b3;--shadow-glow:0 0 25px var(--accent-primary-glow);--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1);--transition-smooth:.5s cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100vw;height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#ffffff26}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.app-layout-board{background:var(--bg-base);width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.main-area{flex-direction:column;flex:1;min-width:0;height:100vh;display:flex;position:relative;overflow:hidden}.top-bar{z-index:50;pointer-events:auto;background:linear-gradient(#030712cc 0%,#0000 100%);justify-content:space-between;align-items:center;height:60px;padding:0 1.5rem;display:flex;position:absolute;top:0;left:0;right:0}.top-bar-title{align-items:baseline;gap:.6rem;display:flex}.top-bar-title h1{letter-spacing:-.02em;color:#fff;font-size:1.15rem;font-weight:700}.top-bar-subtitle{color:var(--text-tertiary);font-size:.8rem;font-weight:400}.top-bar-spacer{flex:1}.top-bar-btn{color:var(--text-secondary);cursor:pointer;width:36px;height:36px;transition:all var(--transition-fast);background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;justify-content:center;align-items:center;margin-left:.5rem;display:inline-flex}.top-bar-btn:hover{color:#fff;background:#ffffff1a;border-color:#fff3;transform:translateY(-1px)}.stage-wrapper{z-index:1;flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.stage-container{box-sizing:border-box;justify-content:center;align-items:center;width:100%;height:100%;padding:60px 2rem 140px;display:flex}.vta-stage{filter:drop-shadow(0 15px 30px #00000080);width:100%;max-width:1200px;height:100%;max-height:calc(100vh - 200px)}.stage-placeholder{text-align:center;z-index:5;flex-direction:column;justify-content:center;align-items:center;max-width:700px;padding:2rem;display:flex}.hero-tag{color:#60a5fa;background:#3b82f61a;border:1px solid #3b82f640;border-radius:99px;align-items:center;gap:.5rem;margin-bottom:1.25rem;padding:.35rem .85rem;font-size:.8rem;font-weight:500;display:inline-flex}.stage-placeholder h2{letter-spacing:-.03em;color:#fff;margin-bottom:.75rem;font-size:clamp(2rem,4vw,2.75rem);font-weight:700}.stage-placeholder p{color:var(--text-secondary);max-width:500px;margin-bottom:2rem;font-size:1.05rem}.suggestions-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;width:100%;max-width:640px;display:grid}.minimal-suggestions{opacity:0;pointer-events:none;flex-direction:column-reverse;align-items:flex-start;gap:.5rem;width:90vw;max-width:600px;padding-left:4px;display:flex;position:fixed;bottom:120px;left:50%;transform:translate(-50%);-webkit-mask-image:linear-gradient(#0000 0%,#000 60%);mask-image:linear-gradient(#0000 0%,#000 60%)}.minimal-suggestions.is-visible{pointer-events:auto}.minimal-prompt{color:#a1a1aa;cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:1rem;width:100%;padding:.5rem;font-size:.95rem;transition:color .2s;display:flex}.minimal-prompt svg{color:#71717a;transition:color .2s}.minimal-prompt:hover,.minimal-prompt:hover svg{color:#f4f4f5}.subtitle-overlay{z-index:60;text-align:center;pointer-events:none;-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;background:#0b0f19d9;border:1px solid #ffffff1f;border-radius:18px;width:max-content;max-width:680px;padding:.75rem 1.4rem;transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),visibility .3s;position:absolute;bottom:190px;left:50%;transform:translate(-50%)translateY(8px)scale(.96);box-shadow:0 12px 32px #0009,0 0 20px #3b82f61a}.subtitle-overlay.is-active{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)scale(1)}.subtitle-text{color:#f8fafc;text-shadow:0 1px 4px #000c;margin:0;font-size:1.05rem;font-weight:500;line-height:1.45}.playback-bar{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-full);z-index:40;opacity:0;pointer-events:none;background:#0f172ad9;border:1px solid #ffffff1f;align-items:center;gap:.4rem;padding:.4rem .8rem;transition:opacity .3s,transform .3s;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)translateY(0);box-shadow:0 10px 30px #0009,0 0 20px #0006}.playback-bar.is-active,.playback-bar:hover,.playback-bar:focus-within{opacity:1;pointer-events:auto}.ctrl-btn{color:var(--text-secondary);cursor:pointer;width:32px;height:32px;transition:all var(--transition-fast);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.ctrl-btn:hover{color:#fff;background:#ffffff1a;transform:scale(1.08)}.ctrl-btn-play{color:#fff;background:#ffffff1a;width:36px;height:36px}.ctrl-btn-play:hover{background:#fff3}.ctrl-btn-sm{white-space:nowrap;text-overflow:ellipsis;border-radius:14px;width:auto;min-width:36px;height:28px;padding:0 .5rem;font-size:.75rem;font-weight:600;overflow:hidden}.ctrl-btn-active{color:#60a5fa}.progress-slider{appearance:none;cursor:pointer;--progress-pct:0%;background:0 0;width:110px;margin:0 .4rem}.progress-slider::-webkit-slider-runnable-track{background:linear-gradient(to right, #3b82f6 var(--progress-pct), #ffffff2e var(--progress-pct));border-radius:2px;width:100%;height:4px}.progress-slider::-webkit-slider-thumb{appearance:none;background:#60a5fa;border-radius:50%;width:12px;height:12px;margin-top:-4px;transition:transform .15s;box-shadow:0 0 8px #60a5fa99}.progress-slider::-webkit-slider-thumb:hover{transform:scale(1.3)}.step-indicator{color:var(--text-tertiary);text-align:center;min-width:48px;font-family:JetBrains Mono,monospace;font-size:.8rem}.input-bar{z-index:70;pointer-events:none;justify-content:center;align-items:flex-end;padding-bottom:18px;display:flex;position:absolute;bottom:0;left:0;right:0}.input-bar-inner{pointer-events:auto;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:30px;align-items:center;width:60px;height:60px;transition:all .5s cubic-bezier(.16,1,.3,1);display:flex;position:relative}.marble-canvas-wrapper{pointer-events:none;justify-content:center;align-items:center;width:80px;height:80px;transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.input-bar-inner:hover,.input-bar-inner:focus-within,.input-bar-inner.is-typing{-webkit-backdrop-filter:blur(24px);cursor:text;background:#0b0f19eb;border:1px solid #ffffff26;border-radius:28px;width:100%;max-width:640px;height:56px;padding:0 .5rem 0 1.25rem;box-shadow:0 20px 40px #000c,0 0 30px #3b82f633}.input-bar-inner:hover .marble-canvas-wrapper,.input-bar-inner:focus-within .marble-canvas-wrapper,.input-bar-inner.is-typing .marble-canvas-wrapper{opacity:.15;transform:translate(-50%,-50%)scale(.6)}#chat-input{opacity:0;pointer-events:none;color:#f8fafc;resize:none;background:0 0;border:none;outline:none;width:0;height:100%;padding:0;font-family:inherit;font-size:1rem;line-height:56px;transition:opacity .3s}.input-bar-inner:hover #chat-input,.input-bar-inner:focus-within #chat-input,.input-bar-inner.is-typing #chat-input{opacity:1;pointer-events:auto;width:100%;padding-right:.5rem}.send-btn,.stop-btn{opacity:0;pointer-events:none;color:#f8fafc;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;margin-left:auto;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;transform:scale(.6)}.send-btn:hover{color:#eff6ff;background:#3b82f6;border-color:#3b82f6;transform:scale(1.08);box-shadow:0 0 15px #3b82f680}.stop-btn:hover{color:#fff;background:#ef4444;border-color:#ef4444;transform:scale(1.08)}.input-bar-inner:hover .send-btn,.input-bar-inner:focus-within .send-btn,.input-bar-inner.is-typing .send-btn,.input-bar-inner.is-generating .stop-btn{opacity:1;pointer-events:auto;transform:scale(1)}.drawer-backdrop,.settings-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:80;visibility:hidden;opacity:0;background:#000000a6;transition:opacity .3s,visibility .3s;position:fixed;inset:0}.drawer-backdrop-visible,.settings-backdrop-visible{visibility:visible;opacity:1}.board-drawer,.settings-panel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:90;background:#0b0f19f2;border-right:1px solid #ffffff1a;flex-direction:column;width:340px;display:flex;position:fixed;top:0;bottom:0}.board-drawer{left:0;transform:translate(-100%)}.settings-panel{border-left:1px solid #ffffff1a;border-right:none;right:0;transform:translate(100%)}.drawer-header,.settings-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.drawer-title,.settings-header h2{color:#fff;font-size:1.15rem;font-weight:600}.drawer-header-actions,.settings-header-actions{gap:.4rem;display:flex}.drawer-new-btn,.drawer-close-btn,.settings-close-btn,.board-item-delete{color:var(--text-secondary);cursor:pointer;width:32px;height:32px;transition:all var(--transition-fast);background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.drawer-new-btn:hover,.drawer-close-btn:hover,.settings-close-btn:hover{color:#fff;background:#ffffff1a}.board-item-delete:hover{color:#ef4444;background:#ef444433;border-color:#ef444466}.drawer-boards,.settings-body{flex-direction:column;flex:1;gap:.5rem;padding:1.25rem;display:flex;overflow-y:auto}.drawer-board-item{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);background:#ffffff05;border:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:.85rem 1rem;display:flex}.drawer-board-item:hover{background:#ffffff0f;border-color:#ffffff26}.drawer-board-item.active{background:#3b82f614;border-color:#3b82f666}.board-item-title{color:#fff;margin-bottom:.2rem;font-size:.95rem;font-weight:500}.board-item-time{color:var(--text-tertiary);font-size:.75rem}.settings-section{margin-bottom:1.5rem}.settings-section h3{text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:.75rem;font-size:.75rem}.settings-field{flex-direction:column;gap:.4rem;margin-bottom:1rem;display:flex}.settings-field span{color:var(--text-secondary);font-size:.85rem}.settings-select,.settings-input{border-radius:var(--radius-sm);color:#fff;background:#0006;border:1px solid #ffffff1a;outline:none;width:100%;padding:.6rem .8rem;font-size:.9rem}.settings-select:focus,.settings-input:focus{border-color:#3b82f6}.settings-footer{border-top:1px solid #ffffff14;padding:1.25rem}.settings-save-btn{color:#eff6ff;border-radius:var(--radius-full);cursor:pointer;width:100%;transition:all var(--transition-fast);background:#3b82f6;border:none;padding:.75rem;font-weight:600}.settings-save-btn:hover{background:#60a5fa;box-shadow:0 0 20px #3b82f666}@media (width<=768px){.board-drawer{width:100%!important;max-width:100%!important}.unified-bar{width:calc(100% - 40px)!important;bottom:20px!important}.playback-controls{flex-wrap:wrap;justify-content:center}.top-bar-title h1{font-size:1rem!important}.top-bar-subtitle{display:none!important}.demo-buttons-inline{flex-direction:column}.demo-btn-inline{width:100%}.progress-slider-wrapper{width:70px!important}}@media (width<=480px){#btn-cc,#btn-reset,#btn-voice,#btn-fullscreen{display:none!important}#btn-speed{min-width:28px;padding:0 .35rem;font-size:.65rem}.progress-slider-wrapper{display:none!important}}.stage-loading{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a0c1499;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.skeleton-canvas{flex-direction:column;align-items:center;gap:20px;width:70%;max-width:500px;margin-bottom:24px;display:flex}.skeleton-title{background:#ffffff0f;border-radius:9px;width:40%;height:18px}.skeleton-row{justify-content:center;align-items:center;gap:16px;width:100%;display:flex}.skeleton-box{background:#ffffff0f;border-radius:8px;width:100px;height:60px}.skeleton-line{background:#ffffff0f;border-radius:5px;height:10px}.skeleton-circle{background:#ffffff0f;border-radius:50%;width:50px;height:50px}.skeleton-arrow{background:#ffffff0f;border-radius:2px;width:60px;height:4px}.skeleton-status{color:#ffffff80;align-items:center;gap:10px;font-size:.85rem;display:flex}.skeleton-pulse{animation:1.5s ease-in-out infinite skeleton-pulse}@keyframes skeleton-pulse{0%,to{opacity:.3}50%{opacity:.7}}.gen-spinner{border:2px solid #ffffff26;border-top-color:#fff9;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.toast-container{z-index:9999;pointer-events:none;flex-direction:column-reverse;gap:.5rem;display:flex;position:fixed;bottom:80px;right:1.25rem}.toast{-webkit-backdrop-filter:blur(12px);pointer-events:auto;color:#f8fafc;border:1px solid;border-radius:12px;align-items:center;gap:.6rem;max-width:320px;padding:.65rem 1rem .65rem .85rem;font-size:.88rem;font-weight:500;animation:.3s cubic-bezier(.16,1,.3,1) forwards toast-slide-in;display:flex;box-shadow:0 8px 24px #00000080}@keyframes toast-slide-in{0%{opacity:0;transform:translate(20px)scale(.95)}to{opacity:1;transform:translate(0)scale(1)}}.toast.toast-dismiss{animation:.25s ease-in forwards toast-slide-out}@keyframes toast-slide-out{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(20px)scale(.95)}}.toast-error{background:#ef444426;border-color:#ef444459}.toast-warning{background:#f59e0b26;border-color:#f59e0b59}.toast-success{background:#22c55e26;border-color:#22c55e59}.toast-info{background:#3b82f626;border-color:#3b82f659}.toast-countdown{background:#8b5cf626;border-color:#8b5cf659}.toast-icon{flex-shrink:0;font-size:1rem}.toast-message{flex:1;line-height:1.35}.toast-dismiss-btn{color:#ffffff73;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 0 0 .4rem;font-size:.75rem;line-height:1;transition:color .15s}.toast-dismiss-btn:hover{color:#ffffffe6}.progress-slider-wrapper{align-items:center;display:flex;position:relative}.step-preview-tooltip{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#e2e8f0;white-space:normal;word-break:break-word;pointer-events:none;z-index:200;background:#0f141eeb;border:1px solid #ffffff1f;border-radius:8px;min-width:80px;max-width:240px;padding:6px 10px;font-size:.78rem;line-height:1.4;animation:.12s ease-out tooltip-in;display:none;position:absolute;bottom:calc(100% + 10px);left:0;transform:translate(-50%);box-shadow:0 4px 16px #00000080}@keyframes tooltip-in{0%{opacity:0;transform:translate(-50%)translateY(4px)}to{opacity:1;transform:translate(-50%)translateY(0)}}