:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;color:#363540;background:#ececf1;font-synthesis:none;--panel:#fff;--panel-alt:#fafafd;--text:#363540;--muted:#9997a4;--border:#ecebf1;--hover:#f5f3fa;--accent:#8056e8;--accent-soft:#f0eafa;--input:#f7f7fa;--canvas:#eeedf3;--shadow:0 12px 45px #27203912;--code:#fcfcfe}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:hover{background:var(--hover)}input,select,textarea{color:var(--text)}input,select{min-width:0}svg.icon{width:17px;height:17px;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg{pointer-events:none}[hidden]{display:none!important}.muted{color:var(--muted)}.tiny{font-size:12px}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.spacer{flex:1}.divider{width:1px;height:22px;background:var(--border);margin:0 7px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;flex-shrink:0}.button{height:33px;display:inline-flex;gap:7px;align-items:center;justify-content:center;padding:0 12px;border-radius:6px;border:1px solid var(--border);font-size:13px;font-weight:500;white-space:nowrap}.button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.button.primary:hover{background:#7045d5}.button.quiet{border-color:transparent}.button svg{width:15px;height:15px}.badge{font-size:11px;padding:3px 6px;background:var(--accent-soft);color:var(--accent);border-radius:4px;white-space:nowrap}.studio{display:grid;grid-template-rows:52px 46px 1fr 27px;height:100dvh;min-height:420px}.topbar{display:flex;align-items:center;background:#1f2028;color:#d9d8e0;padding:0 17px;gap:13px;z-index:20}.brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:650;color:#fff;letter-spacing:-.5px}.brand-mark{width:27px;height:27px;display:grid;place-items:center;background:#9369f1;border-radius:7px;color:white;font-size:22px;font-weight:300}.topbar .divider{background:#3a3b44;margin:0 6px}.topbar .icon-button:hover,.topbar .button:hover{background:#383944}.file-title{font-size:13px;font-weight:500}.file-folder{color:#8f909e;font-size:12px}.save-state{font-size:11px;color:#9697a5}.topbar .avatar{border:2px solid #343442;width:27px;height:27px;font-size:10px;background:#e2d8ff;color:#776097}.topbar .button{border-color:#474653;color:#e8e5ee}.topbar .primary{background:#956bf1;border-color:#956bf1;color:white}.toolbar{display:flex;align-items:center;gap:3px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--border);z-index:15}.toolbar .tool{height:31px;width:36px;border-radius:5px;display:grid;place-items:center}.toolbar .tool.active{color:var(--accent);background:var(--accent-soft)}.view-toggle{display:flex;background:var(--input);border-radius:6px;padding:3px;gap:1px}.view-toggle button{padding:4px 13px;font-size:12px;border-radius:4px;color:var(--muted)}.view-toggle button.active{background:var(--panel);box-shadow:0 1px 4px #00000010;color:var(--text)}.framework-select{border:0;background:transparent;font-size:12px;width:90px;padding:6px}.workspace{display:grid;grid-template-columns:238px minmax(300px,1fr) 280px;overflow:hidden;min-height:0}.left-panel,.right-panel{background:var(--panel);overflow:auto;min-height:0}.left-panel{border-right:1px solid var(--border);display:flex;flex-direction:column}.right-panel{border-left:1px solid var(--border)}.panel-tabs{height:43px;display:flex;align-items:stretch;gap:16px;padding:0 18px;border-bottom:1px solid var(--border);flex-shrink:0}.panel-tabs button{position:relative;font-size:12px;color:var(--muted);padding:0 1px}.panel-tabs button.active{color:var(--text);font-weight:600}.panel-tabs button.active:after{content:'';position:absolute;height:2px;background:var(--accent);left:0;right:0;bottom:-1px}.panel-content{min-height:0;overflow:auto;flex:1}.panel-section{padding:16px;border-bottom:1px solid var(--border)}.section-heading{display:flex;align-items:center;gap:7px;margin-bottom:13px;font-size:12px;font-weight:600}.section-heading .icon-button{width:22px;height:22px}.section-heading svg{width:14px;height:14px}.search-box{position:relative;display:flex;align-items:center;gap:8px;background:var(--input);border:1px solid transparent;border-radius:6px;padding:8px 10px;color:var(--muted);margin-bottom:13px}.search-box input{border:0;outline:0;background:transparent;width:100%;font-size:12px}.search-box svg{width:14px;height:14px}.page-row{display:flex;align-items:center;gap:9px;width:100%;padding:9px 9px;border-radius:5px;font-size:12px;text-align:left;color:#8a8698}.page-row.active{background:var(--accent-soft);color:var(--accent)}.page-row svg{width:14px;height:14px}.page-row .page-dot{margin-left:auto;width:5px;height:5px;background:var(--accent);border-radius:50%}.tree-toolbar{display:flex;align-items:center;padding:13px 17px 9px;gap:8px;font-size:12px;font-weight:600}.tree-row{position:relative;height:30px;display:flex;align-items:center;gap:7px;padding-right:10px;font-size:11px;white-space:nowrap;user-select:none;color:#7f7b8c;cursor:pointer;border:1px solid transparent}.tree-row:hover{background:var(--hover)}.tree-row.selected{color:var(--accent);background:var(--accent-soft)}.tree-row.selected:before{content:'';height:100%;width:2px;background:var(--accent);position:absolute;left:0}.tree-row .icon{width:13px;height:13px}.tree-row .node-title{overflow:hidden;text-overflow:ellipsis;flex:1}.tree-row .disclosure{width:12px;padding:0;font-size:10px;display:grid;place-items:center;color:#b2aebd}.tree-row .layer-eye{padding:0;width:15px;opacity:0}.tree-row:hover .layer-eye{opacity:.7}.tree-row[draggable=true].drop-target{border-color:var(--accent);background:var(--accent-soft)}.layer-empty{color:var(--muted);font-size:12px;padding:16px}.toolkit-group{padding:12px 14px;border-bottom:1px solid var(--border)}.toolkit-group h4{font-size:11px;color:var(--muted);font-weight:500;margin:0 0 10px;text-transform:uppercase;letter-spacing:.07em}.toolkit-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.control-card{border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;gap:7px;padding:10px 7px;text-align:left;font-size:11px;overflow:hidden}.control-card:hover{border-color:#c5afe9;background:var(--accent-soft)}.control-card svg{color:#96909f;width:15px}.center{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}.canvas-header{display:flex;align-items:center;padding:0 19px;gap:7px;height:37px;flex-shrink:0;background:var(--canvas);font-size:11px;color:#9b96aa}.canvas-header svg{width:12px;height:12px}.canvas-viewport{position:relative;flex:1;min-height:170px;overflow:hidden;touch-action:none;background-color:var(--canvas);background-image:radial-gradient(#cfcbdc .7px,transparent .7px);background-size:20px 20px}.gpu-grid{position:absolute;width:100%;height:100%;inset:0;pointer-events:none}.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}.artboard-caption{position:absolute;left:0;top:-25px;color:#97909f;font-size:11px;display:flex;align-items:center;width:100%;justify-content:space-between;white-space:nowrap}.artboard{position:relative;background:white;box-shadow:0 4px 20px #29233d12;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#292834;font-size:14px;isolation:isolate}.artboard>.design-node{width:100%;height:100%}.artboard.editing .design-node{cursor:default}.artboard.editing .design-node input,.artboard.editing .design-node button,.artboard.editing .design-node select{pointer-events:none}.artboard .design-node{line-height:normal}.artboard .design-node button,.artboard .design-node input,.artboard .design-node select{font:inherit}.artboard .design-node button:hover{filter:brightness(.97)}.preview-button{border:0;border-radius:5px;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}.preview-button.toggled{box-shadow:inset 0 0 0 3px #24222f55}.preview-input{border:1px solid #dad8e2;border-radius:5px;padding:8px;min-width:0;background:#fff;color:#45404e}.preview-image{background:repeating-linear-gradient(45deg,#f2eff8,#f2eff8 12px,#eae6f3 12px,#eae6f3 24px);display:grid;place-items:center;color:#999;font-size:12px}.preview-unknown{border:1px dashed #bc88cf;padding:14px;min-height:60px;background:#f8f3fa}.unknown-caption{font-size:11px;color:#9a60af;position:absolute;top:5px;left:6px}.empty-container{outline:1px dashed #ddd7ec;outline-offset:-1px}.preview-tabs{display:flex;border-bottom:1px solid #eee;gap:6px}.preview-tabs button{padding:9px 15px;font-size:12px}.preview-tabs .active{color:#7953e8;border-bottom:2px solid #7953e8}.selection-overlay{position:absolute;inset:0;pointer-events:none;z-index:10}.selection-box{position:absolute;border:1.5px solid #9766f6;pointer-events:none}.selection-box .selection-label{position:absolute;top:-23px;left:-1px;background:#9766f6;color:#fff;font-size:10px;padding:4px 6px;white-space:nowrap;border-radius:3px 3px 0 0;line-height:14px}.selection-size{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);background:#9766f6;color:white;padding:3px 6px;font-size:10px;border-radius:3px;white-space:nowrap}.handle{position:absolute;width:7px;height:7px;background:white;border:1px solid #9766f6;pointer-events:auto}.handle[data-h=nw]{left:-4px;top:-4px;cursor:nwse-resize}.handle[data-h=ne]{right:-4px;top:-4px;cursor:nesw-resize}.handle[data-h=sw]{left:-4px;bottom:-4px;cursor:nesw-resize}.handle[data-h=se]{right:-4px;bottom:-4px;cursor:nwse-resize}.handle[data-h=n]{top:-4px;left:calc(50% - 3px);cursor:ns-resize}.handle[data-h=s]{bottom:-4px;left:calc(50% - 3px);cursor:ns-resize}.handle[data-h=w]{left:-4px;top:calc(50% - 3px);cursor:ew-resize}.handle[data-h=e]{right:-4px;top:calc(50% - 3px);cursor:ew-resize}.canvas-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border);box-shadow:0 3px 12px #30274507;border-radius:7px;padding:9px 13px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap;pointer-events:none}.canvas-hint kbd{font-size:10px;border:1px solid var(--border);border-radius:3px;padding:2px 4px;background:var(--input)}.canvas-tools{position:absolute;right:15px;bottom:13px;display:flex;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:0 2px 6px #29203906}.canvas-tools button{height:30px;padding:0 9px;font-size:11px}.canvas-tools svg{width:13px;height:13px}.annotation-pin{position:absolute;width:25px;height:25px;border-radius:50% 50% 50% 0;background:#ecad3e;color:white;display:grid;place-items:center;pointer-events:auto;border:2px solid white;box-shadow:0 2px 5px #0002;font-size:11px;cursor:pointer}.marquee{position:absolute;border:1px solid var(--accent);background:#8056e819;pointer-events:none;z-index:11}.snap-guide{position:absolute;background:#ef6c9f;pointer-events:none;z-index:12}.code-panel{height:212px;min-height:100px;max-height:80%;display:flex;flex-direction:column;background:var(--code);border-top:1px solid var(--border);position:relative}.code-resize{height:5px;position:absolute;left:0;right:0;top:-3px;z-index:12;cursor:ns-resize}.code-header{display:flex;align-items:center;gap:9px;height:36px;padding:0 15px;flex-shrink:0;border-bottom:1px solid var(--border);font-size:11px;color:var(--muted)}.code-header .file-tab{color:var(--accent);height:100%;display:flex;gap:7px;align-items:center;border-bottom:2px solid var(--accent);padding-right:13px}.code-header svg{width:13px;height:13px}.code-header .button{height:24px;padding:0 7px;font-size:10px}.code-header .icon-button{height:23px;width:23px}.code-editor{display:flex;flex-direction:column;min-height:0;flex:1}.editor-body{display:flex;flex:1;min-height:0;position:relative}.line-numbers{color:#b8b4c6;background:var(--code);padding:12px 12px 12px 16px;text-align:right;white-space:pre;overflow:hidden;min-width:45px;user-select:none;font:11px/21px ui-monospace,SFMono-Regular,Consolas,monospace}.code-viewport{position:relative;flex:1;min-width:0;overflow:hidden}.code-input,.code-highlight{position:absolute;inset:0;margin:0;padding:12px 15px 40px 0;border:0;white-space:pre;font:11px/21px ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4;background:none;resize:none;outline:none;overflow:auto;text-align:left;letter-spacing:0}.code-highlight{pointer-events:none;color:#747181}.code-input{color:transparent;caret-color:var(--text);-webkit-text-fill-color:transparent}.code-input::selection{background:#8056e835}.code-input:focus-visible{outline:0}.syntax-tag{color:#9365c1}.syntax-attr{color:#ba7f57}.syntax-string{color:#6b9b77}.syntax-comment{color:#aaa6b3}.editor-status{height:20px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);background:var(--panel);border-top:1px solid var(--border)}.editor-status .error{color:#d96a73}.editor-find{display:flex;gap:5px;padding:5px 10px;border-bottom:1px solid var(--border)}.editor-find input{width:150px;border:1px solid var(--border);border-radius:3px;font-size:11px;padding:5px}.editor-find button{font-size:11px}.completions{position:absolute;top:20px;left:40px;min-width:230px;max-height:200px;overflow:auto;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);z-index:15;border-radius:5px;padding:4px}.completions button{display:block;width:100%;text-align:left;font:12px/23px ui-monospace,monospace;padding:0 9px}.completions button.active{background:var(--accent-soft);color:var(--accent)}.inspector-name{display:flex;align-items:center;gap:8px;margin-bottom:6px}.inspector-name svg{color:var(--accent);width:15px}.inspector-name input{width:100%;font-size:13px;font-weight:600;border:0;background:none;padding:3px 0}.inspector-type{font-size:10px;color:var(--muted);padding-left:23px}.align-tools{display:flex;justify-content:space-between;padding:9px 15px;border-bottom:1px solid var(--border)}.align-tools .icon-button{width:29px;height:25px}.align-tools svg{width:14px}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px}.property-grid .full{grid-column:1/-1}.prop-field{display:flex;align-items:center;gap:7px;min-width:0;background:var(--input);border:1px solid transparent;border-radius:5px;padding:7px 8px;height:31px;position:relative}.prop-field:focus-within{border-color:var(--accent)}.prop-field label{color:#a4a0af;font-size:10px;min-width:10px;white-space:nowrap}.prop-field input,.prop-field select{width:100%;border:0;outline:0;background:transparent;font-size:11px;min-width:0}.prop-field select{appearance:auto}.prop-field .reset-prop{display:none;padding:0;width:12px;font-size:12px;position:absolute;right:2px;top:1px;color:var(--muted)}.prop-field:hover .reset-prop{display:block}.prop-label{font-size:11px;color:var(--muted);margin-bottom:7px}.property-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;font-size:11px}.property-line select{border:0;background:var(--input);padding:6px;border-radius:4px;font-size:11px;max-width:145px}.property-line input[type=checkbox]{accent-color:var(--accent)}.layout-modes{display:flex;background:var(--input);padding:3px;border-radius:5px;gap:2px}.layout-modes button{height:26px;flex:1;border-radius:3px;font-size:10px;display:flex;align-items:center;justify-content:center;gap:4px}.layout-modes button.active{background:var(--panel);color:var(--accent);box-shadow:0 1px 5px #0001}.layout-modes svg{width:13px}.color-field{display:flex;align-items:center;gap:8px;border:1px solid var(--border);padding:6px;border-radius:5px;margin-top:8px}.color-field input[type=color]{width:22px;height:22px;padding:0;border:0;background:transparent;border-radius:3px;overflow:hidden}.color-field input[type=text]{border:0;background:none;outline:0;width:100%;font-size:11px;font-family:ui-monospace,monospace}.color-field label{color:var(--muted);font-size:10px;width:67px;flex-shrink:0}.color-field .resource-button{font-size:12px;color:var(--accent);width:18px;padding:0}.expanded-props summary{font-size:11px;font-weight:500;cursor:pointer;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--muted)}.expanded-props .property-grid{padding:13px}.empty-inspector{padding:25px 18px;color:var(--muted);font-size:12px;line-height:1.7;text-align:center}.empty-inspector svg{width:32px;height:32px;opacity:.4;margin:18px}.note-card{background:var(--panel-alt);border:1px solid var(--border);border-radius:7px;padding:12px;margin:10px 14px;font-size:12px;line-height:1.6}.note-card .note-title{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:6px}.note-card button{font-size:11px;color:var(--accent)}.resource-row{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--border)}.resource-row .swatch{width:28px;height:28px;border-radius:6px;border:1px solid #00000010}.resource-row .resource-name{font-size:11px;font-weight:500}.resource-row .resource-value{font-size:10px;color:var(--muted);margin-top:3px}.resource-row input{width:30px;height:30px;border:0;background:none;padding:0}.statusbar{display:flex;align-items:center;gap:10px;background:var(--panel);border-top:1px solid var(--border);padding:0 14px;color:var(--muted);font-size:10px;white-space:nowrap}.statusbar svg{width:11px;height:11px}.statusbar button{font-size:10px;display:flex;align-items:center;gap:5px}.statusbar .status-right{margin-left:auto;display:flex;gap:15px;align-items:center}.statusbar .status-accent{color:#ad9acc}.statusbar .status-dot{width:5px;height:5px;background:#99b6a9;border-radius:50%}.avatar{display:inline-flex;width:26px;height:26px;background:#ede5fa;color:#967dc0;border-radius:50%;align-items:center;justify-content:center;font-size:10px;font-weight:600}#toast{position:fixed;bottom:45px;left:50%;transform:translateX(-50%) translateY(20px);background:#2d2938;color:#fff;border:1px solid #ffffff20;border-radius:8px;padding:11px 19px;font-size:12px;box-shadow:0 8px 35px #0003;z-index:100;opacity:0;transition:.2s;pointer-events:none;max-width:85vw}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.modal-overlay{position:fixed;inset:0;background:#15122065;backdrop-filter:blur(4px);z-index:80;display:flex;align-items:center;justify-content:center;padding:25px}.modal{width:540px;max-width:100%;max-height:90dvh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:0 24px 100px #17122150}.modal.wide{width:900px}.modal-header{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--border)}.modal-header h2{font-size:15px;flex:1;margin:0;font-weight:600}.modal-body{padding:22px;font-size:13px;line-height:1.6}.modal-body p{margin:0 0 15px;color:var(--muted)}.modal-body label{display:block;font-size:12px;margin-bottom:7px}.modal-body input:not([type=checkbox]):not([type=color]),.modal-body select,.modal-body textarea{display:block;width:100%;border:1px solid var(--border);border-radius:5px;padding:9px 10px;background:var(--input);margin-bottom:15px;font-size:12px}.modal-body textarea{font-family:ui-monospace,monospace;line-height:1.6;resize:vertical;min-height:130px}.modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:15px 22px;border-top:1px solid var(--border)}.modal-error{color:#d56a7c;font-size:12px;margin-right:auto;max-width:330px}.export-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.export-option{display:flex;gap:11px;padding:16px;border:1px solid var(--border);border-radius:7px;text-align:left;font-size:13px}.export-option small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.export-option.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.command-search{padding:16px}.command-search input{width:100%;border:0;outline:0;background:none;font-size:16px;padding:10px}.command-list{padding:0 8px 12px;max-height:360px;overflow:auto}.command-item{display:flex;gap:10px;width:100%;padding:11px 12px;border-radius:5px;font-size:13px;align-items:center}.command-item kbd{margin-left:auto;font:11px ui-monospace,monospace;color:var(--muted)}.context-menu{position:fixed;z-index:70;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 40px #0002;padding:5px;width:210px}.context-menu button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:9px 11px;border-radius:4px;font-size:12px}.context-menu kbd{font-size:10px;color:var(--muted)}.context-menu hr{border:0;border-top:1px solid var(--border);margin:4px}.problems-list{padding:0 16px}.problem{border-bottom:1px solid var(--border);padding:10px 0;font-size:11px;display:flex;gap:8px;align-items:flex-start;cursor:pointer;line-height:1.6}.problem.error{color:#d06576}.problem.warning{color:#bf9757}.problem.info{color:var(--muted)}.history-item{display:block;width:100%;text-align:left;padding:10px 16px;font-size:12px;border-bottom:1px solid var(--border)}.preview-modal{width:min(1240px,95vw)}.preview-host{background:#eae8f1;padding:25px;overflow:auto;max-height:75vh}.preview-device{background:white;margin:auto;box-shadow:0 10px 50px #0002;position:relative;overflow:auto}.preview-modal .modal-header select{font-size:12px;background:var(--input);border:1px solid var(--border);padding:6px;border-radius:5px}.doc-message{display:flex;align-items:center;justify-content:center;flex-direction:column;height:100%;background:var(--panel);gap:15px;padding:40px}.doc-message h2{font-size:20px;margin:0}.doc-message p{font-size:13px;color:var(--muted);max-width:420px;text-align:center;line-height:1.7}.token-board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:40px;background:#faf9fc;width:100%;height:100%}.token-card{background:white;border:1px solid #ece9f0;border-radius:10px;padding:15px;height:160px}.token-card .token-swatch{height:75px;border-radius:6px;margin-bottom:14px}.token-card h4{margin:0;font-size:13px}.token-card span{font:11px ui-monospace,monospace;color:#999}.mobile-panel-toggle{display:none}.scope-banner{display:flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent);padding:8px 16px;font-size:11px;flex-shrink:0}.scope-banner button{font-size:11px;font-weight:600}.onboarding-help{padding:16px;font-size:12px;line-height:1.7;color:var(--muted)}.onboarding-help kbd{background:var(--input);padding:2px 5px;border:1px solid var(--border);border-radius:3px;color:var(--text)}
body.dark{--panel:#24252e;--panel-alt:#272832;--text:#d6d3e2;--muted:#858292;--border:#353541;--hover:#30303d;--accent:#ac84ff;--accent-soft:#363046;--input:#2d2d39;--canvas:#1b1c24;--code:#23232d;--shadow:0 12px 45px #0004}body.dark .canvas-viewport{background-image:radial-gradient(#393747 .7px,transparent .7px)}body.dark .topbar{background:#19191f}body.dark .tree-row{color:#a09aaa}body.dark .tree-row.selected{color:var(--accent)}body.dark .prop-field label{color:#888293}body.dark .syntax-string{color:#95bd99}body.dark .syntax-tag{color:#b193d1}body.dark .syntax-attr{color:#d4a182}body.dark .preview-host{background:#1b1a21}body.dark .code-highlight{color:#aaa5b4}
.studio.design-only .code-panel{display:none}.studio.code-only .canvas-viewport,.studio.code-only .canvas-header,.studio.code-only .scope-banner{display:none}.studio.code-only .code-panel{height:100%!important;max-height:none;border-top:0}.studio.code-only .code-input,.studio.code-only .code-highlight{font-size:13px;line-height:23px}.studio.code-only .line-numbers{font-size:12px;line-height:23px}.studio.inspect-mode .left-panel{opacity:.6}.studio.inspect-mode .prop-field input{pointer-events:none}.studio.focus-mode .workspace{grid-template-columns:0 minmax(300px,1fr) 0}.studio.focus-mode .left-panel,.studio.focus-mode .right-panel{visibility:hidden}.studio.previewing .selection-overlay{display:none}
@media(min-width:1650px){.workspace{grid-template-columns:252px minmax(400px,1fr) 296px}.tree-row{font-size:12px}.code-panel{height:240px}.panel-tabs button{font-size:13px}.prop-field input,.prop-field select{font-size:12px}}
@media(max-width:1150px){.workspace{grid-template-columns:205px minmax(220px,1fr) 240px}.topbar{gap:8px}.topbar .file-folder,.save-state{display:none}.toolbar{padding:0 8px}.toolbar .tool{width:30px}.toolbar .divider{margin:0 4px}.canvas-hint{display:none}.panel-section{padding:12px}.tree-row{font-size:10px}.property-grid{gap:7px}.panel-tabs{padding:0 12px;gap:12px}.topbar .file-title{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:850px){.workspace{grid-template-columns:0 minmax(180px,1fr) 235px}.left-panel{visibility:hidden}.mobile-panel-toggle{display:inline-flex}.studio.show-layers .workspace{grid-template-columns:210px minmax(100px,1fr) 0}.studio.show-layers .left-panel{visibility:visible}.studio.show-layers .right-panel{visibility:hidden}.toolbar .secondary-tool,.topbar .avatar,.topbar .file-title{display:none}.topbar{padding:0 10px}.brand{font-size:14px}.toolbar .spacer{min-width:2px}.view-toggle button{padding:5px 9px}.code-header .muted,.status-right .status-accent{display:none}.topbar .button{font-size:11px;padding:0 8px}.statusbar{gap:6px}.statusbar .status-right{gap:8px}}
@media(max-width:560px){.workspace{grid-template-columns:minmax(180px,1fr) 0}.left-panel{display:none}.right-panel{visibility:hidden}.studio.show-layers .workspace{grid-template-columns:210px minmax(120px,1fr) 0}.studio.show-layers .left-panel{display:flex}.studio.show-inspector .workspace{grid-template-columns:minmax(100px,1fr) 235px}.studio.show-inspector .right-panel{visibility:visible}.topbar .divider,.topbar .history-button,.toolbar .divider,.framework-select{display:none}.toolbar{gap:0;justify-content:space-between}.toolbar .tool{width:28px}.toolbar .view-toggle{margin-left:5px}.toolbar .spacer{display:none}.toolbar .view-toggle button{font-size:10px;padding:5px 7px}.code-panel{height:180px}.code-header{padding:0 8px;gap:5px}.code-header .file-tab{font-size:10px;max-width:120px;overflow:hidden}.canvas-tools{right:8px}.statusbar .status-right{display:none}.modal-overlay{padding:10px}.modal-body{padding:17px}.export-options{grid-template-columns:1fr}.editor-find input{width:90px}.topbar .brand{margin-right:auto}.topbar .top-command{display:none}.property-grid{gap:7px}.code-header .format-button{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Dense editor chrome retains readable 12–13 px labels. */
.tree-row{font-size:12px}.prop-field input,.prop-field select,.property-line,.prop-label,.color-field input[type=text],.control-card{font-size:12px}.prop-field label,.color-field label,.section-heading{font-size:12px}.code-input,.code-highlight{font-size:12px}.panel-tabs button,.page-row{font-size:13px}.code-header,.canvas-header{font-size:12px}