:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--bg: #272822;--chrome-dark: #1e1f1c;--chrome-mid: #272822;--chrome-light: #3e3d32;--panel: #272822;--panel-alt: #2f3028;--panel-raised: #3e3d32;--line: #49483e;--line-strong: #75715e;--text: #f8f8f2;--muted: #a59f85;--accent: #a6e22e;--accent-strong: #e6db74;--accent-soft: #3e3d32;--danger: #f92672;--focus: #66d9ef;--code-bg: #272822;--canvas-bg: #1e1f1c;--black-line: #151611;--title-bg: #1e1f1c;--button-bg: #2f3028;--button-hover-bg: #3e3d32;--menu-bg: #272822;--menu-hover-border: transparent;--input-bg: #1e1f1c;--pattern-icon-bg: #1e1f1c;--outline-active-text: #f8f8f2;--frame-border: #49483e;--popover-bg: #272822;--code-toolbar-bg: #272822;--code-toolbar-line: #49483e;--diagnostic-warning-border: #e6db74;--diagnostic-warning-text: #e6db74;--diagnostic-error-border: #f92672}:root[data-theme=light]{color-scheme:light;--bg: #ffffff;--chrome-dark: #f3f3f3;--chrome-mid: #ececec;--chrome-light: #e8e8e8;--panel: #f3f3f3;--panel-alt: #ffffff;--panel-raised: #e8e8e8;--line: #d4d4d4;--line-strong: #c8c8c8;--text: #1f1f1f;--muted: #616161;--accent: #0078d4;--accent-strong: #005a9e;--accent-soft: #e5f3ff;--danger: #c42b1c;--focus: #0078d4;--code-bg: #f8fafc;--canvas-bg: #ffffff;--black-line: #cbd5e1;--title-bg: #dddddd;--button-bg: #f3f3f3;--button-hover-bg: #e8e8e8;--menu-bg: #ffffff;--menu-hover-border: transparent;--input-bg: #ffffff;--pattern-icon-bg: #ffffff;--outline-active-text: #000000;--frame-border: #c8c8c8;--popover-bg: #ffffff;--code-toolbar-bg: #f3f3f3;--code-toolbar-line: #d4d4d4;--diagnostic-warning-border: #bf8803;--diagnostic-warning-text: #8a6100;--diagnostic-error-border: #c42b1c}*{box-sizing:border-box}body{margin:0;min-width:980px;min-height:100vh;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button,.file-button{border:1px solid var(--line-strong);background:var(--button-bg);color:var(--text);min-height:28px;padding:4px 8px;border-radius:2px;cursor:pointer}button:hover,.file-button:hover{border-color:var(--accent);background:var(--button-hover-bg)}button:focus-visible,.file-button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.workspace{display:grid;grid-template-rows:auto 1fr 22px;height:100vh;overflow:hidden;background:var(--bg)}.app-chrome{background:var(--chrome-dark);color:var(--text);border-bottom:1px solid var(--black-line)}.title-bar{display:flex;align-items:center;height:28px;padding:0 10px;background:var(--title-bg);border-bottom:1px solid var(--black-line)}.product-name{font-size:13px;font-weight:700}.menu-bar,.command-bar{display:flex;align-items:center;gap:2px;padding:2px 8px}.menu-bar{min-height:26px;background:var(--chrome-dark)}.menu{position:relative}.command-bar{min-height:32px;background:var(--chrome-mid);border-top:1px solid var(--black-line)}.menu-trigger{min-height:22px;padding:2px 8px;border-color:transparent;border-radius:0;background:transparent;color:var(--muted)}.menu-trigger:hover,.menu-trigger.active{border-color:transparent;background:var(--chrome-light);color:var(--text)}.menu-dropdown{position:absolute;top:100%;left:0;z-index:30;display:none;min-width:240px;padding:4px;background:var(--popover-bg);border:1px solid var(--line);box-shadow:0 14px 28px #0000005c}.menu-dropdown.open{display:grid;gap:2px}.menu-dropdown button{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;width:100%;min-height:26px;padding:4px 9px;border:1px solid transparent;border-radius:0;background:transparent;color:var(--text);text-align:left}.menu-shortcut{color:var(--muted);font-size:11px;white-space:nowrap}.menu-dropdown button:hover,.menu-dropdown button:focus-visible{border-color:var(--menu-hover-border);background:var(--accent-soft)}.menu-dropdown button:disabled{color:var(--muted);cursor:default;opacity:.55}.menu-dropdown button:disabled:hover{background:transparent}.menu-separator{height:1px;margin:4px 3px;background:var(--line)}.command-bar button{min-height:26px;padding:3px 7px;font-size:12px}.icon-toolbar button{position:relative;display:inline-grid;place-items:center;width:28px;min-width:28px;min-height:26px;padding:0;border-radius:0;border-color:transparent;background:transparent;color:var(--muted)}.icon-toolbar svg{width:16px;height:16px;stroke-width:1.9}.icon-toolbar button:hover,.icon-toolbar button:focus-visible{border-color:transparent;background:var(--button-hover-bg);color:var(--text)}.icon-toolbar button:disabled{color:var(--muted);cursor:default;opacity:.38}.icon-toolbar button:disabled:hover{background:transparent;color:var(--muted)}.icon-toolbar button:after,.icon-toolbar label:after{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:120;display:none;width:max-content;max-width:220px;padding:5px 7px;border:1px solid var(--line-strong);border-radius:0;background:var(--title-bg);color:var(--text);box-shadow:0 8px 20px #00000059;content:attr(aria-label);font-size:12px;line-height:1.2;pointer-events:none;transform:translate(-50%);white-space:normal}.icon-toolbar button:hover:after,.icon-toolbar button:focus-visible:after,.icon-toolbar label:hover:after,.icon-toolbar label:focus-within:after{display:block}.command-bar button:first-of-type:after{left:0;transform:none}.command-bar button:last-of-type:after{left:auto;right:0;transform:none}.app-shell{--left-sidebar-width: 260px;--right-sidebar-width: 320px;display:grid;grid-template-columns:var(--left-sidebar-width) minmax(460px,1fr) var(--right-sidebar-width);height:100%;min-height:0;overflow:hidden;border-top:1px solid var(--black-line)}.app-shell.left-sidebar-collapsed{--left-sidebar-width: 54px}.app-shell.right-sidebar-collapsed{--right-sidebar-width: 54px}.sidebar{background:var(--panel);border-color:var(--line);border-style:solid;overflow:auto}.left-panel{border-width:0 1px 0 0}.right-panel{border-width:0 0 0 1px}.sidebar-rail{display:none;justify-items:center;gap:8px;padding:6px 3px;background:var(--code-toolbar-bg)}.sidebar-rail.icon-toolbar button,.sidebar-collapse-button{width:46px;min-width:46px;min-height:46px;padding:0}.sidebar-rail.icon-toolbar svg{width:28px;height:28px;stroke-width:1.9}.sidebar-collapse-button{width:30px;min-width:30px;min-height:28px;border-color:transparent;background:transparent;color:var(--muted)}.sidebar-collapse-button svg{width:16px;height:16px;stroke-width:1.9}.left-sidebar-rail.icon-toolbar button:after{left:calc(100% + 8px);top:50%;bottom:auto;transform:translateY(-50%)}.right-sidebar-rail.icon-toolbar button:after{left:auto;right:calc(100% + 8px);top:50%;bottom:auto;transform:translateY(-50%)}.app-shell.left-sidebar-collapsed .left-panel,.app-shell.right-sidebar-collapsed .right-panel{overflow:hidden}.app-shell.left-sidebar-collapsed .left-sidebar-rail,.app-shell.right-sidebar-collapsed .right-sidebar-rail{display:grid}.app-shell.left-sidebar-collapsed .left-panel>:not(.sidebar-rail),.app-shell.right-sidebar-collapsed .right-panel>:not(.sidebar-rail){display:none!important}.sidebar-collapse-button{margin-left:auto}.action-section{position:sticky;top:0;z-index:5;background:var(--panel)}.panel-section{padding:10px;border-bottom:1px solid var(--line)}h1{margin:0 0 10px;font-size:15px;line-height:1.2}.panel-title{margin-bottom:8px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.panel-title-row .panel-title{margin-bottom:0}.icon-button{display:inline-grid;place-items:center;width:26px;min-width:26px;min-height:26px;padding:0;border-radius:0;font-size:18px;line-height:1}.control-stack{display:grid;gap:8px}.inspector-form label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:700}.file-button{display:inline-flex;align-items:center;justify-content:center}.hidden-file-input,.file-button input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}.sidebar-tabs{display:flex;align-items:end;gap:0;position:sticky;top:0;z-index:6;padding:0;background:var(--code-toolbar-bg);border-bottom:1px solid var(--line)}.sidebar-tab{min-height:28px;padding:4px 12px;border-color:transparent;border-radius:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600}.sidebar-tab:hover{background:var(--button-hover-bg);color:var(--text)}.sidebar-tab.active{border-color:transparent;background:var(--panel);color:var(--text);box-shadow:inset 0 -1px 0 var(--panel),inset 0 2px 0 var(--accent)}.sidebar-tab-panel{min-height:0}.position-options{display:grid;grid-template-columns:repeat(4,28px);gap:4px}.position-options label{display:contents}.position-options input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.position-options span{display:inline-grid;place-items:center;width:28px;min-width:28px;min-height:26px;border:1px solid transparent;border-radius:0;background:var(--button-bg);color:var(--muted);cursor:pointer}.position-options span:hover{background:var(--button-hover-bg);color:var(--text)}.position-options input:checked+span{border-color:transparent;background:var(--accent-soft);color:var(--accent-strong)}.position-options input:focus-visible+span{outline:2px solid var(--focus);outline-offset:1px}.pattern-palette{display:grid;gap:10px}.pattern-group{display:grid;gap:5px}.pattern-group-title{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.toolbox-command-button,.pattern-button{display:grid;grid-template-columns:30px 1fr;align-items:start;gap:3px;width:100%;border:1px solid transparent;border-radius:0;background:transparent;min-height:0;padding:7px;text-align:left}.toolbox-command-button{margin-bottom:12px;border-color:transparent;background:transparent}.toolbox-command-button:hover,.toolbox-command-button:focus-visible,.pattern-button:hover,.pattern-button:focus-visible{background:var(--accent-soft);border-color:transparent}.pattern-icon{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:0;background:var(--pattern-icon-bg);color:var(--accent-strong)}.pattern-icon svg{width:15px;height:15px}.pattern-copy{display:grid;gap:3px;min-width:0}.pattern-name{font-size:13px;font-weight:700;color:var(--text)}.pattern-description,.status-text,.empty-state,.css-target{color:var(--muted);font-size:12px;line-height:1.4}.status-text,.empty-state,.css-target{margin:10px 0 0}.outline-section{padding-right:8px}.outline{display:grid;gap:2px}.outline-row{display:flex;align-items:center;min-width:0}.outline-caret{display:inline-grid;place-items:center;width:20px;min-width:20px;min-height:24px;padding:0;border:0;background:transparent;color:var(--muted)}.outline-caret svg{width:14px;height:14px}.outline-caret:disabled{opacity:0;cursor:default}.outline-item{flex:1 1 auto;display:inline-flex;align-items:center;gap:7px;min-width:0;border:1px solid transparent;border-radius:0;background:transparent;min-height:28px;padding:4px 8px;color:var(--text);text-align:left}.outline-tag-icon{width:15px;height:15px;color:var(--muted);flex:0 0 auto}.outline-item-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outline-item:hover,.outline-item.active{background:var(--accent-soft);border-color:transparent;color:var(--outline-active-text)}.outline-item.active .outline-tag-icon{color:var(--accent-strong)}.center-panel{display:grid;grid-template-rows:31px 1fr 28px;min-width:0;min-height:0;background:var(--canvas-bg)}.document-tabs{display:flex;align-items:end;min-width:0;background:var(--chrome-mid);border-bottom:1px solid var(--black-line);overflow:hidden}.document-tab{display:inline-flex;align-items:center;max-width:min(360px,80%);min-width:160px;min-height:30px;padding:0 12px;border-right:1px solid var(--black-line);background:var(--canvas-bg);color:var(--text);font-size:12px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 2px 0 var(--accent)}.document-tab span{min-width:0;overflow:hidden;text-overflow:ellipsis}.view-tabs{display:flex;align-items:stretch;gap:0;padding:0;background:var(--chrome-mid);border-top:1px solid var(--black-line)}.tab{min-width:82px;min-height:27px;padding:4px 12px;border:0;border-right:1px solid var(--black-line);border-radius:0;background:var(--chrome-dark);color:var(--muted);font-size:12px}.tab:hover{background:var(--button-hover-bg);color:var(--text)}.tab.active{background:var(--canvas-bg);color:var(--text);box-shadow:inset 0 2px 0 var(--accent)}.editor-view{display:none;min-width:0;min-height:0}.editor-view.active{display:block}.design-surface{position:relative;overflow:hidden}.design-frame{display:block;width:calc(100% - 16px);height:calc(100% - 16px);margin:8px;border:1px solid var(--frame-border);background:#fff;box-shadow:none}.selection-overlay{position:absolute;z-index:4;pointer-events:none;border:1px solid var(--accent-strong);box-shadow:0 0 0 1px #0000004d}.selection-overlay-popover{position:absolute;left:-2px;bottom:calc(100% + 2px);display:flex;align-items:center;max-width:min(420px,calc(100vw - 60px));pointer-events:auto}.selection-overlay.near-top .selection-overlay-popover{top:2px;bottom:auto}.selection-overlay-label{max-width:280px;min-height:26px;padding:5px 7px;border:1px solid var(--accent);border-right:0;border-radius:0;background:var(--popover-bg);color:var(--accent-strong);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selection-overlay-actions{display:inline-flex;align-items:center;gap:2px;min-height:26px;padding:0 3px;border:1px solid var(--accent);border-radius:0;background:var(--popover-bg)}.selection-overlay-actions button{width:24px;min-width:24px;min-height:22px}.selection-overlay-actions button[data-overlay-edit-action=save]{color:var(--accent)}.selection-overlay-actions button[data-overlay-action=delete],.selection-overlay-actions button[data-overlay-edit-action=cancel]{color:var(--danger)}.context-menu{position:absolute;z-index:8;display:grid;gap:2px;min-width:170px;padding:4px;background:var(--popover-bg);border:1px solid var(--line);box-shadow:0 14px 28px #0000005c}.context-menu button{display:block;width:100%;min-height:26px;padding:4px 9px;border:1px solid transparent;border-radius:0;background:transparent;color:var(--text);text-align:left}.context-menu button:hover,.context-menu button:focus-visible{border-color:var(--menu-hover-border);background:var(--accent-soft)}.code-workbench{display:grid;grid-template-rows:32px 1fr;width:100%;height:100%;min-height:0}.code-toolbar{display:flex;align-items:center;gap:3px;padding:3px 6px;background:var(--code-toolbar-bg);border-bottom:1px solid var(--code-toolbar-line);overflow-x:auto}.code-toolbar button{min-height:25px;padding:3px 7px;white-space:nowrap}.toolbar-divider{width:1px;height:18px;background:var(--line-strong);flex:0 0 auto}.toolbar-spacer{flex:1 1 auto;min-width:12px}.code-editor,.monaco-host{width:100%;height:100%;border:0;min-height:0}.code-editor{display:block;resize:none;padding:18px;background:var(--code-bg);color:var(--text);line-height:1.45;-moz-tab-size:2;tab-size:2;outline:none}.monaco-host,.monaco-ready .code-editor{display:none}.monaco-ready .monaco-host{display:block}.inspector-form{display:grid;gap:12px}.inspector-form input,.inspector-form select,.inspector-form textarea{width:100%;border:1px solid var(--line-strong);border-radius:0;background:var(--input-bg);color:var(--text);padding:6px 7px;font-weight:400}.inspector-form input[readonly]{background:var(--chrome-mid);color:var(--muted)}.inspector-form textarea{resize:vertical;min-height:78px}.element-actions{display:flex;align-items:center;gap:6px}.element-actions button{flex:0 0 auto}.element-actions button[data-element-action=delete]{color:var(--danger)}.field-group{display:grid;gap:12px}.diagnostics-list{display:grid;gap:6px}.diagnostic-empty,.diagnostic-item{padding:7px;border:1px solid var(--line);border-radius:0;background:var(--input-bg);color:var(--muted);font-size:12px;line-height:1.35}.diagnostic-item.warning{border-color:var(--diagnostic-warning-border);color:var(--diagnostic-warning-text)}.diagnostic-item.error{border-color:var(--diagnostic-error-border);color:var(--danger)}.secondary-button{width:100%;margin:10px 0}.status-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 10px;background:var(--chrome-dark);border-top:1px solid var(--line);color:var(--muted);font-size:12px}.modal-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:grid;place-items:center;padding:28px;background:#00000094}.modal-panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(860px,100%);max-height:min(720px,calc(100vh - 56px));overflow:hidden;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 64px #0000007a}.compact-modal-panel{width:min(460px,100%)}.new-document-panel{width:min(980px,100%)}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--panel-alt)}.modal-header h1{margin:0 0 5px;font-size:20px;line-height:1.1}.modal-header p{margin:0;color:var(--muted);font-size:13px}.template-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));align-content:start;gap:10px;padding:16px;overflow:auto;background:var(--chrome-dark)}.dialog-form{display:grid;gap:14px;padding:14px;overflow:auto}.dialog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dialog-form label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase}.dialog-form input[type=number]{width:100%;border:1px solid var(--line-strong);border-radius:0;background:var(--input-bg);color:var(--text);padding:6px 7px}.dialog-form .checkbox-row{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:400;text-transform:none}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}.secondary-action{background:transparent}.template-card{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:start;gap:12px;width:100%;min-height:148px;padding:14px;border:1px solid var(--line);border-radius:0;background:var(--panel);text-align:left}.template-card:hover,.template-card:focus-visible{border-color:var(--line-strong);background:var(--panel-alt);box-shadow:inset 0 2px 0 var(--accent)}.template-icon-wrap{display:inline-grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);background:var(--pattern-icon-bg);color:var(--accent-strong)}.template-icon-wrap svg{width:25px;height:25px;stroke-width:1.8}.template-copy{display:grid;align-content:start;gap:7px;min-width:0}.template-meta{justify-self:start;padding:2px 6px;border:1px solid var(--line);color:var(--accent-strong);background:var(--input-bg);font-size:10px;font-weight:800;line-height:1.2;text-transform:uppercase}.template-name{color:var(--text);font-size:14px;font-weight:700;line-height:1.25}.template-description{color:var(--muted);font-size:12px;line-height:1.4}.template-action{margin-top:4px;color:var(--accent);font-size:12px;font-weight:700}.clipboard-buffer{position:fixed;left:-9999px;top:0}.hidden{display:none!important}@media (max-width: 1100px){body{min-width:760px}.app-shell{--left-sidebar-width: 220px;--right-sidebar-width: 280px;grid-template-columns:var(--left-sidebar-width) minmax(360px,1fr) var(--right-sidebar-width)}.app-shell.left-sidebar-collapsed{--left-sidebar-width: 54px}.app-shell.right-sidebar-collapsed{--right-sidebar-width: 54px}}