:root{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--text-xs: 11px;--text-sm: 12px;--text-md: 13px;--text-base: 14px;--text-lg: 16px;--text-xl: 20px;--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--font-display: "Outfit", var(--font-sans);--gray-25: hsl(210 30% 98.5%);--gray-50: hsl(210 25% 97%);--gray-100: hsl(210 20% 94%);--gray-200: hsl(210 16% 88%);--gray-300: hsl(210 14% 78%);--gray-400: hsl(210 12% 62%);--gray-500: hsl(210 10% 46%);--gray-600: hsl(210 12% 36%);--gray-700: hsl(211 15% 26%);--gray-800: hsl(212 20% 16%);--gray-900: hsl(213 25% 10%);--accent-50: hsl(235 40% 96%);--accent-100: hsl(235 35% 92%);--accent-300: hsl(236 30% 68%);--accent-500: hsl(238 34% 48%);--accent-600: hsl(240 38% 38%);--accent-700: hsl(242 42% 28%);--danger-500: hsl(0 72% 51%);--danger-600: hsl(0 70% 42%);--warning-500: hsl(38 92% 45%);--warning-text: hsl(30 95% 32%);--warning-bg: hsl(45 95% 94%);--success-500: hsl(152 60% 36%);--success-bg: hsl(152 60% 94%);--danger-bg: hsl(0 72% 51% / .08);--surface-app: var(--gray-25);--surface-panel: #ffffff;--surface-sunken: var(--gray-50);--surface-hover: var(--gray-100);--surface-selected: var(--accent-50);--text-primary: var(--gray-900);--text-secondary: var(--gray-600);--text-tertiary: hsl(210 10% 42%);--text-on-accent: #ffffff;--line-subtle: var(--gray-100);--line-strong: var(--gray-200);--shadow-raised: 0 1px 2px hsl(213 25% 10% / .06);--shadow-overlay: 0 4px 16px hsl(213 25% 10% / .12), 0 1px 3px hsl(213 25% 10% / .08);--shadow-inset: hsl(213 25% 10% / .04);--backdrop: hsl(213 25% 10% / .4);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 10px;--focus-ring: 0 0 0 2px var(--surface-panel), 0 0 0 4px var(--accent-500)}[data-color-scheme=dark]{--accent-50: hsl(239 28% 19%);--accent-100: hsl(238 28% 24%);--accent-300: hsl(236 38% 66%);--accent-500: hsl(237 42% 55%);--accent-600: hsl(238 44% 45%);--accent-700: hsl(236 68% 79%);--danger-500: hsl(0 76% 65%);--danger-600: hsl(0 82% 72%);--warning-500: hsl(42 90% 62%);--warning-text: hsl(42 82% 72%);--warning-bg: hsl(38 38% 16%);--success-500: hsl(152 48% 63%);--success-bg: hsl(152 34% 15%);--danger-bg: hsl(0 68% 55% / .13);--surface-app: hsl(215 25% 8%);--surface-panel: hsl(214 22% 12%);--surface-sunken: hsl(215 24% 10%);--surface-hover: hsl(213 19% 17%);--surface-selected: hsl(239 27% 20%);--text-primary: hsl(210 24% 94%);--text-secondary: hsl(211 15% 72%);--text-tertiary: hsl(211 12% 62%);--text-on-accent: #ffffff;--line-subtle: hsl(214 18% 17%);--line-strong: hsl(213 17% 24%);--shadow-raised: 0 1px 2px hsl(216 35% 3% / .45);--shadow-overlay: 0 8px 28px hsl(216 35% 3% / .5), 0 1px 4px hsl(216 35% 3% / .4);--shadow-inset: hsl(216 35% 3% / .28);--backdrop: hsl(216 35% 3% / .72)}.okey-app{font-family:var(--font-sans);font-size:var(--text-base);line-height:1.5;color:var(--text-primary);background:var(--surface-app);font-variant-numeric:tabular-nums}.okey-app *:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.okey-app ::placeholder{color:var(--text-tertiary)}.okey-button{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px var(--space-3);border:none;border-radius:var(--radius-md);font:500 var(--text-md) var(--font-sans);cursor:pointer;white-space:nowrap}.okey-button--primary{background:var(--accent-600);color:var(--text-on-accent);box-shadow:var(--shadow-raised)}.okey-button--primary:hover{background:var(--accent-700)}.okey-button--secondary{background:var(--surface-panel);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-raised)}.okey-button--secondary:hover{background:var(--surface-sunken)}.okey-button--ghost{background:transparent;color:var(--text-secondary)}.okey-button--ghost:hover{background:var(--surface-hover);color:var(--text-primary)}.okey-button--danger{background:transparent;color:var(--danger-600)}.okey-button--danger:hover{background:var(--danger-bg)}.okey-button:disabled{opacity:.45;cursor:default;pointer-events:none}.okey-input,.okey-select{width:100%;min-width:0;padding:6px var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-panel);font:400 var(--text-md) var(--font-sans);color:var(--text-primary);box-shadow:inset 0 1px 2px var(--shadow-inset)}.okey-input--mono{font-family:var(--font-mono);font-size:var(--text-sm)}.okey-textarea{resize:vertical;min-height:4.5em;line-height:1.45}.okey-input:focus-visible,.okey-select:focus-visible{border-color:var(--accent-500);box-shadow:0 0 0 3px var(--accent-100)}.okey-input[aria-invalid=true]{border-color:var(--danger-500)}.okey-field{display:flex;flex-direction:column;gap:var(--space-1)}.okey-field>label{font:500 var(--text-xs) var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary)}.okey-field-error{font-size:var(--text-sm);color:var(--danger-600)}.okey-segmented{display:inline-flex;padding:2px;gap:2px;background:var(--surface-sunken);border-radius:var(--radius-md)}.okey-segmented>button{padding:4px var(--space-3);border:none;border-radius:var(--radius-sm);background:transparent;font:500 var(--text-sm) var(--font-sans);color:var(--text-secondary);cursor:pointer}.okey-segmented>button[aria-pressed=true]{background:var(--surface-panel);color:var(--text-primary);box-shadow:var(--shadow-raised)}.okey-type-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:var(--radius-sm);font:600 10px var(--font-mono);flex:none;color:hsl(var(--okey-type-hue) 60% 40%);background:hsl(var(--okey-type-hue) 70% 95%)}[data-color-scheme=dark] .okey-type-icon{color:hsl(var(--okey-type-hue) 58% 72%);background:hsl(var(--okey-type-hue) 34% 20%)}.okey-swatch{position:relative;display:inline-block;width:18px;height:18px;border-radius:var(--radius-sm);background-image:linear-gradient(45deg,var(--gray-200) 25%,transparent 25%,transparent 75%,var(--gray-200) 75%),linear-gradient(45deg,var(--gray-200) 25%,transparent 25%,transparent 75%,var(--gray-200) 75%);background-size:8px 8px;background-position:0 0,4px 4px;flex:none}.okey-swatch:after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--okey-swatch-color, transparent);box-shadow:inset 0 0 0 1px #1319201f}.okey-swatch--gamut-warning:before{content:"";position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--warning-500);box-shadow:0 0 0 2px var(--surface-panel);z-index:1}.okey-ref-pill{display:inline-flex;align-items:center;gap:var(--space-1);max-width:100%;padding:1px var(--space-2);border:none;border-radius:999px;background:var(--accent-50);color:var(--accent-700);font:500 var(--text-sm) var(--font-mono);cursor:pointer;overflow:hidden}.okey-ref-pill-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.okey-ref-pill:hover{background:var(--accent-100)}.okey-ref-pill--broken{background:var(--danger-bg);color:var(--danger-600)}.okey-token-row{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:0 var(--space-3);border:none;background:transparent;text-align:left;font:400 var(--text-md) var(--font-sans);color:var(--text-primary);cursor:pointer;height:100%}.okey-token-row:hover{background:var(--surface-hover)}.okey-token-row[aria-pressed=true]{background:var(--surface-selected);box-shadow:inset 2px 0 0 var(--accent-500)}.okey-token-row__name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.okey-token-row__name--deprecated{text-decoration:line-through;color:var(--text-tertiary)}.okey-token-row__value{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}body{margin:0}.studio{display:grid;grid-template-columns:240px 1fr;height:100vh}.studio-sidebar{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-4) var(--space-3);background:var(--surface-sunken);overflow-y:auto;overflow-x:hidden}h1.sidebar-logo{margin:0;padding:var(--space-1) var(--space-2) var(--space-2);color:var(--text-primary)}h1.sidebar-logo svg{display:block;width:100%;max-width:148px;height:auto}.sidebar-section{display:flex;flex-direction:column;gap:var(--space-1)}.sidebar-section>header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-2);margin-bottom:var(--space-1)}.sidebar-section>header>h2{margin:0;font:500 var(--text-xs) var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary)}.sidebar-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-md);background:transparent;font:400 var(--text-md) var(--font-sans);color:var(--text-secondary);text-align:left;cursor:pointer;width:100%}.sidebar-item:hover{background:var(--surface-hover);color:var(--text-primary)}a.sidebar-item{text-decoration:none}.sidebar-item[aria-current=true]{background:var(--surface-selected);color:var(--accent-700);font-weight:500}.sidebar-item .count{margin-left:auto;font-size:var(--text-xs);color:var(--text-tertiary)}.layer-badge{font-size:10px;font-weight:600;letter-spacing:.04em;padding:1px 5px;border-radius:3px;line-height:1.4;text-transform:uppercase}.layer-badge--primitive{background:var(--gray-800);color:#fff}.layer-badge--semantic{background:var(--gray-200);color:var(--gray-800)}.layer-badge--component{background:transparent;color:var(--text-tertiary);box-shadow:inset 0 0 0 1px var(--line-strong)}.sidebar-row{display:flex;align-items:center;gap:var(--space-1)}.sidebar-row>.sidebar-item{flex:1;min-width:0;width:auto}.row-menu{position:relative;flex:none}.row-menu-backdrop{position:fixed;inset:0;z-index:15}.row-menu-popover{position:absolute;z-index:20;top:calc(100% + var(--space-1));right:0;min-width:160px;display:flex;flex-direction:column;padding:var(--space-1);background:var(--surface-panel);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay)}.row-menu-popover--portal{position:fixed;z-index:42}.row-menu-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:transparent;font:400 var(--text-md) var(--font-sans);color:var(--text-secondary);text-align:left;white-space:nowrap;cursor:pointer}.row-menu-item:hover{background:var(--surface-hover);color:var(--text-primary)}.row-menu-item--danger{color:var(--danger-600)}.row-menu-item--danger:hover{background:var(--warning-bg);color:var(--danger-600)}.studio-main{display:flex;flex-direction:column;min-width:0;background:var(--surface-panel);box-shadow:var(--shadow-raised)}.studio-body{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}.studio-content{display:flex;flex-direction:column;flex:1;min-width:0}.studio-toolbar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3)}.studio-toolbar input[type=search]{max-width:280px}.studio-toolbar .spacer{flex:1}.token-scroll{flex:1;overflow:auto;contain:strict}.token-list-inner{position:relative;width:100%}.token-list-row{position:absolute;inset-inline:0;top:0}.token-grid-header{position:sticky;top:0;z-index:5;display:grid;align-items:center;height:30px;background:var(--surface-panel);border-bottom:1px solid var(--line-subtle)}.token-grid-header-cell{display:flex;align-items:baseline;gap:var(--space-2);padding:0 var(--space-3);font:600 var(--text-xs) var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap;overflow:hidden}.token-grid-header-cell--active{color:var(--accent-700)}.token-grid-header-label{display:inline-flex;align-items:baseline;gap:var(--space-2);min-width:0;padding:0;border:none;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.token-grid-header-label:hover{color:var(--text-primary)}.token-grid-header-cell .row-menu{opacity:0}.token-grid-header-cell:hover .row-menu,.token-grid-header-cell .row-menu:focus-within{opacity:1}.token-grid-header-group{font:400 var(--text-xs) var(--font-sans);text-transform:none;letter-spacing:normal}.token-list-row--grid{display:grid;align-items:stretch}.token-list-row--grid>.okey-token-row{min-width:0}.token-list-row--grid[aria-selected=true]{background:var(--surface-selected)}.token-cell{display:flex;align-items:center;gap:var(--space-2);min-width:0;padding:0 var(--space-3);border-left:1px solid var(--line-subtle);font:400 var(--text-sm) var(--font-mono);color:var(--text-secondary);overflow:hidden}.token-cell--inherited{opacity:.5}.token-cell--missing{color:var(--text-tertiary)}.token-cell-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.token-cell-swatch{display:inline-flex;flex:none;padding:0;border:none;border-radius:var(--radius-sm);background:none;cursor:pointer}.token-cell-swatch:focus-visible{outline:2px solid var(--accent-500);outline-offset:1px}.token-cell--editable{cursor:text}.token-cell--editable:hover{background:var(--surface-hover)}.token-cell--editing{padding:0 var(--space-1)}.token-cell--error{box-shadow:inset 0 0 0 1px var(--danger-500)}.token-cell-input{width:100%;min-width:0;padding:2px var(--space-2);border:1px solid var(--accent-500);border-radius:var(--radius-sm);background:var(--surface-panel);font:400 var(--text-sm) var(--font-mono);color:var(--text-primary);outline:none}.token-cell-reset{margin-left:auto;padding:0 var(--space-1);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-tertiary);font-size:var(--text-md);line-height:1;cursor:pointer;opacity:0}.token-cell:hover .token-cell-reset,.token-cell-reset:focus-visible{opacity:1}.token-cell-reset:hover{color:var(--text-primary);background:var(--surface-hover)}.token-name-cell{display:flex;align-items:center;min-width:0}.token-name-cell>.okey-token-row{flex:0 1 auto;width:auto;min-width:0}.token-name-cell>.token-cell{flex:1;min-width:0}.group-cell{display:flex;align-items:center;width:100%;height:100%}.group-cell>.group-row{flex:0 1 auto;width:auto;min-width:0}.group-cell>.token-cell{flex:1;min-width:0}.token-name-cell>.row-menu,.group-cell>.row-menu{flex:none;opacity:0}.token-list-row:hover .token-name-cell>.row-menu,.token-list-row:hover .group-cell>.row-menu,.row-menu:focus-within,.row-menu[data-open=true]{opacity:1}.token-name-cell .row-menu>.okey-button,.group-cell .row-menu>.okey-button{padding:0 var(--space-2);color:var(--text-tertiary)}.token-name-cell .row-menu>.okey-button:hover,.group-cell .row-menu>.okey-button:hover{color:var(--text-primary)}.path-with-prefix{display:flex;align-items:center;gap:var(--space-1);min-width:0}.path-with-prefix>.okey-input{flex:1;min-width:0}.path-prefix{flex:none;max-width:45%;padding:0 var(--space-1);font:400 var(--text-sm) var(--font-mono);color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-hint{margin:calc(-1 * var(--space-1)) 0 0;font:400 var(--text-xs) var(--font-sans);color:var(--text-tertiary)}.field-hint code{font-family:var(--font-mono)}.token-grid-add-wrap{display:flex;align-self:stretch}.token-cell--focused{box-shadow:inset 0 0 0 2px var(--accent-300)}.cell-popover{position:fixed;z-index:41;display:flex;flex-direction:column;gap:var(--space-2);max-height:380px;overflow-y:auto;padding:var(--space-3);background:var(--surface-panel);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay)}.cell-popover-reference{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);min-width:0}.cell-popover-hint{font:400 var(--text-xs) var(--font-sans);color:var(--text-tertiary)}.token-grid-add-wrap .row-menu{flex:1;display:flex}.token-grid-add-wrap .row-menu>.okey-button{flex:1;border-radius:0;border-left:1px solid var(--line-subtle);color:var(--text-tertiary)}.token-grid-add-wrap .row-menu>.okey-button:hover{color:var(--text-primary);background:var(--surface-hover)}.token-grid-actions{position:sticky;left:0;width:100%;box-sizing:border-box;display:flex;justify-content:center;gap:var(--space-2);padding:var(--space-3);border-top:1px solid var(--line-subtle);background:var(--surface-app)}.token-grid-action-btn{padding:var(--space-1) var(--space-4);border:1px solid var(--line-subtle);border-radius:var(--radius-sm);background:transparent;font:500 var(--text-sm) var(--font-sans);color:var(--text-tertiary);cursor:pointer}.token-grid-action-btn:hover{color:var(--text-primary);background:var(--surface-hover);border-color:var(--line-strong)}.token-list-row--drop{box-shadow:inset 0 0 0 2px var(--accent-300);border-radius:var(--radius-sm);background:var(--accent-50)}.group-row{display:flex;align-items:center;gap:var(--space-2);width:100%;height:100%;padding:0 var(--space-3);border:none;background:transparent;font:600 var(--text-sm) var(--font-sans);color:var(--text-secondary);text-align:left;cursor:pointer}.group-row:hover{color:var(--text-primary)}.group-row .chevron{display:inline-block;transition:transform .12s;font-size:9px;color:var(--text-tertiary)}.group-row .chevron--collapsed{transform:rotate(-90deg)}.empty-state{margin:var(--space-7) auto;max-width:36ch;text-align:center;color:var(--text-secondary)}.empty-state h3{margin:0 0 var(--space-2);font-size:var(--text-lg);color:var(--text-primary)}@keyframes inspector-slide-in{0%{max-width:0}to{max-width:320px}}.inspector-panel{flex:none;width:320px;max-width:320px;z-index:1;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);overflow-y:auto;overflow-x:hidden;background:var(--surface-app);box-shadow:-2px 0 12px #00000014;animation:inspector-slide-in .18s ease-out}.inspector-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2)}.inspector-close-btn{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-tertiary);font-size:18px;line-height:1;cursor:pointer}.inspector-close-btn:hover{background:var(--surface-hover);color:var(--text-primary)}.inspector-trigger-cell{display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line-subtle)}.inspector-trigger-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-tertiary);cursor:pointer;opacity:0;transition:opacity .1s,color .1s}.token-list-row:hover .inspector-trigger-btn,.inspector-trigger-cell--active .inspector-trigger-btn,.inspector-trigger-btn:focus-visible{opacity:1}.inspector-trigger-btn:hover,.inspector-trigger-cell--active .inspector-trigger-btn{color:var(--text-primary);background:var(--surface-hover)}.inspector-values-label{margin:0 0 var(--space-2);font:600 var(--text-xs) var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary)}.inspector-theme-row{display:flex;align-items:center;gap:var(--space-2);min-width:0}.inspector-theme-label{flex:0 0 72px;font:400 var(--text-sm) var(--font-sans);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inspector-theme-input{flex:1;min-width:0}.sidebar-hint{margin:0;padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface-panel);font-size:var(--text-xs);color:var(--text-tertiary);line-height:1.5}.sidebar-hint strong{color:var(--text-secondary)}.sidebar-footer{display:flex;flex-direction:column;gap:var(--space-2);margin-top:auto}.sidebar-appearance{display:flex;align-items:center;gap:var(--space-2);min-height:32px;padding:var(--space-1) var(--space-2);color:var(--text-secondary);font-size:var(--text-md)}.sidebar-appearance-icon{display:grid;place-items:center;width:18px;color:var(--text-tertiary);font-size:var(--text-lg);line-height:1}.theme-switch{position:relative;width:34px;height:20px;margin-left:auto;padding:0;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface-hover);cursor:pointer;transition:background .14s ease,border-color .14s ease}.theme-switch[aria-checked=true]{border-color:var(--accent-500);background:var(--accent-600)}.theme-switch-thumb{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--text-tertiary);box-shadow:var(--shadow-raised);transition:transform .14s ease,background .14s ease}.theme-switch[aria-checked=true] .theme-switch-thumb{transform:translate(14px);background:var(--text-on-accent)}.inspector-header .token-path{font:500 var(--text-sm) var(--font-mono);color:var(--text-tertiary);word-break:break-all}.inspector-header h2{margin:var(--space-1) 0 0;font-size:var(--text-xl);font-weight:600;letter-spacing:-.01em;word-break:break-word}.inspector-token-name{display:inline-flex;align-items:center;gap:var(--space-1);margin:var(--space-1) 0 0;padding:0;background:none;border:none;cursor:text;font-size:var(--text-xl);font-weight:600;letter-spacing:-.01em;color:var(--text-primary);word-break:break-word}.inspector-rename-icon{font-size:var(--text-sm);color:var(--text-tertiary);opacity:0;transition:opacity .1s}.inspector-token-name:hover .inspector-rename-icon{opacity:1}.inspector-rename-input{flex:1;margin:var(--space-1) 0 0;padding:2px var(--space-1);font-size:var(--text-xl);font-weight:600;letter-spacing:-.01em;font-family:var(--font-sans);color:var(--text-primary);background:var(--surface-app);border:1px solid var(--accent-500);border-radius:var(--radius-sm);outline:none;width:100%}.inspector-section{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);background:var(--surface-panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised)}.resolved-preview{display:flex;align-items:center;gap:var(--space-2);font:400 var(--text-sm) var(--font-mono);color:var(--text-secondary);word-break:break-all}.editor-error{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--danger-bg);color:var(--danger-600);font-size:var(--text-sm)}.gamut-note{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--warning-bg);color:var(--warning-text);font-size:var(--text-sm)}.decision-context p{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}.lifecycle-badge{display:inline-block;padding:1px var(--space-2);border-radius:999px;font:500 var(--text-xs) var(--font-sans);letter-spacing:.03em;text-transform:uppercase}.lifecycle-badge--active{background:var(--success-bg);color:var(--success-500)}.lifecycle-badge--draft{background:var(--gray-100);color:var(--gray-600)}.lifecycle-badge--deprecated{background:var(--warning-bg);color:var(--warning-text)}.lifecycle-badge--archived{background:var(--gray-100);color:var(--text-tertiary)}.meta-badge{display:inline-block;max-width:140px;padding:1px var(--space-2);border-radius:999px;background:var(--gray-100);color:var(--gray-600);font:500 var(--text-xs) var(--font-sans);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.editor-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.editor-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-3)}.editor-grid-2>*{min-width:0}.editor-grid-2 .span-2{grid-column:1 / -1}.color-picker-swatch{position:relative;display:inline-flex;flex:none;cursor:pointer}.color-picker-swatch input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.oklch-sliders{display:flex;flex-direction:column;gap:var(--space-1)}.oklch-sliders label{display:grid;grid-template-columns:14px 1fr 52px;align-items:center;gap:var(--space-2);font:500 var(--text-xs) var(--font-mono);color:var(--text-tertiary)}.shadow-layer{position:relative;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface-sunken)}.gradient-preview{height:40px;border-radius:var(--radius-md);border:1px solid var(--line-subtle);margin-bottom:var(--space-2)}.gradient-stop{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface-sunken);margin-bottom:var(--space-2)}.gradient-stop-color-row{display:flex;align-items:center;gap:var(--space-2)}.gradient-stop-swatch{flex-shrink:0;width:32px;height:32px;padding:0;border:1px solid var(--line-subtle);border-radius:var(--radius-sm);cursor:pointer;background:none}.gradient-stop-position-row{display:flex;align-items:center;gap:var(--space-2)}.gradient-stop-slider{flex:1;accent-color:var(--accent-600)}.gradient-stop-pct{font-size:var(--text-sm);color:var(--text-secondary);min-width:2.5rem;text-align:right}.alias-picker{position:relative}.alias-popover{position:absolute;z-index:10;top:calc(100% + var(--space-1));inset-inline:0}.alias-picker--inline .alias-popover{position:static;border:1px solid var(--line-strong)}.alias-popover{display:flex;flex-direction:column;max-height:300px;background:var(--surface-panel);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);overflow:hidden}.alias-popover input{border:none;border-bottom:1px solid var(--line-subtle);border-radius:0;box-shadow:none}.alias-options{overflow-y:auto;padding:var(--space-1)}.alias-option{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:transparent;font:400 var(--text-sm) var(--font-mono);color:var(--text-primary);text-align:left;cursor:pointer}.alias-option:hover{background:var(--surface-hover)}.alias-option .resolved{display:inline-flex;align-items:center;gap:var(--space-2);margin-left:auto;color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40%}.diagnostics{border-top:1px solid var(--line-subtle);background:var(--surface-panel)}.diagnostics-summary{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);border:none;background:transparent;font:500 var(--text-sm) var(--font-sans);color:var(--text-secondary);cursor:pointer}.count-badge{color:var(--text-tertiary)}.count-badge--error{color:var(--danger-600);font-weight:600}.count-badge--warning{color:var(--warning-text);font-weight:600}.diagnostics-summary .chevron{margin-left:auto;color:var(--text-tertiary)}.diagnostics-list{max-height:220px;overflow-y:auto;padding:0 var(--space-2) var(--space-2)}.diagnostic-row{display:flex;align-items:center;gap:var(--space-2);padding:2px var(--space-1);border-radius:var(--radius-sm)}.diagnostic-row:hover{background:var(--surface-hover)}.severity-dot{width:8px;height:8px;border-radius:50%;flex:none}.severity-dot--error{background:var(--danger-500)}.severity-dot--warn{background:var(--warning-500)}.diagnostic-message{flex:1;display:inline-flex;align-items:baseline;gap:var(--space-2);min-width:0;padding:var(--space-1);border:none;background:transparent;font:400 var(--text-sm) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer;overflow:hidden}.diagnostic-message code{font:500 var(--text-sm) var(--font-mono);color:var(--accent-700);flex:none}.diagnostic-message .rule-id{margin-left:auto;flex:none;font-size:var(--text-xs);color:var(--text-tertiary)}.section-label{margin:0;font:500 var(--text-xs) var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary)}.usage-list{display:flex;flex-wrap:wrap;gap:var(--space-1)}.usage-empty{margin:0;font-size:var(--text-sm);color:var(--text-tertiary)}.rename-preview{display:flex;flex-direction:column;gap:var(--space-1);max-height:180px;overflow-y:auto;padding:var(--space-2);border-radius:var(--radius-md);background:var(--surface-sunken)}.rename-edit code{font:400 var(--text-sm) var(--font-mono);color:var(--text-secondary)}.onboarding{display:grid;place-items:center;min-height:100vh;padding:var(--space-5)}.onboarding-card{max-width:460px}.onboarding-card h1{margin:0;font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;letter-spacing:-.01em}.onboarding-lede{margin:var(--space-2) 0 var(--space-4);color:var(--text-secondary)}.onboarding-tiers{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-5)}.onboarding-tier{display:inline-flex;align-items:center;padding:3px var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;letter-spacing:.02em}.onboarding-tier--primitive{background:var(--gray-800);color:#fff}.onboarding-tier--semantic{background:var(--gray-200);color:var(--gray-800)}.onboarding-tier--component{background:transparent;color:var(--text-tertiary);box-shadow:inset 0 0 0 1px var(--line-strong)}.onboarding-tier-arrow{color:var(--text-tertiary);font-size:var(--text-sm)}.onboarding-options{display:flex;flex-direction:column;gap:var(--space-3)}.onboarding-option{padding:var(--space-4);border:none;border-radius:var(--radius-lg);background:var(--surface-panel);box-shadow:var(--shadow-raised);text-align:left;cursor:pointer;font-family:inherit}.onboarding-option:hover{box-shadow:inset 0 0 0 1px var(--accent-300),var(--shadow-raised)}.onboarding-option h2{margin:0 0 var(--space-1);font-size:var(--text-base);font-weight:600;color:var(--text-primary)}.onboarding-option p{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}.palette{width:480px;max-width:calc(100vw - var(--space-6));max-height:60vh;display:flex;flex-direction:column;background:var(--surface-panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);overflow:hidden}.palette [cmdk-input]{width:100%;padding:var(--space-3) var(--space-4);border:none;border-bottom:1px solid var(--line-subtle);font:400 var(--text-base) var(--font-sans);color:var(--text-primary);outline:none}.palette [cmdk-list]{overflow-y:auto;padding:var(--space-2)}.palette [cmdk-group-heading]{padding:var(--space-2) var(--space-2) var(--space-1);font:500 var(--text-xs) var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary)}.palette [cmdk-item]{padding:var(--space-2);border-radius:var(--radius-md);font:400 var(--text-md) var(--font-sans);color:var(--text-primary);cursor:pointer}.palette [cmdk-item][data-selected=true]{background:var(--surface-selected);color:var(--accent-700)}.palette [cmdk-empty]{padding:var(--space-4);color:var(--text-tertiary);font-size:var(--text-sm)}.format-bar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.scale-preview{display:flex;flex-direction:column;gap:var(--space-1);max-height:240px;overflow-y:auto;padding:var(--space-2);border-radius:var(--radius-md);background:var(--surface-sunken)}.scale-preview-row{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.scale-preview-row code{font-family:var(--font-mono)}.scale-value{margin-left:auto;color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--text-xs)}.scale-tag{flex:none;padding:0 var(--space-2);border-radius:999px;background:var(--accent-50);color:var(--accent-700);font:500 var(--text-xs) var(--font-sans)}.scale-tag--anchor{background:var(--gray-100);color:var(--text-secondary)}.doctor-report,.dry-run,.merge-conflicts{display:flex;flex-direction:column;gap:var(--space-1);max-height:200px;overflow-y:auto;padding:var(--space-2);border-radius:var(--radius-md);background:var(--surface-sunken)}.doctor-step{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}.doctor-step--failed{color:var(--danger-600)}.doctor-hint{display:block;color:var(--text-tertiary)}.dry-run-change{margin:0}.dry-run-change code{font:400 var(--text-sm) var(--font-mono);color:var(--text-secondary)}.merge-conflict{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.sync-status{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}.ai-privacy{margin:0;padding:var(--space-2);border-radius:var(--radius-md);background:var(--surface-sunken);font-size:var(--text-sm);color:var(--text-secondary)}.ai-preset-note,.ai-key-note{margin:0;font-size:var(--text-sm);color:var(--text-tertiary)}.ai-setup-command{display:flex;align-items:center;gap:var(--space-2);min-width:0}.ai-setup-command code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);background:var(--surface-sunken);font:400 var(--text-sm) var(--font-mono);color:var(--text-secondary)}.suggestion-chips{display:flex;flex-direction:column;gap:var(--space-1)}.suggestion-chip{display:flex;align-items:center;gap:var(--space-2);min-width:0;padding:var(--space-1) var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-panel);cursor:pointer;text-align:left}.suggestion-chip:hover{background:var(--surface-sunken)}.suggestion-chip code{font:500 var(--text-sm) var(--font-mono);color:var(--text-primary);white-space:nowrap}.suggestion-reason{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--text-tertiary)}.value-with-picker{display:flex;gap:var(--space-2);align-items:center}.value-with-picker .okey-input{flex:1;width:auto}.new-token-color-picker{flex:0 0 auto;width:36px;height:32px;padding:2px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-panel);cursor:pointer}.unit-base-note{font-size:var(--text-sm);color:var(--text-tertiary);white-space:nowrap}.ai-summary{margin:0;font-weight:500}.ai-operations{display:flex;flex-direction:column;gap:var(--space-1);max-height:260px;overflow-y:auto;padding:var(--space-2);border-radius:var(--radius-md);background:var(--surface-sunken)}.ai-operation{display:flex;align-items:baseline;gap:var(--space-2);font-size:var(--text-sm)}.ai-operation code{font:400 var(--text-sm) var(--font-mono);color:var(--text-secondary);overflow-wrap:anywhere}.ai-operation--failed code{text-decoration:line-through;opacity:.7}.ai-operation-error{color:var(--danger-600);font-size:var(--text-sm)}.ai-dry-run{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}.ai-raw-output{max-height:160px;overflow:auto;font:400 var(--text-sm) var(--font-mono);white-space:pre-wrap}.dialog-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:var(--backdrop)}[data-color-scheme=dark] .layer-badge--semantic,[data-color-scheme=dark] .onboarding-tier--semantic{background:var(--surface-hover);color:var(--text-primary)}[data-color-scheme=dark] .lifecycle-badge--draft,[data-color-scheme=dark] .lifecycle-badge--archived,[data-color-scheme=dark] .meta-badge{background:var(--surface-hover);color:var(--text-secondary)}@media(prefers-reduced-motion:reduce){.theme-switch,.theme-switch-thumb{transition:none}}.dialog{display:flex;flex-direction:column;gap:var(--space-4);width:380px;max-width:calc(100vw - var(--space-6));max-height:calc(100vh - var(--space-6));overflow-y:auto;padding:var(--space-5);background:var(--surface-panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay)}.dialog h2{margin:0;font-size:var(--text-lg);font-weight:600}.dialog footer{display:flex;justify-content:flex-end;gap:var(--space-2)}.dashboard{min-height:100vh;background:var(--surface-app);color:var(--text-primary)}.dashboard-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line-subtle)}.dashboard-header-actions{display:flex;align-items:center;gap:var(--space-2)}.dashboard-wordmark{display:inline-flex;color:var(--text-primary)}.dashboard-wordmark svg{display:block;width:100%;max-width:148px;height:auto}.dashboard-main{max-width:640px;margin:0 auto;padding:var(--space-8) var(--space-6)}.dashboard-title{margin:0 0 var(--space-5);font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;letter-spacing:-.01em}.dashboard-empty{color:var(--text-secondary);margin:var(--space-6) 0}.dashboard-create{display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-5)}.dashboard-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.dashboard-project{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line-subtle);border-radius:var(--radius-md);background:var(--surface-panel);box-shadow:var(--shadow-raised)}.dashboard-project-name{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);background:none;border:none;padding:0;cursor:pointer;color:inherit;text-align:left}.dashboard-project-name:hover .dashboard-project-title{text-decoration:underline}.dashboard-project-title{font-weight:500;font-size:var(--text-base)}.dashboard-project-meta{font-size:var(--text-sm);color:var(--text-secondary)}.dashboard-project-actions{display:flex;gap:var(--space-1);flex-shrink:0}.dashboard-rename{display:flex;gap:var(--space-2);align-items:center;flex:1}