:root{--bg: #1A1816;--surface: #22201D;--surface-hover: #2D2A26;--border: #3D3630;--border-subtle: rgba(255,255,255,.06);--text-primary: #E8E2DA;--text-secondary: #B8AD9E;--text-muted: #8C8078;--accent: #C8A064;--accent-dim: rgba(200, 160, 100, .12);--tp-base-background-color: #22201D;--tp-base-shadow-color: rgba(0, 0, 0, .15);--tp-button-background-color: #2D2A26;--tp-button-background-color-active: #3D3630;--tp-button-background-color-focus: #35312C;--tp-button-background-color-hover: #35312C;--tp-button-foreground-color: #E8E2DA;--tp-container-background-color: #1E1C19;--tp-container-background-color-active: #2D2A26;--tp-container-background-color-focus: #252320;--tp-container-background-color-hover: #252320;--tp-container-foreground-color: #B8AD9E;--tp-groove-foreground-color: #3D3630;--tp-input-background-color: #1A1816;--tp-input-background-color-active: #2D2A26;--tp-input-background-color-focus: #22201D;--tp-input-background-color-hover: #22201D;--tp-input-foreground-color: #E8E2DA;--tp-label-foreground-color: #8C8078;--tp-monitor-background-color: #1A1816;--tp-monitor-foreground-color: #8C8078}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text-primary);font-family:Inter,-apple-system,system-ui,sans-serif;font-size:13px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#3d363099;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#a6998580}::-webkit-scrollbar-thumb:active{background:#c8a06466}::-webkit-scrollbar-corner{background:transparent}*{scrollbar-width:thin;scrollbar-color:rgba(61,54,48,.6) transparent}#app{display:flex;height:100vh;position:relative}#canvas-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}#app>#sidebar{position:absolute;right:0;top:0;bottom:0;z-index:20}#canvas-container canvas{display:block;width:100%;height:100%}#sidebar{width:320px;background:var(--surface);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;margin:10px;box-shadow:0 8px 32px #00000040,0 2px 8px #00000026}.sidebar-brand{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;border-radius:12px 12px 0 0}.brand-title{font-family:Georgia,Playfair Display,serif;font-style:italic;font-size:15px;letter-spacing:.01em;background:linear-gradient(90deg,var(--accent) 0%,var(--shimmer-hi, #E8C878) 40%,var(--accent) 60%,var(--accent) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 6s ease-in-out infinite}#mode-switch{display:flex;gap:2px;margin:10px 12px 0;background:var(--bg);border-radius:8px;padding:3px;flex-shrink:0;position:relative}.mode-indicator{position:absolute;top:3px;bottom:3px;background:var(--surface-hover);border-radius:6px;box-shadow:0 1px 3px #00000026;transition:left .35s cubic-bezier(.16,1,.3,1),width .35s cubic-bezier(.16,1,.3,1),background-color .3s ease;z-index:0;pointer-events:none}#mode-switch button{flex:1;padding:7px 12px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:6px;font-size:11px;font-weight:500;font-family:inherit;transition:color .2s ease;letter-spacing:.02em;position:relative;z-index:1}#mode-switch button:hover{color:var(--text-secondary)}#mode-switch button.active{color:var(--text-primary)}#panel-container{flex:1;overflow-y:auto;overflow-x:hidden;padding-top:4px;min-height:0}#panel-container:has(.split-panel){overflow:hidden;display:flex;flex-direction:column}.component-picker{padding:8px 12px 4px}.picker-section{margin-bottom:8px}.picker-section:last-child{margin-bottom:0}.picker-section-header{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:6px 4px 5px}.picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.picker-card{display:flex;flex-direction:column;align-items:center;padding:6px 4px 5px;border-radius:6px;border:1px solid transparent;background:var(--bg);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;overflow:hidden;animation:cardIn .3s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i, 0) * 30ms)}.picker-card:hover{border-color:var(--border);background:var(--surface-hover);transform:translateY(-1px);box-shadow:0 3px 10px #0000001a}.picker-card:active{transform:scale(.96);transition-duration:.1s}.picker-card.selected{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 12px #c8a0641a}.picker-card canvas{border-radius:3px;margin-bottom:3px}.picker-label{font-size:10px;color:var(--text-secondary);text-align:center;line-height:1.2}.panel-separator{height:1px;background:var(--border-subtle);margin:6px 12px}.split-panel{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.split-panel-top{overflow-y:auto;flex-shrink:0}.split-panel-handle{height:7px;flex-shrink:0;cursor:row-resize;display:flex;align-items:center;justify-content:center;background:var(--surface);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);transition:background .15s ease}.split-panel-handle:hover{background:var(--surface-hover)}.split-panel-handle:after{content:"";width:28px;height:2px;border-radius:1px;background:var(--text-muted);opacity:.3}.split-panel-handle:hover:after{opacity:.6}.split-panel-bottom{flex:1;min-height:80px;display:flex;flex-direction:column;overflow:hidden}.split-panel-bottom-scroll{flex:1;overflow-y:auto;min-height:0}.split-panel-bottom .action-bar,.split-panel-bottom .playback-bar{flex-shrink:0}.playback-bar{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface);position:sticky;bottom:0;z-index:10;border-radius:0 0 11px 11px;flex-shrink:0}.split-panel-bottom .playback-bar{border-radius:0}.playback-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 10px;border:none;border-radius:6px;font-size:11px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1);line-height:1}.playback-btn:active{transform:scale(.94)}.playback-btn svg{width:12px;height:12px;flex-shrink:0}.playback-btn.primary{background:var(--accent);color:#1a1816}.playback-btn.primary:hover{background:#d4ac70}.playback-btn.primary:active{background:#ba9058}.playback-btn.secondary{background:var(--bg);color:var(--text-secondary);border:1px solid var(--border-subtle)}.playback-btn.secondary:hover{background:var(--surface-hover);color:var(--text-primary)}.action-bar{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;z-index:10}.action-btn{flex:1;padding:7px 8px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--bg);color:var(--text-secondary);font-size:10px;font-weight:500;font-family:inherit;cursor:pointer;transition:all .15s ease;text-align:center}.action-btn:hover{background:var(--surface-hover);color:var(--text-primary);border-color:var(--border)}.tp-rotv{background:transparent!important;box-shadow:none!important}.tp-rotv,.tp-lblv{--cnt-usz: 24px !important}.tp-sldv_t{border-radius:999px!important}.tp-sldv_k{background-color:var(--accent)!important;border-radius:999px!important}.tp-sldv_k:after{border-radius:999px!important}.tp-txtv_i{font-variant-numeric:tabular-nums!important;font-size:10px!important;padding:2px 4px!important;letter-spacing:.02em!important}.tp-fldv_t{font-weight:500!important;font-size:9px!important;letter-spacing:.08em!important;text-transform:uppercase!important}.tp-fldv_c{padding-left:8px!important;padding-right:4px!important}.tp-fldv_m{transform:scale(.7)!important;opacity:.5!important}.tp-lblv_l{font-size:10px!important;font-weight:400!important;color:var(--text-muted)!important;letter-spacing:.01em!important}.tp-lstv select,.tp-lstv_s{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;font-size:10px!important;padding:2px 18px 2px 6px!important;border:1px solid var(--border-subtle)!important;border-radius:3px!important;background-image:url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%238C8078' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 5px center!important}.tp-btnv_b{background-color:var(--accent)!important;color:#1a1816!important;font-weight:500!important;font-size:10px!important;border-radius:4px!important;padding:4px 8px!important}.tp-btnv_b:hover{background-color:#d4ac70!important}.tp-ckbv_w{width:12px!important;height:12px!important;border-radius:2px!important}.tp-colswv_b{width:16px!important;height:16px!important;border-radius:3px!important;border-color:var(--border)!important}.theme-toggle{display:flex;gap:2px;background:var(--bg);border-radius:6px;padding:2px}.theme-btn{width:24px;height:24px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1);padding:4px}.theme-btn:active{transform:scale(.85)}.theme-btn:hover{color:var(--text-secondary)}.theme-btn.active{background:var(--surface-hover);color:var(--accent)}.theme-btn svg{width:14px;height:14px}[data-mode=light]{--bg: #F5F2EE;--surface: #EBE7E1;--surface-hover: #E2DDD6;--border: #D1C9BE;--border-subtle: rgba(0,0,0,.06);--text-primary: #2A2420;--text-secondary: #5C5347;--text-muted: #7D7368;--accent: #8A6820;--accent-dim: rgba(138, 104, 32, .12);--tp-base-background-color: #EBE7E1;--tp-base-shadow-color: rgba(0, 0, 0, .08);--tp-button-background-color: #E2DDD6;--tp-button-background-color-active: #D1C9BE;--tp-button-background-color-focus: #D8D2CA;--tp-button-background-color-hover: #D8D2CA;--tp-button-foreground-color: #2A2420;--tp-container-background-color: #F0ECE6;--tp-container-background-color-active: #E2DDD6;--tp-container-background-color-focus: #E8E4DE;--tp-container-background-color-hover: #E8E4DE;--tp-container-foreground-color: #5C5347;--tp-groove-foreground-color: #D1C9BE;--tp-input-background-color: #F5F2EE;--tp-input-background-color-active: #E2DDD6;--tp-input-background-color-focus: #EBE7E1;--tp-input-background-color-hover: #EBE7E1;--tp-input-foreground-color: #2A2420;--tp-label-foreground-color: #7D7368;--tp-monitor-background-color: #F5F2EE;--tp-monitor-foreground-color: #7D7368}[data-mode=light] ::-webkit-scrollbar-thumb{background:#d1c9beb3}[data-mode=light] ::-webkit-scrollbar-thumb:hover{background:#a0783066}[data-mode=light] ::-webkit-scrollbar-thumb:active{background:#a0783080}[data-mode=light] #sidebar{box-shadow:0 8px 32px #0000001a,0 2px 8px #0000000f}[data-mode=light] .picker-card{border-color:var(--border-subtle)}[data-mode=light] .playback-btn.primary{color:#f5f2ee}[data-mode=light] .tp-sldv_k{background-color:var(--accent)!important}[data-mode=light] .tp-btnv_b{background-color:var(--accent)!important;color:#f5f2ee!important}[data-mode=light] .tp-btnv_b:hover{background-color:#a07828!important}[data-mode=light] .tp-lstv select,[data-mode=light] .tp-lstv_s{border-color:var(--border)!important;background-image:url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%237D7368' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}[data-mode=light] .tp-fldv_m{opacity:.4!important}[data-mode=light]{--shimmer-hi: #C4A040}.chat-input-bar{position:absolute;bottom:24px;left:50%;transform:translate(-50%) translateY(8px);z-index:15;opacity:0;transition:opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1);pointer-events:none}.chat-input-bar.chat-visible{opacity:1;transform:translate(-50%) translateY(0);pointer-events:auto}.chat-input-wrap{display:flex;gap:6px;padding:6px 8px 6px 14px;background:#22201dd9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px #0000004d,0 2px 8px #00000026;min-width:360px}.chat-input-field{flex:1;border:none;background:transparent;color:var(--text-primary);font-family:inherit;font-size:13px;outline:none;padding:4px 0}.chat-input-field::placeholder{color:var(--text-muted);opacity:.6}.chat-send-btn{width:28px;height:28px;border:none;background:var(--accent);color:#1a1816;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}.chat-send-btn:hover{background:#d4ac70}.chat-send-btn:active{transform:scale(.9)}.chat-send-btn:disabled{opacity:.4;pointer-events:none}.chat-send-btn svg{width:14px;height:14px}.chat-status{text-align:center;font-size:11px;padding:0 4px;min-height:18px;line-height:18px}.chat-status:empty{display:none}.chat-loading{color:var(--accent);animation:loadingPulse 1.2s ease-in-out infinite}.chat-error{color:#d4756a}.chat-success{color:#7ec896}.chat-key-prompt{display:flex;flex-direction:column;gap:6px;padding:8px 4px 4px}.chat-key-label{font-size:10px;color:var(--text-muted);letter-spacing:.02em}.chat-key-input{border:1px solid var(--border);background:#1a181699;color:var(--text-primary);font-family:inherit;font-size:12px;padding:5px 8px;border-radius:6px;outline:none}.chat-key-input:focus{border-color:var(--accent)}[data-mode=light] .chat-input-wrap{background:#ebe7e1e0}[data-mode=light] .chat-send-btn{color:#f5f2ee}[data-mode=light] .chat-key-input{background:#f5f2ee99}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes cardIn{0%{opacity:0;transform:translateY(6px) scale(.97)}}@keyframes fadeIn{0%{opacity:0}}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(8px)}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}}@keyframes sidebarIn{0%{opacity:0;transform:translate(12px) scale(.98)}}@keyframes loadingPulse{0%,to{opacity:.4;transform:scale(.98)}50%{opacity:1;transform:scale(1)}}#sidebar{animation:sidebarIn .45s cubic-bezier(.16,1,.3,1) forwards}#canvas-container{animation:fadeIn .5s ease-out}.panel-separator{animation:fadeIn .3s ease-out .15s backwards}.playback-bar,.action-bar{animation:slideUp .3s cubic-bezier(.16,1,.3,1) .2s backwards}.tp-rotv{animation:fadeSlideUp .25s ease-out .1s backwards!important}#sidebar,.sidebar-brand,.playback-bar,.action-bar,.mode-indicator{transition:background-color .3s ease,border-color .3s ease}.picker-section-header{transition:color .3s ease}.action-btn{transition:background .15s ease,color .15s ease,border-color .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}.action-btn:active{transform:scale(.95)}#loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg, #1A1816);display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity .5s cubic-bezier(.16,1,.3,1)}#loading-overlay.fade-out{opacity:0;pointer-events:none}.loading-brand{font-family:Georgia,Playfair Display,serif;font-style:italic;font-size:28px;color:var(--accent, #C8A064);animation:loadingPulse 1.5s ease-in-out infinite}