*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #faf8f4;--surface: #ffffff;--surface-2: #f4f0e8;--surface-3: #ece6da;--border: rgba(26,22,19,.09);--border-hi: rgba(26,22,19,.16);--text: #1a1613;--text-dim: #5c544c;--text-muted: #978d82;--accent: #ff5a1f;--accent-dim: rgba(255,90,31,.13);--accent-glow: rgba(255,90,31,.32);--accent-deep: #b8380c;--accent-soft: #ffe6d6;--green: #18a558;--red: #d92d20;--amber: #d98324;--canvas-mat: #ffffff;--topbar-h: 44px;--panel-w: 280px;--panel-collapsed-w: 132px;--timeline-h: 128px;--props-w: 260px;--r-sm: 6px;--r-md: 9px;--r-lg: 14px;--r-pill: 999px;--font-ui: "Urbanist", system-ui, sans-serif;--font-mono: "Share Tech Mono", monospace;--font-num: "Saira Condensed", sans-serif;--shadow-panel: 0 4px 24px rgba(26,22,19,.1);--shadow-float: 0 14px 44px rgba(26,22,19,.18)}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}.studio{display:grid;grid-template-rows:var(--topbar-h) 1fr var(--timeline-h);grid-template-columns:auto 1fr var(--props-w);height:100vh;width:100vw;overflow:hidden}.studio-topbar{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--surface);border-bottom:1px solid var(--border);z-index:100}.studio-panel{grid-column:1;grid-row:2;width:var(--panel-w);display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);overflow:hidden;z-index:50}.studio-panel.collapsed{width:var(--panel-collapsed-w)}.panel-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}.studio-panel.collapsed .panel-content{display:none}.studio-canvas{grid-column:2;grid-row:2;position:relative;overflow:hidden;background:var(--canvas-mat);container-type:size;display:grid;place-items:center}.studio-props{grid-column:3;grid-row:2;width:var(--props-w);background:var(--surface);border-left:1px solid var(--border);overflow-y:auto}.studio-timeline{grid-column:1 / -1;grid-row:3;display:flex;flex-direction:column;background:var(--surface);border-top:1px solid var(--border);z-index:50}.studio-props.data-hidden{visibility:hidden;pointer-events:none}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-md);border:none;background:transparent;color:var(--text-dim);cursor:pointer;transition:background .1s,color .1s;font-size:16px}.icon-btn:hover{background:var(--surface-3);color:var(--text)}.icon-btn.active{background:var(--accent-dim);color:var(--accent-deep)}.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--border-hi);background:var(--surface);color:var(--text);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .1s,border-color .1s,box-shadow .1s;white-space:nowrap}.btn:hover{background:var(--surface-2);border-color:var(--border-hi)}.btn.btn-accent{background:var(--accent);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 6px 18px var(--accent-glow)}.btn.btn-accent:hover{filter:brightness(1.05)}.btn.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim);box-shadow:none}.btn.btn-ghost:hover{background:var(--surface-3);color:var(--text)}input[type=text],input[type=number],select{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font:inherit;font-size:12px;padding:4px 8px;outline:none;transition:border-color .15s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--accent)}input[type=range]{accent-color:var(--accent);cursor:pointer}input[type=color]{width:28px;height:24px;padding:0;border:1px solid var(--border);border-radius:var(--r-sm);background:none;cursor:pointer}.panel-head{display:flex;align-items:center;gap:8px;padding:10px 12px 8px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border)}.divider{height:1px;background:var(--border);margin:4px 0}.overlay-widget{position:absolute;cursor:grab;outline:none}.overlay-widget:active{cursor:grabbing}.overlay-widget.selected{outline:1.5px solid var(--accent);outline-offset:1px}.overlay-toolbar{position:absolute;top:-26px;left:0;display:none;align-items:center;gap:4px;background:var(--surface-3);border:1px solid var(--border-hi);border-radius:var(--r-sm) var(--r-sm) 0 0;padding:2px 6px;font-size:11px;white-space:nowrap;z-index:10}.overlay-widget.selected .overlay-toolbar,.overlay-widget:hover .overlay-toolbar{display:flex}.overlay-toolbar-label{color:var(--text-dim);flex:1}.toolbar-btn{background:none;border:none;cursor:pointer;color:var(--text-dim);font-size:11px;padding:0 2px;line-height:1}.toolbar-btn:hover{color:var(--text)}.toolbar-btn.danger:hover{color:var(--red)}.overlay-border{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid transparent;border-radius:2px;z-index:1}.overlay-widget.selected .overlay-border{border-color:var(--accent)}.overlay-content{position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible}.resize-handle{position:absolute;width:10px;height:10px;background:var(--accent);border:1px solid #000;border-radius:2px;z-index:20;opacity:0;transition:opacity .1s}.overlay-widget.selected .resize-handle{opacity:1}.rh-nw{top:-5px;left:-5px;cursor:nw-resize}.rh-ne{top:-5px;right:-5px;cursor:ne-resize}.rh-sw{bottom:-5px;left:-5px;cursor:sw-resize}.rh-se{bottom:-5px;right:-5px;cursor:se-resize}.rh-n{top:-4px;left:50%;transform:translate(-50%);cursor:n-resize}.rh-s{bottom:-4px;left:50%;transform:translate(-50%);cursor:s-resize}.rh-w{left:-4px;top:50%;transform:translateY(-50%);cursor:w-resize}.rh-e{right:-4px;top:50%;transform:translateY(-50%);cursor:e-resize}.snap-guide{position:absolute;background:var(--accent);opacity:.5;pointer-events:none;z-index:200}.snap-guide.h{height:1px;left:0;right:0}.snap-guide.v{width:1px;top:0;bottom:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#1a161347}.toast-container{position:fixed;bottom:80px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:9999;pointer-events:none}.toast{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-md);background:var(--surface-3);border:1px solid var(--border-hi);color:var(--text);font-size:12px;font-weight:500;box-shadow:var(--shadow-float);pointer-events:auto;animation:toast-in .2s ease}.toast.ok{border-color:var(--green)}.toast.error{border-color:var(--red)}.toast.warn{border-color:var(--amber)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r-lg);padding:24px;min-width:360px;max-width:520px;box-shadow:var(--shadow-float)}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-weight:700;font-size:15px}.cmd-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;background:#00000080;display:flex;align-items:flex-start;justify-content:center;padding-top:120px}.cmd-palette{background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r-lg);width:560px;max-width:calc(100vw - 32px);box-shadow:var(--shadow-float);overflow:hidden}.cmd-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);padding:14px 16px;font-size:15px;color:var(--text);outline:none}.cmd-list{max-height:360px;overflow-y:auto}.cmd-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:background .1s;font-size:13px}.cmd-item:hover,.cmd-item.focused{background:var(--surface-3)}.cmd-item .cmd-title{flex:1}.cmd-item .cmd-group{font-size:11px;color:var(--text-muted)}.cmd-item .cmd-kbd{font-size:11px;font-family:var(--font-mono);color:var(--text-dim);padding:1px 5px;border:1px solid var(--border-hi);border-radius:3px}.progress-bar{height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .15s}