:root{--bg: #202225;--panel: #2b2d31;--panel-2: #34373b;--header: #313438;--border: #3c3f44;--border-soft: #34373b;--text: #e3e4e6;--text-dim: #9b9ea3;--accent: #1ba1e2;--accent-2: #0e86c0;--accent-soft: rgba(27, 161, 226, .16);--accent-dim: #185e80;--sketch: #38d6e6;--dim-color: #ff9b3d;--danger: #e0574a;--ok: #3fa34d;--vp-top: #4b5057;--vp-bottom: #23262a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;color:var(--text);background:var(--bg)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;width:100%;overflow:hidden}*{scrollbar-width:thin;scrollbar-color:#4a4d52 transparent}*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-thumb{background:#4a4d52;border-radius:5px;border:2px solid transparent;background-clip:content-box}*::-webkit-scrollbar-thumb:hover{background:#5a5e64;background-clip:content-box}*::-webkit-scrollbar-track{background:transparent}button{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:4px 10px;cursor:pointer;transition:background .1s,border-color .1s}button:hover{background:#3d4045;border-color:#4a4d52}button:active{background:var(--accent-soft)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent-2);color:#fff}button.primary:hover{background:#25aae8;border-color:var(--accent)}input,select{font:inherit;color:var(--text);background:#232529;border:1px solid var(--border);border-radius:3px;padding:3px 6px}input:focus,select:focus{outline:none;border-color:var(--accent)}.app{display:grid;grid-template-rows:84px 1fr;grid-template-columns:1fr;grid-template-areas:"toolbar" "center";height:100%;width:100%}.toolbar{grid-area:toolbar;display:flex;align-items:center;gap:6px;padding:0 8px;background:var(--panel);border-bottom:1px solid var(--border)}.toolbar .brand{font-weight:600;color:var(--accent);margin-right:12px}.toolbar .sep{width:1px;height:22px;background:var(--border);margin:0 4px}.ribbon{grid-area:toolbar;display:flex;align-items:stretch;background:var(--header);border-bottom:1px solid var(--border);padding:0 6px;gap:4px;overflow:visible}.ribbon-brand{display:flex;flex-direction:row;align-items:center;gap:8px;padding:0 14px 0 6px;border-right:1px solid var(--border)}.ribbon-brand .brand{font-weight:600;color:var(--text);font-size:14px;letter-spacing:.01em}.ribbon-logo{flex-shrink:0;display:block}.ribbon-brand{position:relative}.ribbon-brand-btn{display:flex;align-items:center;gap:8px;background:transparent;border:none;padding:2px 4px;border-radius:6px;cursor:pointer}.ribbon-brand-btn:hover{background:var(--panel-2)}.about-popover{position:absolute;top:calc(100% + 6px);left:6px;width:250px;background:var(--panel);border:1px solid var(--border);border-radius:7px;box-shadow:0 6px 22px #00000073;padding:10px;display:flex;flex-direction:column;gap:6px;z-index:80}.about-title{font-weight:600;font-size:13px;color:var(--text)}.about-row{font-size:11px;color:var(--text)}.about-row code{font-size:11px}.about-row.muted{color:var(--text-dim)}.about-close{align-self:flex-end;font-size:11px;padding:3px 10px}.recovery-banner{position:absolute;top:54px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 22px #00000073;padding:8px 12px;font-size:12px;z-index:90}.recovery-banner button{font-size:11px;padding:3px 10px}.ribbon-groups{display:flex;align-items:stretch;flex:1;min-width:0;overflow-x:auto;overflow-y:visible}.ribbon-group-wrap{display:flex;align-items:stretch}.ribbon-divider{width:1px;align-self:stretch;margin:10px 3px;background:var(--border)}.ribbon-group{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding:5px 4px 0}.ribbon-group-icons{display:flex;gap:1px;align-items:stretch;justify-content:center}.ribbon-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:46px;padding:0;background:transparent;border:none;border-bottom:2px solid transparent;border-radius:5px 5px 0 0;color:var(--text);transition:background .1s}.ribbon-icon-btn:hover{background:var(--accent-soft)}.ribbon-icon-btn.active{background:var(--accent-soft);border-bottom-color:var(--accent);color:var(--accent)}.ribbon-icon-btn:disabled{opacity:.3;background:transparent;cursor:not-allowed}.ribbon-group-label{margin-top:2px;padding:2px 8px 3px;font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-dim);background:transparent;border:none;border-top:1px solid transparent;border-radius:0;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap}.ribbon-group-label:hover{color:var(--text);border-top-color:var(--border)}.ribbon-caret{font-size:8px;opacity:.7}.ribbon-dropdown{position:fixed;z-index:500;min-width:180px;background:var(--panel-2);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 24px #00000073;padding:4px;display:flex;flex-direction:column;gap:1px}.ribbon-dropdown-item{display:flex;align-items:center;gap:8px;text-align:left;background:transparent;border:none;border-radius:4px;padding:6px 8px;color:var(--text)}.ribbon-dropdown-label{flex:1}.ribbon-dropdown-key{font-size:10px;color:var(--text-dim);padding:1px 5px;border:1px solid var(--border);border-radius:3px;margin-left:8px}.ribbon-dropdown-item:hover{background:var(--accent-soft)}.ribbon-dropdown-item.active{color:var(--accent)}.ribbon-dropdown-item:disabled{opacity:.4;cursor:not-allowed}.ribbon-end{display:flex;align-items:center;gap:10px;padding:0 6px 0 10px;border-left:1px solid var(--border)}.ribbon-status{font-size:11px;white-space:nowrap}.ribbon-finish{display:inline-flex;align-items:center;gap:6px;background:var(--ok);border-color:#4bb04e;color:#fff}.ribbon-finish:hover{background:#47b056;border-color:#57c267}.panel-stack{position:fixed;top:92px;right:8px;width:248px;max-height:calc(100vh - 140px);overflow-y:auto;display:flex;flex-direction:column;gap:6px;z-index:140}.panel-snap-zone{position:fixed;top:84px;right:0;bottom:0;width:264px;background:var(--accent-soft);border-left:2px solid var(--accent);z-index:130;pointer-events:none}.viewport{grid-area:center;position:relative;background:linear-gradient(180deg,var(--vp-top) 0%,var(--vp-bottom) 78%)}.viewport.design{background:#313539}.viewport canvas{display:block}.panel-section{border-bottom:1px solid var(--border);padding:8px 10px}.panel-section h3{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.feature-row,.body-row,.var-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:3px;cursor:pointer}.feature-row:hover,.body-row:hover,.var-row:hover{background:var(--panel-2)}.swatch{width:14px;height:14px;border-radius:3px;border:1px solid var(--border);flex-shrink:0}.muted{color:var(--text-dim)}.browser{font-size:12px;-webkit-user-select:none;user-select:none}.tree-row{display:flex;align-items:center;gap:5px;padding:2px 4px;border-radius:3px;min-height:24px}.tree-row:hover{background:var(--accent-soft)}.tree-row.folder{cursor:pointer}.tree-row.child{padding-left:20px}.tree-chevron{width:13px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--text-dim)}.tree-folder-ico,.tree-sketch-ico{flex-shrink:0;display:inline-flex;color:var(--text-dim)}.tree-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-count{color:var(--text-dim);font-size:10px;padding:0 2px}.tree-empty{padding:3px 6px 4px 26px;color:var(--text-dim);font-size:11px}.tree-icon-btn{width:22px;height:20px;padding:0;background:transparent;border:none;border-radius:3px;color:var(--text-dim);display:inline-flex;align-items:center;justify-content:center;opacity:0;flex-shrink:0}.tree-icon-btn.eye{opacity:1}.tree-icon-btn.eye.dim{color:#585c62}.tree-row:hover .tree-icon-btn{opacity:1}.tree-icon-btn:hover{background:var(--panel);color:var(--text)}.tree-color{width:16px;height:16px;padding:0;border:1px solid var(--border);border-radius:3px;background:transparent;flex-shrink:0}.tree-name{flex:1;min-width:0;background:transparent;border:1px solid transparent;padding:2px 4px;border-radius:3px;color:var(--text)}.tree-name:hover,.tree-name:focus{background:#232529;border-color:var(--border)}.panel-col{display:flex;flex-direction:column;gap:6px;padding:6px;overflow-y:auto}.panel-card{background:var(--panel-2);border:1px solid var(--border);border-radius:6px;overflow:hidden;flex-shrink:0}.panel-card.floating{position:fixed;width:240px;z-index:150}.panel-card.dragging{opacity:.9;pointer-events:none;z-index:300}.panel-card-header{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--panel);border-bottom:1px solid var(--border);cursor:grab;-webkit-user-select:none;user-select:none}.panel-card-header:active{cursor:grabbing}.panel-card-grip{color:var(--text-dim);font-size:12px;line-height:1}.panel-card-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);flex:1}.panel-card-close{background:transparent;border:none;color:var(--text-dim);font-size:12px;cursor:pointer;padding:0 2px;line-height:1}.panel-card-close:hover{color:var(--text)}.panel-card-body{padding:8px 10px}.constraints-palette{display:flex;flex-direction:column;gap:2px}.panel-dock-indicator{height:3px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--accent);margin:1px 2px}.op-dialog{position:fixed;top:92px;right:14px;z-index:120;width:296px;max-height:calc(100vh - 150px);background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:0 6px 22px #0006;display:flex;flex-direction:column}.op-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:var(--header);border-bottom:1px solid var(--border);border-radius:6px 6px 0 0}.op-dialog-title{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim)}.op-dialog-close{width:22px;height:22px;padding:0;background:transparent;border:none;color:var(--text-dim);font-size:12px}.op-dialog-close:hover{color:var(--text);background:var(--panel-2)}.op-dialog-body{padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}.op-dialog-footer{display:flex;justify-content:flex-end;gap:6px;padding:10px 12px;border-top:1px solid var(--border)}.navbar{position:absolute;left:50%;bottom:46px;transform:translate(-50%);display:flex;align-items:center;gap:1px;padding:3px 5px;background:#2b2d31eb;border:1px solid var(--border);border-radius:7px;box-shadow:0 2px 10px #0000004d;z-index:40}.navbar-btn{width:30px;height:26px;padding:0;background:transparent;border:none;border-radius:4px;color:var(--text-dim);display:inline-flex;align-items:center;justify-content:center}.navbar-btn:hover:not(:disabled){background:var(--accent-soft);color:var(--text)}.navbar-btn:disabled{opacity:.55;cursor:default}.navbar-text{font-size:9px;font-weight:600;letter-spacing:.04em}.navbar-sep{width:1px;height:16px;background:var(--border);margin:0 3px}.navbar-settings-wrap{position:relative;display:inline-flex}.vs-popover{position:absolute;bottom:36px;right:-4px;width:218px;background:var(--panel);border:1px solid var(--border);border-radius:7px;box-shadow:0 6px 22px #00000073;padding:8px;display:flex;flex-direction:column;gap:8px;z-index:60}.vs-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.vs-label{font-size:11px;color:var(--text-dim)}.vs-seg{display:inline-flex;border:1px solid var(--border);border-radius:5px;overflow:hidden}.vs-seg-btn{padding:3px 9px;font-size:11px;background:transparent;border:none;border-radius:0;color:var(--text-dim)}.vs-seg-btn:hover{background:var(--panel-2);color:var(--text)}.vs-seg-btn.active{background:var(--accent);color:#fff}.timeline{position:absolute;left:0;right:0;bottom:0;height:36px;display:flex;align-items:center;gap:6px;padding:0 8px;background:#282a2ef5;border-top:1px solid var(--border);z-index:45}.timeline-playback{display:flex;gap:1px;flex-shrink:0}.tl-pb{width:22px;height:24px;padding:0;background:transparent;border:none;border-radius:3px;color:var(--text-dim);font-size:11px;display:inline-flex;align-items:center;justify-content:center}.tl-pb:hover:not(:disabled){color:var(--text);background:var(--accent-soft)}.tl-pb:disabled{opacity:.5}.timeline-sep{width:1px;height:20px;background:var(--border);flex-shrink:0}.timeline-track{display:flex;align-items:center;gap:4px;overflow-x:auto;flex:1;height:100%;padding:4px 0}.tl-node{display:flex;align-items:center;gap:5px;padding:0 6px;height:26px;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;color:var(--text);white-space:nowrap;flex-shrink:0}.tl-node:hover{border-color:var(--accent)}.tl-node-name{font-size:11px}.tl-node-x{width:16px;height:16px;padding:0;background:transparent;border:none;color:var(--text-dim);font-size:9px;opacity:0}.tl-node:hover .tl-node-x{opacity:1}.tl-node-x:hover{color:var(--danger)}.timeline-empty{color:var(--text-dim);font-size:11px}.sketch-palette{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;padding:5px;background:#21252beb;border:1px solid var(--border);border-radius:8px;z-index:30}.sk-tile{width:60px;height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;border-radius:6px;color:var(--text-dim)}.sk-tile:hover{background:var(--accent-soft);color:var(--text)}.sk-tile.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.sk-tile-label{font-size:9px;letter-spacing:.01em}.sketch-coords{position:absolute;left:10px;bottom:10px;color:var(--text-dim);font-size:11px;font-family:monospace;background:#00000059;padding:2px 6px;border-radius:3px;pointer-events:none}.sketch-status{position:absolute;right:12px;bottom:10px;color:var(--sketch);font-size:11px;pointer-events:none}.snap-picker{position:absolute;right:12px;bottom:30px;display:flex;gap:3px;align-items:center;padding:3px;background:#21252beb;border:1px solid var(--border);border-radius:7px;z-index:30}.snap-btn{display:flex;align-items:center;gap:4px;padding:3px 7px;font-size:11px;color:var(--text-dim);background:transparent;border:1px solid transparent;border-radius:5px;cursor:pointer}.snap-btn:hover{background:var(--accent-soft)}.snap-btn.active{color:var(--text);border-color:var(--accent)}.snap-glyph{font-size:12px;line-height:1}.snap-grid{display:flex;align-items:center;gap:4px;padding:3px 7px;font-size:11px;color:var(--text-dim);border-left:1px solid var(--border);cursor:pointer}.stack-pick-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:199}.stack-pick{position:fixed;z-index:200;min-width:150px;padding:4px;background:var(--panel-2);border:1px solid var(--border);border-radius:6px;box-shadow:0 6px 20px #0006}.stack-pick-title{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);padding:3px 8px 5px}.stack-pick-row{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;font-size:12px;color:var(--text);background:transparent;border:none;border-radius:4px;cursor:pointer;text-align:left}.stack-pick-row:hover{background:var(--accent-soft)}.stack-pick-row.inert{color:var(--text-dim)}.stack-pick-icon{width:14px;text-align:center;color:var(--accent)}