:root{--bg: #0F1214;--canvas-bg: #52575c;--surface: #1B1F24;--surface-2: #22272D;--surface-app: #14171A;--surface-bar: #12161A;--border: #333A42;--border-soft: #262C33;--text: #EEF1F3;--text-soft: #CFD6DB;--muted: #98A2AB;--text-dim: #7B858E;--text-faint: #5A636B;--accent: oklch(.78 .14 75);--accent-dark: oklch(.84 .14 75);--accent-ink: #0B0D0F;--accent-tint-1: color-mix(in oklch, var(--accent) 10%, transparent);--accent-tint-2: color-mix(in oklch, var(--accent) 16%, transparent);--measure-a: oklch(.72 .16 300);--measure-b: oklch(.78 .11 205);--measure-c: #FF7043;--yellow: var(--accent);--danger: oklch(.64 .17 25);--danger-tint: color-mix(in oklch, var(--danger) 12%, transparent);--success: #22A866;--input-bg: #0F1214;--tab-bg: #0F1214;--tab-active: #22272D;--r-sm: 4px;--r-md: 7px;--r-lg: 12px;--shadow: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);--shadow-md: 0 4px 18px rgba(0,0,0,.45);--ease: cubic-bezier(.4,0,.2,1);--dur: .16s;--font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;--mono: "IBM Plex Mono", "Courier New", monospace;--sidebar-w: 352px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}.site-header{background:var(--surface-app);color:var(--text);border-bottom:1px solid var(--border-soft);box-shadow:var(--shadow-md);position:sticky;top:0;z-index:200}.header-inner{padding:10px 24px;height:60px;box-sizing:border-box;display:flex;align-items:center;gap:14px}.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;flex-shrink:0}.logo-ua{background:var(--accent);color:var(--accent-ink);font-size:.68rem;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.08em}.header-sep{width:1px;height:22px;background:var(--border-soft);flex-shrink:0}.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0}.header-file-actions{position:relative;display:flex;align-items:center;gap:6px}.header-file-actions .save-status{position:absolute;top:calc(100% + 8px);left:0;min-height:0;padding:6px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);white-space:nowrap;z-index:300}.header-file-actions .save-status:empty{display:none;padding:0;border:none;box-shadow:none}.header-info{position:relative;flex-shrink:0}.info-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--border-soft);background:none;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease)}.info-btn:hover,.info-btn[aria-expanded=true]{color:var(--accent);border-color:var(--accent)}.info-popover{position:absolute;top:calc(100% + 8px);right:0;width:280px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:300;font-size:.8rem;line-height:1.5;color:var(--text-soft)}.info-popover[hidden]{display:none}.info-popover a{color:var(--accent)}.font-banner{background:color-mix(in oklch,var(--accent) 9%,var(--surface-app));border-bottom:1px solid color-mix(in oklch,var(--accent) 25%,transparent)}.font-banner[hidden]{display:none}.font-banner-inner{max-width:1600px;margin:0 auto;padding:8px 24px;display:flex;align-items:flex-start;gap:10px}.font-banner-icon{flex-shrink:0;margin-top:1px}.font-banner-text{font-size:.78rem;line-height:1.5;flex:1;color:var(--text-soft)}.font-banner-text a{color:var(--accent)}.font-banner-text code{background:#ffffff14;padding:1px 4px;border-radius:3px;font-family:var(--mono);font-size:.72rem;color:var(--text)}.font-banner-close{background:none;border:none;font-size:1rem;cursor:pointer;color:var(--muted);padding:2px 4px}.init-error-banner{background:color-mix(in oklch,var(--danger) 9%,var(--surface-app));border-bottom:1px solid color-mix(in oklch,var(--danger) 25%,transparent)}.init-error-banner .font-banner-close{font-size:.78rem;white-space:nowrap}.example-picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:350;display:flex;align-items:center;justify-content:center}.example-picker-overlay[hidden]{display:none}.example-picker-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c}.example-picker-panel{position:relative;width:min(720px,calc(100vw - 48px));max-height:calc(100vh - 64px);overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:20px 24px 24px}.example-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.example-picker-head h2{font-size:1.05rem;margin:0;color:var(--text)}.example-picker-sub{color:var(--muted);font-size:.82rem;margin:0 0 16px}.example-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.example-card{display:flex;flex-direction:column;gap:8px;height:168px;padding:10px;border:2px solid var(--border);border-radius:var(--r-md);background:var(--input-bg);cursor:pointer;transition:all var(--dur) var(--ease);text-align:left}.example-card:hover{border-color:var(--accent);background:var(--accent-tint-1)}.example-card-thumb{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:var(--r-sm);padding:8px;overflow:hidden}.example-card-thumb svg{display:block;max-width:100%;max-height:100%;width:auto;height:auto;min-width:0;min-height:0}.example-card-title{flex:0 0 auto;height:2.4em;font-size:.82rem;font-weight:600;color:var(--text-soft);line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.app-root{flex:1;display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:0}.sidebar{background:var(--surface-app);border-right:1px solid var(--border-soft);display:flex;flex-direction:column;position:sticky;top:60px;height:calc(100vh - 60px);overflow:hidden}.tabs{display:flex;background:var(--tab-bg);border-bottom:1px solid var(--border);flex-shrink:0}.tab-btn{flex:1;padding:10px 8px;border:none;background:none;font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--dur) var(--ease)}.tab-btn.active{background:var(--tab-active);color:var(--accent);border-bottom-color:var(--accent)}.tab-btn:hover:not(.active){color:var(--text)}.tab-content{display:none;flex:1;overflow-y:auto;flex-direction:column}.tab-content.active{display:flex;flex-direction:column}.ctrl-section{background:var(--surface);border-radius:8px;padding:11px 12px 14px;border-left:2px solid transparent}.ctrl-title{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px}.ctrl-title:after{content:"";flex:1;height:1px;background:var(--border-soft)}.toggle-group{display:flex;gap:6px}.toggle-btn{flex:1;padding:8px 10px;border:2px solid var(--border);border-radius:var(--r-md);background:var(--input-bg);color:var(--muted);font-family:var(--font);font-size:.82rem;font-weight:600;cursor:pointer;transition:all var(--dur) var(--ease)}.toggle-btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.toggle-btn:not(.active):hover{border-color:var(--accent);color:var(--accent)}.toggle-group+.cfg-row{margin-top:10px}.field-group{margin-bottom:10px}.field-group:last-child{margin-bottom:0}.field-label{display:block;font-size:.75rem;font-weight:400;color:var(--muted);margin-bottom:5px}.hint{font-weight:400;font-size:.68rem}.field-input{width:100%;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--input-bg);font-family:var(--font);font-size:.88rem;color:var(--text);outline:none;transition:border-color var(--dur) var(--ease)}.field-input:focus{border-color:var(--accent)}.input-row{display:flex;gap:6px}.input-row .field-input{flex:1}.field-hint{margin-top:4px;font-size:.68rem;color:var(--muted);line-height:1.4}.field-hint code{background:#ffffff14;padding:1px 4px;border-radius:3px;font-family:var(--mono);font-size:.65rem;color:var(--text-soft)}.btn-translit{padding:5px 10px;background:var(--accent);color:var(--accent-ink);border:none;border-radius:6px;font-family:var(--font);font-size:.75rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:background var(--dur) var(--ease)}.btn-translit:hover{background:var(--accent-dark)}.btn-icon-only{padding:7px 10px;background:none;color:var(--accent);border:1.5px solid var(--border)}.btn-icon-only:hover{border-color:var(--accent);background:none}.field-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;cursor:pointer}.checkbox-row{margin-top:8px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.82rem;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{display:none}.checkbox-custom{width:16px;height:16px;border:2px solid var(--border);border-radius:3px;background:var(--input-bg);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease)}.checkbox-label input:checked+.checkbox-custom{background:var(--accent);border-color:var(--accent)}.checkbox-label input:checked+.checkbox-custom:after{content:"";display:block;width:4px;height:7px;border:2px solid var(--accent-ink);border-top:none;border-left:none;transform:rotate(45deg) translate(-1px,-1px)}.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.theme-btn{display:flex;align-items:center;gap:7px;padding:7px 9px;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--input-bg);cursor:pointer;font-family:var(--font);font-size:.72rem;color:var(--muted);transition:all var(--dur) var(--ease)}.theme-btn.active{border-color:var(--accent);background:var(--accent-tint-1);color:var(--text);font-weight:600}.theme-btn:hover:not(.active){border-color:var(--accent)}.theme-swatch{width:18px;height:18px;border-radius:3px;border:1.5px solid rgba(0,0,0,.15);flex-shrink:0}.theme-white{background:#fff}.theme-blue{background:#023e84}.theme-green{background:#3aaa35}.theme-brown{background:#743d0d}.theme-yellow{background:#fd0}.theme-red{background:#e40428}.theme-transparent{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:#fff}.theme-label{font-size:.7rem}.size-grid{display:flex;flex-direction:column;gap:4px}.size-btn{width:100%;padding:8px 11px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--input-bg);cursor:pointer;text-align:left;font-family:var(--font);font-size:.74rem;color:var(--muted);transition:all var(--dur) var(--ease)}.size-btn.active{border-color:var(--accent);background:var(--accent-tint-1);color:var(--text);font-weight:600}.size-btn:hover:not(.active){border-color:var(--accent);color:var(--text)}.size-note{margin-top:6px;font-size:.68rem;color:var(--muted);font-family:var(--mono)}.end-only{display:none}body.sign-end .end-only{display:block}.save-status{padding:0 16px 6px;font-size:.72rem;min-height:18px;color:var(--success);font-family:var(--mono)}.save-status.error{color:var(--danger)}.cfg-group{background:var(--surface);border-radius:8px;border-left:2px solid transparent;overflow:hidden}.cfg-group[open]{border-left-color:var(--accent)}.cfg-group[open] .cfg-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;padding:10px 12px 14px}.cfg-group .cfg-row{display:flex;flex-direction:column;align-items:stretch;gap:5px}.cfg-group .cfg-row label{font-size:.75rem;font-weight:400;color:var(--muted)}.cfg-group .cfg-row .cfg-stepper,.cfg-group .cfg-row>.cfg-input,.cfg-group .cfg-row .color-pair{width:100%}.cfg-group .cfg-row>.cfg-input{text-align:left;height:34px}.cfg-group .cfg-info-row,.cfg-group .cfg-separator,.cfg-group .cfg-row--full{grid-column:1 / -1}.cfg-group-title{padding:11px 12px;cursor:pointer;list-style:none;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.cfg-group-title::-webkit-details-marker{display:none}.cfg-group-title:before{content:"";order:1;flex:1;height:1px;background:var(--border-soft)}.cfg-group-title:after{content:"▸";order:2;color:var(--muted);font-size:.65rem}.cfg-group[open]>.cfg-group-title:after{content:"▾"}.cfg-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.cfg-row label{font-size:.73rem;color:var(--text);line-height:1.3}.cfg-row--full{grid-template-columns:1fr}.cfg-input{width:80px;padding:5px 8px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--input-bg);font-family:var(--mono);font-size:.78rem;color:var(--text);outline:none;text-align:right;transition:border-color var(--dur) var(--ease)}.cfg-input:focus{border-color:var(--accent)}.cfg-stepper{display:flex;align-items:center;width:96px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);height:34px;padding:0 4px 0 10px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.cfg-stepper .cfg-input{flex:1;width:auto;border:none;background:transparent;padding:0;border-radius:0;font-size:.875rem;text-align:left}.cfg-stepper .cfg-input:focus{border-color:transparent}.cfg-stepper:focus-within{border-color:var(--accent)}.cfg-stepper .cfg-input::-webkit-inner-spin-button,.cfg-stepper .cfg-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cfg-stepper .cfg-input{-moz-appearance:textfield}.cfg-step-btns{display:flex;flex-direction:column;gap:1px;flex-shrink:0}.cfg-step-btn{width:18px;height:15px;border:none;padding:0;background:var(--surface-2);color:var(--muted);font-size:8px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease)}.cfg-step-btn:first-child{border-radius:3px 3px 0 0}.cfg-step-btn:last-child{border-radius:0 0 3px 3px}.cfg-step-btn:hover{color:var(--accent);background:var(--surface)}.cfg-stepper:has(.field-deviation){border-color:var(--accent)}.cfg-stepper:has(.field-invalid){border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-tint)}.cfg-info-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:.73rem;color:var(--muted)}.cfg-info-row span:last-child{font-family:var(--mono);font-size:.78rem;color:var(--text);text-align:right;white-space:nowrap}.cfg-separator{border-top:1px solid var(--border);margin:4px 0}.color-pair{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);height:34px;padding:0 8px;transition:border-color var(--dur) var(--ease)}.color-pair:focus-within{border-color:var(--accent)}.color-pair .cfg-input{flex:1;min-width:0;width:auto;height:auto;border:none;background:transparent;padding:0;text-align:left;font-size:.8125rem;color:var(--text-soft)}.color-pair .cfg-input:focus{border-color:transparent}.mini-swatch{width:18px;height:18px;padding:0;border:1px solid #4A545E;border-radius:4px;cursor:pointer;background:none;flex-shrink:0}.mini-swatch::-webkit-color-swatch-wrapper{padding:0}.mini-swatch::-webkit-color-swatch{border:none;border-radius:3px}.preview-panel{display:flex;flex-direction:column;overflow:hidden;min-width:0;height:calc(100vh - 60px);position:sticky;top:60px}.btn-primary{padding:8px 18px;background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--r-md);font-family:var(--font);font-size:.82rem;font-weight:600;cursor:pointer;transition:background var(--dur) var(--ease)}.btn-primary:hover{background:var(--accent-dark)}.btn-secondary{padding:8px 14px;background:none;border:1.5px solid var(--border);border-radius:var(--r-md);font-family:var(--font);font-size:.82rem;color:var(--muted);cursor:pointer;transition:all var(--dur) var(--ease)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.btn-secondary.copied{border-color:var(--success);color:var(--success)}.btn-icon{width:14px;height:14px;vertical-align:-2px;margin-right:5px;flex-shrink:0}.btn-secondary.active{border-color:var(--accent);color:var(--accent);background:var(--accent-tint-1)}.preview-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;padding:0;font-family:var(--font);font-size:.8125rem;color:var(--text);cursor:pointer}.preview-toggle-track{width:34px;height:19px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:flex-start;padding:0 3px;flex-shrink:0;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}.preview-toggle-knob{width:13px;height:13px;border-radius:99px;background:var(--muted);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}.preview-toggle.active .preview-toggle-track{background:var(--accent);border-color:var(--accent);justify-content:flex-end}.preview-toggle.active .preview-toggle-knob{background:var(--accent-ink)}.field-invalid.cfg-input,.field-invalid.field-input{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-tint)}.preview-wrap{flex:1;min-height:0;min-width:0;overflow:auto;background:var(--canvas-bg);background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,.22) 1px,transparent 0);background-size:24px 24px;display:flex;padding:60px}.preview-stage{position:relative;display:inline-flex;margin:auto;align-items:center;justify-content:center;overflow:visible}.preview-grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:visible}.preview-loader{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0f1214bf;z-index:10;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);border-radius:8px}.preview-loader.visible{opacity:1}.loader-ring{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.preview-canvas svg{display:block;filter:drop-shadow(0 4px 18px rgba(0,0,0,.18))}.canvas-status-bar{flex-shrink:0;display:flex;align-items:center;gap:18px;height:34px;padding:0 20px;background:var(--surface-app);border-top:1px solid var(--border-soft);font-family:var(--mono);font-size:.72rem;color:var(--text-dim)}.canvas-status-bar .status-spacer{flex:1}#status-warnings{color:var(--danger)}#status-warnings[hidden],body.clean-preview .canvas-status-bar{display:none}.metrics-bar{display:flex;gap:0;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;flex-wrap:wrap}.metric{display:flex;flex-direction:column;padding:7px 16px;border-right:1px solid var(--border)}.metric:last-child{border-right:none}.metric-label{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}.metric span:last-child{font-family:var(--mono);font-size:.74rem;color:var(--text)}.svg-code-block{border-top:1px solid var(--border);flex-shrink:0}.svg-code-toggle{padding:9px 16px;cursor:pointer;font-size:.74rem;font-weight:600;color:var(--muted);list-style:none;-webkit-user-select:none;user-select:none;background:var(--surface)}.svg-code-toggle:hover{color:var(--accent)}.svg-code-toggle::-webkit-details-marker{display:none}.svg-code-wrap{background:#090b0c;overflow:hidden}.svg-code{padding:12px 16px;color:var(--measure-b);font-family:var(--mono);font-size:.68rem;line-height:1.55;overflow-x:hidden;overflow-y:auto;max-height:220px;white-space:pre-wrap;word-break:break-all;margin:0}body.clean-preview .app-root{grid-template-columns:1fr 300px}body.clean-preview .sidebar,body.clean-preview .annotation-bar{display:none}body.clean-preview .preview-wrap{background:#e5e3de}body.clean-preview .preview-canvas svg{filter:drop-shadow(0 20px 46px rgba(20,25,30,.28))}body.clean-preview .spec-panel{display:flex}.spec-panel{display:none;flex-direction:column;gap:20px;width:300px;flex-shrink:0;overflow-y:auto;background:var(--surface-app);border-left:1px solid var(--border-soft);padding:20px;position:sticky;top:60px;height:calc(100vh - 60px)}.spec-section{display:flex;flex-direction:column;gap:10px}.spec-section-title{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}.spec-divider{height:1px;background:var(--border-soft);flex-shrink:0}.spec-rows{display:flex;flex-direction:column;gap:7px;font-family:var(--mono);font-size:.75rem}.spec-row{display:flex;justify-content:space-between}.spec-row span:first-child{color:var(--text-dim)}.spec-row span:last-child{color:var(--text)}.spec-norm-list{display:flex;flex-direction:column;gap:8px}.spec-norm-alert{display:flex;align-items:flex-start;gap:10px;background:var(--danger-tint);border:1px solid color-mix(in oklch,var(--danger) 30%,transparent);border-radius:var(--r-md);padding:10px 12px}.spec-norm-alert-icon{width:16px;height:16px;flex-shrink:0;border-radius:4px;background:var(--danger);color:#fff;font-size:.69rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}.spec-norm-alert span:last-child{font-size:.75rem;line-height:1.5;color:#e6c8c4}.spec-norm-alert--deviation{background:var(--accent-tint-1);border-color:color-mix(in oklch,var(--accent) 30%,transparent)}.spec-norm-alert--deviation .spec-norm-alert-icon{background:var(--accent);color:var(--accent-ink)}.spec-norm-alert--deviation span:last-child{color:var(--text-soft)}.spec-norm-ok{display:flex;align-items:center;gap:10px;padding:2px 0}.spec-norm-ok-icon{width:16px;height:16px;flex-shrink:0;border-radius:4px;background:#2c333a;color:var(--muted);font-size:.69rem;display:flex;align-items:center;justify-content:center}.spec-norm-ok span:last-child{font-size:.75rem;color:var(--muted)}.spec-export-buttons{display:flex;flex-direction:column;gap:8px}.spec-export-btn{font-family:inherit;font-size:.8125rem;font-weight:500;color:var(--text-soft);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px;cursor:pointer;text-align:left;transition:all var(--dur) var(--ease)}.spec-export-btn:hover{border-color:var(--accent);color:var(--accent)}.spec-export-btn--primary{font-weight:600;color:var(--accent-ink);background:var(--accent);border:none}.spec-export-btn--primary:hover{background:var(--accent-dark);color:var(--accent-ink)}.spec-export-note{font-size:.6875rem;line-height:1.5;color:var(--text-faint)}@media(max-width:860px){.app-root{grid-template-columns:1fr}.sidebar{position:static;height:auto;max-height:60vh}.preview-wrap{min-height:300px}body.clean-preview .app-root{grid-template-columns:1fr}.spec-panel{position:static;height:auto}}@media(max-width:700px){.header-inner{padding:10px 12px;gap:8px}.logo-text,.header-sep{display:none}.header-actions{gap:8px}.header-file-actions{gap:4px}.header-file-actions button{padding:8px 10px}.btn-label,.preview-toggle-label{display:none}.header-file-actions .btn-icon{margin-right:0}}.zoom-controls{display:flex;align-items:center;gap:3px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:3px}.btn-zoom{width:26px;height:24px;border:none;border-radius:5px;background:none;font-size:.875rem;line-height:1;cursor:pointer;color:var(--text-soft);transition:all var(--dur) var(--ease);display:flex;align-items:center;justify-content:center}.btn-zoom:hover{background:var(--surface-2);color:var(--accent)}.zoom-label{font-family:var(--mono);font-size:.75rem;color:var(--text);min-width:34px;text-align:center;padding:0 8px}.preview-canvas{transition:zoom .1s ease}.canvas-toolbar{flex-shrink:0;display:flex;align-items:center;gap:14px;padding:0 20px;height:48px;background:var(--surface-bar);border-bottom:1px solid var(--border-soft)}.canvas-toolbar-label{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}.canvas-toolbar-size{font-family:var(--mono);font-size:.74rem;color:var(--muted)}.canvas-toolbar .zoom-controls{margin-left:auto}.btn-fit{font-family:var(--mono);font-size:.72rem;color:var(--muted);border:1px solid var(--border);border-radius:var(--r-sm);background:none;padding:6px 10px;cursor:pointer;transition:all var(--dur) var(--ease)}.btn-fit:hover{border-color:var(--accent);color:var(--accent)}.annotation-bar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--surface-bar);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0}.ann-export-note{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--text-faint)}.ann-sep{width:1px;height:14px;background:var(--border)}.ann-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.ann-toggle{--chip-color: var(--text-dim);display:flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border:1px solid var(--border-soft);border-radius:999px;font-size:.75rem;color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--dur) var(--ease)}.ann-toggle:hover{border-color:var(--border)}.ann-toggle input[type=checkbox]{display:none}.ann-dot-toggle{width:9px;height:9px;border-radius:999px;border:1px solid var(--border);background:none;flex-shrink:0;transition:all var(--dur) var(--ease)}.ann-toggle--accent{--chip-color: var(--accent)}.ann-toggle--measure-a{--chip-color: var(--measure-a)}.ann-toggle--measure-b{--chip-color: var(--measure-b)}.ann-toggle--measure-c{--chip-color: var(--measure-c)}.ann-toggle:has(input:checked){background:var(--surface-2);color:var(--text);border-color:color-mix(in oklch,var(--chip-color) 55%,transparent)}.ann-toggle:has(input:checked) .ann-dot-toggle{background:var(--chip-color);border-color:var(--chip-color)}.preview-canvas{position:relative;display:inline-block;overflow:visible}.annotation-overlay{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}.symbol-tabs{display:flex;gap:4px;margin-bottom:8px}.sym-tab-btn{flex:1;padding:5px 6px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--input-bg);font-family:var(--font);font-size:.72rem;font-weight:600;cursor:pointer;color:var(--muted);transition:all var(--dur) var(--ease)}.sym-tab-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-tint-1)}.sym-tab-btn:hover:not(.active){border-color:var(--accent)}.symbol-grid{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto}.sym-btn{padding:7px 10px;border:2px solid var(--border);border-radius:var(--r-md);background:var(--input-bg);cursor:pointer;font-family:var(--font);font-size:.82rem;font-weight:600;line-height:1.3;transition:all var(--dur) var(--ease);display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;text-align:left;color:var(--muted)}.sym-btn:hover{border-color:var(--accent);background:var(--accent-tint-1);color:var(--fg)}.sym-btn .sym-char{flex:0 0 28px;height:28px;display:flex;align-items:center;justify-content:center}.sym-btn .sym-char svg{display:block}.sym-btn .sym-label{flex:1;font-size:.82rem;line-height:1.2}.sym-btn.sym-selected{border-color:var(--accent);background:var(--accent-tint-2);color:var(--accent)}.sym-elem-tab-btn{flex:1;padding:5px 6px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--input-bg);font-family:var(--font);font-size:.72rem;font-weight:600;cursor:pointer;color:var(--muted);transition:all var(--dur) var(--ease)}.sym-elem-tab-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-tint-1)}.sym-elem-tab-btn:hover:not(.active){border-color:var(--accent)}.tsign-tab-btn{flex:1;padding:5px 6px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--input-bg);font-family:var(--font);font-size:.72rem;font-weight:600;cursor:pointer;color:var(--muted);transition:all var(--dur) var(--ease)}.tsign-tab-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-tint-1)}.tsign-tab-btn:hover:not(.active){border-color:var(--accent)}.add-element-row{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0}.add-element-row .field-input{flex:1}.elements-list{display:flex;flex-direction:column;flex-shrink:0}.element-card{border-bottom:1px solid var(--border)}.element-card-header{display:flex;align-items:center;gap:6px;padding:9px 16px;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface);transition:background var(--dur) var(--ease)}.element-card-header:hover{background:var(--bg)}.element-card-label{flex:1;font-size:.78rem;font-weight:600;color:var(--text)}.element-card-chevron{background:none;border:none;padding:0 2px;cursor:pointer;color:var(--muted);font-size:.75rem;line-height:1;transition:transform var(--dur) var(--ease);pointer-events:none}.element-card--open .element-card-chevron{transform:rotate(180deg)}.element-card-remove{background:none;border:none;padding:2px 5px;cursor:pointer;color:var(--muted);font-size:.75rem;border-radius:var(--r-sm);transition:all var(--dur) var(--ease);pointer-events:auto}.element-card-remove:hover{color:var(--danger);background:var(--danger-tint)}.element-card-body{display:none;padding:10px 16px 14px}.element-card--open .element-card-body{display:block}.symbol-insert-details{margin-top:10px;border-top:1px solid var(--border);padding-top:6px}.symbol-insert-summary{font-size:.72rem;font-weight:600;color:var(--muted);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;padding:3px 0}.symbol-insert-summary::-webkit-details-marker{display:none}.symbol-insert-summary:after{content:"▾";font-size:.65rem;margin-left:auto}details[open] .symbol-insert-summary:after{transform:rotate(180deg);display:inline-block}.sidebar-top{flex-shrink:0;border-bottom:1px solid var(--border)}.sidebar-tree{flex-shrink:0;max-height:36%;border-bottom:1px solid var(--border-soft);display:flex;flex-direction:column;overflow:hidden}.sidebar-inspector{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.inspector-tabs{display:flex;gap:3px;margin:14px 16px 0;padding:3px;background:var(--bg);border:1px solid var(--border-soft);border-radius:8px;flex-shrink:0}.insp-tab{flex:1;text-align:center;padding:6px 0;border:none;border-radius:6px;background:none;font-family:var(--font);font-size:.75rem;font-weight:400;color:var(--muted);cursor:pointer;transition:all var(--dur) var(--ease)}.insp-tab.active{background:var(--muted);color:var(--accent-ink);font-weight:600}.insp-tab:hover:not(.active){color:var(--text)}.inspector-body{flex:1;overflow-y:auto;min-height:0}.insp-panel{display:flex;flex-direction:column}#insp-panel-global{padding:14px 16px 16px;gap:6px}.insp-placeholder{padding:24px 16px;font-size:.8rem;color:var(--muted);text-align:center;font-style:italic}.insp-section{padding:12px 16px 14px;border-bottom:1px solid var(--border)}.insp-section .cfg-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}.insp-section .cfg-row{display:flex;flex-direction:column;align-items:stretch;gap:5px}.insp-section .cfg-row label{font-size:.75rem;font-weight:400;color:var(--muted)}.insp-section .cfg-row .cfg-stepper{width:100%}.insp-section>*+*{margin-top:14px}.insp-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.insp-head-label{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}.insp-head-rule{flex:1;height:1px;background:var(--border-soft)}.insp-group{display:flex;flex-direction:column;gap:10px}.cfg-section-label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px;margin-bottom:6px}.tree-header{flex-shrink:0;padding:16px 16px 12px;display:flex;align-items:center;gap:10px}.type-menu{position:fixed;width:190px;display:flex;flex-direction:column;gap:2px;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:300}.type-menu-item{display:block;width:100%;text-align:left;padding:8px 10px;border:none;border-radius:var(--r-sm);background:none;color:var(--text-soft);font-family:var(--font);font-size:.82rem;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}.type-menu-item:hover:not(:disabled){background:var(--surface);color:var(--text)}.type-menu-item:disabled{color:var(--text-faint);cursor:not-allowed}.tree-header-label{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}.tree-header-count{font-family:var(--mono);font-size:.625rem;color:var(--text-faint)}.tree-header-add{margin-left:auto}.tree-list{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:4px;padding:0 12px 10px}.tree-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-left:2px solid transparent;border-radius:0 var(--r-md) var(--r-md) 0;-webkit-user-select:none;user-select:none;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}.tree-item:hover{background:var(--surface)}.tree-item--active{background:var(--surface-2);border-left-color:var(--accent)}.tree-icon{font-family:var(--mono);font-size:.68rem;color:var(--text-dim);flex-shrink:0;width:18px;text-align:center}.tree-label{flex:1;font-size:.8rem;color:var(--text-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.tree-item--active .tree-label{color:var(--text);font-weight:500}.tree-remove{background:none;border:none;padding:2px 5px;cursor:pointer;color:var(--muted);font-size:.72rem;border-radius:var(--r-sm);transition:all var(--dur) var(--ease);flex-shrink:0;opacity:0}.tree-item:hover .tree-remove{opacity:1}.tree-remove:hover{color:var(--danger);background:var(--danger-tint)}.sidebar-tree .add-element-row{display:none;border-top:1px solid var(--border);border-bottom:none;flex-shrink:0}