:root{color-scheme:light;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--color-bg: #e9eaec;--color-surface: #ffffff;--color-surface-hover: #f3f3f5;--color-border: #e7e7eb;--color-text: #242529;--color-text-secondary: #747780;--color-text-tertiary: #92959e;--color-accent: #0d99ff;--color-accent-hover: #0783df;--color-accent-soft: #e4f2ff;--color-danger: #c23232;--radius-sm: 4px;--radius-md: 6px;--duration-fast: .12s;--duration-normal: .18s;--ease-out: cubic-bezier(.2,.8,.2,1);--control-height: 28px;--font-size-small: 11px;--font-size-caption: 10px;--shadow-floating: 0 8px 24px rgb(25 28 36 / .08), 0 2px 6px rgb(25 28 36 / .04);--panel-left: 240px;--panel-right: 280px;--chrome-height: 48px;--figma-bg-panel: var(--color-surface);--figma-bg-menu: var(--color-surface);--figma-bg-header: var(--color-surface);--figma-bg-secondary: var(--color-surface-hover);--figma-bg-canvas: var(--color-bg);--figma-border: var(--color-border);--figma-border-light: var(--color-border);--figma-text-primary: var(--color-text);--figma-text-secondary: var(--color-text-secondary);--figma-text-tertiary: var(--color-text-tertiary);--figma-blue: var(--color-accent);--figma-blue-hover: var(--color-accent-hover);--figma-selection-bg: var(--color-accent-soft);--figma-hover-bg: var(--color-surface-hover);--figma-active-bg: var(--color-accent-soft);--figma-font-size-small: var(--font-size-small);--figma-font-size-xs: var(--font-size-caption);--figma-panel-width: var(--panel-right);--figma-radius: var(--radius-md)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--color-bg);color:var(--color-text);font:12px/1.5 var(--font-ui);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.4}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}a{color:inherit;text-decoration:none}::selection{background:var(--color-accent-soft)}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{background:#c9cbd0;border:2px solid var(--color-surface);border-radius:8px}#app{position:absolute;left:var(--panel-left);right:var(--panel-right);top:var(--chrome-height);bottom:0;overflow:hidden}.editor-header{height:var(--chrome-height);position:absolute;inset:0 0 auto;z-index:1100;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--color-surface);border-bottom:1px solid var(--color-border)}.editor-brand{display:flex;align-items:center;gap:9px;width:calc(var(--panel-left) - 33px);font-size:15px;letter-spacing:-.5px;font-weight:650}.brand-mark{display:grid;place-items:center;width:25px;height:25px;background:#242529;color:#fff;border-radius:7px}.editor-breadcrumb{display:flex;gap:12px;align-items:center;color:var(--color-text-secondary)}.editor-breadcrumb strong{color:var(--color-text);font-weight:550}.editor-header-actions{display:flex;align-items:center;gap:5px;margin-left:auto}.editor-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:30px;padding:0 10px;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;white-space:nowrap;transition:background var(--duration-fast),color var(--duration-fast)}.editor-button:hover,.icon-button:hover{background:var(--color-surface-hover)}.editor-button.primary{color:#fff;background:var(--color-accent)}.editor-button.primary:hover{background:#0783df}.icon-button{width:30px;padding:0}.header-divider{width:1px;height:18px;background:var(--color-border);margin:0 6px}.document-status{font-size:11px;color:var(--color-text-secondary);margin-left:8px}.document-status:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:#3d9c68}.editor-toolbar{position:absolute;bottom:24px;left:calc(var(--panel-left) + (100% - var(--panel-left) - var(--panel-right)) / 2);transform:translate(-50%);z-index:1050;display:flex;align-items:center;gap:3px;padding:7px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;box-shadow:var(--shadow-floating)}.tool-button{width:40px;height:40px;display:grid;place-items:center;position:relative;border:0;border-radius:8px;background:transparent;transition:background var(--duration-fast),color var(--duration-fast)}.tool-button:hover{background:var(--color-surface-hover)}.tool-button[aria-pressed=true]{background:var(--color-accent);color:#fff}.tool-button:after{content:attr(aria-label);position:absolute;bottom:calc(100% + 15px);left:50%;transform:translate(-50%,3px);background:#242529;color:#fff;border-radius:5px;padding:5px 8px;font-size:11px;pointer-events:none;opacity:0;white-space:nowrap;transition:opacity var(--duration-fast),transform var(--duration-fast)}.tool-button:hover:after,.tool-button:focus-visible:after{opacity:1;transform:translate(-50%)}.toolbar-divider{width:1px;height:23px;background:var(--color-border);margin:0 4px}.canvas-hint{position:absolute;left:calc(var(--panel-left) + 20px);bottom:22px;color:var(--color-text-secondary);pointer-events:none;font-size:11px}.layers-panel{top:var(--chrome-height)!important;width:var(--panel-left)!important;height:calc(100% - var(--chrome-height))!important}.layers-intro{padding:18px 16px 14px;border-bottom:1px solid var(--color-border)}.layers-intro .eyebrow{font-size:10px;font-weight:600;color:var(--color-text-secondary);letter-spacing:.07em;margin-bottom:9px}.page-row{display:flex;align-items:center;gap:9px;background:var(--color-surface-hover);border-radius:6px;padding:8px;font-weight:550}.layers-footer{padding:12px 16px;border-top:1px solid var(--color-border);color:var(--color-text-secondary);font-size:10px}.layer-row:focus-visible{outline-offset:-2px}.ruler{position:absolute;z-index:100;pointer-events:auto;background:var(--color-surface)}.ruler.horizontal{top:0;left:0;border-bottom:1px solid var(--color-border)}.ruler.vertical{top:0;left:0;border-right:1px solid var(--color-border)}.ruler.corner{top:0;left:0;z-index:101;border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.editor-dialog{border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface);color:var(--color-text);padding:24px;width:min(480px,calc(100vw - 40px));box-shadow:var(--shadow-floating)}.editor-dialog::backdrop{background:#14161c40}.editor-dialog[open]{animation:dialog-enter var(--duration-normal) var(--ease-out)}.editor-dialog h2{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.3px}.editor-dialog p{color:var(--color-text-secondary)}.dialog-title{display:flex;justify-content:space-between;align-items:center}.shortcut-row{display:flex;justify-content:space-between;gap:24px;padding:8px 0;border-bottom:1px solid var(--color-border)}kbd{font:11px var(--font-ui);color:var(--color-text-secondary)}.performance-monitor{position:absolute;left:calc(var(--panel-left) + 16px);top:calc(var(--chrome-height) + 16px);z-index:1050;width:220px;padding:14px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;box-shadow:var(--shadow-floating);font-size:11px}.metric-row{display:flex;justify-content:space-between;padding:3px 0;color:var(--color-text-secondary)}.metric-row b{font-variant-numeric:tabular-nums;color:var(--color-text);font-weight:500}.metric-section{margin:10px 0 4px;padding-top:8px;border-top:1px solid var(--color-border);font-weight:600}.startup-message{padding:30px;color:var(--color-text-secondary)}.autolayout-btn{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--color-border);border-radius:5px;background:transparent}.autolayout-btn.active{color:var(--color-accent);border-color:var(--color-accent)}.alignment-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;width:44px;height:44px;border:1px solid var(--color-border);border-radius:5px}.alignment-dot{background:#dddfe4;border-radius:1px}.alignment-dot.active{background:var(--color-accent)}.compact-field{display:flex;align-items:center;gap:3px;padding:3px 6px;min-height:28px;border:1px solid transparent;border-radius:5px;background:var(--color-surface-hover)}.compact-field:focus-within{border-color:var(--color-accent)}.compact-field-label{font-size:10px;color:var(--color-text-secondary)}.compact-field-input{min-width:0;width:100%;border:0;outline:none;background:transparent;color:inherit}@keyframes dialog-enter{0%{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}@media(max-width:1100px){:root{--panel-left: 200px;--panel-right: 260px}.canvas-hint,.document-status{display:none}}@media(max-width:760px){:root{--panel-left: 0px;--panel-right: 240px}.layers-panel{display:none!important}.editor-brand{width:auto}.editor-breadcrumb>span,.editor-brand>span:last-child,.header-optional{display:none}.editor-toolbar{bottom:12px;gap:0;padding:4px}.tool-button{width:32px;height:34px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.layer-row:focus-within .layer-action{display:flex!important}.inspector-host{position:fixed;right:0;top:var(--chrome-height);bottom:0;width:var(--panel-right);z-index:80;background:var(--color-surface);border-left:1px solid var(--color-border);box-sizing:border-box}.inspector{display:flex;flex-direction:column;height:100%;color:var(--color-text);font:var(--font-size-small)/1.45 var(--font-ui)}.inspector *,.inspector *:before,.inspector *:after{box-sizing:border-box}.inspector-header{height:48px;flex-shrink:0;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-border)}.inspector-tab{font-weight:600;font-size:12px}.inspector-header-caption{color:var(--color-text-secondary);font-size:10px}.inspector-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#d4d4d4 transparent;overscroll-behavior:contain}.inspector-zoom-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 8px 16px;border-bottom:1px solid var(--color-border);color:var(--color-text-secondary)}.inspector-zoom-trigger{height:28px;padding:0 8px;display:flex;align-items:center;gap:8px;border:0;border-radius:var(--radius-sm);color:var(--color-text);background:transparent;font:inherit;cursor:pointer;font-variant-numeric:tabular-nums}.inspector-zoom-trigger:hover,.inspector-zoom-trigger[aria-expanded=true]{background:var(--color-surface-hover)}.inspector-selection{padding:16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--color-border)}.inspector-selection>div{min-width:0}.inspector-selection h2{margin:0;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-selection p{margin:2px 0 0;color:var(--color-text-secondary);font-size:10px}.inspector-layer-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;font-size:17px;background:var(--color-accent-soft);color:var(--color-accent);flex-shrink:0}.inspector-properties{padding:0;margin:0;border:0;min-width:0}.inspector-properties:disabled{opacity:.65}.inspector-section{border-bottom:1px solid var(--color-border);padding-bottom:4px}.inspector-section-header{display:flex;align-items:center;height:42px;padding:0 8px 0 12px}.inspector-section-toggle{display:flex;align-items:center;gap:7px;flex:1;height:32px;padding:0 3px;border:0;border-radius:var(--radius-sm);text-align:left;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}.inspector-section-toggle:hover{color:var(--color-accent)}.inspector-chevron{font-size:8px;color:var(--color-text-secondary);transition:transform var(--duration-fast) var(--ease-out)}.inspector-chevron.collapsed{transform:rotate(-90deg)}.inspector-section-actions{display:flex;align-items:center;gap:3px}.section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 16px 12px}.section-grid[hidden]{display:none}.section-grid>*{min-width:0}.inspector-field{display:flex;align-items:center;gap:5px;min-width:0;height:30px}.inspector-field-label{flex-shrink:0;min-width:14px;max-width:52px;color:var(--color-text-secondary);font-size:10px;white-space:nowrap}.inspector-field-label:empty{display:none}.inspector-control{display:flex;align-items:center;flex:1;min-width:0;height:30px;background:var(--color-surface-hover);border:1px solid transparent;border-radius:var(--radius-sm);transition:border-color var(--duration-fast),background var(--duration-fast);overflow:hidden}.inspector-control:hover{border-color:var(--color-border)}.inspector-control:focus-within{background:var(--color-surface);border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}.inspector-control input,.inspector-control select,.inspector-color input{width:100%;min-width:0;padding:0 8px;height:28px;outline:none;border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--color-text);font:inherit;font-variant-numeric:tabular-nums}.inspector-control input[type=number]{appearance:textfield;-moz-appearance:textfield}.inspector-control input::-webkit-inner-spin-button,.inspector-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.inspector-control input::placeholder{color:var(--color-text-secondary);opacity:.75}.inspector-field-prefix{display:inline-flex;color:var(--color-text-secondary);margin-left:7px}.inspector-field-suffix{color:var(--color-text-secondary);padding-right:7px}.inspector-select select{appearance:none;cursor:pointer;padding-right:20px}.inspector-select{position:relative}.inspector-select>svg{position:absolute;right:6px;pointer-events:none;color:var(--color-text-secondary)}.inspector-field.is-disabled{opacity:.5}.inspector-color{display:flex;align-items:center;min-width:0;height:28px;gap:4px;border-radius:var(--radius-sm)}.inspector-color>input{flex:1;padding:0 2px;font-size:11px}.inspector-color input:focus{outline:1px solid var(--color-accent);border-radius:3px}.inspector-color-swatch{flex-shrink:0;width:22px;height:22px;padding:0;border-radius:4px;border:1px solid #0000001a;overflow:hidden;cursor:pointer;background:conic-gradient(#ddd 25%,#fff 0 50%,#ddd 0 75%,#fff 0) 0 0 / 8px 8px}.inspector-color-swatch>span{display:block;width:100%;height:100%}.inspector-color-alpha{display:flex;align-items:center;width:46px;color:var(--color-text-secondary)}.inspector-color-alpha input{padding:0 2px;text-align:right}.inspector-icon-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:var(--radius-sm);color:var(--color-text-secondary);background:transparent;cursor:pointer}.inspector-icon-button:hover{background:var(--color-surface-hover);color:var(--color-text)}.inspector button:focus-visible,.inspector-zoom-menu button:focus-visible,.inspector-highlight button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.inspector-empty{padding:38px 24px 24px;text-align:center}.inspector-empty-symbol{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;border:1px solid var(--color-border);border-radius:14px;color:var(--color-text-secondary);background:var(--color-surface-hover)}.inspector-empty h2{margin:0 0 8px;font-size:13px;font-weight:600}.inspector-empty p{margin:0;line-height:1.7;color:var(--color-text-secondary)}.inspector-shortcuts{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;margin-top:30px;padding-top:24px;border-top:1px solid var(--color-border);text-align:left;color:var(--color-text-secondary)}.inspector kbd,.inspector-zoom-menu kbd{font:inherit;font-size:10px;color:var(--color-text-secondary)}.inspector-shortcuts kbd{text-align:center;padding:2px 6px;min-width:22px;border:1px solid var(--color-border);border-radius:4px}.inspector-zoom-menu{width:200px;font-size:11px}.inspector-zoom-menu>button{display:flex;justify-content:space-between;width:100%;padding:8px;border:0;border-radius:4px;background:transparent;color:var(--color-text);cursor:pointer;text-align:left;font:inherit}.inspector-zoom-menu>button:hover{background:var(--color-surface-hover)}.inspector-zoom-menu>.inspector-control{margin-bottom:8px}.inspector-zoom-menu hr{border:0;border-top:1px solid var(--color-border);margin:4px 0}.inspector-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.inspector-error{padding:20px 16px;font-size:11px;color:var(--color-text)}.inspector-error h2{font-size:13px}.inspector-inline-error{color:var(--color-danger);line-height:1.5;margin:0}@media(prefers-reduced-motion:reduce){.inspector *,.inspector *:before,.inspector *:after,.inspector-highlight *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}.inspector-segmented{display:flex;grid-column:1 / -1;padding:3px;gap:3px;border-radius:6px;background:var(--color-surface-hover)}.inspector-segmented button{flex:1;height:28px;border:1px solid transparent;background:transparent;border-radius:4px;color:var(--color-text-secondary);cursor:pointer}.inspector-segmented button[aria-pressed=true]{background:var(--color-surface);border-color:var(--color-border);color:var(--color-accent);box-shadow:0 1px 2px #00000008}.inspector-layout-controls{grid-column:1 / -1;display:flex;align-items:center;gap:16px;padding:4px 0}.inspector-alignment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:78px;height:78px;padding:5px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface-hover)}.inspector-alignment-grid button{display:grid;place-items:center;border:0;background:transparent;cursor:pointer;border-radius:3px}.inspector-alignment-grid button span{width:3px;height:3px;background:var(--color-text-secondary);border-radius:50%}.inspector-alignment-grid button[aria-pressed=true]{background:var(--color-accent-soft)}.inspector-alignment-grid button[aria-pressed=true] span{width:8px;height:8px;border-radius:2px;background:var(--color-accent)}.inspector-text-button{grid-column:1 / -1;text-align:left;padding:4px 0;border:0;font:inherit;background:transparent;color:var(--color-text-secondary);cursor:pointer}.inspector-text-button:hover{color:var(--color-accent)}.inspector-highlight-scroll{max-height:60vh;overflow:auto;padding:4px 0}.inspector-highlight-scroll h3{margin:12px 0 6px;font-size:11px;font-weight:500;color:var(--color-text-secondary)}.inspector-highlight-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.inspector-highlight-option{height:40px;background:transparent;color:var(--color-text);border:1px solid transparent;border-radius:5px;position:relative;display:grid;place-items:center;cursor:pointer}.inspector-highlight-option:hover{background:var(--color-surface-hover)}.inspector-highlight-option[aria-pressed=true]{border-color:var(--color-accent)}.inspector-highlight-option span{font-size:16px;position:relative;z-index:1}.inspector-highlight-option:before{content:"";position:absolute;width:30px;height:22px}.highlight-mark:before{background:var(--highlight-color);opacity:.35;height:10px;bottom:10px;border-radius:3px}.highlight-rect:before{border:1.5px solid var(--highlight-color)}.highlight-wave span{text-decoration:underline wavy var(--highlight-color);text-underline-offset:4px}.highlight-line span{text-decoration:underline var(--highlight-color);text-underline-offset:4px}.highlight-border:before{border:2px solid var(--highlight-color);border-radius:8px}.highlight-dot span{text-decoration:underline dotted var(--highlight-color);text-underline-offset:4px}.highlight-circle:before{background:var(--highlight-color);opacity:.3;border-radius:50%}.inspector-highlight-footer{display:flex;justify-content:space-between;padding-top:8px}.inspector-zoom-row{position:relative;z-index:2}.inspector-zoom-popover{position:absolute;top:calc(100% + 4px);right:8px;padding:8px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-floating)}.inspector-loading{padding:20px 16px}.inspector-loading>span{display:block;height:var(--control-height);margin-bottom:8px;border-radius:var(--radius-sm);background:var(--color-surface-hover)}.inspector-loading>span:nth-child(2){width:70%}.inspector-loading p{color:var(--color-text-secondary);font-size:var(--font-size-caption)}.inspector-color-trigger{display:inline-flex;flex-shrink:0}