:root{color-scheme:dark;--bg:#0d0f14;--surface:#13161d;--surface-2:#171b23;--surface-3:#1d222c;--surface-hover:#252b37;--border:#282e39;--border-strong:#363e4c;--text:#eff2f8;--muted:#8e98a9;--muted-2:#687386;--accent:#8197ff;--accent-strong:#697fff;--accent-soft:rgba(129,151,255,.13);--success:#6bc9a4;--warning:#e6b76a;--danger:#f17685;--radius:10px;--topbar-h:60px;--toolbar-h:48px;--statusbar-h:25px;--hierarchy-width:236px;--code-width:350px;--inspector-width:294px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;background:var(--bg);color:var(--text);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body{height:100%;width:100%;margin:0;overflow:hidden}body{min-width:320px;background:var(--bg)}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:focus:not(:focus-visible){outline:none}.app-shell{height:100dvh;display:flex;flex-direction:column;min-width:0}.topbar{height:var(--topbar-h);min-height:var(--topbar-h);display:flex;align-items:center;gap:24px;padding:0 18px;background:#111319;border-bottom:1px solid var(--border);z-index:20}.brand{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;flex:none}.brand-mark{height:30px;width:30px;border:1px solid #414c70;border-radius:9px;background:#20283e;display:flex;align-items:center;justify-content:center;gap:2px;padding:5px}.brand-mark span{display:block;width:3px;border-radius:3px;background:#9aabff}.brand-mark span:nth-child(1){height:9px;opacity:.72}.brand-mark span:nth-child(2){height:16px}.brand-mark span:nth-child(3){height:12px;opacity:.85}.brand-copy{display:flex;align-items:baseline;gap:5px;white-space:nowrap}.brand-copy strong{font-size:14px;letter-spacing:-.035em;font-weight:740}.brand-copy small{font-size:9px;letter-spacing:.16em;font-weight:800;color:#a3b1ff}.project-breadcrumb{display:flex;align-items:center;gap:9px;color:#b1b9c7;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}.project-breadcrumb #project-name{font-weight:600;color:#e5e9f2;max-width:220px;overflow:hidden;text-overflow:ellipsis}.crumb-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(107,201,164,.1);flex:none}.crumb-divider{color:#535c6b}.muted{color:var(--muted)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:7px;flex:none}.icon-button,.small-icon-button,.zoom-btn{border:1px solid transparent;background:transparent;color:#aeb7c7;border-radius:7px;display:inline-flex;align-items:center;justify-content:center}.icon-button{height:32px;width:32px;font-size:20px}.icon-button:hover,.small-icon-button:hover,.zoom-btn:hover{background:var(--surface-hover);border-color:var(--border)}.action-divider,.toolbar-separator{width:1px;height:22px;background:var(--border);margin:0 3px}.quiet-button,.primary-button,.danger-button,.text-button{min-height:32px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;border-radius:7px;border:1px solid var(--border-strong);background:#1b2029;color:#dce2ee;font-size:12px;font-weight:620;white-space:nowrap;transition:background .13s,border-color .13s,transform .13s}.quiet-button:hover,.text-button:hover{background:#252b36;border-color:#475165}.primary-button{background:var(--accent-strong);color:white;border-color:#7f91ff}.primary-button:hover{background:#7e90ff;border-color:#9daaff}.danger-button{background:#48242c;border-color:#7d3a47;color:#ffced4}.danger-button:hover{background:#5a2934}.button-symbol{font-size:14px;line-height:1}.mobile-overflow{display:none}.workspace-toolbar{height:var(--toolbar-h);min-height:var(--toolbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 20px;background:#101218;border-bottom:1px solid var(--border);gap:12px}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:15px;min-width:0}.workspace-label{font-size:9px;font-weight:850;letter-spacing:.13em;color:#6f798b;white-space:nowrap}.saved-state{display:flex;align-items:center;gap:7px;color:#909aab;font-size:11px;white-space:nowrap}.status-dot{width:6px;height:6px;background:var(--success);border-radius:50%;flex:none}.device-switch{padding:3px;border:1px solid var(--border);background:#0e1016;border-radius:8px;display:flex;gap:2px}.device-option{border:0;background:transparent;color:#7f8a9d;border-radius:5px;height:28px;padding:0 9px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px}.device-option>span:first-child{font-size:14px;color:#9ca6b9;line-height:1}.device-option:hover{color:#dbe2ef}.device-option.active{background:#282f40;color:#f1f3f9;box-shadow:inset 0 0 0 1px #38435a}.device-option.active>span:first-child{color:#b5c0ff}.toolbar-separator{margin:0}.zoom-btn{height:27px;width:28px;background:#171b23;border-color:var(--border);font-size:17px}.zoom-value{font-size:11px;color:#b5bdcb;min-width:36px;text-align:center;font-variant-numeric:tabular-nums}.text-button{min-height:27px;padding:0 9px;background:transparent;border-color:var(--border);font-size:11px}.workspace{display:grid;grid-template-columns:minmax(185px,var(--hierarchy-width)) 5px minmax(270px,var(--code-width)) 5px minmax(290px,1fr) 5px minmax(250px,var(--inspector-width));gap:0;flex:1;min-height:0;padding:8px 8px 7px;background:#0e1015}.panel{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:9px;overflow:hidden}.panel-heading{height:62px;min-height:62px;border-bottom:1px solid #262c36;padding:13px 13px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-heading h2{margin:0;font-size:12px;font-weight:730;letter-spacing:-.01em}.panel-heading p{margin:4px 0 0;font-size:10px;color:var(--muted);white-space:nowrap}.count-pill,.file-chip{font-size:10px;color:#aeb8cb;border:1px solid #343c4b;background:#202530;padding:3px 7px;border-radius:6px;font-variant-numeric:tabular-nums}.heading-actions,.preview-heading-actions{display:flex;align-items:center;gap:8px}.small-icon-button{width:26px;height:26px;font-size:15px;border:1px solid var(--border);background:#1b2029;flex:none}.file-chip{font-size:9px;padding:3px 6px;color:#a9b5ff;border-color:#3a4569;background:#222840}.add-component-row{display:flex;gap:6px;padding:10px 10px 9px;border-bottom:1px solid var(--border)}.add-component-row select{flex:1;min-width:0;height:31px;padding:0 7px;background:#1a1e27;color:#d7deeb;border:1px solid #343b49;border-radius:6px;font-size:11px;outline-offset:1px}.add-button{height:31px;width:33px;border-radius:6px;border:1px solid #414d73;background:#27304a;color:#b9c5ff;font-size:20px;display:flex;align-items:center;justify-content:center;flex:none}.add-button:hover{background:#333e5d}.tree-scroll{flex:1;min-height:0;overflow:auto;padding:9px 7px 12px;scrollbar-width:thin;scrollbar-color:#3b4352 transparent}.tree-group{display:flex;flex-direction:column;gap:2px}.tree-item{width:100%;min-height:31px;border:1px solid transparent;background:transparent;border-radius:6px;display:flex;align-items:center;gap:7px;padding:4px 7px;text-align:left;color:#aab4c4;font-size:11px;white-space:nowrap;overflow:hidden}.tree-item:hover{background:#1b2029;color:#eff2f8}.tree-item.selected{background:#272f45;border-color:#3b486c;color:#f5f6fc}.tree-item .tree-indent{flex:none;width:0}.tree-item .tree-chevron{width:11px;flex:none;color:#737e92;font-size:10px}.tree-item .tree-icon{height:19px;width:19px;border:1px solid #343e52;background:#222938;display:flex;align-items:center;justify-content:center;border-radius:4px;color:#a8b7ff;font-size:10px;flex:none}.tree-item.selected .tree-icon{border-color:#53659a;background:#343f60;color:#d3daff}.tree-name{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.tree-class{font-size:9px;color:#6e7a8e;max-width:72px;overflow:hidden;text-overflow:ellipsis;flex:none}.empty-panel-state{min-height:205px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px 18px;color:var(--muted)}.empty-panel-state strong{margin-top:12px;color:#c5ccda;font-size:11px}.empty-panel-state p{line-height:1.5;font-size:10px;max-width:180px;margin:6px 0 0}.empty-state-icon{width:34px;height:34px;border-radius:9px;border:1px solid #323b4d;background:#202633;display:grid;place-items:center;color:#aebaff;font-size:18px}.panel-footer{height:34px;min-height:34px;display:flex;align-items:center;gap:6px;padding:0 10px;border-top:1px solid #252b35;color:#7d889a;font-size:9px;white-space:nowrap;overflow:hidden}.tiny-dot{height:5px;width:5px;border-radius:50%;background:#8f9eff;flex:none}.splitter{cursor:col-resize;position:relative;z-index:2;touch-action:none}.splitter:after{content:"";position:absolute;top:0;bottom:0;left:1px;right:1px;border-radius:5px;transition:background .13s}.splitter:hover:after,.splitter.dragging:after{background:#56658e}.code-panel{background:#11141b}.code-heading{height:62px}.code-editor-wrap{flex:1;min-height:0;display:flex;overflow:hidden;background:#11141b}.line-numbers{width:39px;flex:none;padding:12px 9px 12px 0;text-align:right;color:#596477;line-height:19px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;white-space:pre;overflow:hidden;user-select:none;border-right:1px solid #222833}.line-numbers span{display:block;height:19px}.line-numbers .active-line{color:#b0baff}.code-editor-wrap textarea{flex:1;min-width:0;width:0;resize:none;border:0;outline:0!important;background:transparent;color:#cbd3e1;padding:12px 12px 18px;font:11.5px/19px ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;tab-size:2;white-space:pre;overflow:auto;caret-color:#a5b3ff;scrollbar-color:#394150 transparent;scrollbar-width:thin}.code-editor-wrap textarea::placeholder{color:#526073;opacity:1}.code-statusbar{height:29px;min-height:29px;display:flex;justify-content:space-between;gap:5px;align-items:center;padding:0 10px;border-top:1px solid #262c36;color:#6f7a8d;font-size:9px}.parse-status{color:#8a98b0;white-space:nowrap;text-align:right;overflow:hidden;text-overflow:ellipsis}.parse-status.ok{color:var(--success)}.parse-status.warn{color:var(--warning)}.preview-panel{background:#14171e}.preview-heading{height:62px}.preview-heading p{font-variant-numeric:tabular-nums}.preview-live{display:flex;align-items:center;gap:5px;color:#92d9b9;font-size:9px;font-weight:800;letter-spacing:.08em}.preview-live span{width:5px;height:5px;border-radius:50%;background:#67c89f;box-shadow:0 0 0 3px rgba(103,200,159,.1)}.preview-content{flex:1;min-height:0;overflow:auto;display:flex;position:relative;align-items:center;justify-content:center;padding:20px;background:#11141a;scrollbar-color:#3b4352 transparent;scrollbar-width:thin}.canvas-viewport{max-width:100%;max-height:100%;overflow:visible;display:flex;align-items:center;justify-content:center}.canvas-scaler{position:relative;flex:none}.canvas-stage{position:absolute;left:0;top:0;transform-origin:top left;overflow:hidden;background-color:#171a21;background-image:linear-gradient(rgba(150,163,190,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(150,163,190,.045) 1px,transparent 1px);background-size:20px 20px;box-shadow:0 15px 50px rgba(0,0,0,.28);border:1px solid #3b4353;border-radius:3px;isolation:isolate}.gui-node{position:absolute;box-sizing:border-box;overflow:hidden;user-select:none;touch-action:none}.gui-node.selected-node{outline:1px solid #95a5ff!important;outline-offset:1px;z-index:999999!important;box-shadow:0 0 0 2px rgba(115,140,255,.12)}.gui-node.selected-node:after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid rgba(195,203,255,.35)}.gui-node-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:pre-wrap;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;line-height:1.15;padding:2px 4px;text-align:center;pointer-events:none}.gui-node-image-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#6d788b;font-size:10px;background:repeating-linear-gradient(135deg,rgba(100,115,145,.1) 0 7px,rgba(100,115,145,.04) 7px 14px);pointer-events:none}.gui-node-image-placeholder span{padding:4px 6px;border:1px solid rgba(130,145,174,.25);border-radius:4px;background:rgba(16,19,26,.6)}.resize-handle{position:absolute;width:7px;height:7px;right:-4px;bottom:-4px;background:#bcc6ff;border:1px solid #3e4f91;border-radius:2px;cursor:nwse-resize;z-index:1000000}.preview-footer{height:32px;min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 11px;border-top:1px solid #2a303b;color:#8792a5;font-size:9px;white-space:nowrap}.preview-footer kbd{font:inherit;border:1px solid #3b4352;background:#20252f;border-radius:3px;padding:2px 4px;color:#c4ccdc}.preview-footer #selection-coordinates{overflow:hidden;text-overflow:ellipsis}.empty-preview-state{max-width:290px;text-align:center;margin:auto;display:flex;flex-direction:column;align-items:center}.empty-preview-state h3{margin:17px 0 6px;font-size:14px;font-weight:690;letter-spacing:-.02em}.empty-preview-state p{margin:0;color:#8d98aa;font-size:11px;line-height:1.6;max-width:260px}.empty-window-illustration{width:172px;height:116px;border:1px solid #353e50;border-radius:9px;overflow:hidden;background:#1a1f2a;transform:perspective(500px) rotateX(2deg)}.illustration-top{height:23px;border-bottom:1px solid #323a49;display:flex;align-items:center;gap:4px;padding:0 8px}.illustration-top i{width:5px;height:5px;border-radius:50%;background:#65728b}.illustration-body{display:flex;flex-direction:column;gap:7px;padding:14px}.illustration-body span{height:12px;border-radius:4px;background:#283145}.illustration-body span:first-child{width:42%;background:#38466b}.illustration-body span:nth-child(2){width:90%}.illustration-body span:nth-child(3){width:65%}.empty-preview-actions{display:flex;gap:7px;margin-top:16px;flex-wrap:wrap;justify-content:center}.empty-preview-actions .primary-button,.empty-preview-actions .quiet-button{min-height:32px}.inspector-panel{background:#14171e}.inspector-content{flex:1;min-height:0;overflow:auto;padding:0 12px 15px;scrollbar-color:#3b4352 transparent;scrollbar-width:thin}.inspector-empty{margin:auto;padding:25px 23px;text-align:center;display:flex;flex-direction:column;align-items:center;color:var(--muted)}.inspector-empty-icon{height:37px;width:37px;border:1px solid #343d4e;background:#202632;color:#9eacff;border-radius:10px;display:grid;place-items:center;font-size:21px;margin-bottom:12px}.inspector-empty strong{font-size:12px;color:#cbd2df}.inspector-empty p{max-width:205px;font-size:10px;line-height:1.6;margin:7px 0 0}.inspector-footer{height:34px;min-height:34px;padding:0 11px;display:flex;gap:7px;align-items:center;border-top:1px solid #2a303b;color:#818da0;font-size:9px}.property-changed-dot{width:6px;height:6px;border-radius:50%;background:#9aa8ff;flex:none}.inspector-section{padding:13px 0 11px;border-bottom:1px solid #282e39}.inspector-section:last-child{border-bottom:0}.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.section-title-row h3{margin:0;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#9ca7b9;font-weight:800}.section-title-row span{font-size:9px;color:#69768a}.selected-component-summary{display:flex;align-items:center;gap:8px;padding:12px 0 1px}.selected-component-icon{width:28px;height:28px;border-radius:7px;border:1px solid #3b4561;background:#252c41;color:#b4c0ff;display:grid;place-items:center;font-size:13px;flex:none}.selected-component-name{min-width:0;flex:1}.selected-component-name strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selected-component-name small{display:block;font-size:10px;color:#8692a5;margin-top:3px}.property-field{margin:8px 0 0;min-width:0}.property-field>label,.saved-color-add label{display:block;margin-bottom:5px;color:#8792a5;font-size:10px;font-weight:600}.property-control{min-width:0}.property-control input[type=text],.property-control input[type=number],.property-control select,.property-control textarea,.saved-color-add input:not([type=color]){width:100%;min-width:0;height:29px;padding:0 8px;color:#dce3ef;background:#1c212b;border:1px solid #343c4b;border-radius:5px;font-size:11px;outline-offset:1px}.property-control textarea{height:52px;resize:vertical;padding:7px;line-height:1.4}.property-control input[type=number]{font-variant-numeric:tabular-nums}.property-control input:focus,.property-control select:focus,.saved-color-add input:focus{border-color:#6475b9;outline:1px solid rgba(129,151,255,.16)}.property-control input[type=checkbox]{appearance:none;width:31px;height:18px;border-radius:12px;border:1px solid #454d5d;background:#292f3a;position:relative;cursor:pointer;transition:background .14s;vertical-align:middle}.property-control input[type=checkbox]:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#aab3c2;transition:transform .14s}.property-control input[type=checkbox]:checked{background:#586da8;border-color:#8498ed}.property-control input[type=checkbox]:checked:after{transform:translateX(13px);background:white}.property-control input[type=range]{width:100%;accent-color:#8d9fff}.toggle-control{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px;padding:0 7px;border:1px solid #343c4b;border-radius:5px;background:#1c212b}.toggle-control span{color:#adb7c8;font-size:11px}.split-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px}.split-field{min-width:0}.split-field label{display:block;font-size:9px;color:#7c879a;margin:0 0 4px}.compact-number{display:flex;align-items:center;gap:5px}.compact-number input{min-width:0;flex:1}.input-suffix{font-size:9px;color:#717d90;flex:none}.color-control{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:6px}.color-control input[type=color]{width:34px;height:29px;padding:2px;border:1px solid #343c4b;border-radius:5px;background:#1c212b;cursor:pointer}.color-control .hex-field{min-width:0;width:100%;text-transform:uppercase;font:10.5px ui-monospace,monospace}.saved-colors-trigger{height:29px;padding:0 8px;border:1px solid #343c4b;border-radius:5px;background:#1c212b;color:#aab6cb;font-size:10px}.property-note{font-size:9px;color:#8b98ad;line-height:1.45;margin-top:5px}.property-row-actions{display:flex;gap:6px}.property-row-actions button{flex:1;height:28px;background:#1d222c;border:1px solid #353d4b;border-radius:5px;color:#c3ccdc;font-size:10px}.property-row-actions button:hover{background:#2a303d}.app-statusbar{height:var(--statusbar-h);min-height:var(--statusbar-h);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border-top:1px solid #242a34;background:#111319;color:#737f92;font-size:9px;white-space:nowrap}.status-left,.status-right{display:flex;align-items:center;gap:8px;min-width:0}.status-left span:last-child{overflow:hidden;text-overflow:ellipsis}.connection-indicator{height:6px;width:6px;border-radius:50%;background:#6fc8a4}.status-divider{color:#465061}.mobile-panel-nav{display:none}.toast-region{position:fixed;right:16px;bottom:38px;z-index:100;display:flex;flex-direction:column;gap:7px;pointer-events:none}.toast{max-width:min(380px,calc(100vw - 28px));background:#222834;border:1px solid #414b60;border-radius:8px;padding:11px 13px;display:flex;align-items:flex-start;gap:8px;color:#e0e6f2;box-shadow:0 8px 28px rgba(0,0,0,.32);font-size:11px;line-height:1.5;animation:toast-in .18s ease-out}.toast.success:before{content:"✓";color:var(--success);font-weight:900}.toast.warning:before{content:"!";color:var(--warning);font-weight:900}.toast.error:before{content:"×";color:var(--danger);font-weight:900}@keyframes toast-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.modal{padding:0;border:1px solid #414959;border-radius:12px;background:#171b23;color:var(--text);width:min(520px,calc(100vw - 26px));max-width:calc(100vw - 26px);box-shadow:0 30px 100px rgba(0,0,0,.55)}.modal::backdrop{background:rgba(3,5,9,.72);backdrop-filter:blur(3px)}.modal-card{padding:25px;display:flex;flex-direction:column;align-items:flex-start}.modal-card h2,.compare-card h2{margin:0;font-size:16px;letter-spacing:-.025em}.modal-card p,.compare-card p{color:#8f9bad;line-height:1.55;font-size:11px;margin:8px 0 0}.modal-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-weight:800;margin-bottom:16px}.warning-icon{color:#ffce80;background:#3b3020;border:1px solid #6a5230}.modal-actions{display:flex;justify-content:flex-end;gap:8px;width:100%;margin-top:22px;flex-wrap:wrap}.compare-modal,.diagnostics-modal,.export-modal{width:min(1000px,calc(100vw - 26px))}.compare-card{padding:21px;max-height:min(88dvh,900px);overflow:auto}.modal-heading-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.modal-heading-row>div{min-width:0}.diff-summary,.export-notice{margin:15px 0;padding:9px 11px;border:1px solid #323a49;border-radius:6px;background:#1c222c;color:#aeb9cd;font-size:10px;line-height:1.5}.compare-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:240px}.compare-columns section{min-width:0}.compare-columns h3{margin:0 0 7px;font-size:10px;color:#a8b2c4}.compare-columns pre{margin:0;min-height:220px;max-height:52dvh;overflow:auto;padding:11px;border:1px solid #2e3542;border-radius:6px;background:#101319;color:#bfc9d8;white-space:pre;tab-size:2;font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.compare-columns section:first-child pre{color:#dfaaa7}.compare-columns section:last-child pre{color:#a7dbbc}.export-modal textarea{width:100%;height:min(48dvh,440px);resize:vertical;min-height:180px;background:#101319;color:#d3dbea;border:1px solid #343d4b;border-radius:7px;padding:12px;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;tab-size:2}.diagnostics-list{display:flex;flex-direction:column;gap:7px;margin-top:15px}.diagnostic-item{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid #303745;border-radius:6px;background:#1b2029}.diagnostic-icon{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;flex:none;margin-top:1px}.diagnostic-item.error .diagnostic-icon{background:#4b252d;color:#ffb4bd}.diagnostic-item.warning .diagnostic-icon{background:#463720;color:#f3cf8e}.diagnostic-item.success .diagnostic-icon{background:#203d32;color:#9ee3c4}.diagnostic-copy{min-width:0}.diagnostic-copy strong{font-size:11px;display:block}.diagnostic-copy p{margin:4px 0 0;font-size:10px;color:#8f9bad;line-height:1.5}.diagnostic-location{font:9px ui-monospace,monospace;color:#738099;margin-top:3px}.colors-modal{width:min(470px,calc(100vw - 26px))}.color-library-card{padding:21px}.saved-colors-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:15px}.saved-color-item{border:1px solid #333c4b;background:#1c222c;border-radius:6px;padding:6px;min-width:0;text-align:left;display:flex;flex-direction:column;gap:5px}.saved-color-item:hover{border-color:#6576b6}.saved-color-chip{height:28px;border-radius:4px;border:1px solid rgba(255,255,255,.12)}.saved-color-item strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saved-color-item small{color:#8793a6;font:9px ui-monospace,monospace}.saved-color-add{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:8px;margin-top:18px;align-items:end}.saved-color-add input[type=color]{width:90px;height:30px;padding:2px;border:1px solid #343c4b;border-radius:5px;background:#1c212b}.saved-color-add .primary-button{grid-column:1/-1;margin-top:3px}.no-saved-colors{grid-column:1/-1;text-align:center;padding:20px;color:#8994a6;font-size:11px;border:1px dashed #384151;border-radius:6px}.property-color-row{display:flex;gap:6px}.property-color-row .color-control{flex:1}.mobile-only{display:none}
@media(max-width:1450px){:root{--hierarchy-width:210px;--code-width:310px;--inspector-width:270px}.workspace{grid-template-columns:minmax(165px,var(--hierarchy-width)) 5px minmax(235px,var(--code-width)) 5px minmax(265px,1fr) 5px minmax(235px,var(--inspector-width))}.panel-heading{padding-left:10px;padding-right:10px}.tree-class{display:none}.topbar{gap:16px}.quiet-button,.primary-button{padding:0 9px}}
@media(max-width:1160px){:root{--hierarchy-width:190px;--code-width:330px;--inspector-width:285px}.workspace{grid-template-columns:minmax(160px,var(--hierarchy-width)) 5px minmax(260px,var(--code-width)) 5px minmax(270px,1fr)}.workspace>.splitter[data-split=inspector],.workspace>.inspector-panel{display:none}.inspector-panel{display:none}.workspace .preview-panel{grid-column:5}.workspace .splitter[data-split=code]{grid-column:4}.workspace .code-panel{grid-column:3}.workspace .splitter[data-split=hierarchy]{grid-column:2}.workspace .hierarchy-panel{grid-column:1}.topbar .quiet-button span:not(.button-symbol){display:none}.topbar .quiet-button{width:34px;padding:0}.topbar .top-actions{gap:5px}.topbar .primary-button{padding:0 10px}}
@media(max-width:880px){:root{--topbar-h:54px;--toolbar-h:43px;--statusbar-h:22px}.topbar{padding:0 11px;gap:12px}.brand-mark{height:28px;width:28px}.brand-copy strong{font-size:13px}.brand-copy small{font-size:8px}.project-breadcrumb{display:none}.top-actions{gap:4px}.top-actions .quiet-button,.top-actions .icon-button:not(#more-actions-btn){display:none}.top-actions .action-divider{display:none}.mobile-overflow{display:inline-flex}.workspace-toolbar{padding:0 10px}.toolbar-left{gap:8px}.workspace-label{display:none}.saved-state{font-size:10px}.toolbar-right{gap:7px}.device-word{display:none}.device-option{padding:0 8px;width:30px}.toolbar-separator{display:none}.workspace{display:flex;position:relative;padding:0;gap:0;background:#111319;flex:1;min-height:0}.workspace>.panel{display:none;border:0;border-radius:0;width:100%;height:100%;min-height:0}.workspace>.panel.active-mobile{display:flex}.workspace>.splitter{display:none!important}.mobile-panel-nav{height:54px;min-height:54px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #2a303b;background:#14171e;z-index:15;padding-bottom:env(safe-area-inset-bottom)}.mobile-panel-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;color:#7e8a9d;font-size:9px}.mobile-panel-nav button span{font-size:17px;line-height:1}.mobile-panel-nav button.active{color:#bdc7ff;background:#252d42;box-shadow:inset 0 2px 0 #8394ff}.app-statusbar{padding:0 9px}.status-right{display:none}.status-left{gap:6px}.preview-content{padding:12px}.inspector-content{padding:0 14px 20px}.inspector-panel .panel-heading{height:56px;min-height:56px}.tree-scroll{padding:12px}.tree-item{min-height:38px;font-size:12px}.add-component-row{padding:12px}.add-component-row select{height:36px;font-size:12px}.add-button{height:36px;width:38px}.code-editor-wrap textarea{font-size:12px;line-height:20px}.line-numbers{line-height:20px}.line-numbers span{height:20px}.code-statusbar{height:30px;min-height:30px}.panel-footer{height:38px;min-height:38px}.panel-heading{height:56px;min-height:56px}.empty-preview-state{padding:20px}.inspector-empty{padding:25px}.inspector-empty p{font-size:11px}.inspector-content .property-field>label{font-size:11px}.property-control input[type=text],.property-control input[type=number],.property-control select{height:36px;font-size:12px}.property-control input[type=color]{height:36px}.property-control input[type=range]{height:29px}.property-control textarea{font-size:12px}.toggle-control{min-height:35px}.saved-color-add input:not([type=color]){height:36px}.saved-color-add input[type=color]{height:36px}.compare-columns{grid-template-columns:1fr}.compare-columns pre{max-height:24dvh;min-height:100px}.compare-card{padding:15px}.modal-card{padding:21px}.modal-actions{margin-top:17px}}
@media(max-width:520px){:root{--toolbar-h:43px}.brand-copy{display:none}.topbar{gap:8px}.top-actions{margin-left:auto}.top-actions .primary-button{min-height:31px;font-size:11px;padding:0 9px}.top-actions .primary-button .button-symbol{font-size:12px}.top-actions .primary-button span:last-child{display:inline}.workspace-toolbar{gap:5px}.saved-state{max-width:125px;overflow:hidden;text-overflow:ellipsis;font-size:9px}.saved-state .status-dot{flex:none}.toolbar-right{gap:4px}.device-switch{gap:1px;padding:2px}.device-option{width:27px;height:27px;padding:0}.device-option>span:first-child{font-size:13px}.zoom-btn{width:24px;height:26px}.zoom-value{min-width:29px;font-size:10px}.text-button{min-height:26px;padding:0 7px}.preview-heading p{font-size:9px}.preview-footer{font-size:8px;padding:0 8px}.empty-window-illustration{width:148px;height:100px}.empty-preview-state h3{font-size:13px}.empty-preview-state p{font-size:10px}.empty-preview-actions{flex-direction:column;width:100%}.empty-preview-actions button{width:100%}.app-statusbar{font-size:8px}.status-divider{display:none}.status-left{gap:5px}.modal{width:calc(100vw - 18px);max-width:calc(100vw - 18px)}.compare-modal,.diagnostics-modal,.export-modal{width:calc(100vw - 18px)}.saved-colors-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.saved-color-add{grid-template-columns:minmax(0,1fr) 78px}.saved-color-add input[type=color]{width:78px}.selected-component-name strong{font-size:11px}}
@media(hover:none){.tree-item:hover,.quiet-button:hover,.text-button:hover,.small-icon-button:hover{background:initial}.gui-node{touch-action:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.alignment-guide{position:absolute;z-index:1000001;pointer-events:none;background:#94a6ff;opacity:.85}.alignment-guide.vertical{top:0;bottom:0;width:1px;box-shadow:0 0 0 1px rgba(148,166,255,.12)}.alignment-guide.horizontal{left:0;right:0;height:1px;box-shadow:0 0 0 1px rgba(148,166,255,.12)}.tree-item.drag-target{background:#29324a;border-color:#7182d3;box-shadow:inset 0 0 0 1px rgba(129,151,255,.2)}.overflow-menu button:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
[hidden]{display:none!important}

/* Grid Corrector dialog and issue presentation */
.grid-corrector-modal{width:min(850px,calc(100vw - 24px))}
.grid-corrector-modal .compare-card{max-height:min(90dvh,940px);overflow:auto}
.corrector-settings{display:grid;grid-template-columns:1.35fr .8fr .95fr;gap:10px;margin-top:18px}
.corrector-setting{display:flex;flex-direction:column;gap:6px;min-width:0;color:#9ba7ba;font-size:10px}
.corrector-setting input,.corrector-setting select{width:100%;min-width:0;height:36px;padding:0 9px;border:1px solid #343c4b;border-radius:6px;background:#101319;color:#e1e7f2;font-variant-numeric:tabular-nums}
.corrector-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.corrector-options>label{display:flex;align-items:flex-start;gap:9px;min-width:0;padding:10px;border:1px solid #303847;border-radius:7px;background:#1b2029;cursor:pointer}
.corrector-options input{width:16px;height:16px;flex:none;accent-color:#8197ff;margin:2px 0 0}
.corrector-options label span{min-width:0;display:flex;flex-direction:column;gap:4px}
.corrector-options strong{font-size:10px;line-height:1.35;color:#dce3f0}
.corrector-options small{font-size:9px;line-height:1.45;color:#8b97aa}
.corrector-disclaimer{margin-top:12px;padding:10px 11px;border:1px solid #333b4a;border-radius:7px;background:#171c25;color:#9aa7bb;font-size:10px;line-height:1.55}
.corrector-summary{margin:15px 0 8px;padding:10px 12px;border:1px solid #384361;border-radius:7px;background:#20273a;color:#c8d2ff;font-size:11px;line-height:1.5}
.corrector-results{display:flex;flex-direction:column;gap:12px;max-height:34dvh;overflow:auto;padding-right:2px}
.corrector-device-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 1px 7px;border-bottom:1px solid #303746;color:#cdd5e4}
.corrector-device-heading strong{font-size:11px}
.corrector-device-heading span{font-size:9px;color:#8d9ab0;white-space:nowrap}
.corrector-issue-list{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.corrector-issue{display:flex;align-items:flex-start;gap:9px;padding:9px;border:1px solid #303744;border-radius:6px;background:#1b2028;text-align:left;cursor:pointer}
.corrector-issue:hover{border-color:#4e5f87;background:#202735}
.corrector-issue-icon{width:22px;height:22px;display:grid;place-items:center;flex:none;border-radius:5px;background:#262e3d;color:#b8c5ff;font-size:12px;font-weight:800}
.corrector-issue.warning .corrector-issue-icon{background:#3c3122;color:#f0ca84}
.corrector-issue-copy{min-width:0;flex:1}
.corrector-issue-copy strong{font-size:10px;color:#e0e6f2}
.corrector-issue-copy p{margin:3px 0 0;color:#929eb2;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
.corrector-empty{padding:16px;border:1px dashed #394252;border-radius:7px;color:#a3aec0;text-align:center;font-size:10px;line-height:1.55}
.corrector-empty.success{padding:11px;border-style:solid;border-color:#2d473c;background:#18261f;color:#9bd2b7;margin-top:7px}
.corrector-more{padding:8px;color:#929eb2;text-align:center;font-size:10px}
.corrector-button{gap:6px}
.corrector-button>span:first-child{font-size:14px}
.wide-device-option>span:first-child{font-size:15px}

/* Tablet workspaces use the same accessible one-panel-at-a-time model as phones. */
@media(max-width:1160px){
  .workspace{display:flex!important;position:relative;padding:0;gap:0;background:#111319;flex:1;min-height:0}
  .workspace>.panel{display:none!important;border:0;border-radius:0;width:100%;height:100%;min-height:0;flex:1}
  .workspace>.panel.active-mobile{display:flex!important}
  .workspace>.splitter{display:none!important}
  .mobile-panel-nav{height:54px;min-height:54px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #2a303b;background:#14171e;z-index:15;padding-bottom:env(safe-area-inset-bottom)}
  .mobile-panel-nav button{min-width:0;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;color:#7e8a9d;font-size:10px;touch-action:manipulation}
  .mobile-panel-nav button span{font-size:17px;line-height:1}
  .mobile-panel-nav button.active{color:#bdc7ff;background:#252d42;box-shadow:inset 0 2px 0 #8394ff}
  .workspace-toolbar{min-width:0}
  .toolbar-right{min-width:0;gap:6px}
  .corrector-button{padding:0 8px}
}
@media(max-width:880px){
  .corrector-button{width:30px;min-width:30px;padding:0;font-size:0;gap:0}
  .corrector-button>span:first-child{font-size:15px}
}
@media(max-width:520px){
  .grid-corrector-modal{width:calc(100vw - 14px);max-width:calc(100vw - 14px)}
  .grid-corrector-modal .compare-card{padding:13px;max-height:92dvh}
  .corrector-settings{grid-template-columns:1fr 1fr;gap:8px}
  .corrector-setting:first-child{grid-column:1/-1}
  .corrector-setting input,.corrector-setting select{height:40px;font-size:12px}
  .corrector-options{grid-template-columns:1fr;gap:6px}
  .corrector-options>label{min-height:48px;padding:10px}
  .corrector-options strong{font-size:11px}
  .corrector-options small{font-size:10px}
  .corrector-results{max-height:28dvh}
  .grid-corrector-modal .modal-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:7px}
  .grid-corrector-modal .modal-actions button:last-child{grid-column:1/-1;min-height:42px}
  .grid-corrector-modal .modal-actions button{min-height:40px;white-space:normal}
  .corrector-summary{font-size:10px}
  .corrector-device-heading strong{font-size:10px}
  .wide-device-option{display:none}
}
@media(max-width:520px){
  .workspace-toolbar{justify-content:flex-end;gap:0;padding:5px 8px}
  .workspace-toolbar .toolbar-left{display:none}
  .workspace-toolbar .toolbar-right{width:100%;justify-content:space-between;gap:4px}
  .device-switch{flex:none}
  .toolbar-right .toolbar-separator{display:none}
}