.dock-layout{background-color:var(--canvas-bg);flex-direction:column;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.dock-layout__header{z-index:var(--z-header);flex-shrink:0}.dock-layout__body{flex:1;display:flex;position:relative;overflow:hidden}.dock-layout__statusbar{height:var(--statusbar-height);z-index:var(--z-header);flex-shrink:0}.dock-center-col{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.dock-zone{background:var(--surface-panel);-webkit-backdrop-filter:var(--glass-blur);transition:width var(--transition-fast), height var(--transition-fast);flex-direction:column;display:flex;position:relative;overflow:hidden}body.is-resizing .dock-zone,body.is-resizing .dock-center-col,body.is-resizing .dock-splitter,body.is-resizing .dock-corner-splitter{transition:none!important}.dock-zone--left{border-right:1px solid var(--border-default);height:100%;box-shadow:var(--shadow-xs);z-index:20}.dock-zone--right{border-left:1px solid var(--border-default);height:100%;box-shadow:var(--shadow-xs);z-index:20}.dock-zone--bottom{border-top:1px solid var(--border-default);width:100%;box-shadow:var(--shadow-md);z-index:22;flex-shrink:0;position:absolute;bottom:0;left:0;right:0}.dock-zone--left.dock-zone--elevated,.dock-zone--right.dock-zone--elevated{z-index:35}.dock-zone--bottom.dock-zone--elevated{z-index:29}.dock-zone--center{-webkit-backdrop-filter:none;min-width:0;min-height:0;z-index:var(--z-canvas);background:0 0;flex:1;position:relative}.dock-zone--collapsed{-webkit-user-select:none;user-select:none}.center-document-tabbar{background:var(--surface-dock-bar);border-bottom:1px solid var(--border-default);height:34px;padding:0 var(--space-xs);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:var(--space-xs);z-index:25;flex-shrink:0;display:flex}.center-document-tabbar__tabs{scrollbar-width:none;align-items:center;gap:2px;height:100%;display:flex;overflow:auto hidden}.center-document-tabbar__tabs::-webkit-scrollbar{display:none}.center-document-tabbar__tab{height:28px;padding:0 var(--space-md);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;align-items:center;gap:6px;display:inline-flex;position:relative}.center-document-tabbar__tab:hover{background:var(--surface-panel-hover);color:var(--text-primary)}.center-document-tabbar__tab--active{background:var(--surface-panel-solid);color:var(--text-primary);font-weight:var(--font-semibold)}.center-document-tabbar__tab--active:after{content:"";background:var(--accent-primary);border-radius:1px;height:2px;position:absolute;bottom:0;left:6px;right:6px}.center-document-tabbar__badge{color:#a5b4fc;text-transform:uppercase;letter-spacing:.04em;background:#6366f126;border-radius:9px;padding:1px 5px;font-size:9px;font-weight:600}.center-document-tabbar__right{align-items:center;gap:8px;padding-right:8px;display:flex}.dock-tabbar{height:var(--dock-tab-height);background:var(--surface-dock-bar);border-bottom:1px solid var(--border-default);padding:0 var(--space-xs);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:var(--space-xs);flex-shrink:0;display:flex}.dock-tabbar__tabs{scrollbar-width:none;align-items:center;gap:2px;height:100%;display:flex;overflow:auto hidden}.dock-tabbar__tabs::-webkit-scrollbar{display:none}.dock-tabbar__tab{height:28px;padding:0 var(--space-md);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--text-muted);align-items:center;gap:var(--space-xs);cursor:pointer;white-space:nowrap;transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;display:inline-flex}.dock-tabbar__tab:hover{background:var(--surface-panel-hover);color:var(--text-primary)}.dock-tabbar__tab--active{background:var(--surface-panel-solid);color:var(--text-primary);font-weight:var(--font-semibold);box-shadow:none;border:none}.dock-tabbar__close{border-radius:var(--radius-xs);width:14px;height:14px;color:var(--text-tertiary);justify-content:center;align-items:center;margin-left:2px;display:inline-flex}.dock-tabbar__close:hover{background:var(--accent-danger-light);color:var(--accent-danger)}.dock-tabbar__controls{flex-shrink:0;align-items:center;gap:2px;display:flex}.dock-tabbar__btn{border-radius:var(--radius-sm);width:24px;height:24px;color:var(--text-muted);justify-content:center;align-items:center;display:inline-flex}.dock-tabbar__btn:hover{background:var(--surface-panel-hover);color:var(--text-primary)}.dock-collapsed-strip{width:var(--collapsed-strip-width);height:100%;padding:var(--space-sm) 0;align-items:center;gap:var(--space-sm);background:var(--surface-dock-bar);flex-direction:column;display:flex}.dock-collapsed-strip__btn{border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-secondary);justify-content:center;align-items:center;display:inline-flex}.dock-collapsed-strip__btn:hover{background:var(--surface-panel-hover);color:var(--accent-primary)}.dock-collapsed-strip__label{writing-mode:vertical-rl;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--text-muted);letter-spacing:.05em;margin-top:var(--space-md);transform:rotate(180deg)}.dock-content{flex:1;min-height:0;position:relative;overflow:auto}.dock-splitter{z-index:calc(var(--z-panels) + 1);transition:background var(--transition-fast);background:0 0;flex-shrink:0;position:relative}.dock-splitter:after{content:"";transition:all var(--transition-fast);background:0 0;position:absolute}.dock-splitter--vertical{cursor:col-resize;z-index:28;width:5px;margin:0 -2px}.dock-splitter--vertical:after{width:2px;top:0;bottom:0;left:2px}.dock-splitter--horizontal{cursor:row-resize;z-index:26;flex-shrink:0;width:100%;height:5px;margin:-2px 0}.dock-splitter--horizontal:after{height:2px;top:2px;left:0;right:0}.dock-splitter:hover:after,.dock-splitter--active:after{background:var(--accent-primary);box-shadow:0 0 6px var(--accent-primary)}.dock-corner-splitter{-webkit-user-select:none;user-select:none;touch-action:none;z-index:40;position:absolute}.dock-corner-splitter__handle{width:6px;height:6px;transition:all var(--transition-fast);pointer-events:none;background:0 0;border-radius:50%}.dock-corner-splitter:hover .dock-corner-splitter__handle,.dock-corner-splitter--active .dock-corner-splitter__handle{background:var(--accent-primary);box-shadow:0 0 0 2px #20685966, 0 0 8px var(--accent-primary);transform:scale(1.4)}.statusbar{background:var(--surface-statusbar);border-top:1px solid var(--border-default);height:100%;padding:0 var(--space-md);font-size:var(--text-xs);color:var(--text-muted);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;display:flex}.statusbar__left,.statusbar__center,.statusbar__right{align-items:center;gap:var(--space-md);display:flex}.statusbar__item{align-items:center;gap:var(--space-xs);cursor:default;display:inline-flex}.statusbar__indicator{border-radius:var(--radius-full);background-color:var(--accent-success);width:7px;height:7px}.statusbar__indicator--dirty{background-color:var(--accent-warning)}.statusbar__badge{background:var(--surface-panel-hover);border:1px solid var(--border-default);border-radius:var(--radius-xs);font-family:var(--font-mono);padding:1px 6px;font-size:10px}.statusbar__zoom-btn{border-radius:var(--radius-xs);width:20px;height:20px;color:var(--text-secondary)}.statusbar__zoom-btn:hover{background:var(--surface-panel-hover);color:var(--text-primary)}.statusbar__drawer-group{padding-right:var(--space-sm);margin-right:var(--space-xs);border-right:1px solid var(--border-default);align-items:center;display:flex}.statusbar__drawer-trigger{height:22px;font-size:var(--text-xs);font-weight:var(--font-medium);letter-spacing:.04em;color:var(--text-muted);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;outline:none;align-items:center;gap:6px;padding:0 4px;display:inline-flex}.statusbar__drawer-trigger:hover{color:var(--text-primary);background:0 0;border:none;outline:none}.statusbar__drawer-trigger:focus-visible{color:var(--text-primary);outline:none}.statusbar__drawer-trigger--active{color:var(--text-secondary)}.statusbar__drawer-count{font-size:var(--text-xs);color:inherit;opacity:.85}.statusbar__log-btn{background:var(--surface-panel-solid);border:1px solid var(--border-default);border-radius:var(--radius-xs);height:20px;font-size:11px;font-weight:var(--font-medium);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;align-items:center;gap:5px;padding:0 8px;display:inline-flex}.statusbar__log-btn:hover{background:var(--surface-panel-hover);border-color:var(--border-strong);color:var(--text-primary)}.statusbar__log-btn--active{background:var(--surface-panel-selected);border-color:var(--accent-primary);color:var(--accent-primary);font-weight:var(--font-semibold)}.tearoff-overlay{z-index:9999;pointer-events:none;position:fixed;inset:0}.tearoff-header-dropzone{height:100px;transition:all .18s var(--ease-out-expo);pointer-events:none;background:0 0;border-bottom:2px solid #0000;position:absolute;top:0;left:0;right:0}.tearoff-header-dropzone--active{border-bottom-color:var(--accent-primary);background:linear-gradient(#2068591a 0%,#20685908 50%,#0000 100%);box-shadow:0 2px 16px #20685933}.tearoff-preview{background:var(--surface-panel);width:280px;height:70px;-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg), 0 0 0 1px #ffffff0a;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);pointer-events:none;animation:tearoff-appear .12s var(--ease-out-expo);will-change:transform, opacity, border-color;transition:border-color .15s,box-shadow .15s,opacity .15s;display:flex;position:absolute;top:0;left:0}.tearoff-preview--header-zone{border-color:var(--accent-primary);box-shadow:var(--shadow-lg), 0 0 16px #20685940, 0 0 0 1px var(--accent-primary)}.tearoff-bottom-drawer-dropzone{opacity:.85;pointer-events:none;height:240px;animation:tearoff-appear .15s var(--ease-out-expo);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#6366f11a;border:2px dashed #6366f180;border-bottom:none;justify-content:center;align-items:center;display:flex;position:absolute;bottom:36px;left:0;right:0}.tearoff-bottom-drawer-dropzone__inner{border-radius:var(--radius-md);color:var(--text-primary);background:#0f111ad1;border:1px solid #6366f166;flex-direction:column;align-items:center;gap:8px;padding:14px 22px;display:flex;box-shadow:0 8px 32px #00000080}.tearoff-bottom-drawer-dropzone__icon{color:#818cf8;justify-content:center;align-items:center;display:flex}.tearoff-bottom-drawer-dropzone__label{letter-spacing:.02em;color:#c7d2fe;font-size:13px;font-weight:600}.tearoff-bottom-drawer-dropzone__sub{color:var(--text-muted);font-size:11px}.tearoff-bottom-bar-dropzone{pointer-events:none;height:36px;animation:tearoff-appear .12s var(--ease-out-expo);background:#6366f138;border-top:2px solid #818cf8;justify-content:center;align-items:center;display:flex;position:absolute;bottom:0;left:0;right:0}.tearoff-bottom-bar-dropzone__label{color:#e0e7ff;letter-spacing:.02em;font-size:12px;font-weight:600}.tearoff-preview--bottom-drawer{box-shadow:var(--shadow-lg), 0 0 16px #6366f140, 0 0 0 1px #818cf8;border-color:#818cf8}.tearoff-preview--bottom-drawer .tearoff-preview__hint{color:#a5b4fc}.tearoff-preview--bottom-bar{box-shadow:var(--shadow-lg), 0 0 12px #6366f133;border-color:#a5b4fc}.tearoff-preview--bottom-bar .tearoff-preview__hint{color:#c7d2fe}.tearoff-preview--snapback{opacity:.45;border-style:dashed;border-color:var(--text-tertiary);box-shadow:none}.tearoff-preview--snapback .tearoff-preview__hint{color:var(--accent-warning)}.tearoff-preview__grip{color:var(--text-tertiary);flex-shrink:0;align-items:center;display:flex}.tearoff-preview__body{flex-direction:column;gap:4px;min-width:0;display:flex}.tearoff-preview__title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tearoff-preview__hint{font-size:10px;font-weight:var(--font-medium);color:var(--text-tertiary);letter-spacing:.03em;align-items:center;gap:4px;display:flex}.tearoff-preview--header-zone .tearoff-preview__hint{color:var(--accent-primary)}.dock-tabbar__tab--dragging{opacity:.35;outline:1px dashed var(--border-strong);outline-offset:-1px}@keyframes tearoff-appear{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.studio-header{background:var(--surface-panel-solid);border-bottom:1px solid var(--border-default);height:38px;padding:0 var(--space-md);-webkit-user-select:none;user-select:none;font-family:var(--font-sans);z-index:var(--z-header);justify-content:space-between;align-items:center;display:flex;position:relative}.studio-header__left{align-items:center;gap:var(--space-md);display:flex}.studio-header__center{justify-content:center;align-items:center;display:flex}.studio-header__brand{align-items:center;gap:var(--space-xs);cursor:pointer;padding:2px var(--space-xs);border-radius:var(--radius-sm);transition:background var(--transition-fast);display:flex}.studio-header__brand:hover{background:var(--surface-panel-hover)}.studio-header__logo{filter:drop-shadow(0 1px 2px #20685966);font-size:15px;line-height:1}.studio-header__title{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--text-primary);letter-spacing:-.01em}.studio-header__project-tag{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-muted);background:var(--surface-panel-active);padding:2px var(--space-sm);border-radius:var(--radius-xs);border:1px solid var(--border-subtle);align-items:center;gap:4px;display:inline-flex}.studio-header__project-dirty{background:var(--accent-warning);border-radius:50%;width:6px;height:6px}.studio-header__right{align-items:center;gap:var(--space-sm);display:flex}.studio-header__badge{font-size:var(--text-xs);color:var(--text-secondary);background:var(--surface-panel-hover);padding:2px var(--space-sm);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);align-items:center;gap:4px;display:inline-flex}.studio-header__icon-btn{border-radius:var(--radius-sm);width:26px;height:26px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;display:inline-flex}.studio-header__icon-btn:hover{background:var(--surface-panel-hover);color:var(--text-primary);border-color:var(--border-subtle)}.menu-bar{align-items:center;gap:1px;display:flex;position:relative}.menu-bar__item-wrapper{position:relative}.menu-bar__trigger{padding:3px var(--space-sm);border-radius:var(--radius-xs);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none}.menu-bar__trigger:hover,.menu-bar__trigger--open{background:var(--surface-panel-hover);color:var(--text-primary)}.menu-bar__trigger--open{background:var(--surface-panel-active);font-weight:var(--font-semibold)}.menu-bar__trigger--database{font-weight:var(--font-semibold);color:var(--text-primary);border:1px solid #0000;align-items:center;gap:4px;display:inline-flex}.menu-bar__trigger--database:hover{background:var(--surface-panel-hover);border-color:var(--border-subtle)}.menu-bar__trigger--database.menu-bar__trigger--active{color:#f59e0b;background:#f59e0b26;border-color:#f59e0b66}.menu-dropdown{background:var(--surface-panel-solid);min-width:220px;-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-xs) 0;z-index:var(--z-dropdown);animation:menuFadeIn var(--transition-fast) ease-out;flex-direction:column;display:flex;position:absolute;top:calc(100% + 4px);left:0}@keyframes menuFadeIn{0%{opacity:0;transform:translateY(-4px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.menu-item{padding:6px var(--space-md);font-size:var(--text-xs);color:var(--text-primary);text-align:left;cursor:pointer;width:100%;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;justify-content:space-between;align-items:center;display:flex;position:relative}.menu-item:hover:not(:disabled){background:var(--accent-primary-light);color:var(--accent-primary-hover)}.menu-item:disabled{opacity:.45;cursor:not-allowed}.menu-item__left{align-items:center;gap:var(--space-sm);display:flex}.menu-item__icon{width:14px;height:14px;color:var(--text-secondary);justify-content:center;align-items:center;display:flex}.menu-item:hover .menu-item__icon{color:var(--accent-primary-hover)}.menu-item__check{width:12px;height:12px;color:var(--accent-primary);margin-right:-2px}.menu-item__shortcut{font-family:var(--font-mono);color:var(--text-tertiary);background:var(--surface-panel-hover);border-radius:var(--radius-xs);border:1px solid var(--border-subtle);padding:1px 5px;font-size:10px}.menu-separator{background:var(--border-subtle);height:1px;margin:var(--space-xs) 0;width:100%}.menu-header-label{padding:4px var(--space-md);font-size:10px;font-weight:var(--font-bold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.main-toolbar{background:var(--surface-toolbar);border-bottom:1px solid var(--border-default);height:42px;padding:0 var(--space-md);-webkit-user-select:none;user-select:none;z-index:calc(var(--z-header) - 1);box-shadow:var(--shadow-xs);justify-content:space-between;align-items:center;display:flex;position:relative}.main-toolbar__group{align-items:center;gap:var(--space-xs);display:flex}.toolbar-btn{align-items:center;gap:var(--space-xs);height:28px;padding:0 var(--space-sm);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;background:0 0;border:1px solid #0000;display:inline-flex}.toolbar-btn:hover:not(:disabled){background:var(--surface-panel-hover);color:var(--text-primary);border-color:var(--border-subtle)}.toolbar-btn:active:not(:disabled){background:var(--surface-panel-active);transform:translateY(1px)}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed}.toolbar-btn--icon-only{justify-content:center;width:28px;padding:0}.toolbar-btn--primary{background:var(--surface-panel-solid);border-color:var(--border-default);color:var(--text-primary);font-weight:var(--font-semibold);box-shadow:var(--shadow-xs)}.toolbar-btn--primary:hover:not(:disabled){background:var(--surface-panel-hover);border-color:var(--border-strong)}.toolbar-btn--play{background:var(--accent-success);color:var(--text-inverse);font-weight:var(--font-semibold);padding:0 var(--space-md);border-color:#0000;box-shadow:0 1px 3px #10b98147}.toolbar-btn--play:hover:not(:disabled){background:#059669;box-shadow:0 2px 6px #10b98166}.toolbar-btn--play--active{background:var(--accent-danger);box-shadow:0 1px 3px #ef444447}.toolbar-btn--play--active:hover:not(:disabled){background:#dc2626;box-shadow:0 2px 6px #ef444466}.toolbar-btn--deploy{background:var(--accent-primary);color:var(--text-inverse);font-weight:var(--font-semibold);padding:0 var(--space-md);border-color:#0000;box-shadow:0 1px 3px #20685947}.toolbar-btn--deploy:hover:not(:disabled){background:var(--accent-primary-hover);box-shadow:0 2px 6px #20685966}.toolbar-btn--ai{color:var(--text-inverse);font-weight:var(--font-semibold);padding:0 var(--space-md);background:linear-gradient(135deg,#8b5cf6 0%,#6366f1 100%);border-color:#0000;box-shadow:0 1px 3px #8b5cf647}.toolbar-btn--ai:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 2px 6px #8b5cf666}.toolbar-segmented{background:var(--surface-panel-active);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);align-items:center;gap:2px;padding:2px;display:flex}.toolbar-segmented__btn{height:24px;padding:0 var(--space-sm);border-radius:var(--radius-xs);color:var(--text-muted);font-size:11px;font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;align-items:center;gap:4px;display:inline-flex}.toolbar-segmented__btn:hover{color:var(--text-primary)}.toolbar-segmented__btn--active{background:var(--surface-panel-solid);color:var(--text-primary);font-weight:var(--font-semibold);box-shadow:var(--shadow-xs)}.toolbar-divider{background:var(--border-subtle);width:1px;height:18px;margin:0 var(--space-xs)}.viewport-floating-actions{top:var(--space-md);left:var(--space-md);-webkit-backdrop-filter:none;border-radius:var(--radius-full);box-shadow:none;z-index:15;-webkit-user-select:none;user-select:none;transition:all var(--transition-fast);background:0 0;border:1px solid #0000;align-items:center;gap:2px;padding:3px 5px;display:flex;position:absolute;right:auto}.viewport-floating-actions:hover{background:var(--surface-panel-solid);-webkit-backdrop-filter:var(--glass-blur);border-color:var(--border-default);box-shadow:var(--shadow-md)}.viewport-floating-actions--top-right{border-radius:20px;flex-direction:column;gap:4px;padding:4px}.viewport-action-btn{border-radius:var(--radius-full);width:26px;height:26px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;display:inline-flex;position:relative}.viewport-action-btn:hover:not(:disabled){background:var(--surface-panel-hover);color:var(--text-primary)}.viewport-action-btn:active:not(:disabled){background:var(--surface-panel-active);transform:translateY(1px)}.viewport-action-btn:disabled{opacity:.35;cursor:not-allowed}.viewport-action-btn__dirty-dot{background:var(--accent-warning);border-radius:50%;width:5px;height:5px;position:absolute;top:4px;right:4px}.viewport-action-divider{width:1px;height:14px;transition:background var(--transition-fast);background:0 0;margin:0 2px}.viewport-floating-actions:hover .viewport-action-divider{background:var(--border-subtle)}.viewport-action-btn--active{background:var(--surface-panel-hover);color:var(--accent-primary)}.viewport-env-quick-popover{background:var(--surface-panel-solid,#18181b);border:1px solid var(--border-default,#27272a);-webkit-backdrop-filter:blur(16px);z-index:50;-webkit-user-select:none;user-select:none;border-radius:12px;flex-direction:column;gap:10px;width:240px;padding:12px;font-family:inherit;animation:.15s cubic-bezier(.16,1,.3,1) popoverFadeIn;display:flex;position:absolute;top:48px;right:48px;box-shadow:0 16px 36px #00000080}@keyframes popoverFadeIn{0%{opacity:0;transform:translateY(-4px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.viewport-env-popover-header{border-bottom:1px solid var(--border-subtle,#27272a);justify-content:space-between;align-items:center;padding-bottom:8px;display:flex}.viewport-env-popover-title{color:var(--text-primary,#f4f4f5);letter-spacing:.03em;text-transform:uppercase;align-items:center;gap:6px;font-size:11px;font-weight:700;display:flex}.viewport-env-popover-row{color:var(--text-secondary,#a1a1aa);justify-content:space-between;align-items:center;font-size:11px;display:flex}.viewport-env-popover-segmented{background:var(--surface-canvas,#09090b);border:1px solid var(--border-subtle,#27272a);border-radius:6px;align-items:center;gap:2px;padding:2px;display:flex}.viewport-env-popover-seg-btn{color:var(--text-muted,#71717a);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:3px 6px;font-size:10px;font-weight:600;transition:all .12s}.viewport-env-popover-seg-btn:hover{color:var(--text-primary,#f4f4f5)}.viewport-env-popover-seg-btn--active{background:var(--surface-panel-hover,#27272a);color:var(--text-primary,#f4f4f5)}.viewport-env-popover-btn{background:var(--surface-panel-hover,#27272a);width:100%;color:var(--text-primary,#f4f4f5);border:1px solid var(--border-subtle,#3f3f46);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:6px;margin-top:4px;padding:7px 10px;font-size:11px;font-weight:600;transition:all .14s;display:flex}.viewport-env-popover-btn:hover{background:var(--accent-primary,#6366f1);color:#fff;border-color:var(--accent-primary,#6366f1)}
.whiteboard-stage{-webkit-user-select:none;user-select:none;background-color:var(--canvas-bg);cursor:default;touch-action:none;width:100%;height:100%;position:relative;overflow:hidden}.whiteboard-stage--panning,.whiteboard-stage--tool-pan{cursor:grab}.whiteboard-stage--panning:active,.whiteboard-stage--is-dragging-pan{cursor:grabbing!important}.whiteboard-stage--tool-pencil{cursor:crosshair}.whiteboard-stage--tool-text{cursor:text}.whiteboard-grid{pointer-events:none;background-image:radial-gradient(var(--canvas-dot-color) var(--canvas-dot-size), transparent var(--canvas-dot-size));background-size:var(--canvas-grid-size,24px) var(--canvas-grid-size,24px);background-position:var(--canvas-grid-pos-x,0px) var(--canvas-grid-pos-y,0px);will-change:background-position, background-size;position:absolute;inset:0}.whiteboard-grid--lines{background-image:linear-gradient(to right, var(--canvas-dot-color,#94a3b826) 1px, transparent 1px), linear-gradient(to bottom, var(--canvas-dot-color,#94a3b826) 1px, transparent 1px)}.inspect-overlay-box{pointer-events:none;z-index:50;background:#6366f10a;border:1px dashed #6366f1;position:absolute}.inspect-dimension-badge{color:#38bdf8;font-family:var(--font-mono,monospace);white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172af0;border:1px solid #38bdf84d;border-radius:4px;align-items:center;gap:5px;padding:2px 6px;font-size:10px;font-weight:600;display:flex;position:absolute;bottom:calc(100% + 4px);left:0}.inspect-archetype-tag{color:#a5b4fc;text-transform:uppercase;letter-spacing:.5px;border-left:1px solid #ffffff2e;padding-left:4px;font-size:9px}.inspect-touch-warning{color:#f59e0b;align-items:center;gap:2px;font-size:9px;display:inline-flex}.whiteboard-world{transform-origin:0 0;transform:translate3d(calc(var(--canvas-pan-x) * 1px), calc(var(--canvas-pan-y) * 1px), 0) scale(var(--canvas-zoom));will-change:transform;position:absolute;top:0;left:0}.device-frame-container{transition:width var(--transition-normal), height var(--transition-normal);flex-direction:column;align-items:center;display:flex;position:absolute}.device-frame-meta{width:100%;padding:0 var(--space-xs) var(--space-sm);color:var(--text-muted);font-size:var(--text-xs);font-weight:var(--font-medium);letter-spacing:.02em;justify-content:space-between;align-items:center;display:flex}.device-frame-meta__badge{align-items:center;gap:var(--space-xs);background:var(--surface-panel-solid);border:1px solid var(--border-default);border-radius:var(--radius-full);box-shadow:var(--shadow-xs);font-family:var(--font-mono);color:var(--text-secondary);padding:2px 8px;font-size:10px;display:inline-flex}.device-frame-meta__status{color:var(--text-muted);align-items:center;gap:6px;display:inline-flex}.device-frame-meta__dot{background:var(--accent-success);width:6px;height:6px;box-shadow:0 0 6px var(--accent-success);border-radius:50%}.device-frame{background:var(--surface-panel-solid);border-radius:var(--radius-xl);box-shadow:0 25px 60px -15px #0f172a1f, 0 0 0 1px var(--border-default);transition:width var(--transition-normal), height var(--transition-normal);flex-direction:column;display:flex;position:relative;overflow:hidden}.device-frame--mobile{box-shadow:0 30px 70px -15px #0f172a2e, 0 0 0 8px #0f172a0d, 0 0 0 9px var(--border-default);border-radius:40px}.device-frame--tablet{box-shadow:0 30px 70px -15px #0f172a26, 0 0 0 6px #0f172a0a, 0 0 0 7px var(--border-default);border-radius:28px}.device-frame__notch{border-radius:var(--radius-full);width:110px;height:24px;margin:var(--space-xs) auto 0;z-index:20;background:#0f172a}.device-frame__screen{background:#fff;flex-direction:column;flex:1;width:100%;height:100%;display:flex;position:relative;overflow:hidden auto}.app-preview{width:100%;min-height:100%;color:var(--text-primary);font-family:var(--font-sans);background:#fff;flex-direction:column;display:flex}.app-preview__navbar{border-bottom:1px solid var(--border-subtle);height:56px;padding:0 var(--space-xl);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#fffffff2;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.app-preview__logo{align-items:center;gap:var(--space-sm);font-weight:var(--font-bold);font-size:var(--text-base);color:var(--text-primary);display:flex}.app-preview__nav-links{gap:var(--space-lg);font-size:var(--text-xs);color:var(--text-secondary);display:flex}.app-preview__nav-item{cursor:pointer;transition:color var(--transition-fast)}.app-preview__nav-item:hover{color:var(--accent-primary)}.app-preview__hero{padding:var(--space-4xl) var(--space-2xl);text-align:center;background:radial-gradient(circle at 50% 20%,#2068590f,#0000 70%);flex-direction:column;align-items:center;display:flex}.app-preview__tag{align-items:center;gap:var(--space-xs);background:var(--accent-primary-light);color:var(--accent-primary);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);margin-bottom:var(--space-md);padding:4px 12px;display:inline-flex}.app-preview__title{font-size:var(--text-4xl);font-weight:var(--font-bold);letter-spacing:-.02em;color:var(--text-primary);max-width:680px;margin-bottom:var(--space-md);line-height:1.15}.app-preview__subtitle{font-size:var(--text-base);color:var(--text-secondary);max-width:540px;line-height:var(--leading-relaxed);margin-bottom:var(--space-xl)}.app-preview__cta-group{gap:var(--space-md);align-items:center;display:flex}.app-preview__btn-primary{align-items:center;gap:var(--space-sm);background:var(--accent-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-fast);border:none;padding:10px 20px;display:inline-flex;box-shadow:0 4px 12px #20685940}.app-preview__btn-primary:hover{background:var(--accent-primary-hover);transform:translateY(-1px);box-shadow:0 6px 16px #20685959}.app-preview__btn-secondary{align-items:center;gap:var(--space-sm);background:var(--surface-panel-solid);color:var(--text-secondary);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);border:1px solid var(--border-default);cursor:pointer;transition:all var(--transition-fast);padding:10px 18px;display:inline-flex}.app-preview__btn-secondary:hover{background:var(--surface-panel-hover);color:var(--text-primary)}.app-preview__grid{gap:var(--space-lg);padding:var(--space-2xl);grid-template-columns:repeat(3,1fr);width:100%;max-width:1080px;margin:0 auto;display:grid}.device-frame--mobile .app-preview__grid{grid-template-columns:1fr}.device-frame--tablet .app-preview__grid{grid-template-columns:repeat(2,1fr)}.app-preview__card{padding:var(--space-xl);background:var(--surface-panel-solid);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);gap:var(--space-sm);transition:all var(--transition-fast);cursor:pointer;flex-direction:column;display:flex}.app-preview__card:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.app-preview__card-icon{border-radius:var(--radius-md);background:var(--accent-primary-light);width:36px;height:36px;color:var(--accent-primary);margin-bottom:var(--space-xs);justify-content:center;align-items:center;display:flex}.app-preview__card-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary)}.app-preview__card-desc{font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-normal)}.canvas-selection-box{pointer-events:none;border:2px solid var(--accent-primary);border-radius:var(--radius-xs);z-index:30;position:absolute;box-shadow:0 0 0 1px #20685933}.canvas-selection-box__label{background:var(--accent-primary);color:#fff;border-radius:var(--radius-xs);font-size:10px;font-family:var(--font-mono);font-weight:var(--font-medium);white-space:nowrap;pointer-events:none;padding:1px 6px;position:absolute;top:-24px;left:-2px}.canvas-selection-handle{border:1.5px solid var(--accent-primary);pointer-events:auto;background:#fff;border-radius:1px;width:8px;height:8px;position:absolute;box-shadow:0 1px 3px #00000026}.canvas-selection-handle--tl{cursor:nwse-resize;top:-4px;left:-4px}.canvas-selection-handle--tr{cursor:nesw-resize;top:-4px;right:-4px}.canvas-selection-handle--bl{cursor:nesw-resize;bottom:-4px;left:-4px}.canvas-selection-handle--br{cursor:nwse-resize;bottom:-4px;right:-4px}.canvas-selection-handle--tc{cursor:ns-resize;top:-4px;left:calc(50% - 4px)}.canvas-selection-handle--bc{cursor:ns-resize;bottom:-4px;left:calc(50% - 4px)}.canvas-selection-handle--ml{cursor:ew-resize;top:calc(50% - 4px);left:-4px}.canvas-selection-handle--mr{cursor:ew-resize;top:calc(50% - 4px);right:-4px}.floating-dock-wrapper{z-index:var(--z-floating-dock);pointer-events:auto;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.floating-dock{-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-2xl);border:1px solid var(--border-default);box-shadow:var(--shadow-floating-dock);transition:all var(--transition-fast);background:#ffffffeb;align-items:center;gap:1px;padding:3px 5px;display:flex}.floating-dock:hover{border-color:#0f172a1f;box-shadow:0 16px 42px -4px #0f172a1f,0 4px 14px -2px #0f172a0f}.floating-dock__btn{border-radius:var(--radius-md);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.floating-dock__btn:hover{background:var(--surface-panel-hover);color:var(--text-primary);transform:translateY(-1px)}.floating-dock__btn--active{font-weight:var(--font-semibold);background:var(--surface-panel-selected)!important;color:var(--accent-primary)!important}.floating-dock__btn--active:after{content:"";background:var(--accent-primary);border-radius:50%;width:4px;height:4px;position:absolute;bottom:2px}.floating-dock__divider{background:var(--border-default);width:1px;height:18px;margin:0 3px}.floating-dock__tooltip{background:var(--surface-tooltip);color:#fff;border-radius:var(--radius-md);white-space:nowrap;pointer-events:none;opacity:0;transition:all var(--transition-fast);box-shadow:var(--shadow-md);align-items:center;gap:var(--space-xs);z-index:var(--z-tooltip);padding:4px 8px;font-size:11px;display:flex;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)translateY(4px)}.floating-dock__btn:hover .floating-dock__tooltip{opacity:1;transform:translate(-50%)translateY(0)}.floating-dock__kbd{border-radius:var(--radius-xs);font-size:9px;font-family:var(--font-mono);color:#ffffffd9;background:#ffffff2e;justify-content:center;align-items:center;padding:1px 4px;display:inline-flex}.zoom-controls{-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-full);border:1px solid var(--border-default);box-shadow:var(--shadow-floating-dock);z-index:var(--z-floating-dock);transition:all var(--transition-fast);background:#ffffffeb;align-items:center;gap:2px;padding:3px 4px;display:flex;position:absolute;bottom:18px;right:18px}.zoom-controls:hover{box-shadow:0 16px 42px -4px #0f172a1f,0 4px 14px -2px #0f172a0f}.zoom-controls__btn{border-radius:var(--radius-full);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.zoom-controls__btn:hover{background:var(--surface-panel-hover);color:var(--text-primary)}.zoom-controls__btn:disabled{opacity:.35;cursor:not-allowed}.zoom-controls__readout{font-size:var(--text-xs);font-family:var(--font-mono);font-weight:var(--font-medium);color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-xs);transition:all var(--transition-fast);background:0 0;border:none;padding:0 6px}.zoom-controls__readout:hover{background:var(--surface-panel-hover);color:var(--accent-primary)}.zoom-controls__divider{background:var(--border-default);width:1px;height:16px;margin:0 2px}.canvas-blank-screen{-webkit-user-select:none;user-select:none;background-color:#0b0f19!important;background-image:radial-gradient(#ffffff14 1px,#0000 1px),radial-gradient(#6366f112 1.5px,#0000 1.5px)!important;background-position:0 0,0 0!important;background-size:24px 24px,120px 120px!important;justify-content:center!important;align-items:center!important;min-height:100%!important;display:flex!important;position:relative!important}.canvas-crosshair-axes{pointer-events:none;z-index:1;position:absolute;top:0;left:0}.canvas-axis-line{pointer-events:none;position:absolute}.canvas-axis-line--x{background:linear-gradient(90deg,#0000 0%,#2068590a 35%,#20685938 49.5%,#20685973 50%,#20685938 50.5%,#2068590a 65%,#0000 100%);width:100000px;height:1px;top:0;left:-50000px}.canvas-axis-line--y{background:linear-gradient(#0000 0%,#2068590a 35%,#20685938 49.5%,#20685973 50%,#20685938 50.5%,#2068590a 65%,#0000 100%);width:1px;height:100000px;top:-50000px;left:0}.canvas-center-origin{z-index:2;-webkit-user-select:none;user-select:none;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.canvas-origin-reticle{-webkit-backdrop-filter:none;backdrop-filter:none;width:24px;height:24px;box-shadow:none;background:0 0;border:1px solid #20685959;border-radius:50%;justify-content:center;align-items:center;transition:border-color .2s,transform .2s;display:flex;position:relative}.canvas-origin-icon{color:#206859;opacity:.75;filter:none;transition:color .2s,opacity .2s}