*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}#root{margin-left:0;margin-right:0}.skip-link{position:absolute;top:-100%;left:var(--space-4);z-index:9999;padding:var(--space-2) var(--space-4);background:var(--accent);color:var(--accent-fg, #fff);font-size:var(--font-size-sm);font-weight:600;border-radius:var(--radius-sm);text-decoration:none;opacity:0;transition:top .15s,opacity .15s}.skip-link:focus{top:var(--space-2);opacity:1}:root{--bg: #ffffff;--bg-panel: #ffffff;--bg-hover: #f8f9fa;--bg-active: #f0f1f3;--bg-code: #1a1a2e;--bg-subtle: #fafafa;--bg-secondary: #f8f9fa;--bg-input: #ffffff;--fg: #1a1a1a;--fg-inverse: #171717;--fg-muted: #5c5c5c;--fg-dim: #767676;--fg-nav: #2d2d2d;--fg-nav-dim: #454545;--border: #e0e3e7;--border-subtle: #e8eaed;--border-light: #eef0f3;--border-focus: #c4c8cc;--accent: #2563eb;--accent-hover: #1d4ed8;--accent-fg: #ffffff;--accent-subtle: rgba(37, 99, 235, .12);--accent-subtle-sm: rgba(37, 99, 235, .06);--accent-muted: rgba(37, 99, 235, .15);--accent-border: rgba(37, 99, 235, .2);--danger: #e5484d;--danger-subtle: rgba(229, 72, 77, .1);--success: #30a46c;--success-subtle: rgba(48, 164, 108, .1);--warning: #f5a623;--warning-subtle: rgba(245, 166, 35, .1);--info: #0090ff;--info-subtle: rgba(0, 144, 255, .1);--color-danger: #dc2626;--color-warning: #d97706;--color-success: #16a34a;--color-info: #2563eb;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);--shadow-md: 0 2px 8px rgba(0, 0, 0, .06);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .08);--shadow-xl: 0 8px 24px rgba(0, 0, 0, .1);--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;--font-size-2xs: .6875rem;--font-size-xs: .625rem;--font-size-sm: .6875rem;--font-size-md: .75rem;--font-size-label: .8125rem;--font-size-base: .875rem;--font-size-15: .9375rem;--font-size-lg: 1rem;--font-size-xl: 1.125rem;--font-size-2xl: 1.25rem;--font-size-3xl: 1.375rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 40px;--space-8: 48px;--layout-sidebar-width: 260px;--layout-main-padding-block: 40px;--layout-main-padding-inline-start: 40px;--layout-main-padding-inline-end: 36px;--bg-surface: #ffffff;--bg-surface-hover: #f8f9fa;--bg-elevated: #eef4fb;--border-elevated: rgba(37, 99, 235, .2);--tag-orange-bg: #fde7d0;--tag-orange-text: #c24e00;--tag-blue-bg: #dde8ff;--tag-blue-text: #1a4fd8;--tag-green-bg: rgba(48, 164, 108, .1);--tag-green-text: #18794e;--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);--duration-fast: 80ms;--duration-base: .15s;--duration-slow: .25s;--easing: cubic-bezier(.16, 1, .3, 1)}[data-theme=dark]{--bg: #0f0f0f;--bg-panel: #1a1a1a;--bg-hover: #222222;--bg-active: #333333;--bg-code: #0d0d12;--bg-subtle: #161616;--bg-secondary: #1e1e1e;--bg-input: #121212;--fg: #ffffff;--fg-inverse: #f5f5f5;--fg-muted: #8c8c8c;--fg-dim: #9ca3af;--fg-nav: #c4c4c4;--fg-nav-dim: #9a9a9a;--border: #262626;--border-subtle: #262626;--border-light: #333333;--border-focus: #3a3a40;--accent: #0047ff;--accent-hover: #1a5aff;--accent-fg: #ffffff;--accent-subtle: rgba(0, 71, 255, .15);--accent-subtle-sm: rgba(0, 71, 255, .08);--accent-muted: rgba(0, 71, 255, .2);--accent-border: rgba(0, 71, 255, .35);--danger: #f87171;--danger-subtle: rgba(248, 113, 113, .15);--success: #4ade80;--success-subtle: rgba(74, 222, 128, .15);--warning: #fbbf24;--warning-subtle: rgba(251, 191, 36, .15);--info: #5fa5fa;--info-subtle: rgba(95, 165, 250, .15);--color-danger: #f87171;--color-warning: #fbbf24;--color-success: #4ade80;--color-info: #5fa5fa;--bg-preview: #2e2e2e;--border-preview: #404040;--bg-surface: #1a1a1a;--bg-surface-hover: #222222;--bg-elevated: #1a2235;--border-elevated: rgba(0, 71, 255, .25);--tag-orange-bg: #4c2d18;--tag-orange-text: #ff914d;--tag-blue-bg: #132842;--tag-blue-text: #5fa5fa;--tag-green-bg: rgba(74, 222, 128, .15);--tag-green-text: #4ade80;--bg-sidebar: #0a0a0a;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px}[data-theme=dark] .token-editor--color .color-preview-sm{border-color:#ffffff1f}[data-theme=dark] .sidebar{background-size:24px 24px}[data-theme=dark] .main-content{padding:32px 32px 60px}[data-theme=dark] .app-shell .app-toc{padding:24px 16px;background-color:var(--bg)}[data-theme=dark] .app-toc-title{text-transform:uppercase;margin-bottom:16px}[data-theme=dark] ::-webkit-scrollbar{width:8px}[data-theme=dark] ::-webkit-scrollbar-track{background:transparent}[data-theme=dark] ::-webkit-scrollbar-thumb{background:var(--bg-subtle);border-radius:4px}[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:var(--bg-hover)}[data-theme=dark] input:not([type=checkbox]):not([type=radio]),[data-theme=dark] select,[data-theme=dark] textarea{color:var(--fg)}[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:var(--fg-muted)}body{font-family:var(--font-sans);font-size:var(--font-size-base);line-height:1.5;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}.app-shell{display:grid;grid-template-rows:48px 1fr;grid-template-columns:var(--layout-sidebar-width) 1fr;min-height:100dvh;height:100dvh;overflow:hidden}.app-shell--sidebar-collapsed{grid-template-columns:56px 1fr}.app-shell--sidebar-collapsed.app-shell--with-toc{grid-template-columns:56px 1fr 200px}.app-shell--with-toc{grid-template-columns:var(--layout-sidebar-width) 1fr 200px}.app-shell .topbar{grid-column:1 / -1;height:48px;display:flex;align-items:center;padding:0;background:var(--bg);border-bottom:1px solid var(--border-subtle);z-index:200}.topbar-logo-area{background:transparent;border:none;border-right:1px solid var(--border-subtle);font-family:inherit;color:inherit;cursor:pointer;text-align:left;width:var(--layout-sidebar-width);min-width:var(--layout-sidebar-width);display:flex;align-items:center;padding:0 var(--space-4)}.topbar-logo-area:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}[data-theme=dark] .topbar-logo-area{background:var(--bg-sidebar, var(--bg))}.topbar-logo{display:flex;align-items:center;gap:var(--space-2);font-weight:600;font-size:14px;letter-spacing:-.02em;color:var(--fg)}.topbar-logo-icon{width:20px;height:20px;background:var(--fg);border-radius:var(--radius-sm);flex-shrink:0}.topbar-logo-img{border-radius:var(--radius-sm);object-fit:contain;flex-shrink:0}.topbar-logo-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-breadcrumb{flex:1;display:flex;align-items:center;justify-content:flex-start;gap:var(--space-2);font-size:13px;color:var(--fg-muted);padding:0 var(--space-4);min-width:0}.topbar-breadcrumb .topbar-breadcrumb-current{color:var(--fg)}.topbar-breadcrumb-link{background:none;border:none;padding:0;font-size:inherit;font-family:inherit;color:var(--fg-muted);cursor:pointer;text-decoration:none;border-radius:var(--radius-sm)}.topbar-breadcrumb-link:hover{color:var(--accent);text-decoration:underline}.topbar-breadcrumb-sep{margin:0 2px;color:var(--fg-dim)}.topbar-tabs-slot{display:flex;align-items:stretch;flex-shrink:1;min-width:0;overflow:hidden;height:100%}.topbar-tabs-slot:empty{display:none}.topbar-tabs-slot .foundation-tabs-wrap{margin:0;height:100%;display:flex;flex-direction:row;align-items:center;gap:0}.topbar-tabs-slot .foundation-tabs{height:100%;align-items:stretch;gap:0;padding:0;display:flex}.topbar-tabs-slot .foundation-tab{padding:0 14px;height:48px;font-size:13px;font-weight:400;border-bottom:2px solid transparent;border-radius:0;display:flex;align-items:center;color:var(--fg-muted)}.topbar-tabs-slot .foundation-tab:hover{color:var(--fg);background:var(--bg-hover)}.topbar-tabs-slot .foundation-tab--active{font-weight:600;color:var(--fg);border-bottom-color:var(--accent);background:transparent}.topbar-tabs-slot .foundation-tabs-sep{display:none}.topbar-tabs-slot .edit-sub-tabs{display:inline-flex;align-items:center;gap:2px;margin:0 0 0 12px;background:var(--bg-hover);border:none;border-left:1px solid var(--border-subtle);padding:3px 3px 3px 15px;border-radius:0;height:auto;overflow:visible;flex-shrink:0}.topbar-tabs-slot .edit-sub-tab{padding:3px 10px;border-radius:5px;font-size:var(--font-size-sm);font-weight:400;color:var(--fg-muted);background:none;border:none;cursor:pointer;font-family:inherit;transition:background .1s,color .1s;display:flex;align-items:center;white-space:nowrap}.topbar-tabs-slot .edit-sub-tab:hover{color:var(--fg);background:#0000000d}[data-theme=dark] .topbar-tabs-slot .edit-sub-tab:hover{background:#ffffff12}.topbar-tabs-slot .edit-sub-tab--active{font-weight:500;color:var(--fg);background:var(--bg-panel);box-shadow:0 1px 3px #0000001f,0 0 0 .5px #0000000a}.topbar-tabs-slot:not(:empty)~span{display:none}.topbar-actions{display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-4);flex-shrink:0}.topbar-save-status{display:inline-flex;align-items:center;gap:6px;padding:0;border-radius:0;border:0;background:transparent;color:var(--fg-muted);font-size:var(--font-size-xs);font-weight:500;line-height:1;white-space:nowrap}.topbar-save-status-dot{width:5px;height:5px;border-radius:999px;background:currentColor;opacity:.9}.topbar-save-status--saving{color:var(--accent)}.topbar-save-status--saved{color:#22b43b}.topbar-save-status--error{color:var(--error, #ef4444)}.topbar-user{position:relative}.topbar-user-btn{display:flex;align-items:center;gap:var(--space-2);padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);color:var(--fg);font-size:var(--font-size-sm);font-family:var(--font-sans);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}.topbar-user-btn:hover{background:var(--bg-hover);border-color:var(--border-strong)}.topbar-user-role{font-weight:500;color:var(--fg)}.topbar-user-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:9000;overflow:hidden}.topbar-user-menu-header{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-3) var(--space-2);border-bottom:1px solid var(--border-subtle)}.topbar-user-menu-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted)}.topbar-user-menu-value{font-size:var(--font-size-sm);font-weight:500;color:var(--fg)}.topbar-user-menu-item{display:block;width:100%;text-align:left;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--fg-muted);background:transparent;border:none;cursor:pointer;font-family:var(--font-sans);transition:background .1s,color .1s}.topbar-user-menu-item:hover{background:var(--bg-hover);color:var(--fg)}.topbar-user-menu-divider{height:1px;background:var(--border-subtle);margin:2px 0}.topbar-user-menu-item--danger{color:var(--error, #ef4444)}.topbar-avatar{width:24px;height:24px;border-radius:999px;object-fit:cover;border:1px solid var(--border-subtle);display:block;flex-shrink:0}.app-shell .sidebar{grid-row:2;grid-column:1;min-height:0;align-self:stretch;max-height:100%}.app-shell .main-content{grid-row:2;grid-column:2;min-width:0}.app-shell--with-toc .main-content{grid-column:2}.app-shell .app-toc{grid-row:2;grid-column:3;border-left:1px solid var(--border-subtle);padding:var(--space-5) var(--space-4);overflow-y:auto;min-width:0}.app-toc-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);margin-bottom:var(--space-3)}.app-toc .section-sticky-nav{position:static;width:auto;right:auto;top:auto}.app-toc-group{margin-bottom:var(--space-4)}.app-toc-group:last-child{margin-bottom:0}.app-toc-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);margin-bottom:var(--space-2);padding:0}.page-header{margin-bottom:var(--space-6);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4)}.color-page-header{margin-bottom:var(--space-6);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)}.color-page-header h1{font-size:var(--font-size-2xl);font-weight:600;letter-spacing:-.02em;margin-bottom:var(--space-1);color:var(--fg)}.page-title{margin:0}.page-title h1{font-size:var(--font-size-2xl);font-weight:600;margin-bottom:var(--space-1);color:var(--fg)}.page-desc{color:var(--fg-muted);font-size:var(--font-size-base);line-height:1.5;width:100%;margin:0}.section-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-4);padding-bottom:0}.section-step-badge{display:inline-flex;align-items:center;justify-content:center;padding:0 6px;height:20px;border-radius:10px;background:var(--accent-subtle);color:var(--accent);font-size:10px;font-weight:700;margin-right:8px;flex-shrink:0;white-space:nowrap}.section-step-desc{font-size:var(--font-size-sm);color:var(--fg-muted);margin:4px 0 16px;line-height:1.5}.section-title{font-size:var(--font-size-md);font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em}.section-header--contrast{justify-content:flex-start;align-items:center;gap:8px;margin-bottom:8px}.section-title--contrast{text-transform:uppercase;letter-spacing:.06em;font-size:var(--font-size-md);font-weight:700;color:var(--fg)}.section-count{font-size:var(--font-size-sm);font-weight:500;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.04em;margin:0}.section-actions{display:flex;gap:var(--space-2)}.section-header-main{display:inline-flex;align-items:center;gap:8px;min-width:0}.section-header-main .section-title{margin:0}.editor-page-header{margin-bottom:var(--space-6);padding-bottom:var(--space-4);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);background:var(--bg);box-shadow:0 1px 0 var(--border-subtle)}.editor-page-header h1{font-size:var(--font-size-2xl);font-weight:600;letter-spacing:-.02em;margin-bottom:var(--space-1);color:var(--fg)}.editor-page-count{font-size:var(--font-size-label);font-weight:400;color:var(--fg-muted);margin-left:var(--space-2)}.editor-page-header-right{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.editor-page-header-actions{display:flex;align-items:center;gap:var(--space-2)}.editor-page-header-actions .btn{background:var(--fg-inverse, #171717);color:var(--accent-fg, #fff)}[data-theme=dark] .editor-page-header-actions .btn{background:#e5e7eb;color:#111}.editor-page-header-actions .btn:hover{background:#2d2d2d}[data-theme=dark] .editor-page-header-actions .btn:hover{background:#d1d5db}.editor-page-header-actions .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.editor-section{margin-bottom:var(--space-7)}.editor-section:last-child{margin-bottom:0}.editor-step-hint{color:var(--fg-muted);font-size:var(--font-size-md);margin-bottom:var(--space-4);margin-top:var(--space-1);line-height:1.5}.btn-sm{background:transparent;border:1px solid var(--border-subtle);color:var(--fg-muted);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-sm);cursor:pointer;transition:border-color .2s,color .2s}.btn-sm:hover{border-color:var(--fg-muted);color:var(--fg)}.tag{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:500;gap:var(--space-1)}.tag-orange{background:var(--tag-orange-bg);color:var(--tag-orange-text)}.tag-blue{background:var(--tag-blue-bg);color:var(--tag-blue-text)}.tag-green{background:var(--tag-green-bg, rgba(48, 164, 108, .1));color:var(--tag-green-text, #18794e)}.semantic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}.semantic-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);transition:border-color .2s}.semantic-card:hover{border-color:var(--border-focus)}.sem-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}.semantic-card .token-name{font-family:var(--font-mono);font-size:var(--font-size-label);color:var(--fg)}.meta-label{font-size:var(--font-size-xs);color:var(--fg-dim);text-transform:uppercase;letter-spacing:.04em;display:block;margin-top:var(--space-1)}.sem-preview{height:32px;border-radius:var(--radius-sm);width:100%;margin-top:var(--space-2)}.semantic-view-empty{color:var(--fg-muted);font-size:var(--font-size-label);padding:var(--space-4)}.token-list-wrap{overflow-x:auto;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;margin-top:12px;margin-bottom:12px}.token-table--color-list{min-width:400px}.token-table--color-list th,.token-table--color-list td{padding:var(--space-2) var(--space-4)}.token-table-check-col{width:28px;padding-left:var(--space-3)!important;padding-right:0!important}.token-table-row--checked{background:color-mix(in oklch,var(--accent) 8%,var(--bg))!important}.token-list-usage-count{white-space:nowrap;text-align:center}.token-list-usage-empty{color:var(--fg-dim)}.token-table-empty{color:var(--fg-muted);font-size:var(--font-size-label);padding:var(--space-5);text-align:center}.token-list-type{width:1%;white-space:nowrap;vertical-align:middle}.token-type-badge{display:inline-block;font-size:var(--font-size-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:2px 6px;border-radius:4px}.token-type-badge--ramp{background:var(--bg-muted);color:var(--fg-muted)}.token-type-badge--semantic{background:color-mix(in oklch,var(--accent) 18%,transparent);color:var(--accent)}.token-table-row--semantic{background:color-mix(in oklch,var(--accent) 6%,var(--bg))}.token-table-row--semantic:hover{background:color-mix(in oklch,var(--accent) 10%,var(--bg))}.token-list-modified{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.token-list-modified-time{color:var(--fg-muted);font-size:var(--font-size-sm)}.token-list-use-case{min-width:140px}.token-list-use-case-input{width:100%;min-width:120px;padding:4px 6px;font-size:inherit;font-family:inherit;color:var(--fg);background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);outline:none}.token-list-use-case-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.token-list-use-case-input::placeholder{color:var(--fg-dim)}.token-table{width:100%;border-collapse:collapse;font-size:var(--font-size-label)}.token-table th{text-align:left;padding:var(--space-2) var(--space-4);color:var(--fg-dim);text-transform:uppercase;letter-spacing:.04em;font-weight:500;font-size:11px;border-bottom:1px solid var(--border-subtle)}.token-table td{padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--border-subtle);color:var(--fg-muted);vertical-align:middle}.token-table tr:last-child td{border-bottom:none}.token-table tr:hover td{background:var(--bg-surface-hover);color:var(--fg)}.token-table td.token-name{color:var(--fg);font-family:var(--font-mono)}.value-cell{display:flex;align-items:center;gap:var(--space-2)}.color-preview-sm{width:16px;height:16px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);flex-shrink:0}.ramp-container{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-5)}.ramp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.ramp-label{font-weight:500;display:flex;align-items:center;gap:var(--space-2)}.ramp-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:0;border-radius:var(--radius-md);overflow:hidden;height:80px}.color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.ramp-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4)}.ramp-summary-card.ramp-container{padding:var(--space-4)}.ramp-summary-card .ramp-header{margin-bottom:var(--space-3)}.ramp-summary-edit-btn{display:inline-flex;align-items:center;gap:var(--space-1)}.ramp-summary-strip{display:flex;height:48px;border-radius:var(--radius-sm);overflow:hidden}.ramp-summary-swatch{flex:1;min-width:0}.ramp-summary-swatch--light+.ramp-summary-swatch--light,.ramp-summary-swatch:first-child{border-radius:0}.ramp-summary-swatch--light{box-shadow:inset 0 0 0 1px #00000014}.ramp-summary-empty{color:var(--fg-muted);font-size:var(--font-size-label);padding:var(--space-5);text-align:center}.token-editor--color{font-size:13px;line-height:1.4}.token-editor--color .page-title h1{font-size:20px}.token-editor--color .section-title{font-size:14px}.token-editor--color .ctn-section{margin-bottom:var(--space-7)}.token-editor--color .ctn-section.ctn-section--collapsed{margin-bottom:var(--space-3)}.token-editor--color .ctn-section.ctn-section--collapsed .section-header{margin-bottom:0}.token-editor--color .ctn-section:last-child{margin-bottom:0}.token-editor--color #color-contrast{margin-top:calc(var(--space-7) + var(--space-3))}.token-editor--color #color-contrast.ctn-section--collapsed{padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-elevated);box-shadow:0 1px 0 var(--border-light)}.token-editor--color #color-contrast:last-child{margin-bottom:var(--space-6);padding-bottom:var(--space-5)}.token-editor--color #color-token-list{padding-bottom:127px}.sidebar{width:var(--layout-sidebar-width);min-width:var(--layout-sidebar-width);min-height:0;overflow:hidden;background-color:var(--bg-sidebar, var(--bg));border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;padding:16px 0;-webkit-user-select:none;user-select:none;position:relative;background-image:radial-gradient(var(--border-subtle) 1px,transparent 1px);background-size:20px 20px;transition:width .2s var(--easing),min-width .2s var(--easing)}.sidebar--collapsed{width:56px;min-width:56px;padding:12px 0;overflow-x:hidden}.sidebar--collapsed .sidebar-topbar{justify-content:center;padding:6px 4px 8px}.sidebar--collapsed .sidebar-header{display:flex;align-items:center;justify-content:center;padding:0 4px 8px;min-width:0}.sidebar--collapsed .sidebar-search{display:none}.sidebar--collapsed .sidebar-nav{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}.sidebar--collapsed .sidebar-section{margin-bottom:8px;padding:0}.sidebar--collapsed .sidebar-section-label,.sidebar--collapsed .sidebar-section-chevron,.sidebar--collapsed .sidebar-section-label--nested{display:none}.sidebar--collapsed .sidebar-section-content{padding:0 6px;min-width:0}.sidebar--collapsed .sidebar-card-grid{grid-template-columns:1fr;gap:4px;padding:0 6px;margin-bottom:2px;min-width:0}.sidebar--collapsed .sidebar-card-grid--tier2{margin-top:2px}.sidebar--collapsed .sidebar-card{min-height:0;min-width:0;padding:6px;justify-content:center;align-items:center;box-sizing:border-box}.sidebar--collapsed .sidebar-card-label{display:none}.sidebar--collapsed .sidebar-card-icon{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}.sidebar--collapsed .sidebar-card-icon svg{width:24px;height:24px;flex-shrink:0}.sidebar--collapsed .sidebar-item{justify-content:center;padding:8px;min-width:0;box-sizing:border-box}.sidebar--collapsed .sidebar-item span:not(.sidebar-item-icon){display:none}.sidebar--collapsed .sidebar-item-icon{margin-right:0}.sidebar--collapsed .sidebar-divider{margin:4px 6px}.sidebar--collapsed .sidebar-section--system{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 6px}.sidebar--collapsed .sidebar-utility-strip{flex-direction:column;gap:4px;margin-top:auto;padding:8px 4px;min-width:0}.sidebar-mobile-open{display:none;position:fixed;top:var(--space-2);left:var(--space-2);z-index:1001;width:40px;height:40px;padding:0;border:none;border-radius:var(--radius-md);background:var(--bg-panel);color:var(--fg);font-size:var(--font-size-xl);line-height:1;cursor:pointer;box-shadow:var(--shadow-md);align-items:center;justify-content:center}.sidebar-mobile-open:hover{background:var(--bg-hover)}@media (max-width: 767px){.app-shell.app-shell--with-toc{grid-template-columns:1fr}.app-shell .main-content{grid-column:1 / -1}.app-shell .app-toc{display:none}.topbar-tabs-slot .foundation-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.topbar-tabs-slot .foundation-tabs::-webkit-scrollbar{display:none}.topbar-tabs-slot .edit-sub-tabs{padding-left:10px;margin-left:8px}.topbar-tabs-slot .edit-sub-tab{padding:2px 8px}.sidebar-mobile-open{display:flex}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:1002;transform:translate(-100%);transition:transform .2s var(--easing);box-shadow:none}.app-shell.sidebar-open .sidebar{transform:translate(0);box-shadow:var(--shadow-xl)}.sidebar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:1001;animation:fadeIn .15s ease}.sidebar-mobile-close{position:absolute;top:var(--space-2);right:var(--space-2);z-index:1;width:32px;height:32px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--fg-muted);font-size:var(--font-size-2xl);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.sidebar-mobile-close:hover{background:var(--bg-hover);color:var(--fg)}.main-content{padding-left:var(--space-4);padding-right:var(--space-4)}.save-toast{left:var(--space-4)}.sidebar-card-grid{grid-template-columns:1fr}.token-editor-header{flex-wrap:wrap;gap:var(--space-2)}.elevation-ladder-surface,.scale-controls{flex-wrap:wrap}}@media (min-width: 768px) and (max-width: 1024px){:root{--layout-sidebar-width: 200px;--layout-main-padding-block: 24px;--layout-main-padding-inline-start: 24px;--layout-main-padding-inline-end: 20px}.main-content-inner{max-width:100%}}@media (min-width: 1025px) and (max-width: 1280px){:root{--layout-main-padding-block: 32px;--layout-main-padding-inline-start: 32px;--layout-main-padding-inline-end: 28px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sidebar-topbar{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:6px 8px 8px}.sidebar-topbar .sidebar-search{flex:1;min-width:0;margin:0}.sidebar-header{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 8px 8px;font-weight:600;font-size:14px;color:var(--fg)}.sidebar-collapse-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--fg-muted);cursor:pointer;transition:color .15s,background .15s}.sidebar-collapse-btn:hover{background:var(--bg-hover);color:var(--fg)}.sidebar-logo{font-size:14px;color:var(--fg);font-weight:600;flex-shrink:0}.sidebar-logo-img{width:16px;height:16px;object-fit:contain;flex-shrink:0;border-radius:2px}.sidebar-title{font-size:14px;font-weight:600;color:var(--fg);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.sidebar-theme-toggle{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--fg-muted);cursor:pointer;transition:color .1s,background .1s}.sidebar-theme-toggle:hover{background:var(--bg-hover);color:var(--fg)}.sidebar-search{flex-shrink:0;margin:0;position:relative}.sidebar-search-input{width:100%;background:#80808014;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:5px 10px 5px 28px;color:var(--fg);font-size:var(--font-size-md);font-family:var(--font-sans);outline:none;transition:border-color .15s}.sidebar-search-input::placeholder{color:var(--fg-nav-dim)}.sidebar-search-input:focus{border-color:var(--border-focus);background:#8080801f}.sidebar-search-icon{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--fg-nav-dim);pointer-events:none}.save-toast{position:fixed;bottom:20px;left:calc(var(--layout-sidebar-width) + 20px);display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-md);background:var(--fg);color:var(--bg-panel);font-size:var(--font-size-sm);font-weight:500;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity var(--duration-slow) var(--easing),transform var(--duration-slow) var(--easing);z-index:9999}.save-toast--visible{opacity:1;transform:translateY(0)}.save-toast-icon{color:var(--success);font-size:var(--font-size-label)}[data-theme=dark] .save-toast-icon{color:currentColor}.sidebar-nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.sidebar-section{display:flex;flex-direction:column;gap:1px;padding:0 12px;margin-bottom:16px}.sidebar-section-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);color:var(--fg-nav-dim);padding:0 12px 8px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border:none;background:none;width:100%;text-align:left;outline:none;-webkit-user-select:none;user-select:none;border-radius:var(--radius-sm);transition:color .15s}.sidebar-section-label:hover{color:var(--fg-nav)}.sidebar-section-label-chevron{font-size:var(--font-size-2xs);transition:transform .15s ease;color:var(--fg-nav-dim)}.sidebar-section-label-chevron--open,.sidebar-section-chevron--open{transform:rotate(180deg)}.sidebar-section-label-chevron--closed,.sidebar-section-chevron:not(.sidebar-section-chevron--open){transform:rotate(0)}.sidebar-section-chevron{flex-shrink:0;transition:transform .15s ease;color:var(--fg-nav-dim)}.sidebar-section-label--nested{padding-left:16px;padding-top:6px;font-size:var(--font-size-2xs)}.sidebar-item{display:flex;align-items:center;gap:10px;padding:6px 12px;border:none;background:none;border-radius:var(--radius-sm);font-size:var(--font-size-label);color:var(--fg-nav);transition:background .2s,color .2s;position:relative;cursor:pointer;text-align:left}.sidebar-item:hover{background:var(--bg-hover);color:var(--fg)}.sidebar-item-icon{width:18px;text-align:center;font-size:var(--font-size-label);flex-shrink:0}.sidebar-section--system .sidebar-item{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);color:var(--fg-nav-dim)}.sidebar-section--system .sidebar-item:hover{color:var(--fg-nav)}.sidebar-section--system .sidebar-item--active{color:var(--fg)}.sidebar-items-collapsed{display:none}.sidebar-items-expanded{display:flex;flex-direction:column;gap:1px;animation:sidebar-expand .15s ease}@keyframes sidebar-expand{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sidebar-item--active{background:var(--bg-active);color:var(--fg);font-weight:500;position:relative}.sidebar-item--disabled{opacity:.6;cursor:not-allowed;pointer-events:auto}.sidebar-item-soon{margin-left:auto;font-size:var(--font-size-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:4px;padding:1px 5px;line-height:1.5;flex-shrink:0}.sidebar-item--disabled:hover{background:transparent;color:var(--fg-dim)}.sidebar-item--active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:12px;background:var(--accent);border-radius:2px}.sidebar-divider{height:1px;background:var(--border-light);margin:4px 16px}.sidebar-section-content{display:flex;flex-direction:column;gap:10px;padding:8px 0 6px}.sidebar-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px;margin-bottom:4px}.sidebar-card-grid--tier2{margin-top:4px}.sidebar-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;min-height:72px;padding:10px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-panel);color:var(--fg-nav);cursor:pointer;transition:border-color .15s,background .15s,color .15s;position:relative}.sidebar-card:hover{border-color:var(--border-focus);color:var(--fg)}.sidebar-card--active{border-color:var(--accent-border);background:var(--accent-subtle-sm);color:var(--fg)}.sidebar-card--active:after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--accent)}.sidebar-card--active:hover{border-color:var(--accent);background:var(--accent-subtle-sm)}.sidebar-card-icon{width:100%;flex:1;min-height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.7}.sidebar-card--active .sidebar-card-icon{opacity:1}.sidebar-card-icon svg{width:36px;height:36px}.sidebar-card-label{font-size:10px;font-weight:500;line-height:1.25;font-family:var(--font-mono);letter-spacing:.03em;color:inherit}.sidebar-card--active .sidebar-card-label{color:var(--fg)}.sidebar-advanced-list{display:flex;flex-direction:column;gap:1px;padding:4px 0 2px 2px}.sidebar-utility-strip{flex-shrink:0;position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border-light);background:var(--bg-sidebar, var(--bg))}.sidebar-utility-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--fg-nav);cursor:pointer;transition:color .1s,background .1s}.sidebar-utility-btn:hover{background:var(--bg-hover);color:var(--fg)}.sidebar-utility-btn--active{background:var(--bg-active);color:var(--accent)}[data-theme=dark] .sidebar-utility-btn--active{color:#60a5fa}.sidebar-item--export{color:var(--fg-nav);border:1px solid var(--border);margin:0 0 4px}.sidebar-item--export:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle)}.main-content{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:var(--layout-main-padding-block) var(--layout-main-padding-inline-end) var(--layout-main-padding-block) var(--layout-main-padding-inline-start);overflow-x:hidden;overflow-y:auto;min-width:0;background-image:radial-gradient(var(--border-light) 1px,transparent 1px);background-size:28px 28px;background-attachment:local}.main-content:has(>.comp-page){overflow:hidden;padding:0;background-image:none}.main-content>*{max-width:1100px;width:100%;align-self:center}.main-content>.comp-page{max-width:none;width:100%;flex:1;min-height:0;align-self:stretch}.main-content-tokens{display:flex;flex-direction:column;gap:24px}.main-content-tokens-hint{margin:0 0 4px;font-size:var(--font-size-md);color:var(--fg-muted)}.variables-overview{display:flex;flex-direction:column;gap:16px}.variables-overview-header{display:flex;flex-direction:column;gap:8px}.variables-overview-title{margin:0;font-size:var(--font-size-xl);font-weight:600;color:var(--fg)}.variables-overview-desc{margin:0;font-size:var(--font-size-label);color:var(--fg-muted)}.variables-overview-live{margin:0;font-size:var(--font-size-sm);color:var(--accent)}.variables-overview-export{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.variables-overview-export-hint{font-size:var(--font-size-sm);color:var(--fg-muted)}.variables-overview-count{font-size:var(--font-size-md);color:var(--fg-dim)}.variables-overview-body{display:flex;gap:24px;min-height:400px}.variables-overview-sidebar{flex-shrink:0;width:220px;display:flex;flex-direction:column;gap:16px;padding:12px 0}.variables-overview-section{display:flex;flex-direction:column;gap:4px}.variables-overview-section-label{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);padding:0 12px 4px}.variables-overview-nav-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;font-size:var(--font-size-label);color:var(--fg);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;gap:8px}.variables-overview-nav-item:hover{background:var(--bg-hover)}.variables-overview-nav-item--active{background:var(--accent-subtle);color:var(--accent);font-weight:500}.variables-overview-nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.variables-overview-nav-count{flex-shrink:0;font-size:var(--font-size-sm);color:var(--fg-muted)}.variables-overview-nav-item--active .variables-overview-nav-count{color:var(--accent)}.variables-overview-main{flex:1;min-width:0}.variables-overview-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel)}.variables-overview-table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.variables-table{width:100%;border-collapse:collapse;font-size:var(--font-size-label)}.variables-table th{text-align:left;padding:10px 12px;font-weight:600;color:var(--fg-muted);background:var(--bg-hover);border-bottom:1px solid var(--border)}.variables-table td{padding:8px 12px;border-bottom:1px solid var(--border-light);vertical-align:middle}.variables-table tbody tr:hover{background:var(--bg-hover)}.variables-table tbody tr:last-child td{border-bottom:none}.variables-col-drag{width:28px;padding-right:0}.variables-drag-handle{cursor:grab;color:var(--fg-muted);font-size:var(--font-size-md);-webkit-user-select:none;user-select:none}.variables-drag-handle:active{cursor:grabbing}.variables-row--dragging{opacity:.5}.variables-row--drop-target{background:var(--accent-subtle);outline:1px dashed var(--accent)}.variables-row--selected,.variables-row--selected:hover{background:var(--accent-subtle)}.variables-group-header{background:var(--bg-elevated)}.variables-group-header-cell{padding:10px 12px;font-weight:600;font-size:var(--font-size-label);color:var(--fg);border-bottom:1px solid var(--border-elevated);vertical-align:middle}.variables-group-header-label{margin-right:8px}.variables-group-header-count{font-weight:500;color:var(--accent)}.variables-col-name{min-width:180px}.variables-col-category{width:120px}.variables-col-value{min-width:120px;max-width:280px;overflow:hidden;text-overflow:ellipsis}.variables-col-preview{width:100px}.variables-preview-swatch{width:24px;height:24px;border-radius:4px;border:1px solid var(--border)}.variables-preview-dimension{display:flex;align-items:center;gap:6px}.variables-preview-dimension .dimension-bar{background:var(--accent);border-radius:2px;flex-shrink:0}.variables-preview-dimension .dimension-label{font-size:var(--font-size-sm);color:var(--fg-dim)}.variables-preview-text{font-size:var(--font-size-sm);color:var(--fg-muted);display:block;overflow:hidden;text-overflow:ellipsis;max-width:120px}.variables-empty{padding:24px;text-align:center;color:var(--fg-muted);font-size:var(--font-size-label)}.main-content-tokens-with-fab{position:relative}.variables-panel-fab{position:fixed;right:24px;top:24px;z-index:100;display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:var(--fg);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:box-shadow var(--duration-base) var(--easing),border-color var(--duration-base) var(--easing)}.variables-panel-fab:hover{border-color:var(--accent-border);box-shadow:var(--shadow-lg)}.variables-panel-fab:focus-visible{outline:none;box-shadow:var(--focus-ring)}.variables-panel-fab-icon{font-size:var(--font-size-base);opacity:.9}.variables-panel-fab-label{white-space:nowrap}.variables-panel-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;align-items:stretch;justify-content:flex-end;z-index:900;animation:variables-panel-backdrop-in var(--duration-base) var(--easing)}@keyframes variables-panel-backdrop-in{0%{opacity:0}to{opacity:1}}.variables-panel{position:relative;flex-shrink:0;min-width:280px;background:var(--bg-panel);border-left:1px solid var(--border);box-shadow:-4px 0 24px #00000014;display:flex;flex-direction:column;animation:variables-panel-slide-in var(--duration-slow) var(--easing)}.variables-panel-resize-handle{position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:1}.variables-panel-resize-handle:hover,.variables-panel-resize-handle:active{background:#2563eb14}.variables-panel-resize-handle:after{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:2px;height:32px;border-radius:1px;background:var(--border);opacity:0;transition:opacity var(--duration-fast)}.variables-panel-resize-handle:hover:after{opacity:1}@keyframes variables-panel-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.variables-panel-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}.variables-panel-title{margin:0;font-size:var(--font-size-15);font-weight:600;color:var(--fg);flex-shrink:0}.variables-panel-search-wrap{flex:1;display:flex;align-items:center;min-width:0}.variables-panel-search-icon{flex-shrink:0;margin-right:6px;color:var(--fg-muted);font-size:var(--font-size-md)}.variables-panel-search{width:100%;padding:6px 10px;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);min-width:0}.variables-panel-search:focus{outline:none;border-color:var(--accent)}.variables-panel-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--fg-muted);font-size:var(--font-size-2xl);line-height:1;cursor:pointer;border-radius:var(--radius-sm);flex-shrink:0}.variables-panel-close:hover{background:var(--bg-hover);color:var(--fg)}.variables-panel-body{display:flex;flex:1;min-height:0;overflow:hidden}.variables-panel-sidebar{width:200px;min-width:200px;padding:10px 0;border-right:1px solid var(--border-light);overflow-y:auto;background:var(--bg)}.app-welcome-root{min-height:100dvh;width:100%;max-width:100%;overflow-x:hidden;overflow-y:auto}.welcome-shell{min-height:100dvh;width:100%;max-width:100%;display:flex;flex-direction:column;align-items:stretch}.welcome-topbar{position:sticky;top:0;z-index:50;width:100%;background:var(--bg);border-bottom:1px solid var(--border)}.welcome-topbar-inner{width:1040px;max-width:min(1200px,100%);margin:0 auto;padding:0 max(40px,env(safe-area-inset-left));height:56px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.welcome-topbar-brand{display:flex;align-items:center;gap:8px}.welcome-topbar-logo{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--fg);color:var(--bg);font-size:11px;font-weight:700;border-radius:6px;letter-spacing:.02em}.welcome-topbar-name{font-size:.9375rem;font-weight:600;color:var(--fg)}.welcome-topbar-actions{display:flex;align-items:center;gap:8px}.welcome-topbar-open-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:var(--font-size-sm);font-weight:500;color:var(--fg-dim);background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.welcome-topbar-open-btn:hover{background:var(--bg-hover);color:var(--fg);border-color:var(--border-strong, var(--fg-dim))}.welcome-foundation-card--teaser{position:relative}.welcome-foundation-hint{display:block;text-align:center;font-size:var(--font-size-sm);color:var(--fg-dim);margin-top:8px}.welcome-hero-create-btn{padding:13px 28px!important;font-size:1rem!important;font-weight:600!important;border-radius:10px!important}.welcome-hero-demo-btn{padding:13px 24px!important;font-size:1rem!important;font-weight:500!important;border-radius:10px!important;align-self:auto!important}.welcome-shell .home-view{width:1040px;max-width:min(1200px,100%);margin-left:auto;margin-right:auto;padding-top:48px;padding-bottom:80px;padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right));box-sizing:border-box}.welcome-footer{margin-top:auto;padding:24px 40px;text-align:center;font-size:var(--font-size-sm);color:var(--fg-dim)}.welcome-footer-sep{margin:0 8px;opacity:.6}.welcome-footer-link{color:var(--fg-dim);text-decoration:none}.welcome-footer-link:hover{color:var(--fg);text-decoration:underline}.welcome-guest-row{margin-top:16px;display:flex;justify-content:center}.welcome-more-foundations{margin-top:16px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.welcome-foundations-grid--more{width:100%}.home-foundation-to-personas-bridge{font-size:var(--font-size-md);color:var(--fg-muted);text-align:center;max-width:480px;margin:32px auto 0;line-height:1.5}[data-theme=dark] .app-welcome-root{background:var(--bg)}.welcome-header{padding:20px 40px 0}.welcome-logo-lockup{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}.welcome-logo-mark{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--accent) 0,#4f46e5 40%,#14b8a6 100%);box-shadow:0 0 0 1px #fffc}.welcome-main{flex:1;max-width:1120px;margin:0 auto;padding:48px 40px 72px;display:flex;flex-direction:column;gap:56px}.welcome-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:center}.welcome-hero-left{max-width:620px}.welcome-hero-eyebrow{font-size:var(--font-size-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}.welcome-hero-title{font-size:clamp(2.3rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--fg);margin-bottom:16px}.welcome-hero-desc{font-size:var(--font-size-lg);color:var(--fg-muted);line-height:1.6;max-width:34rem}.welcome-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.welcome-hero-right{display:flex;justify-content:flex-end}.welcome-hero-card{width:360px;max-width:100%;border-radius:20px;background:var(--bg-panel);box-shadow:var(--shadow-lg);border:1px solid var(--border-elevated);padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px}.welcome-hero-card-preview{height:170px;border-radius:14px;background:linear-gradient(135deg,#2563eb14,#4f46e529),radial-gradient(circle at 10% 0,rgba(255,255,255,.9),transparent 55%);position:relative;overflow:hidden}.welcome-hero-card-preview:before,.welcome-hero-card-preview:after{content:"";position:absolute;border-radius:12px;border:1px solid var(--border);background:var(--bg-surface)}.welcome-hero-card-preview:before{inset:18px 26px auto 26px;height:58px;box-shadow:0 8px 25px #0f172a29}.welcome-hero-card-preview:after{inset:auto 40px 22px 40px;height:38px;opacity:.9}.welcome-hero-card-meta{display:flex;flex-direction:column;gap:2px}.welcome-hero-card-title{font-size:var(--font-size-label);font-weight:600;color:var(--fg)}.welcome-hero-card-subtitle{font-size:var(--font-size-sm);color:var(--fg-muted)}.welcome-personas{border-radius:18px;background:var(--bg-panel);border:1px solid var(--border-subtle);padding:20px 20px 16px;box-shadow:var(--shadow-sm)}.welcome-personas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.welcome-persona-card{padding:12px 14px;border-radius:14px}.welcome-persona-title{font-size:var(--font-size-xl);font-weight:650;margin-bottom:6px}.welcome-persona-desc{font-size:var(--font-size-sm);color:var(--fg-muted);margin-bottom:10px;max-width:26rem}.welcome-guest-link{margin-top:10px;padding:0;border:none;background:none;font-size:var(--font-size-sm);color:var(--fg-muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.welcome-guest-link:hover{color:var(--fg)}@media (max-width: 960px){.welcome-main{padding-inline:20px}.welcome-hero{grid-template-columns:minmax(0,1fr)}.welcome-hero-right{justify-content:flex-start}.welcome-personas-grid{grid-template-columns:minmax(0,1fr)}}@media (max-width: 640px){.welcome-header{padding-inline:20px}.welcome-main{padding-block:32px 40px}}.variables-panel-section{padding:0 10px 12px}.variables-panel-section-label{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);padding:6px 8px 4px}.variables-panel-section>.variables-panel-nav-item{width:100%;box-sizing:border-box}.variables-panel-nav-item{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0;padding:6px 8px;font-size:var(--font-size-md);text-align:left;border:none;background:transparent;color:var(--fg);cursor:pointer;border-radius:var(--radius-sm);gap:6px}.variables-panel-nav-item:hover{background:var(--bg-hover)}.variables-panel-nav-item--active{background:var(--accent-subtle);color:var(--accent);font-weight:500}.variables-panel-nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.variables-panel-nav-count{font-size:var(--font-size-sm);color:var(--fg-dim);flex-shrink:0;min-width:2.5ch;text-align:right}.variables-panel-nav-item--active .variables-panel-nav-count{color:var(--accent)}.variables-panel-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.variables-panel-table-wrap{flex:1;overflow:auto;padding:8px}.variables-panel-table{width:100%;border-collapse:collapse;font-size:var(--font-size-md)}.variables-panel-table th{text-align:left;padding:6px 8px;font-weight:600;color:var(--fg-muted);background:var(--bg-hover);border-bottom:1px solid var(--border);font-size:var(--font-size-sm)}.variables-panel-table td{padding:6px 8px;border-bottom:1px solid var(--border-light);vertical-align:middle}.variables-panel-table tbody tr:hover{background:var(--bg-hover)}.variables-panel-row-clickable{cursor:pointer}.variables-panel-row-clickable:focus{outline:2px solid var(--accent);outline-offset:-2px}.variables-panel-cell-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;font-size:var(--font-size-sm)}.variables-panel-cell-value{max-width:100px;overflow:hidden;text-overflow:ellipsis;font-size:var(--font-size-sm);color:var(--fg-muted)}.variables-panel-col-preview,.variables-panel-cell-preview{width:56px}.variables-panel-swatch{width:18px;height:18px;border-radius:3px;border:1px solid var(--border);display:inline-block}.variables-panel-empty{padding:20px;text-align:center;color:var(--fg-muted);font-size:var(--font-size-md)}.variables-panel-footer{padding:8px 12px;font-size:var(--font-size-sm);color:var(--fg-dim);border-top:1px solid var(--border-light);flex-shrink:0}.delete-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;padding:var(--space-4)}.delete-modal{background:var(--bg-panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:420px;width:100%;padding:var(--space-5)}.delete-modal-title{margin:0 0 var(--space-3);font-size:var(--font-size-lg);font-weight:600;color:var(--fg)}.delete-modal-message{margin:0 0 var(--space-4);font-size:var(--font-size-base);color:var(--fg-muted);line-height:1.5}.delete-modal-deps{margin:0 0 var(--space-4);padding:var(--space-3);background:var(--bg-hover);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--fg-muted)}.delete-modal-deps-line{margin:0 0 var(--space-1)}.delete-modal-deps-line:last-child{margin-bottom:0}.delete-modal-actions{display:flex;gap:var(--space-2);justify-content:flex-end}.confirm-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000;padding:var(--space-4)}.confirm-modal{background:var(--bg-panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:440px;width:100%;padding:var(--space-5);border:1px solid var(--border-light)}.confirm-modal--warning{border-color:color-mix(in srgb,var(--color-warning, #d97706) 32%,var(--border-light))}.confirm-modal--danger{border-color:color-mix(in srgb,var(--color-error, #dc2626) 35%,var(--border-light))}.confirm-modal-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}.confirm-modal-icon{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent);flex-shrink:0}.confirm-modal--warning .confirm-modal-icon{color:var(--color-warning, #d97706);background:color-mix(in srgb,var(--color-warning, #d97706) 16%,transparent)}.confirm-modal--danger .confirm-modal-icon{color:var(--color-error, #dc2626);background:color-mix(in srgb,var(--color-error, #dc2626) 14%,transparent)}.confirm-modal-title{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--fg)}.confirm-modal-message{margin:0 0 var(--space-4);font-size:var(--font-size-base);color:var(--fg-muted);line-height:1.5}.confirm-modal-details{margin:0 0 var(--space-4);padding:var(--space-3);background:var(--bg-hover);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--fg-muted)}.confirm-modal-detail-line{margin:0 0 var(--space-1)}.confirm-modal-detail-line:last-child{margin-bottom:0}.confirm-modal-actions{display:flex;gap:var(--space-2);justify-content:flex-end}.welcome-input-label{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4);font-size:var(--font-size-sm);font-weight:500;color:var(--fg-muted)}.welcome-input-label .add-token-input{width:100%;min-width:0;font-size:var(--font-size-base);padding:8px 12px}.welcome-create-modal{max-width:480px}.welcome-load-error{margin-top:var(--space-3);font-size:var(--font-size-sm);color:var(--color-error, #d32f2f);background:color-mix(in srgb,var(--color-error, #d32f2f) 10%,transparent);border:1px solid color-mix(in srgb,var(--color-error, #d32f2f) 30%,transparent);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3)}.welcome-role-picker{margin-bottom:var(--space-4)}.welcome-role-picker-label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--fg-muted);margin-bottom:var(--space-2)}.welcome-role-options{display:flex;gap:var(--space-2)}.welcome-role-option{flex:1;display:flex;flex-direction:column;gap:3px;padding:var(--space-3) var(--space-3);border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);cursor:pointer;text-align:left;transition:border-color .15s,background .15s}.welcome-role-option:hover{border-color:var(--accent);background:var(--bg-hover)}.welcome-role-option--active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg-panel))}.welcome-role-option-name{font-size:var(--font-size-sm);font-weight:600;color:var(--fg)}.welcome-role-option-desc{font-size:11px;color:var(--fg-muted);line-height:1.3}.home-foundation-card--preview{cursor:default;pointer-events:none;opacity:.85}.welcome-action-modal{max-width:420px}.welcome-action-options{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.welcome-action-option{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);cursor:pointer;text-align:left;transition:border-color .15s,background .15s}.welcome-action-option:hover{border-color:var(--accent);background:var(--bg-hover)}.welcome-action-option-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--bg-hover);color:var(--accent);flex-shrink:0}.welcome-action-option-body{display:flex;flex-direction:column;gap:2px}.welcome-action-option-name{font-size:var(--font-size-sm);font-weight:600;color:var(--fg)}.welcome-action-option-desc{font-size:11px;color:var(--fg-muted);line-height:1.3}.welcome-action-option-icon--figma{background:#1e1e1e;border-radius:var(--radius-md);width:40px;height:40px}.welcome-figma-error{font-size:12px;color:var(--color-danger, #dc2626);background:color-mix(in srgb,var(--color-danger, #dc2626) 8%,transparent);border:1px solid color-mix(in srgb,var(--color-danger, #dc2626) 20%,transparent);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin-top:var(--space-2)}.welcome-figma-modes{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0}.welcome-figma-mode-btn{padding:6px 14px;border:1.5px solid var(--border);border-radius:999px;background:var(--bg);color:var(--fg-muted);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.welcome-figma-mode-btn:hover{border-color:var(--accent);color:var(--fg)}.welcome-figma-mode-btn--active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-weight:600}.welcome-figma-warnings{font-size:11px;color:var(--fg-muted);background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3)}.welcome-figma-warnings summary{cursor:pointer;font-weight:500;color:var(--color-warning, #d97706)}.welcome-figma-warnings ul{margin:var(--space-1) 0 0 var(--space-3);padding:0;list-style:disc;line-height:1.6}.token-search-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-hover);border-radius:8px;border:1px solid var(--border)}.token-search-bar-icon{color:var(--fg-muted);font-size:var(--font-size-base)}.token-search-bar-input{flex:1;min-width:0;padding:6px 0;background:transparent;border:none;font-size:var(--font-size-base);color:var(--fg)}.token-search-bar-input::placeholder{color:var(--fg-muted)}.token-search-bar-input:focus{outline:none;box-shadow:0 0 0 2px var(--accent, #4f6ef7);border-color:var(--border-focus, #4f6ef7)}.token-search-bar-clear{flex-shrink:0;padding:4px;color:var(--fg-muted)}.token-search-bar-clear:hover{color:var(--fg)}.token-editor{display:flex;flex-direction:column;gap:20px}.token-editor-with-nav{display:flex;gap:24px;align-items:flex-start;width:100%;max-width:100%}.token-editor-with-nav-main{flex:1;min-width:0}.token-editor-with-nav-side{flex-shrink:0;width:160px;align-self:flex-start}.section-sticky-nav{padding:8px 0;position:fixed;top:72px;right:24px;width:160px;z-index:50;background:var(--bg)}@media (max-width: 1100px){.token-editor-with-nav-side,.section-sticky-nav{display:none}}.section-sticky-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.section-sticky-nav-item{margin:0}.section-sticky-nav-link{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:none;background:none;border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--fg-nav);text-align:left;cursor:pointer;transition:color .1s,background .1s}.section-sticky-nav-link:hover{color:var(--fg);background:var(--bg-hover)}.section-sticky-nav-link-bar{width:3px;height:14px;border-radius:2px;background:transparent;flex-shrink:0;transition:background .1s}.section-sticky-nav-link--active .section-sticky-nav-link-bar{background:var(--accent)}.section-sticky-nav-link--active{color:var(--fg);font-weight:500}.section-sticky-nav-link-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.03em}.token-editor-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:4px}.token-editor-header h2{font-size:var(--font-size-2xl);font-weight:700;color:var(--fg);letter-spacing:-.02em}.token-editor-intro{width:100%;margin:0;font-size:var(--font-size-base);color:var(--fg-muted);line-height:1.5}.ctn-step-hint{font-size:var(--font-size-base);color:var(--fg-muted);margin:0 0 12px;line-height:1.5;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ctn-step-badge{display:inline-flex;align-items:center;border-radius:0;padding:0;font-size:calc(var(--font-size-xs) + 1px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:transparent;color:var(--accent)}.usage-guidelines-block{margin:0;font-size:var(--font-size-base);color:var(--fg-muted);line-height:1.6;max-width:100%}.usage-guidelines-block p{margin:0;width:100%}.ctn-section{margin-bottom:8px}.ctn-section.ctn-orphaned{background:var(--bg-elevated);border:1px solid var(--border-elevated);border-radius:8px;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}.ctn-orphaned-text{margin:0;font-size:var(--font-size-label);color:var(--fg-muted);flex:1;min-width:200px}.ctn-title{font-size:var(--font-size-base);font-weight:600;color:var(--fg);margin:0 0 8px}.ctn-subtitle{font-size:var(--font-size-md);color:var(--fg-muted);margin:0 0 10px;line-height:1.4}.ctn-card{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:32px 24px 28px;display:flex;flex-direction:column;align-items:center;margin-bottom:16px}.ctn-ref{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--fg-muted);background:var(--bg);border:1px solid var(--border-subtle);border-radius:4px;padding:3px 10px;margin-bottom:14px}.ctn-anatomy-diagram{width:min(100%,680px);display:flex;flex-direction:column;align-items:stretch}.ctn-path{display:grid;grid-template-columns:repeat(var(--ctn-cols, 3),max-content);justify-content:center;column-gap:24px;align-items:start;font-family:var(--font-mono);font-size:var(--font-size-2xl);font-weight:700;color:var(--fg);margin-bottom:0}.ctn-anatomy-col{display:flex;flex-direction:column;align-items:center}.ctn-path-segment{display:flex;align-items:baseline;justify-content:center;gap:6px;white-space:nowrap;min-height:38px}.ctn-path-sep{color:var(--fg-muted);font-weight:300;font-size:var(--font-size-2xl)}.ctn-connectors{display:contents}.ctn-col{display:flex;flex-direction:column;align-items:center}.ctn-line{width:1.5px;height:18px;background:var(--fg-muted);opacity:.35}.ctn-circle{width:24px;height:24px;border-radius:50%;background:var(--fg);color:var(--bg);font-size:var(--font-size-md);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ctn-label{font-size:var(--font-size-sm);font-weight:500;color:var(--fg-muted);text-align:center;margin-top:6px;line-height:1.3}.ctn-hint{font-size:var(--font-size-md);color:var(--fg-muted);margin:0 0 4px}.ctn-hint-code{font-size:var(--font-size-md);padding:2px 6px;background:var(--bg-hover);border-radius:4px}.ctn-hint--semantic{margin-top:4px}.ctn-naming{margin-bottom:16px}.ctn-naming-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:10px 0}.ctn-naming-title{font-size:var(--font-size-base);font-weight:600;color:var(--fg);margin:0}.ctn-naming-preview-rows{display:flex;flex-direction:column;gap:8px}.ctn-naming-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.ctn-naming-row-label{font-size:var(--font-size-label);color:var(--fg-muted);min-width:120px}.ctn-naming-preview{display:flex;align-items:center;gap:4px;font-size:var(--font-size-label)}.ctn-naming-chip--label{background:var(--bg-subtle);color:var(--fg-muted);font-weight:400}.ctn-naming-chip--disabled{background:var(--bg-subtle);color:var(--fg-muted);font-weight:400;opacity:.7;cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}.ctn-naming-input{min-width:8ch;width:10ch;max-width:18ch;padding:4px 10px;font-size:var(--font-size-label);font-weight:500;border:1px solid var(--accent);border-radius:6px;background:var(--bg-panel);color:var(--fg);box-sizing:border-box}.ctn-naming-input:focus{outline:2px solid var(--accent);outline-offset:1px}.ctn-naming-input::placeholder{color:var(--fg-muted)}.ctn-naming-chip{padding:4px 10px;background:var(--bg-hover);border:1px solid var(--border-subtle);border-radius:6px;color:var(--fg);font-weight:500}.ctn-naming-dot{color:var(--fg-muted);font-weight:700}.ctn-naming-btn{flex-shrink:0;margin-left:auto}.ctn-naming-form{padding-top:12px;border-top:1px solid var(--border-subtle);display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px}.ctn-naming-fields{display:flex;flex-wrap:wrap;gap:12px 20px;flex:1}.ctn-naming-field{min-width:120px}.ctn-naming-label{display:block;font-size:var(--font-size-md);font-weight:500;color:var(--fg-muted);margin-bottom:4px}.ctn-naming-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--accent-subtle);color:var(--accent);font-weight:600;font-size:var(--font-size-sm);margin-right:6px}.token-count{font-size:var(--font-size-md);color:var(--fg-dim);background:var(--bg-hover);padding:2px 8px;border-radius:10px}.token-editor-breakpoints-layout{margin-bottom:16px;padding:12px 16px;background:var(--bg-hover);border-radius:8px;border:1px solid var(--border-subtle)}.layout-divider{border:none;border-top:1px solid var(--border-subtle);margin:16px 0}.layout-panel-desc{margin:0 0 10px;font-size:var(--font-size-sm);color:var(--fg-muted);line-height:1.45}.breakpoints-widths-section{margin-bottom:4px}.breakpoints-widths-table{display:flex;flex-direction:column;gap:4px}.breakpoints-widths-header{display:grid;grid-template-columns:72px 110px 1fr;gap:8px;padding:0 2px 4px;font-size:var(--font-size-xs);color:var(--fg-dim);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-subtle);margin-bottom:4px}.breakpoints-width-row{display:grid;grid-template-columns:72px 110px 1fr;gap:8px;align-items:center}.breakpoints-width-label{font-size:var(--font-size-sm);color:var(--fg);font-weight:500}.breakpoints-cssvar{font-size:var(--font-size-xs);color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layout-overlay-group{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border-subtle)}.layout-overlay-label{display:block;font-size:var(--font-size-xs);color:var(--fg-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.layout-fields-grid--overlay{opacity:.75}.token-editor-breakpoints-desc{margin:0 0 12px;font-size:var(--font-size-label);color:var(--fg-muted);line-height:1.45}.layout-device-tabs{display:flex;gap:4px;margin-bottom:12px}.layout-device-tab{padding:6px 14px;font-size:var(--font-size-label);font-weight:500;color:var(--fg-muted);background:var(--bg);border:1px solid var(--border-subtle);border-radius:6px;cursor:pointer}.layout-device-tab:hover{color:var(--fg);background:var(--bg-hover)}.layout-device-tab--active{color:var(--fg);background:var(--accent-subtle);border-color:var(--accent)}.layout-preview-caption{margin:8px 0 0;font-size:var(--font-size-md);color:var(--fg-dim)}.token-editor-layout-controls{display:flex;flex-wrap:wrap;gap:12px 20px;margin-bottom:12px}.layout-control{display:flex;flex-direction:column;gap:4px}.layout-control-label{font-size:var(--font-size-md);font-weight:600;color:var(--fg-muted)}.layout-control-input{width:100%;min-width:100px;max-width:140px}.token-editor-presets{display:flex;flex-wrap:wrap;gap:8px}.token-editor-presets .btn:disabled{opacity:.6;cursor:default}.layout-columns-panel{margin-bottom:20px;padding:16px;background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:8px}.layout-panel-title{margin:0 0 12px;font-size:var(--font-size-base);font-weight:600;color:var(--fg)}.layout-fields-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px 20px;margin-bottom:12px}.layout-field{display:flex;flex-direction:column;gap:4px}.layout-field-container{margin-bottom:12px}.layout-field-label{font-size:var(--font-size-md);font-weight:500;color:var(--fg-muted)}.layout-field-input{width:100%;min-width:0}.layout-field-select{padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-size:var(--font-size-label);cursor:pointer}.layout-color-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.layout-color-swatch{width:24px;height:24px;border-radius:4px;border:1px solid var(--border);flex-shrink:0;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%);background-size:8px 8px;background-position:0 0,4px 4px;background-color:var(--bg-surface)}.layout-hex{width:72px}.layout-opacity{width:48px}.layout-opacity-unit{font-size:var(--font-size-md);color:var(--fg-dim)}.layout-field-with-picker .layout-field-label{display:block;margin-bottom:4px}.layout-field-input-row{display:flex;align-items:center;gap:8px;min-width:0}.layout-field-input-row .layout-field-input{flex:1;min-width:0}.layout-picker-wrap{position:relative;flex-shrink:0}.layout-picker-btn{white-space:nowrap}.layout-picker-dropdown{position:absolute;top:100%;right:0;margin:4px 0 0;padding:4px 0;min-width:140px;max-height:200px;overflow-y:auto;list-style:none;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:20}.layout-picker-option{display:block;width:100%;padding:6px 12px;border:none;background:none;font-size:var(--font-size-xs);color:var(--fg);text-align:left;cursor:pointer}.layout-picker-option:hover{background:var(--bg-hover)}.layout-grid-section{margin-top:4px;padding:16px;background:var(--bg-hover);border:1px solid var(--border-subtle);border-radius:8px}.layout-grid-section .layout-panel-title{margin-bottom:10px}.container-grid-preview{margin-top:0;padding:12px;background:var(--bg);border:1px solid var(--border-light);border-radius:8px}.container-grid-preview-inner{margin:0 auto;display:grid;min-height:80px;background:transparent}.container-grid-preview-cell{border-radius:4px;min-height:24px}.presets-panel .token-editor-header{flex-direction:column;align-items:flex-start;gap:8px}.presets-intro{font-size:var(--font-size-label);color:var(--fg-muted);max-width:560px;line-height:1.5}.presets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.preset-card{padding:16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);display:flex;flex-direction:column;gap:10px}.preset-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.preset-card-title{font-size:var(--font-size-lg);font-weight:600;color:var(--fg)}.preset-card-id{font-size:var(--font-size-sm);color:var(--fg-dim);background:var(--bg-hover);padding:2px 6px;border-radius:4px}.preset-card-description{font-size:var(--font-size-label);color:var(--fg-muted);line-height:1.45;flex:1}.preset-card-meta{font-size:var(--font-size-sm);color:var(--fg-dim)}.preset-card-categories{word-break:break-word}.preset-card-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.preset-apply-btn--done{background:var(--success, #22c55e);color:#fff}.preset-remove-btn--done{background:var(--fg-dim);color:#fff}.btn{padding:6px 12px;font-size:var(--font-size-label);font-weight:500;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);transition:all .1s}.btn--primary{background:var(--accent);color:var(--accent-fg)}.btn--primary:hover{background:var(--accent-hover)}.btn--primary:disabled{opacity:.4;cursor:not-allowed}.btn--secondary{background:var(--bg-hover);color:var(--fg)}.btn--secondary:hover{background:var(--bg-active)}.btn--add{background:var(--fg-inverse, #171717);color:var(--accent-fg, #fff)}[data-theme=dark] .btn--add{background:#e5e7eb;color:#111}.btn--add:hover{background:#2d2d2d}[data-theme=dark] .btn--add:hover{background:#d1d5db}.btn--add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn--danger{background:var(--danger);color:#fff}.btn--danger:hover{background:var(--danger);filter:brightness(1.1)}.btn--warning{background:var(--warning);color:var(--fg, #1a1a1a)}.btn--warning:hover{background:var(--warning);filter:brightness(1.05)}.btn--small{padding:4px 10px;font-size:var(--font-size-md);min-height:28px}.btn--small.btn--icon{padding:4px 8px;min-width:28px;min-height:28px}.btn-icon{width:24px;height:24px;border:none;background:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--fg-dim);font-size:var(--font-size-lg);display:flex;align-items:center;justify-content:center}.btn-icon:hover{background:var(--bg-hover);color:var(--danger)}.section-collapse-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:none;color:var(--fg-muted);cursor:pointer;flex-shrink:0;border-radius:var(--radius-sm)}.section-collapse-btn:hover{background:var(--bg-hover);color:var(--fg)}.prim-count{font-size:11px;font-weight:600;color:var(--fg-muted);background:var(--bg-subtle);border-radius:10px;padding:1px 7px;margin-left:4px}.prim-add-btn{margin-left:auto}.prim-add-form{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:var(--space-3)}.prim-add-swatch-wrap{position:relative;width:36px;height:36px;flex-shrink:0}.prim-color-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0}.prim-add-swatch{display:block;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);pointer-events:none}.prim-name-input{flex:1;height:34px;padding:0 var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-size:var(--font-size-sm);font-family:var(--font-sans)}.prim-name-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}.prim-hex-input{width:82px;flex-shrink:0;height:34px;padding:0 var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-size:var(--font-size-sm);font-family:var(--font-mono);letter-spacing:.02em}.prim-hex-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}.prim-hex-edit-input{width:72px;flex-shrink:0;font-size:10px;font-family:var(--font-mono);border:1px solid var(--accent);border-radius:3px;padding:1px 4px;background:var(--bg);color:var(--fg);outline:none}.prim-empty{padding:var(--space-4) 0;display:flex;align-items:center;justify-content:center}.prim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--space-3);padding:var(--space-2) 0 var(--space-3)}.prim-card{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-subtle);background:var(--bg);transition:box-shadow .15s ease}.prim-card:hover{box-shadow:0 2px 8px #00000014}.prim-card:hover .prim-card-actions{opacity:1}.prim-card-swatch{position:relative;height:72px;display:flex;align-items:flex-end;justify-content:flex-end;padding:var(--space-1)}.prim-color-input--overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.prim-card-actions{display:flex;gap:3px;opacity:0;transition:opacity .12s ease;position:relative;z-index:1}.prim-action-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;border-radius:4px;cursor:pointer;padding:0;background:#ffffff40;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .1s ease}.prim-action-btn--light{background:#ffffff40;color:#fff}.prim-action-btn--dark{background:#00000026;color:#1a1a1a}.prim-action-btn--light:hover{background:#ffffff73}.prim-action-btn--dark:hover{background:#00000040}.prim-action-btn--delete{color:var(--color-danger, #dc2626)!important}.prim-card-name{padding:6px 8px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border-subtle)}.prim-card-name-btn{background:none;border:none;padding:0;font-size:11px;font-weight:600;color:var(--fg);cursor:pointer;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-family:var(--font-mono)}.prim-card-name-btn:hover{color:var(--accent)}.prim-card-hex{font-size:10px;color:var(--fg-muted);font-family:var(--font-mono);background:none;border:none;padding:0;cursor:text;flex-shrink:0}.prim-card-hex:hover{color:var(--accent)}.prim-overview-section{margin-top:var(--space-6)}.prim-overview-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted);font-family:var(--font-mono);margin-bottom:var(--space-3)}.prim-overview-grid{display:flex;flex-wrap:wrap;gap:var(--space-3)}.prim-overview-card{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px}.prim-overview-swatch{width:56px;height:56px;border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.prim-overview-name{font-size:11px;font-weight:600;color:var(--fg);font-family:var(--font-mono);text-align:center}.prim-overview-hex{font-size:10px;color:var(--fg-muted);font-family:var(--font-mono)}.prim-rename-input{width:100%;font-size:11px;font-family:var(--font-mono);border:1px solid var(--accent);border-radius:3px;padding:2px 4px;background:var(--bg);color:var(--fg);outline:none}.brand-ramps{display:flex;flex-direction:column;gap:24px}.brand-ramp{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px}.brand-ramp-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.brand-ramp-name-row{display:flex;align-items:center;gap:8px}.brand-ramp-name{font-size:var(--font-size-15);font-weight:600;text-transform:capitalize;cursor:default}.brand-ramp-rename-input{font-size:var(--font-size-15);font-weight:600;padding:4px 8px;border:1px solid var(--accent);border-radius:var(--radius-sm);width:140px}.brand-ramp-actions{display:flex;gap:2px}.brand-ramp-drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:4px;margin-right:2px;color:var(--text-muted);cursor:grab;border-radius:var(--radius-sm)}.brand-ramp-drag-handle:active{cursor:grabbing}.brand-ramp-drag-handle:hover{color:var(--text);background:var(--bg-hover)}.brand-ramp--dragging{opacity:.6}.brand-ramp--drop-target{box-shadow:0 0 0 2px var(--accent);border-radius:var(--radius-lg)}.brand-ramp-wrapper--dragging .brand-ramp{opacity:.6}.brand-ramp-wrapper--drop-target .brand-ramp,.brand-ramp-wrapper--drop-target .ramp-collapsed-row{box-shadow:0 0 0 2px var(--accent)}.btn-icon--success{color:var(--success, #22c55e)}.btn-icon--success:hover{background:var(--success-subtle);color:var(--success)}.ramp-collapsed-row{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 16px}.ramp-collapsed-row--dragging{opacity:.6}.ramp-collapsed-row--drop-target{box-shadow:0 0 0 2px var(--accent)}.ramp-collapsed-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.ramp-collapsed-label{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.ramp-collapsed-name{font-size:var(--font-size-15);font-weight:600;text-transform:capitalize}.ramp-collapsed-strip{display:flex;border-radius:var(--radius-sm);overflow:hidden;height:28px}.ramp-collapsed-strip .ramp-summary-swatch{flex:1;min-width:0}.ramp-drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:4px;color:var(--text-muted);cursor:grab;border-radius:var(--radius-sm)}.ramp-drag-handle:active{cursor:grabbing}.ramp-drag-handle:hover{color:var(--text);background:var(--bg-hover)}.ramp-swatch-wrap{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch}.ramp-swatch-delete{position:absolute;top:2px;right:2px;width:18px;height:18px;padding:0;border:none;border-radius:2px;background:#00000080;color:#fff;font-size:var(--font-size-base);line-height:1;cursor:pointer;opacity:0;transition:opacity .15s}.ramp-swatch-wrap:hover .ramp-swatch-delete{opacity:1}.ramp-swatch-delete:hover{background:var(--danger)}.ramp-swatch-label-input{width:100%;max-width:42px;font-size:var(--font-size-xs);font-weight:600;padding:2px 4px;border:1px solid var(--accent);border-radius:2px;background:#ffffffe6;text-align:center}.ramp-swatch-copied{position:absolute;bottom:2px;left:50%;transform:translate(-50%);font-size:var(--font-size-2xs);font-weight:600;background:var(--success);color:var(--accent-fg);padding:1px 4px;border-radius:2px;white-space:nowrap}.brand-ramp-controls{display:flex;gap:16px}.ramp-control{display:flex;align-items:center;gap:6px;font-size:var(--font-size-md);color:var(--fg-muted)}.ramp-control input[type=range]{width:100px;height:6px;accent-color:var(--fg)}.ramp-control-value{min-width:36px;font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--fg-dim)}.ramp-swatches{display:flex;gap:8px;border-radius:var(--radius-md);overflow:hidden;align-items:stretch}.brand-ramp-lightness{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-light)}.ramp-lightness-grid{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px;padding:8px 0}.ramp-lightness-row{display:flex;align-items:center;gap:6px;font-size:var(--font-size-sm);color:var(--fg-muted)}.ramp-lightness-label{min-width:28px;font-family:var(--font-mono)}.ramp-lightness-slider{width:72px;height:6px;accent-color:var(--accent)}.ramp-lightness-value{min-width:28px;font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--fg-dim)}.brand-ramp-add-level{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-light)}.brand-ramp-add-level-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.add-level-inline{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}.add-level-field{display:flex;flex-direction:column;gap:3px}.add-level-input{min-width:160px;max-width:200px}.add-level-hint{font-size:11px;color:var(--color-text-tertiary, #999);padding-left:2px}.ramp-swatch{width:100%;aspect-ratio:1 / 1;min-height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:6px 4px;border-radius:6px;position:relative}.ramp-swatch-lock,.ramp-swatch-copy{position:absolute;width:22px;height:22px;padding:0;border:none;border-radius:4px;background:#00000080;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:background .15s,opacity .15s}.ramp-swatch-wrap:hover .ramp-swatch-lock,.ramp-swatch-wrap:hover .ramp-swatch-copy{opacity:1}.ramp-swatch-lock{top:4px;left:4px}.ramp-swatch-copy{top:4px;left:30px}.ramp-swatch-lock:hover,.ramp-swatch-copy:hover{background:#000000b3}.ramp-swatch-lock--active{background:var(--accent);color:var(--accent-fg)}.ramp-swatch-copy .ramp-swatch-copied{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;font-size:var(--font-size-2xs);font-weight:600;background:var(--success);color:var(--accent-fg);padding:2px 6px;border-radius:4px;white-space:nowrap}.ramp-swatch-gamut{position:absolute;bottom:4px;right:4px;color:var(--warning, #f59e0b);display:flex;align-items:center;justify-content:center}.ramp-swatch-label{font-size:var(--font-size-sm);font-weight:600;cursor:text}.ramp-swatch-label.dark{color:#000000bf}.ramp-swatch-label.light{color:#fff}.ramp-swatch-hex{margin-top:4px;font-size:var(--font-size-xs);color:var(--fg-dim);text-align:center;word-break:break-all}.ramp-swatch-wrap--anchor .ramp-swatch{box-shadow:0 0 0 1px #0003}.ramp-swatch-anchor-dot{position:absolute;bottom:6px;left:6px;width:8px;height:8px;border-radius:50%;background:var(--bg-surface);box-shadow:0 0 0 1px #0000004d;pointer-events:none}.ramp-swatch-contrast{margin-top:4px;font-size:var(--font-size-2xs, 10px);line-height:1.3;color:var(--fg-dim);min-height:2.6em}.ramp-swatch-contrast .contrast-pass{color:var(--success, #22c55e)}.ramp-swatch-contrast .contrast-fail{color:var(--error, #ef4444)}.ramp-swatch-contrast .contrast-meta{color:var(--fg-dim)}.semantic-tokens-section{padding-top:16px;border-top:1px solid var(--border-light)}.contrast-checker{margin-top:20px;padding-top:12px;border-top:1px solid var(--border-light)}.contrast-checker-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.contrast-filter-toggle{display:inline-flex;align-items:center;gap:6px;color:var(--fg-muted);font-size:var(--font-size-xs)}.contrast-pair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:12px}.contrast-pair-card{border:1px solid var(--border-subtle);border-radius:10px;overflow:hidden;background:var(--bg-panel)}.contrast-pair-preview{min-height:52px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);font-weight:700}.contrast-pair-meta{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:8px;align-items:center}.contrast-pair-label{grid-column:1 / -1;font-size:var(--font-size-xs);color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contrast-pair-wcag{display:inline-flex;align-items:center;gap:8px;justify-self:end;white-space:nowrap}.contrast-checker .section-subtitle{margin:0 0 10px}.contrast-checker-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px}.contrast-checker .section-subtitle+.contrast-checker-row{margin-top:2px}.contrast-checker .section-subtitle:last-of-type{margin-top:16px}#color-contrast{scroll-margin-top:90px;scroll-margin-bottom:32px}.contrast-label{display:flex;flex-direction:column;gap:4px;font-size:var(--font-size-md);color:var(--fg-dim)}.contrast-select{padding:6px 8px;font-size:var(--font-size-md);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--fg);min-width:120px}.contrast-hex{padding:6px 8px;font-size:var(--font-size-md);width:88px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--fg)}.contrast-preview{padding:12px 16px;border-radius:var(--radius-md);margin-top:12px;margin-bottom:10px;font-size:var(--font-size-base)}.contrast-results{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:var(--font-size-md)}.contrast-ratio{font-weight:600;color:var(--fg)}.contrast-pass{color:var(--success, #22c55e)}.contrast-fail{color:var(--error, #ef4444)}.contrast-meta{color:var(--fg-dim);font-size:var(--font-size-sm)}.prim-empty-examples{display:flex;align-items:center;gap:8px;margin-bottom:8px}.prim-empty-example{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-xs);color:var(--fg-muted);padding:3px 8px;border:1px solid var(--border-subtle);border-radius:999px;background:var(--bg-panel)}.prim-empty-example-swatch{width:10px;height:10px;border-radius:999px;border:1px solid var(--border-subtle)}.section-subtitle{font-size:var(--font-size-label);font-weight:600;color:var(--fg-muted);margin-bottom:10px}.semantic-token-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}.semantic-token-card{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--bg-panel)}.semantic-token-swatch{width:32px;height:32px;border-radius:var(--radius-sm);flex-shrink:0;box-shadow:inset 0 0 0 1px #0000000f}.semantic-token-info{display:flex;flex-direction:column;min-width:0}.semantic-token-name{font-size:var(--font-size-label);font-weight:500}.semantic-token-ref{font-size:var(--font-size-sm);color:var(--fg-dim);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.semantic-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.semantic-header-actions{display:flex;align-items:center;gap:8px}.semantic-starter-btn{display:inline-flex;align-items:center;gap:5px;font-size:var(--font-size-sm);opacity:.8;transition:opacity .15s,color .15s}.semantic-starter-btn:hover{opacity:1}.semantic-starter-btn svg{flex-shrink:0}.semantic-section-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:0;margin-bottom:12px;background:none;border:none;cursor:pointer;font:inherit;color:inherit;text-align:left}.semantic-section-toggle:hover{color:var(--fg)}.semantic-section-toggle .section-subtitle.semantic-section-title{flex:1;margin:0;font-size:var(--font-size-label);font-weight:600;color:var(--fg-muted)}.semantic-section-toggle .btn{flex-shrink:0}.semantic-section-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}.semantic-section-toggle>svg{flex-shrink:0;color:var(--fg-muted)}.semantic-section-toggle:hover>svg{color:var(--fg)}.semantic-add-form{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-elevated);border:1px solid var(--border-elevated);border-radius:var(--radius-md)}.semantic-add-form--with-picker{flex-wrap:wrap}.semantic-add-form-preview-wrap{position:relative;display:flex;align-items:center}.semantic-add-form-preview-wrap .semantic-token-swatch{width:32px;height:32px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);cursor:pointer;padding:0;flex-shrink:0}.semantic-token-list{display:flex;flex-direction:column;gap:8px}.semantic-token-row{display:grid;grid-template-columns:40px 1fr 1.5fr minmax(100px,auto) auto;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);position:relative;transition:background .15s,border-color .15s;background:var(--bg-panel);border:1px solid var(--border-subtle)}.semantic-token-row:hover{background:var(--bg-elevated);border-color:var(--border-elevated)}.semantic-token-swatch-wrap{display:flex;align-items:center}.semantic-token-swatch--clickable{width:32px;height:32px;border-radius:var(--radius-sm);flex-shrink:0;box-shadow:inset 0 0 0 1px #0000000f;border:2px solid transparent;cursor:pointer;transition:border-color .15s}.semantic-token-swatch--clickable:hover{border-color:var(--accent)}.semantic-token-name-col{min-width:0}.semantic-token-name{font-size:var(--font-size-label);font-weight:500;cursor:default}.semantic-token-name:hover{text-decoration:underline dotted var(--fg-dim);text-underline-offset:3px}.semantic-rename-input{font-size:var(--font-size-label);font-weight:500;padding:2px 6px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);font-family:var(--font-sans);width:100%;outline:none}.semantic-token-ref-col{font-size:var(--font-size-sm);color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.semantic-token-scope-col{position:relative;display:flex;align-items:center}.token-scope-wrap{position:relative}.btn-scope-toggle{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;font-size:var(--font-size-sm);color:var(--fg-dim);background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);transition:border-color .15s,color .15s}.btn-scope-toggle:hover{color:var(--fg);border-color:var(--fg-dim)}.btn-scope-toggle--open{color:var(--accent);border-color:var(--accent)}.scope-panel{position:absolute;top:100%;left:0;margin-top:4px;min-width:260px;max-width:320px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:20;overflow:hidden}.scope-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--bg-subtle)}.scope-panel-title{font-size:var(--font-size-label);font-weight:600;color:var(--fg)}.scope-panel--figma .scope-panel-tabs{display:flex;align-items:center;gap:0;padding:0 8px 0 12px;min-height:40px;border-bottom:1px solid var(--border);background:var(--bg-subtle)}.scope-panel-tab{padding:8px 12px;font-size:var(--font-size-sm);color:var(--fg-dim);background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;font-family:var(--font-sans)}.scope-panel-tab:hover{color:var(--fg)}.scope-panel-tab--active{color:var(--fg);font-weight:500;border-bottom-color:var(--accent)}.scope-panel--figma .scope-panel-close{margin-left:auto;display:flex;align-items:center;justify-content:center;padding:6px;color:var(--fg-dim);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer}.scope-panel--figma .scope-panel-close:hover{color:var(--fg);background:var(--bg-hover)}.scope-panel-close{display:flex;align-items:center;justify-content:center;padding:4px;color:var(--fg-dim);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer}.scope-panel-close:hover{color:var(--fg);background:var(--bg-hover)}.scope-panel-body{padding:12px}.scope-details{display:flex;flex-direction:column;gap:12px}.scope-details-field{display:flex;flex-direction:column;gap:4px}.scope-details-label{font-size:11px;font-weight:600;color:var(--fg-dim)}.scope-details-value,.scope-details-code{font-size:var(--font-size-sm);color:var(--fg)}.scope-details-value--mono,.scope-details-code{font-family:var(--font-mono);font-size:12px}.scope-details-value-row{display:flex;align-items:center;gap:8px}.scope-details-swatch{width:20px;height:20px;border-radius:var(--radius-sm);border:1px solid var(--border);flex-shrink:0}.scope-details-meta{font-size:11px;color:var(--fg-dim);margin-left:auto}.scope-details-input{font-size:var(--font-size-sm);padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-family:var(--font-sans)}.scope-details-input:focus{outline:none;border-color:var(--accent)}.scope-details-textarea{resize:vertical;min-height:48px}.scope-details-ref-row{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}.scope-details-ref-label{font-size:11px;color:var(--fg-dim)}.scope-details-ref-value{font-size:11px;color:var(--fg);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.scope-details-ref-change{font-size:11px;color:var(--accent);background:none;border:none;cursor:pointer;padding:0 2px;text-decoration:underline}.scope-details-ref-change:hover{color:var(--accent-hover, var(--accent))}.scope-details-picker-wrap{margin-top:8px}.scope-details-platform-tabs{display:flex;gap:2px;margin-bottom:6px}.scope-details-platform-tab{padding:4px 8px;font-size:11px;color:var(--fg-dim);background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans)}.scope-details-platform-tab:hover{color:var(--fg)}.scope-details-platform-tab--active{color:var(--fg);background:var(--bg);border-color:var(--accent);font-weight:500}.scope-details-code{padding:6px 8px;background:var(--bg-subtle);border-radius:var(--radius-sm);word-break:break-all}.scope-details-checkbox{margin-top:4px}.scope-section{margin-bottom:0}.scope-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-dim);margin-bottom:8px}.scope-checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 0}.scope-checkbox-row--disabled{opacity:.6;cursor:default}.scope-checkbox-row--disabled input{cursor:default}.scope-checkbox-nested{padding-left:24px;margin-bottom:2px}.scope-checkbox-row input[type=checkbox]{width:16px;height:16px;flex-shrink:0;accent-color:var(--accent);cursor:pointer}.scope-checkbox-label{font-size:var(--font-size-sm);color:var(--fg)}.scope-hint{font-size:11px;color:var(--fg-dim);line-height:1.4;margin:6px 0 0 24px}.semantic-token-actions{display:flex;gap:2px;opacity:0;transition:opacity .1s}.semantic-token-row:hover .semantic-token-actions{opacity:1}.semantic-add-form--typography{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px;background:var(--bg-elevated);border:1px solid var(--border-elevated);border-radius:var(--radius-md);margin-bottom:12px;box-shadow:var(--shadow-sm)}.semantic-add-form--typography .add-token-input{min-width:140px}.semantic-add-form-variables-wrap{display:flex;flex-direction:column;gap:8px;width:100%}.semantic-add-form-variables-label{font-size:var(--font-size-sm);font-weight:600;color:var(--fg)}.semantic-add-form-variables-hint{font-size:var(--font-size-xs);color:var(--fg-dim);margin:0 0 4px}.semantic-add-form--typography .semantic-primitive-pickers{display:flex;flex-wrap:wrap;gap:10px 16px}.semantic-add-form--typography .semantic-picker-label{display:flex;flex-direction:column;gap:2px;font-size:var(--font-size-xs);color:var(--fg);font-weight:500}.semantic-add-form--typography .semantic-picker-select{min-width:100px;padding:4px 8px;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg)}.semantic-add-style-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;width:100%}.semantic-add-style-label{font-size:var(--font-size-xs);font-weight:600;color:var(--fg);flex-shrink:0}.semantic-style-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.semantic-style-chip{padding:5px 12px;font-size:var(--font-size-sm);font-weight:500;color:var(--fg);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s,background .15s,color .15s,box-shadow .15s}.semantic-style-chip:hover{border-color:var(--accent);background:var(--accent-subtle)}.semantic-style-chip:focus-visible{outline:none;box-shadow:var(--focus-ring)}.semantic-style-chip--selected{color:var(--accent-fg);border-color:var(--accent);background:var(--accent)}.semantic-style-chip--selected:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.semantic-style-chip--custom{font-style:italic}.semantic-style-custom-input{min-width:140px;max-width:200px;padding:5px 10px;font-size:var(--font-size-sm);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg)}.semantic-style-custom-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px var(--accent-subtle)}.semantic-add-form-actions{display:flex;justify-content:flex-end;margin-top:4px}.semantic-primitive-pickers{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end}.semantic-picker-label{display:inline-flex;flex-direction:column;gap:2px;font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted)}.semantic-picker-select{padding:4px 8px;font-size:var(--font-size-md);border:1px solid var(--border-light, #ddd);border-radius:6px;min-width:72px;background:var(--bg-panel);color:var(--fg)}.semantic-token-row--typography{grid-template-columns:100px 1fr auto;gap:8px}.semantic-token-row--typography .semantic-token-name{min-width:0}.semantic-token-pickers{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.semantic-picker-select--inline{min-width:64px;padding:2px 6px;font-size:var(--font-size-sm)}.btn-icon--danger:hover{color:var(--danger)!important}.semantic-token-picker-container{grid-column:1 / -1;padding:4px 0}.ramp-picker{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}.ramp-picker-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border-light)}.ramp-picker-title{font-size:var(--font-size-md);font-weight:600;color:var(--fg-muted)}.ramp-picker-body{padding:10px 12px;display:flex;flex-direction:column;gap:10px;max-height:260px;overflow-y:auto}.ramp-picker-empty{font-size:var(--font-size-md);color:var(--fg-dim);text-align:center;padding:12px 0}.ramp-picker-ramp{display:flex;flex-direction:column;gap:4px}.ramp-picker-ramp-name{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted);text-transform:capitalize}.ramp-picker-levels{display:grid;grid-template-columns:repeat(11,1fr);gap:2px}.ramp-picker-swatch{aspect-ratio:1;min-height:28px;border:2px solid transparent;border-radius:4px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:1px;transition:border-color .1s,transform .1s}.ramp-picker-swatch:hover{border-color:var(--fg);transform:scale(1.1);z-index:1}.ramp-picker-swatch--selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.ramp-picker-swatch-label{font-size:var(--font-size-sm);font-weight:600;line-height:1}.ramp-picker-swatch-label.dark{color:#00000080}.ramp-picker-swatch-label.light{color:#ffffffb3}.ramp-picker-footer{padding:6px 12px;border-top:1px solid var(--border-light);background:var(--bg-hover)}.ramp-picker-current{font-size:var(--font-size-sm);color:var(--fg-dim)}.add-ramp-form{display:flex;flex-direction:column;align-items:flex-start;padding:12px 16px 14px;background:var(--bg-elevated);border:1px solid var(--border-elevated);border-radius:var(--radius-md);width:100%;margin-top:12px;margin-bottom:12px;box-shadow:var(--shadow-sm);gap:10px}.add-ramp-form-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding-bottom:8px;border-bottom:1px solid var(--border-subtle)}.add-ramp-form-title{font-size:var(--font-size-label);font-weight:600;color:var(--fg)}.add-ramp-form-close{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--fg-muted);font-size:12px;cursor:pointer;border-radius:var(--radius-sm);line-height:1;transition:background .1s,color .1s}.add-ramp-form-close:hover{background:var(--bg-hover);color:var(--fg)}.add-ramp-form-row{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;width:100%}.add-ramp-form-row .add-ramp-field-label,.add-ramp-form-row .add-ramp-color-label{margin:0}.add-ramp-color-label{display:flex;flex-direction:column;gap:4px;font-size:var(--font-size-md);color:var(--fg-muted)}.add-ramp-color-label .add-ramp-brand-row{flex:1;min-width:0}.add-token-form{display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg-elevated);border:1px solid var(--border-elevated);border-radius:var(--radius-md);flex-wrap:wrap;box-shadow:var(--shadow-sm)}.add-ramp-input,.add-token-input{padding:5px 10px;font-size:var(--font-size-label);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);font-family:var(--font-sans);min-width:140px}.add-ramp-input::placeholder,.add-token-input::placeholder{color:var(--fg-muted)}.add-ramp-input:focus,.add-token-input:focus{outline:2px solid var(--accent);outline-offset:-1px}.add-token-form-suffix{font-size:var(--font-size-sm);color:var(--fg-dim);font-family:var(--font-mono)}.radius-shape-name-input,.shadow-token-name-input,.elevation-card-name-input,.radius-token-name-input{font-size:var(--font-size-md);padding:2px 6px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);width:100%;max-width:80px;box-sizing:border-box}.add-ramp-field-label{display:flex;flex-direction:column;gap:4px;font-size:var(--font-size-md);color:var(--fg-muted)}.add-ramp-form-row .add-ramp-field-label .add-ramp-input{min-width:120px;width:140px;box-sizing:border-box}.add-ramp-steps-label{display:flex;align-items:center;gap:6px;font-size:var(--font-size-md);color:var(--fg-muted)}.add-ramp-field-label.add-ramp-steps-label{flex-direction:column;align-items:flex-start}.add-ramp-submit-btn{flex-shrink:0}.add-ramp-steps-select{padding:5px 8px;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);width:auto;min-width:4ch;min-height:28px;box-sizing:border-box}.add-ramp-brand-color{width:100%;display:flex;flex-direction:column;gap:4px}.add-ramp-brand-label{font-size:var(--font-size-md);font-weight:500;color:var(--fg-muted)}.add-ramp-brand-row{display:flex;align-items:center;gap:8px}.add-ramp-hex{min-width:0;max-width:280px;flex:0 1 auto;box-sizing:border-box}.add-ramp-swatch-wrap{position:relative;flex-shrink:0}.add-ramp-swatch-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.add-ramp-swatch{display:block;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;box-sizing:border-box}.add-ramp-swatch:hover{filter:brightness(1.05)}.add-ramp-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.add-ramp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;width:100%}.add-ramp-preview{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border-subtle);margin-top:8px;width:100%}.add-ramp-preview-swatches{display:flex;gap:2px;flex-wrap:wrap;max-width:100%}.add-ramp-preview-swatch{width:20px;height:20px;border-radius:4px;border:1px solid var(--border-subtle);flex-shrink:0}.add-ramp-brand-hint{font-size:var(--font-size-sm);color:var(--fg-dim)}.token-table{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.token-table-header{display:grid;grid-template-columns:2fr 1fr 2fr 1.5fr 40px;padding:8px 12px;font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-dim);background:var(--bg-hover);border-bottom:1px solid var(--border)}.token-row{display:grid;grid-template-columns:2fr 1fr 2fr 1.5fr 40px;padding:6px 12px;align-items:center;border-bottom:1px solid var(--border-light);font-size:var(--font-size-label);transition:background .1s}.token-row:last-child{border-bottom:none}.token-row:hover{background:var(--bg-hover)}.token-table--tree .token-table-header{grid-template-columns:24px 2fr 1.5fr 2fr 1fr 40px}.token-table--tree .token-tree-row{display:grid;grid-template-columns:24px 2fr 1.5fr 2fr 1fr 40px;padding:6px 12px;align-items:center;border-bottom:1px solid var(--border-light);font-size:var(--font-size-label);transition:background .1s;gap:0 8px}.token-table--tree .token-tree-row:last-child{border-bottom:none}.token-table--tree .token-tree-row:hover{background:var(--bg-hover)}.token-table--tree .token-tree-row.token-tree-row--dragging{opacity:.5}.token-table--tree .token-tree-row.token-tree-row--drop-target{background:var(--accent-subtle);outline:1px dashed var(--accent)}.token-tree-drag-handle{cursor:grab;color:var(--fg-muted);font-size:var(--font-size-md);-webkit-user-select:none;user-select:none}.token-tree-drag-handle:active{cursor:grabbing}.token-tree-path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.token-tree,.token-tree-node{margin:0}.token-tree-children{margin-left:16px;border-left:1px solid var(--border-light);padding-left:8px}.token-table--tree .token-tree-group-header{display:grid;grid-template-columns:24px 2fr 1.5fr 2fr 1fr 40px;align-items:center;gap:0 8px;padding:6px 12px;font-size:var(--font-size-label);cursor:pointer;background:var(--bg-hover);border-bottom:1px solid var(--border-light);transition:background .1s;-webkit-user-select:none;user-select:none}.token-tree-group-header:hover{background:var(--bg-hover)}.token-tree-group-header.token-tree-row--dragging{opacity:.5}.token-tree-group-header.token-tree-row--drop-target{background:var(--accent-subtle);outline:1px dashed var(--accent)}.token-tree-group-icon{color:var(--fg-muted);font-size:var(--font-size-xs)}.token-tree-group-name{font-family:var(--font-mono);font-size:var(--font-size-md);color:var(--fg);grid-column:span 4}.mono{font-family:var(--font-mono);font-size:var(--font-size-md)}.token-col-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.token-table--tree .token-tree-row .token-col-path{cursor:text}.token-col-name-input{font-size:var(--font-size-md);padding:2px 6px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);font-family:var(--font-mono);width:100%;min-width:0;box-sizing:border-box}.token-type-badge{font-size:var(--font-size-xs);color:var(--fg-muted);text-transform:lowercase}.dimension-preview{display:flex;align-items:center;gap:6px}.dimension-bar{background:var(--accent);border-radius:2px;min-width:4px}.dimension-label{font-size:var(--font-size-sm);color:var(--fg-dim)}.color-mini-swatch{width:24px;height:24px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px #0000000f}.shadow-preview-box{width:32px;height:32px;background:var(--bg-panel);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);color:var(--fg-dim)}.duration-preview{display:flex;align-items:center;gap:6px}.duration-bar{width:24px;height:6px;background:var(--accent);border-radius:3px;animation:pulse linear infinite}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}.duration-label{font-size:var(--font-size-sm);color:var(--fg-dim)}.token-preview-text{font-size:var(--font-size-md);color:var(--fg-muted)}.token-preview-text.ref{color:var(--accent)}.code-preview{display:flex;flex-direction:column;gap:16px}.code-preview-header h2{font-size:var(--font-size-2xl);font-weight:700}.code-tabs{display:flex;gap:2px;background:var(--bg-hover);border-radius:var(--radius-md);padding:3px;width:fit-content}.code-tab{padding:6px 14px;font-size:var(--font-size-label);font-weight:500;border:none;background:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--fg-muted);font-family:var(--font-sans);transition:all .1s}.code-tab:hover{color:var(--fg)}.code-tab--active{background:var(--bg-panel);color:var(--fg);box-shadow:var(--shadow-sm)}.foundation-tabs-wrap{display:flex;flex-direction:column;gap:0;margin-top:12px;margin-bottom:4px}.foundation-tabs{display:flex;gap:24px}.foundation-tab{padding:8px 0;font-size:var(--font-size-md);font-weight:400;color:var(--fg-muted);background:none;border:none;display:inline-flex;align-items:center;gap:8px;border-bottom:3px solid transparent;cursor:pointer;font-family:var(--font-sans);transition:color .15s,border-color .15s}.foundation-tab:hover{color:var(--fg)}.foundation-tab--active{font-weight:700;color:var(--fg);border-bottom-color:var(--accent)}.foundation-tab--disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.foundation-tabs-sep{height:1px;background:var(--border);margin-top:-1px}.section-code-block{display:flex;flex-direction:column;gap:12px;margin-top:12px}.section-code-block-toolbar{display:flex;justify-content:space-between;align-items:center}.section-code-block-actions{display:flex;align-items:center;gap:6px}.section-code-block-actions .btn--icon{padding:6px;min-width:28px;min-height:28px}.section-code-block-actions .btn--icon:hover{background:var(--bg-hover);color:var(--accent)}.section-code-block-label{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted)}.section-code-block-content{padding:16px;font-size:12px;line-height:1.6;font-family:var(--font-mono);background:var(--bg-code, #1e1e2e);border-radius:var(--radius-md);overflow:auto;max-height:400px;-moz-tab-size:2;tab-size:2;margin:0;color:var(--fg)}.section-code-block-content .hljs-keyword,.section-code-block-content .hljs-selector-tag{color:#ff7b72}.section-code-block-content .hljs-string,.section-code-block-content .hljs-attr{color:#7ee787}.section-code-block-content .hljs-comment{color:#6b7280;font-style:italic}.section-code-block-content .hljs-attribute{color:#d2a8ff}.section-code-block-content .hljs-number,.section-code-block-content .hljs-literal{color:#f8cc75}.section-code-block-content .hljs-title{color:#79c0ff}.section-code-block-hint{font-size:var(--font-size-sm);color:var(--fg-muted);margin:0}.section-code-block-wrap{display:flex;flex-direction:column;gap:0}.section-code-block-wrap .section-code-block{margin-top:12px}.section-code-block-wrap .section-code-block:first-child{margin-top:0}.section-code-block--css{margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light)}.code-component-select{padding:4px 0}.component-select{padding:5px 10px;font-size:var(--font-size-label);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);font-family:var(--font-sans)}.code-output{background:var(--bg-code);border-radius:var(--radius-lg);overflow:hidden}.code-output-toolbar{display:flex;justify-content:space-between;align-items:center;padding:0 14px;height:36px;background:#15152a;border-bottom:1px solid rgba(255,255,255,.06)}.code-output-lang{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#ffffff59;font-family:var(--font-mono)}.code-output-toolbar .btn{background:#ffffff14;color:#ffffff8c;border:1px solid rgba(255,255,255,.1);font-size:var(--font-size-sm);padding:3px 10px;border-radius:var(--radius-sm);transition:all .1s}.code-output-toolbar .btn:hover{background:#ffffff24;color:#fff;border-color:#fff3}.code-output-content{padding:20px;font-size:12.5px;line-height:1.65;font-family:var(--font-mono);color:#e2e8f0;overflow:auto;max-height:600px;-moz-tab-size:2;tab-size:2}.code-output-content .syntax-keyword{color:#ff7b72}.code-output-content .syntax-string{color:#7ee787}.code-output-content .syntax-comment{color:#6b7280;font-style:italic}.code-output-content .syntax-property{color:#d2a8ff}.code-output-content .syntax-value{color:#79c0ff}.code-output-content .syntax-number{color:#f8cc75}.code-output-content .hljs-keyword,.code-output-content .hljs-selector-tag{color:#ff7b72}.code-output-content .hljs-string,.code-output-content .hljs-attr{color:#7ee787}.code-output-content .hljs-comment{color:#6b7280;font-style:italic}.code-output-content .hljs-attribute,.code-output-content .hljs-meta .hljs-keyword{color:#d2a8ff}.code-output-content .hljs-number,.code-output-content .hljs-literal{color:#f8cc75}.code-output-content .hljs-title,.code-output-content .hljs-title.class_{color:#79c0ff}.code-output-content .hljs-built_in,.code-output-content .hljs-type{color:#ffa657}.code-output-content .hljs-params{color:#e2e8f0}.code-output-content .hljs-regexp,.code-output-content .hljs-link{color:#7ee787}.code-output-content .hljs-variable,.code-output-content .hljs-template-variable{color:#ffa657}.code-output-content .hljs-doctag{color:#6b7280}.code-output-content .hljs-section{color:#79c0ff;font-weight:700}.code-output-content .hljs-tag{color:#7ee787}.code-output-content .hljs-name{color:#ff7b72}.code-output-content .hljs-selector-id,.code-output-content .hljs-selector-class{color:#d2a8ff}.code-output-content .hljs-quote,.code-output-content .hljs-template-tag{color:#6b7280}.code-output-content .hljs-subst{color:#e2e8f0}.code-output-content .hljs-symbol{color:#f8cc75}.code-output-content .hljs-bullet{color:#79c0ff}.code-output-content .hljs-emphasis{font-style:italic}.code-output-content .hljs-strong{font-weight:700}.code-output-content .hljs-addition{color:#7ee787}.code-output-content .hljs-deletion{color:#ff7b72}.component-viewer-layout{display:flex;flex-direction:column;gap:20px}.component-list{display:flex;gap:8px;flex-wrap:wrap}.component-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);cursor:pointer;text-align:left;font-family:var(--font-sans);transition:all .1s;min-width:140px}.component-card:hover{border-color:var(--accent);background:var(--bg-hover)}.component-card--active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.component-card-name{font-size:var(--font-size-base);font-weight:600}.component-card-meta{font-size:var(--font-size-sm);color:var(--fg-dim)}.component-detail{display:flex;flex-direction:column;gap:20px}.component-detail-header h3{font-size:var(--font-size-xl);font-weight:700}.component-detail-desc{font-size:var(--font-size-label);color:var(--fg-muted);margin-top:4px}.component-detail-meta{display:flex;gap:24px;flex-wrap:wrap}.meta-group{display:flex;flex-direction:column;gap:6px}.meta-label{font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-dim)}.meta-tags{display:flex;gap:4px;flex-wrap:wrap}.meta-tag{font-size:var(--font-size-md);padding:2px 8px;background:var(--bg-hover);border-radius:4px;font-family:var(--font-mono);color:var(--fg-muted)}.meta-tag-opt{color:var(--fg-dim)}.variant-grid-section{display:flex;flex-direction:column;gap:12px}.variant-grid-toolbar{display:flex;gap:12px}.variant-toggle{display:flex;align-items:center;gap:6px;font-size:var(--font-size-label);color:var(--fg-muted);cursor:pointer}.variant-grid-scroll{overflow-x:auto}.variant-grid-table{border-collapse:collapse;width:100%}.variant-grid-table th,.variant-grid-table td{padding:8px;text-align:center}.variant-grid-th-primary{display:block}.variant-grid-th-state{display:block;font-size:var(--font-size-xs);color:var(--accent);font-weight:500}.variant-grid-cell{min-width:120px;padding:12px 8px;border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light);transition:background-color .12s ease}.variant-grid-cell:hover{background-color:#00000004}.variant-grid-cell:last-child{border-right:none}.variant-grid-row-label{font-size:var(--font-size-label);font-weight:500;text-align:left!important;white-space:nowrap;padding-right:16px;background-color:#00000003;border-bottom:1px solid var(--border-light)}.variant-grid-th{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--border);padding-bottom:10px}.component-preview{display:flex;justify-content:center;padding:8px}.component-preview--empty{color:var(--fg-dim);font-size:var(--font-size-md);font-style:italic}.component-preview-root{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-label);white-space:nowrap;min-width:60px}.theme-editor{display:flex;flex-direction:column;gap:20px}.theme-swatch{width:24px;height:24px;border-radius:var(--radius-sm);flex-shrink:0;box-shadow:inset 0 0 0 1px #0000000f}.te-layout{display:flex;gap:20px;min-height:500px}.te-sidebar{width:260px;min-width:260px;display:flex;flex-direction:column;gap:8px}.te-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border-light)}.te-sidebar-title{font-size:var(--font-size-label);font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}.te-create-form{display:flex;gap:6px;align-items:center;padding:8px;background:var(--bg-hover);border-radius:var(--radius-sm);flex-wrap:wrap}.te-card-list{display:flex;flex-direction:column;gap:4px}.te-card{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--border-light);cursor:pointer;transition:all .1s;background:var(--bg-panel)}.te-card:hover{border-color:var(--border);background:var(--bg-hover)}.te-card--active{border-color:var(--accent);background:var(--accent-subtle)}.te-card-info{display:flex;align-items:center;gap:8px}.te-card-name{font-size:var(--font-size-base);font-weight:600;color:var(--fg)}.te-card-badge{font-size:var(--font-size-sm);background:var(--bg-hover);color:var(--fg-muted);padding:1px 7px;border-radius:8px}.te-card--active .te-card-badge{background:var(--accent-muted);color:var(--accent)}.te-card-actions{display:flex;gap:2px;opacity:0;transition:opacity .1s}.te-card:hover .te-card-actions{opacity:1}.te-main{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}.te-main-header{display:flex;align-items:center;gap:12px}.te-main-header h3{font-size:var(--font-size-xl);font-weight:700}.te-override-count{font-size:var(--font-size-md);color:var(--fg-dim)}.te-main-header .te-generate-dark{margin-left:auto;flex-shrink:0}.te-override-grid-header{display:grid;grid-template-columns:2fr 1.5fr 2fr 60px;gap:10px;padding:6px 12px;font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-dim);background:var(--bg-hover);border-radius:var(--radius-sm)}.te-override-list{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.te-override-row{display:grid;grid-template-columns:2fr 1.5fr 2fr 60px;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border-light);transition:background .1s}.te-override-row:last-child{border-bottom:none}.te-override-row:hover{background:var(--bg-hover)}.te-override-row--changed{background:#2563eb08}.te-override-row--changed:hover{background:var(--accent-subtle-sm)}.te-override-path{font-size:var(--font-size-md);font-weight:500;color:var(--fg)}.te-override-default{display:flex;align-items:center;gap:8px}.te-override-hex{font-size:var(--font-size-sm);color:var(--fg-dim)}.te-override-value{display:flex;align-items:center;gap:6px}.te-override-picker-wrap{position:relative;width:24px;height:24px;flex-shrink:0}.te-color-picker{position:absolute;top:0;left:0;width:24px;height:24px;opacity:0;cursor:pointer;z-index:1}.te-override-input{width:80px;padding:3px 6px;font-size:var(--font-size-sm);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);font-family:var(--font-mono)}.te-override-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.te-reset-btn{font-size:var(--font-size-sm)!important;padding:2px 8px!important}.te-placeholder{display:flex;align-items:center;justify-content:center;flex:1;color:var(--fg-dim);font-size:var(--font-size-base)}.te-empty{padding:20px 12px;text-align:center;color:var(--fg-dim);font-size:var(--font-size-label)}.empty-state{padding:40px 20px;text-align:center;color:var(--fg-muted)}.empty-state p{margin-bottom:8px}.empty-state-hint{font-size:var(--font-size-label);color:var(--fg-dim);max-width:400px;margin:0 auto}.empty-state-v2{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 32px;gap:10px}.empty-state-v2--compact{padding:32px 24px;gap:8px}.empty-state-v2-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--radius-lg);background:var(--bg-hover);color:var(--fg-dim);margin-bottom:4px}.empty-state-v2--compact .empty-state-v2-icon{width:36px;height:36px;border-radius:var(--radius-md)}.empty-state-v2-title{font-size:var(--font-size-base);font-weight:500;color:var(--fg);margin:0}.empty-state-v2-description{font-size:var(--font-size-sm);color:var(--fg-muted);max-width:320px;line-height:1.55;margin:0}.empty-state-v2-hint{font-size:var(--font-size-xs);color:var(--fg-dim);font-family:var(--font-mono);margin:0}.empty-state-v2-actions{display:flex;gap:8px;margin-top:4px}.color-ramp-editor .controls{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.5rem}.color-ramp-editor .control{display:flex;align-items:center;gap:.75rem;min-width:200px}.color-ramp-editor .label{font-size:.85rem;font-weight:600;width:4rem}.color-ramp-editor .slider{flex:1;height:8px;border-radius:4px;accent-color:var(--accent)}.color-ramp-editor .value{font-size:.8rem;color:var(--fg-muted);min-width:3rem}.color-ramp-editor .control--color-input{flex-direction:column;align-items:stretch;min-width:100%;gap:.35rem}.color-ramp-editor .control--color-input .label{width:auto}.color-ramp-editor .color-input-row{display:flex;gap:.5rem;align-items:center}.color-ramp-editor .color-raw-input{flex:1;font-family:var(--font-mono);font-size:.85rem;padding:.4rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);outline:none}.color-ramp-editor .color-raw-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.color-ramp-editor .color-raw-input[aria-invalid=true]{border-color:var(--danger)}.color-ramp-editor .btn-apply-color{padding:.4rem .75rem;font-size:.8rem;font-weight:600;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);cursor:pointer;white-space:nowrap}.color-ramp-editor .btn-apply-color:hover{background:var(--bg-hover);border-color:var(--accent);color:var(--accent)}.color-ramp-editor .color-input-error{font-size:.75rem;color:var(--danger);margin:0}.preview-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:3px;border-radius:8px;overflow:hidden}.swatch{aspect-ratio:1;display:flex;align-items:flex-end;justify-content:center;padding:4px;border-radius:4px;min-height:48px}.swatch-label{font-size:var(--font-size-xs);font-weight:600}.swatch-label--dark{color:var(--fg, #1a1a1a)}.swatch-label--light{color:var(--accent-fg)}.semantic-preview{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-light)}.semantic-preview-title{font-size:var(--font-size-label);font-weight:600;color:var(--fg-muted);margin-bottom:8px}.semantic-swatches{display:flex;gap:8px;flex-wrap:wrap}.semantic-swatch{min-width:90px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #0000000f}.semantic-swatch-label{font-size:var(--font-size-sm);font-weight:600;text-shadow:0 0 2px #fff;color:#1a1a1a}[data-theme=dark] .semantic-swatch-label{text-shadow:0 0 3px #000;color:#f5f5f5}.token-picker{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);width:100%;max-width:420px;display:flex;flex-direction:column;overflow:hidden}.token-picker-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border-light)}.token-picker-title{font-size:var(--font-size-md);font-weight:600;color:var(--fg)}.token-picker-search{padding:6px 10px;border-bottom:1px solid var(--border-light)}.token-picker-search-input{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px;font-size:var(--font-size-md);font-family:var(--font-mono);background:var(--bg);color:var(--fg);outline:none;transition:border-color .1s}.token-picker-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.token-picker-list{max-height:240px;overflow-y:auto;padding:4px 0}.edit-panel .token-picker-list{max-height:min(36vh,240px)}.token-picker-empty{padding:16px;text-align:center;font-size:var(--font-size-md);color:var(--fg-dim)}.token-picker-option{display:flex;align-items:center;gap:8px;width:100%;padding:5px 10px;border:none;background:transparent;cursor:pointer;text-align:left;font-size:var(--font-size-md);transition:background-color .05s}.token-picker-option--highlighted{background:var(--bg-hover)}.token-picker-option--selected{background:var(--accent-subtle-sm)}.token-picker-option--selected .token-picker-path{color:var(--accent);font-weight:600}.token-picker-path{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg);font-size:var(--font-size-sm)}.token-picker-value{flex-shrink:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-dim);font-size:var(--font-size-xs)}.token-picker-footer{padding:6px 10px;border-top:1px solid var(--border-light);background:var(--bg)}.token-picker-current{font-size:var(--font-size-sm);color:var(--fg-muted)}.token-picker-preview{flex-shrink:0;display:inline-block}.token-picker-preview--color{width:16px;height:16px;border-radius:3px;box-shadow:inset 0 0 0 1px #0000001a}.token-picker-preview--dimension{width:60px;height:12px;display:flex;align-items:center}.token-picker-dimension-bar{height:6px;background:var(--accent);opacity:.5;border-radius:1px;min-width:2px}.token-picker-preview--shadow{width:20px;height:20px;background:var(--bg-panel);border-radius:3px}.token-picker-preview--number{font-size:var(--font-size-xs);color:var(--fg-dim);font-family:var(--font-mono);min-width:16px;text-align:center}:root{--bg-selected: rgba(37, 99, 235, .04);--border-selected: var(--accent);--bg-success: rgba(34, 197, 94, .06);--fg-success: #16a34a;--bg-warning: rgba(245, 158, 11, .06);--fg-warning: #d97706;--bg-error: rgba(229, 72, 77, .06);--fg-error: var(--danger);--ring-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.token-picker-option:focus-visible,.btn:focus-visible,.btn-sm:focus-visible,.btn-icon:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role=button]:focus-visible,[role=option]:focus-visible,[role=tab]:focus-visible,[role=menuitem]:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{outline:none;box-shadow:var(--focus-ring)}.scale-controls{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-4);background:transparent;border-radius:var(--radius-md);margin-bottom:var(--space-4)}.scale-control{display:flex;align-items:center;gap:6px;font-size:var(--font-size-md);color:var(--fg-muted)}.scale-control-label{font-weight:500;min-width:40px}.scale-control--namespace{flex:0 0 auto}.scale-control-input.scale-control-input--namespace{width:140px;text-align:left;font-family:var(--font-sans)}.scale-control-input{width:56px;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);font-family:var(--font-mono);text-align:right;background:var(--bg-panel);color:var(--fg)}.scale-control-input:focus{outline:none;border-color:var(--accent)}.scale-control-suffix{font-size:var(--font-size-sm);color:var(--fg-dim);font-family:var(--font-mono)}.scale-control-select{padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg-panel);color:var(--fg);cursor:pointer}.scale-control-select:focus{outline:none;border-color:var(--accent)}.typo-staircase{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:16px}.typo-staircase-row{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .1s;border-left:2px solid transparent}.typo-staircase-row:not(:last-child){border-bottom:1px solid var(--border-light)}.typo-staircase-row:hover{background:var(--bg-hover)}.typo-staircase-row--selected{background:var(--bg-selected);border-left-color:var(--accent)}.typo-staircase-meta{min-width:80px;flex-shrink:0}.typo-staircase-name{display:block;font-size:var(--font-size-md);font-weight:500;color:var(--fg-muted)}.typo-staircase-name--base{color:var(--fg)}.typo-base-badge{display:inline-block;margin-left:4px;font-size:var(--font-size-2xs);font-weight:700;color:#fff;background:var(--accent);border-radius:3px;padding:0 4px;vertical-align:middle;line-height:16px}.typo-staircase-size{display:block;font-size:var(--font-size-sm);color:var(--fg-dim)}.typo-fractional-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--fg-warning);margin-left:3px;vertical-align:middle}.typo-staircase-bar-container{flex:1;min-width:0;position:relative}.typo-staircase-bar{height:100%;min-height:20px;background:var(--accent);opacity:.08;border-radius:2px;position:absolute;top:0;left:0;transition:width .15s ease}.typo-staircase-sample{position:relative;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg);padding:2px 0}.typo-step-detail{display:flex;gap:24px;padding:12px 16px;background:var(--bg-hover);border-radius:var(--radius-md);margin-bottom:16px}.typo-step-detail-item{display:flex;flex-direction:column;gap:2px}.typo-step-detail-label{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--fg-dim);font-weight:500}.typo-step-detail-value{font-size:var(--font-size-label);color:var(--fg)}.typo-step-detail-item--editable{flex-direction:row;align-items:center;gap:8px}.typo-step-detail-input{width:72px;font-size:var(--font-size-md);padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);font-family:var(--font-mono)}.typo-override-badge{font-size:var(--font-size-2xs);text-transform:uppercase;margin-left:6px;color:var(--accent)}.typo-reset-override{font-size:var(--font-size-sm);padding:2px 8px}.typo-preview-hint{font-size:var(--font-size-md);color:var(--fg-muted);margin:8px 0 12px;max-width:560px}.typo-current-tokens{margin-top:16px}.typo-rename-hint{font-size:var(--font-size-sm);color:var(--fg-muted);margin-bottom:8px}.token-col-path-input{font-size:var(--font-size-md);padding:2px 6px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);font-family:var(--font-mono);width:100%;min-width:120px;box-sizing:border-box}.typo-font-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light, #eee)}.typo-font-section .section-subtitle{margin-bottom:12px}.typo-font-block{margin-bottom:16px}.typo-font-label{display:block;font-size:var(--font-size-md);font-weight:600;color:var(--fg-muted, #666);margin-bottom:6px}.typo-font-list{list-style:none;margin:0 0 8px;padding:0}.typo-font-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.typo-font-key{min-width:140px;font-size:var(--font-size-md)}.typo-font-input{flex:1;max-width:280px;padding:6px 8px;font-size:var(--font-size-label);border:1px solid var(--border-light, #ddd);border-radius:6px;background:var(--bg-panel);color:var(--fg)}.typo-font-input--key{max-width:120px}.typo-font-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.typo-font-add .typo-font-input{max-width:160px}.typo-font-input--num{max-width:64px}.typo-weights-for-family{margin-bottom:12px}.typo-weights-for-family .typo-weights-family-name{display:block;font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted, #666);margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em}.typo-scale-family{margin-bottom:12px}.typo-scale-family-label{display:inline-flex;align-items:center;gap:8px;font-size:var(--font-size-label);color:var(--fg, #111)}.typo-scale-family-select{padding:6px 8px;font-size:var(--font-size-label);border:1px solid var(--border-light, #ddd);border-radius:6px;min-width:120px;background:var(--bg-panel);color:var(--fg)}.typo-figma-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px}.typo-figma-selectors{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end}.typo-figma-label{display:inline-flex;flex-direction:column;gap:4px;font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted, #666);text-transform:uppercase;letter-spacing:.03em}.typo-figma-select{padding:6px 10px;font-size:var(--font-size-label);border:1px solid var(--border-light, #ddd);border-radius:6px;min-width:120px;background:var(--bg-panel);color:var(--fg)}.typo-figma-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}.typo-figma-add-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.typo-figma-input{padding:6px 8px;font-size:var(--font-size-md);border:1px solid var(--border-light, #ddd);border-radius:6px;min-width:80px;background:var(--bg-panel);color:var(--fg)}.typo-figma-input--key{min-width:72px;max-width:100px}.typo-figma-input--num{min-width:48px;max-width:56px}.typo-figma-row-inner{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px}.typo-figma-label-text{display:block;margin-bottom:4px}.typo-custom-select-wrap{position:relative}.typo-figma-select-trigger{display:flex;align-items:center;justify-content:space-between;min-width:140px;text-align:left;cursor:pointer}.typo-figma-select-trigger:after{content:"";width:0;height:0;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7}.typo-figma-select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.typo-custom-select-panel{position:absolute;z-index:100;top:100%;left:0;margin-top:4px;min-width:220px;max-width:320px;background:var(--bg-panel, #fff);border:1px solid var(--border-light, #ddd);border-radius:8px;box-shadow:0 8px 24px #0000001f;overflow:hidden}.typo-font-panel{max-height:320px;display:flex;flex-direction:column}.typo-font-search{flex-shrink:0;width:100%;padding:8px 10px;font-size:var(--font-size-label);border:none;border-bottom:1px solid var(--border-light, #eee);outline:none}.typo-font-search:focus{box-shadow:0 0 0 2px var(--accent, #4f6ef7);border-color:var(--border-focus, #4f6ef7)}.typo-font-list-picker{list-style:none;margin:0;padding:4px 0;overflow-y:auto;max-height:260px}.typo-font-list-item{display:block;width:100%;padding:6px 12px;font-size:var(--font-size-base);text-align:left;background:none;border:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.typo-font-list-item:hover{background:var(--bg-hover, #f0f0f0)}.typo-font-list-item--add{color:var(--accent);font-weight:500;border-top:1px solid var(--border-subtle, #eee);margin-top:4px;padding-top:8px}.typo-font-list-item--add:hover{background:var(--bg-hover)}.typo-weight-panel{max-height:240px}.typo-primitive-tokens{width:100%;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-light, #eee)}.typo-primitive-tokens .typo-figma-label-text{margin-bottom:6px}.typo-primitive-token-list{list-style:none;margin:0;padding:0}.typo-primitive-token-item{display:flex;align-items:center;gap:12px;padding:4px 0;font-size:var(--font-size-label)}.typo-primitive-token-path{min-width:120px;color:var(--fg-muted);cursor:pointer}.typo-primitive-token-path:hover{color:var(--fg, #111)}.typo-primitive-token-value{flex:1;overflow:hidden;text-overflow:ellipsis;color:var(--fg-muted);font-size:var(--font-size-md)}.typo-primitive-token-input{min-width:140px;padding:2px 6px;font-size:var(--font-size-md);border:1px solid var(--border-light, #ccc);border-radius:4px;outline:none}.typo-primitive-token-delete{flex-shrink:0;padding:2px 8px;font-size:var(--font-size-md)}.typo-text-styles{width:100%}.typo-text-styles-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.typo-text-styles-header--toolbar-only{justify-content:flex-end}.typo-text-styles-header .section-subtitle{margin:0}.ts-add-form{display:flex;gap:8px;align-items:center;margin-bottom:12px}.ts-add-form .add-token-input{flex:1}.ts-overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:16px}.ts-overview-card{display:flex;flex-direction:column;border:1px solid var(--border-light, #e5e7eb);border-radius:8px;background:var(--bg-panel, #fafafa);overflow:hidden}.ts-overview-card-preview{padding:14px 16px 10px;background:var(--bg, #fff);color:var(--fg);overflow:hidden;white-space:nowrap;min-height:76px;display:flex;align-items:flex-end;border-bottom:1px solid var(--border-light, #f0f0f0)}.ts-overview-card-footer{display:flex;flex-direction:column;gap:3px;padding:6px 10px 8px}.ts-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:4px}.ts-card--compact{display:flex;flex-direction:column;border:1px solid var(--border-light, #e5e7eb);border-radius:8px;background:var(--bg-panel, #fafafa);overflow:hidden;cursor:pointer;transition:border-color .12s,box-shadow .12s;-webkit-user-select:none;user-select:none}.ts-card--compact:hover{border-color:var(--border, #d1d5db);box-shadow:0 2px 8px #0000000f}.ts-card--compact.ts-card--selected{border-color:var(--accent, #3b82f6);box-shadow:0 0 0 2px var(--accent-alpha, rgba(59, 130, 246, .18));background:var(--bg, #fff)}.ts-card-compact-preview{padding:14px 16px 10px;background:var(--bg, #fff);color:var(--fg);overflow:hidden;white-space:nowrap;text-overflow:clip;min-height:80px;display:flex;align-items:flex-end;border-bottom:1px solid var(--border-light, #f0f0f0)}.ts-card-compact-footer{display:flex;align-items:center;gap:5px;padding:5px 10px 7px;flex-wrap:wrap}.ts-card-name{font-size:10px;font-weight:600;color:var(--fg-dim, #9ca3af);font-family:var(--font-mono);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.ts-card-compact-chips{display:flex;align-items:center;flex-wrap:wrap;gap:3px}.ts-card-meta{display:flex;flex-wrap:wrap;gap:4px;padding:6px 10px}.ts-meta-chip{display:inline-flex;align-items:center;padding:2px 6px;background:var(--bg, #fff);border:1px solid var(--border-light, #e5e7eb);border-radius:4px;font-size:10px;font-family:var(--font-mono);color:var(--fg-muted);line-height:1.4}.ts-detail{border:1px solid var(--border-light, #e5e7eb);border-radius:10px;background:var(--bg-panel, #fafafa);overflow:hidden;padding:0}.ts-detail-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.ts-detail-field{display:flex;flex-direction:column;gap:4px}.ts-detail-label{font-size:10px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}.ts-detail--v2{display:flex;flex-direction:column}.ts-detail-v2-preview{padding:24px 20px;background:var(--bg, #fff);border-bottom:1px solid var(--border-light, #e5e7eb);color:var(--fg);min-height:80px;outline:none;cursor:text;line-height:1.4;overflow-wrap:break-word;word-break:break-word;transition:background .12s}.ts-detail-v2-preview:hover{background:var(--bg-surface-hover, #f9fafb)}.ts-detail-v2-preview:focus{background:var(--bg, #fff);box-shadow:inset 0 0 0 2px var(--accent-alpha, rgba(59, 130, 246, .2))}.ts-detail-v2-preview-hint{font-size:10px;color:var(--fg-dim, #9ca3af);padding:3px 20px 0;margin:0;font-style:italic}.ts-detail-v2-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 6px;gap:8px}.ts-detail-v2-title{font-size:var(--font-size-md, 13px);font-weight:700;color:var(--fg);font-family:var(--font-mono);letter-spacing:-.01em;margin:0}.ts-detail-v2-fields{display:flex;flex-direction:column;gap:10px;padding:8px 14px 14px}.ts-detail-v2-row{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:8px}.ts-detail-v2-weight-row{display:flex;flex-direction:column;gap:5px}.ts-weight-chips{display:flex;flex-wrap:wrap;gap:4px}.ts-weight-chip{height:26px;padding:0 10px;border:1px solid var(--border-light, #d1d5db);border-radius:5px;background:var(--bg-input, #fff);color:var(--fg-muted);font-size:11px;font-family:var(--font-mono);cursor:pointer;transition:border-color .1s,background .1s,color .1s;white-space:nowrap}.ts-weight-chip:hover{border-color:var(--accent, #3b82f6);color:var(--fg)}.ts-weight-chip--active{border-color:var(--accent, #3b82f6);background:var(--accent-alpha, rgba(59, 130, 246, .1));color:var(--accent, #3b82f6);font-weight:600}.ts-weight-chip--italic{font-style:italic;min-width:32px;margin-left:4px;border-left-color:var(--border, #d1d5db)}.ts-detail-v2-extras{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;border-top:1px solid var(--border-light, #e5e7eb);margin-top:2px;padding-top:10px}.ts-detail-v2-extras--4col{grid-template-columns:1.2fr .7fr 1fr 1fr}.ts-resolved-badge{display:inline-block;margin-left:5px;padding:1px 5px;background:var(--bg-input, #f3f4f6);border:1px solid var(--border-light, #e5e7eb);border-radius:3px;font-size:var(--font-size-sm);font-family:var(--font-mono);color:var(--fg-dim, #9ca3af);vertical-align:middle;line-height:1.4;font-style:normal}.ts-use-token-link{background:none;border:none;padding:0;font-size:10px;color:var(--accent, #3b82f6);cursor:pointer;text-align:left;line-height:1.4}.ts-use-token-link:hover{text-decoration:underline}.ts-icon-btn-group{display:flex;gap:2px}.ts-icon-btn{height:26px;min-width:26px;padding:0 5px;border:1px solid var(--border-light, #d1d5db);border-radius:4px;background:var(--bg-input, #fff);color:var(--fg-muted);font-size:11px;font-weight:600;cursor:pointer;transition:border-color .1s,background .1s,color .1s;display:flex;align-items:center;justify-content:center;font-family:inherit;line-height:1}.ts-icon-btn:hover{border-color:var(--border, #9ca3af);color:var(--fg)}.ts-icon-btn--active{border-color:var(--accent, #3b82f6);background:var(--accent-alpha, rgba(59, 130, 246, .1));color:var(--accent, #3b82f6)}.ts-detail-panel{border:1px solid var(--border-light, #e5e7eb);border-radius:10px;background:var(--bg-panel, #fafafa);overflow:hidden;margin-top:8px}.ts-detail-controls{display:flex;flex-direction:column;gap:0;padding:12px 14px 14px}.ts-detail-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.ts-detail-title{font-size:var(--font-size-md);font-weight:700;color:var(--fg);font-family:var(--font-mono);letter-spacing:-.01em;margin:0}.ts-card-fields{display:flex;flex-direction:column;gap:6px}.ts-field-row{display:flex;gap:6px}.ts-field{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.ts-label{font-size:10px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}.ts-input,.ts-select{height:26px;padding:0 6px;border:1px solid var(--border-light, #d1d5db);border-radius:4px;font-size:11px;background:var(--bg-input, #fff);color:var(--fg);outline:none;width:100%;transition:border-color .12s,box-shadow .12s}.ts-input:focus,.ts-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-alpha, rgba(59, 130, 246, .15))}.ts-select{padding-right:20px;-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' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center}.ts-cards-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:4px}.ts-inline-chip-input{display:flex;align-items:center;gap:6px}.ts-input--narrow{width:56px!important;flex-shrink:0;text-align:center}.ts-preset-chips{display:flex;gap:4px;margin-bottom:0;flex-shrink:0}.ts-preset-chip{padding:2px 7px;border:1px solid var(--border-light, #e5e7eb);border-radius:4px;font-size:10px;font-weight:500;background:var(--bg, #fff);color:var(--fg-muted);cursor:pointer;line-height:1.6;white-space:nowrap;transition:border-color .1s,background .1s,color .1s}.ts-preset-chip:hover{border-color:var(--accent);color:var(--accent)}.ts-preset-chip--on{border-color:var(--accent);background:var(--accent-subtle, rgba(59, 130, 246, .08));color:var(--accent);font-weight:600}.typo-primitive-tokens-toggle{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:0;margin-bottom:6px;width:100%;text-align:left}.typo-primitive-tokens-toggle .typo-figma-label-text{margin-bottom:0;flex:1}.typo-primitive-tokens-toggle:hover .typo-figma-label-text{color:var(--fg)}.typo-family-gallery{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 8px;width:100%;flex-basis:100%}.typo-family-card{flex:1;min-width:140px;max-width:220px;padding:14px 14px 10px;border:1px solid var(--border-light);border-radius:8px;background:var(--bg-panel);display:flex;flex-direction:column;gap:6px;transition:border-color .15s,box-shadow .15s;position:relative}.typo-family-card:hover{border-color:var(--border);box-shadow:0 2px 8px #0000000f}.typo-family-card-delete{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:var(--radius-sm);border:none;background:none;color:var(--fg-dim);font-size:10px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1;transition:background .1s,color .1s}.typo-family-card:hover .typo-family-card-delete{display:flex}.typo-family-card-delete:hover{background:var(--danger-subtle);color:var(--danger)}.typo-family-card-specimen{font-size:28px;font-weight:400;line-height:1.2;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.typo-family-card-meta{display:flex;flex-direction:column;gap:2px}.typo-family-card-key{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted)}.typo-family-card-weights{font-size:10px;color:var(--fg-muted)}.ts-icon-btn-group{display:flex;gap:2px;flex-wrap:wrap}.ts-icon-btn{width:28px;height:26px;border:1px solid var(--border-light);border-radius:4px;background:var(--bg);color:var(--fg-muted);cursor:pointer;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .1s,background .1s,color .1s;font-family:inherit;flex-shrink:0}.ts-icon-btn:hover{border-color:var(--border);color:var(--fg)}.ts-icon-btn--on{border-color:var(--accent);background:var(--accent-subtle, rgba(59, 130, 246, .08));color:var(--accent)}.typo-text-styles-subtitle{font-size:var(--font-size-sm, 11px);color:var(--fg-muted);margin:-4px 0 12px;line-height:1.4}.typo-flow-hint{font-size:var(--font-size-md);color:var(--fg-muted);margin:0 0 16px;max-width:560px}.typo-section{margin-bottom:24px}.typo-section .section-subtitle,.typo-section .section-title{margin-bottom:8px}.typo-section-desc{font-size:var(--font-size-label);color:var(--fg-muted);margin:0 0 12px;max-width:520px}.typo-overview-font-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}.typo-overview-font-item{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border-radius:var(--radius-md);border:1px solid var(--border-light);background:var(--bg-panel);min-width:140px}.typo-overview-font-specimen{font-size:var(--font-size-lg);font-weight:600;color:var(--fg)}.typo-overview-font-mono{font-size:var(--font-size-xs);font-family:var(--font-mono, monospace);color:var(--fg-muted)}.typo-scale-panel{padding:16px;background:var(--bg-elevated);border:1px solid var(--border-elevated);border-radius:var(--radius-md);margin-top:8px;box-shadow:var(--shadow-sm)}.typo-font-preview{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding:10px 12px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm)}.typo-font-preview--below-font{margin-top:10px}.typo-font-preview-label{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--fg-dim);font-weight:500}.typo-font-preview-sample{font-size:1.125rem;line-height:1.4;color:var(--fg)}.typo-add-ramp-wrap{margin-top:8px}.typo-scale-panel .scale-controls{margin-top:12px}.typo-add-family-by-name{display:flex;gap:8px;align-items:center;margin-bottom:12px}.typo-custom-family-input{flex:1;max-width:240px;padding:6px 10px;font-size:var(--font-size-label);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--fg)}.typo-families-hint{font-size:var(--font-size-md);color:var(--fg-muted);margin:0 0 12px}.typo-scale-family-wrap{margin-bottom:8px}.typo-scale-family-toggle{display:flex;align-items:center;gap:6px;padding:4px 0;background:none;border:none;cursor:pointer;font-size:var(--font-size-label);color:var(--fg);text-align:left;width:100%}.typo-scale-family-toggle:hover{color:var(--accent)}.typo-scale-family-toggle-label{color:var(--fg-muted);margin-right:4px}.typo-scale-family-toggle-value{font-weight:500}.typo-scale-family-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;padding-left:20px}.typo-scale-family-option{padding:4px 10px;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--fg);cursor:pointer}.typo-scale-family-option:hover{background:var(--bg-hover);border-color:var(--border)}.typo-scale-family-option--selected{background:var(--accent);color:#fff;border-color:var(--accent)}.typo-scale-panel .typo-scale-family-label{margin-bottom:0}.typo-scale-family-label,.typo-sample-text-label{display:flex;flex-direction:column;gap:4px;margin-bottom:0;flex:1}.typo-sample-text-row{display:flex;align-items:center;gap:212px;margin-top:12px;margin-bottom:12px}.typo-sample-text-row .typo-sample-text-input{flex:1}.typo-sample-text-row .btn{margin-left:auto}.typo-scale-family-select{max-width:200px;padding:6px 10px;font-size:var(--font-size-label);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--fg)}.typo-sample-text-input{max-width:400px;padding:6px 10px;font-size:var(--font-size-label);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--fg)}.typo-staircase-name-input{width:80px;padding:2px 6px;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--fg)}.semantic-desc{margin-top:-4px}.motion-onboarding{margin-bottom:16px;border:1px solid var(--border-light);border-radius:8px;background:var(--bg-panel);overflow:hidden}.motion-onboarding-trigger{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:none;border:none;font:inherit;color:var(--fg);cursor:pointer;text-align:left}.motion-onboarding-trigger:hover{background:var(--surface-hover)}.motion-onboarding-content{padding:0 12px 12px 36px;font-size:var(--font-size-sm);color:var(--fg-muted);line-height:1.5}.motion-onboarding-content p{margin:0 0 8px}.motion-onboarding-content p:last-child{margin-bottom:0}.motion-onboarding-content code{font-size:.9em;padding:1px 4px;background:var(--surface-raised);border-radius:4px}.motion-layout{display:grid;grid-template-columns:196px 1fr;min-height:0;flex:1;margin-top:16px}.motion-sidebar{border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}.motion-main{padding:0 32px 40px;overflow-y:auto}.motion-empty{padding:60px 0;text-align:center;color:var(--fg-dim);font-size:var(--font-size-label)}.motion-add-actions{display:flex;gap:6px;padding:14px 10px 10px;border-bottom:1px solid var(--border-light)}.motion-add-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px}.motion-sidebar-empty{padding:16px}.motion-groups{display:flex;flex-direction:column;gap:20px;padding:12px 0}.motion-group-label{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-dim);padding:0 12px;margin:0 0 4px}.motion-group-list{list-style:none;padding:0;margin:0}.motion-token-item{width:100%;display:flex;align-items:center;gap:8px;padding:5px 12px;background:none;border:none;cursor:pointer;text-align:left;color:var(--fg-muted);font-size:11.5px;transition:background .1s,color .1s}.motion-token-item:hover{background:var(--surface-hover);color:var(--fg)}.motion-token-item--active{background:var(--accent-subtle);color:var(--accent)}.motion-token-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.motion-token-item-badge{font-size:var(--font-size-xs);padding:1px 5px;background:var(--surface-raised);border-radius:8px;color:var(--fg-dim);flex-shrink:0}.motion-mini-svg{width:26px;height:18px;flex-shrink:0;overflow:visible}.motion-mini-path{stroke:currentColor;stroke-width:.07;stroke-linecap:round;opacity:.75}.motion-token-item--active .motion-mini-path{opacity:1}.motion-panel{padding-top:0;display:flex;flex-direction:column;gap:0}.motion-divider{height:1px;background:var(--border-light);margin:10px 0}.motion-token-header{display:flex;align-items:flex-end;gap:12px;padding-top:2px}.motion-token-name-field{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.motion-token-name-label{font-size:10.5px;color:var(--fg-dim);font-weight:500}.motion-token-name-input{font-size:var(--font-size-label);padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--fg);width:100%}.motion-token-name-input:focus{border-color:var(--accent);outline:none}.motion-token-delete{color:var(--danger);flex-shrink:0;font-size:var(--font-size-md)}.motion-token-delete:hover{background:var(--danger-subtle);color:var(--danger)}.curve-editor{display:grid;grid-template-columns:300px 1fr;column-gap:28px;row-gap:0;align-items:start}.curve-editor-canvas,.curve-preview-slot{grid-column:1}.curve-preset-groups{grid-column:2;grid-row:1 / -1}.curve-editor-canvas{width:100%;overflow:visible}.curve-editor-canvas .curve-coords{margin-top:6px;margin-bottom:0}.curve-editor-canvas .curve-preview-slot{margin-top:8px}.curve-editor-svg{width:100%;aspect-ratio:1;display:block;border-radius:var(--radius-sm);background:var(--bg-panel);border:1px solid var(--border-light);overflow:visible}.curve-editor-svg--drag{cursor:grabbing!important}.curve-grid line{stroke:var(--border-light);stroke-width:.4}.curve-border{stroke:var(--border);stroke-width:.8}.curve-axis-text{fill:var(--fg-muted);font-weight:500}.curve-axis-label{fill:var(--fg-dim);font-family:var(--font-sans, sans-serif);font-weight:400;letter-spacing:.01em;opacity:.7}.curve-ctrl-p1{stroke:#e879f9;stroke-width:.7;stroke-dasharray:2.5 2;opacity:.5}.curve-ctrl-p2{stroke:#22d3ee;stroke-width:.7;stroke-dasharray:2.5 2;opacity:.5}.curve-path{stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}.curve-anchor{fill:var(--fg-muted);stroke:var(--bg-panel);stroke-width:1}.curve-handle{transition:opacity .12s}.curve-handle-p1{fill:#e879f9;stroke:var(--bg-panel);stroke-width:1.2}.curve-handle-p2{fill:#22d3ee;stroke:var(--bg-panel);stroke-width:1.2}.curve-handle--lit{opacity:1;filter:brightness(1.15)}.curve-coords{display:flex;gap:16px}.curve-coord{display:flex;align-items:center;gap:5px;font-size:var(--font-size-sm);color:var(--fg-dim);transition:color .1s}.curve-coord--lit{color:var(--fg)}.curve-pip{width:7px;height:7px;border-radius:50%;flex-shrink:0}.curve-pip-p1{background:#e879f9}.curve-pip-p2{background:#22d3ee}.curve-preset-groups{display:flex;flex-direction:column;gap:14px}.curve-preset-group-header{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}.curve-preset-group-name{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted)}.curve-preset-group-hint{font-size:12px;color:var(--fg-muted)}.curve-preset-group-add{flex-shrink:0}.curve-preset-row{display:flex;flex-wrap:wrap;gap:6px}.curve-preset{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px 5px;background:var(--surface-raised);border:1px solid var(--border-light);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .12s,background .12s;min-width:60px}.curve-preset:hover{border-color:var(--border);background:var(--surface-hover)}.curve-preset--active{border-color:var(--accent);background:var(--accent-subtle)}.curve-preset-svg{width:40px;height:28px;overflow:visible}.curve-preset-path{stroke:var(--fg-muted);stroke-width:.055;stroke-linecap:round}.curve-preset--active .curve-preset-path{stroke:var(--accent)}.curve-preset-label{font-size:var(--font-size-xs);color:var(--fg-muted);white-space:nowrap}.curve-preset--active .curve-preset-label{color:var(--accent);font-weight:500}.curve-preset{position:relative}.curve-preset-lib-badge{position:absolute;top:3px;right:4px;font-size:var(--font-size-sm);line-height:1;font-weight:700;color:var(--fg-dim)}.curve-preset--in-lib .curve-preset-lib-badge{color:var(--accent)}.curve-preset--in-lib{border-color:var(--accent-alpha, rgba(59, 130, 246, .3));background:var(--accent-alpha, rgba(59, 130, 246, .04))}.curve-preset--in-lib .curve-preset-path{stroke:var(--accent);opacity:.5}.curve-desc-tooltip{font-size:var(--font-size-xs);color:var(--fg-muted);padding:4px 6px;background:var(--bg-subtle);border-radius:4px;margin-top:6px;min-height:24px;line-height:1.5}.motion-preview-header.shadow-detail-header{align-items:flex-start}.motion-preview-reset-btn{flex-shrink:0}.motion-preview-token-status{font-size:var(--font-size-xs);color:var(--fg-muted);font-style:italic;white-space:nowrap}.motion-preview-add-token-btn{flex-shrink:0}.curve-preview-slot{display:flex;flex-direction:column;gap:8px;padding-top:2px}.curve-preview-slot .preview-control{justify-content:flex-end}.duration-editor{display:flex;flex-direction:column;gap:20px}.duration-slider-wrap{position:relative;max-width:480px;padding-bottom:32px}.duration-slider-track-fill{position:absolute;top:50%;left:0;height:3px;transform:translateY(-50%);background:var(--accent);border-radius:2px;pointer-events:none;z-index:1;margin-top:-9px;max-width:100%}.duration-slider{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;border-radius:2px;background:var(--border);outline:none;cursor:pointer;position:relative;z-index:2}.duration-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:grab;border:2px solid var(--bg);box-shadow:0 0 0 1.5px var(--accent)}.duration-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:grab;border:2px solid var(--bg)}.duration-marks{position:absolute;top:10px;left:0;right:0;pointer-events:none}.duration-mark{position:absolute;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:none;padding:2px 0;cursor:pointer;pointer-events:all}.duration-mark-tick{width:1px;height:5px;background:var(--border);display:block}.duration-mark--active .duration-mark-tick{background:var(--accent);height:7px}.duration-mark-label{font-size:var(--font-size-2xs);color:var(--fg-dim);white-space:nowrap;opacity:0;transition:opacity .12s ease;-webkit-user-select:none;user-select:none}.duration-mark--active .duration-mark-label{color:var(--accent);font-weight:600;opacity:1}.duration-mark:hover .duration-mark-label{opacity:1}.duration-value-row{display:flex;align-items:center;gap:6px}.duration-value-input{width:72px;padding:6px 8px;font-size:var(--font-size-label);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--fg);text-align:right}.duration-value-input:focus{border-color:var(--accent);outline:none}.duration-unit{font-size:var(--font-size-md);color:var(--fg-dim)}.duration-ref{font-size:var(--font-size-sm);color:var(--fg-dim);padding:4px 8px;background:var(--surface-raised);border-radius:var(--radius-sm);border:1px solid var(--border-light)}.motion-preview-section{display:flex;flex-direction:column;gap:10px}.motion-preview-bar{display:flex;align-items:center;gap:8px}.motion-preview-title{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.07em}.preview-control{display:flex;align-items:center;gap:6px;margin-left:auto;overflow:hidden;min-width:0}.preview-control-label{font-size:var(--font-size-sm);color:var(--fg-dim)}.preview-control-select{font-size:var(--font-size-sm);padding:3px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--fg);max-width:140px;overflow:hidden;text-overflow:ellipsis}.motion-preview{display:flex;flex-direction:column;gap:8px}.motion-preview-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}.motion-preview-toolbar--with-actions .motion-preview-replay{align-self:center}.motion-preview-track{position:relative;height:44px;background:var(--surface-raised);border-radius:22px;border:1px solid var(--border-light);overflow:hidden;max-width:240px}.motion-preview-ball{position:absolute;top:50%;left:7px;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--accent)}.motion-preview-ball--fwd{left:calc(100% - 31px)}.motion-preview-ball--back{left:7px}.motion-preview-replay{display:inline-flex;align-items:center;gap:5px;color:var(--fg-muted);font-size:var(--font-size-sm)}.mtr-root{margin-top:28px;border-top:1px solid var(--border-light);padding-top:20px}.mtr-header{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}.mtr-title{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.07em}.mtr-subtitle{font-size:var(--font-size-xs);color:var(--fg-muted)}.mtr-section{margin-bottom:20px}.mtr-section-label{font-size:var(--font-size-xs);font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.mtr-table{width:100%;border-collapse:collapse;font-size:var(--font-size-md)}.mtr-table th{text-align:left;font-size:var(--font-size-xs);font-weight:500;color:var(--fg-muted);padding:4px 8px 6px;border-bottom:1px solid var(--border-light);white-space:nowrap}.mtr-table th:first-child{padding-left:0}.mtr-row{cursor:pointer;transition:background .1s}.mtr-row:hover{background:var(--surface-hover)}.mtr-row--active{background:color-mix(in srgb,var(--accent) 7%,transparent)}.mtr-row td{padding:7px 8px;vertical-align:middle;border-bottom:1px solid var(--border-light)}.mtr-row td:first-child{padding-left:0}.mtr-token-name{font-size:var(--font-size-md);color:var(--fg);background:none;padding:0;white-space:nowrap}.mtr-value{font-size:var(--font-size-xs);color:var(--fg-dim);background:var(--surface-raised);padding:2px 5px;border-radius:3px;display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.mtr-curve-svg{width:36px;height:36px;display:block}.mtr-curve-path{stroke:var(--accent);stroke-width:.06;stroke-linecap:round}.mtr-duration-bar-wrap{display:flex;align-items:center;gap:8px;min-width:100px}.mtr-duration-bar{height:3px;background:var(--accent);border-radius:2px;min-width:2px;transition:width .2s ease}.mtr-duration-scale{font-size:var(--font-size-xs);color:var(--fg-muted);white-space:nowrap}.mtr-preview-wrap{position:relative;display:flex;align-items:center;gap:6px}.mtr-preview-track{position:relative;width:88px;height:22px;background:var(--surface-raised);border-radius:11px;border:1px solid var(--border-light);overflow:hidden}.mtr-preview-ball{position:absolute;top:50%;left:3px;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--accent);transition-property:left}.mtr-preview-ball--run{left:calc(100% - 15px)}.mtr-preview-hint{font-size:var(--font-size-2xs);color:var(--fg-muted);opacity:.7;pointer-events:none}.elevation-ladder{margin-bottom:16px}.elevation-ladder-hint{font-size:var(--font-size-md);color:var(--fg-muted);margin:0 0 12px;line-height:1.4}.elevation-ladder-surface{display:flex;justify-content:center;gap:24px;padding:32px 24px;background:var(--bg);border-radius:var(--radius-lg);border:1px solid var(--border-light);background-image:radial-gradient(circle at 50% 40%,rgba(0,0,0,.02),transparent 70%)}[data-theme=dark] .elevation-ladder-surface{background:var(--bg-subtle);background-image:radial-gradient(circle at 50% 40%,rgba(255,255,255,.02),transparent 70%)}.elevation-card{width:96px;height:96px;background:var(--bg-panel);border-radius:var(--radius-md);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}[data-theme=dark] .elevation-card{background:var(--bg-preview, var(--bg-panel))}.elevation-card:hover{transform:scale(1.05)}.elevation-card--selected{outline:2px solid var(--accent);outline-offset:2px}.elevation-card--none{border:2px dashed var(--border)}.elevation-card-name{font-size:var(--font-size-sm);color:var(--fg-muted)}.shadow-detail{display:flex;gap:24px;padding:20px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:16px;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.shadow-detail-preview{width:160px;height:160px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:var(--radius-md);flex-shrink:0}.shadow-detail-card{width:96px;height:96px;background:var(--bg-panel);border-radius:var(--radius-md);transition:box-shadow .15s ease}[data-theme=dark] .shadow-detail-card{background:var(--bg-preview, var(--bg-panel));border:1px solid var(--border-preview, var(--border-light));box-sizing:border-box}.focus-ring-detail-preview-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);color:var(--fg);transition:outline-color .15s ease,outline-width .15s ease}.shadow-detail-controls{flex:1;display:flex;flex-direction:column;gap:8px}.shadow-detail-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}.shadow-detail-header .shadow-detail-title{margin-bottom:0}.shadow-detail-header .token-detail-actions{margin-top:0}.shadow-color-picker-wrap{margin-top:8px;position:relative}.shadow-detail-color-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.shadow-detail-color-row .slider-control-label{margin-right:0}.shadow-detail-color-swatch{width:36px;height:28px;padding:2px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:var(--bg)}.shadow-detail-color-swatch::-webkit-color-swatch-wrapper{padding:0}.shadow-detail-color-swatch::-webkit-color-swatch{border:none;border-radius:3px}.shadow-layer-block{padding:12px;background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-md);margin-top:8px}.shadow-layer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.shadow-layer-title{font-size:var(--font-size-md);font-weight:600;color:var(--fg-muted)}.shadow-add-layer{display:inline-flex;align-items:center;gap:6px;margin-top:8px;width:fit-content}.btn-icon--sm{padding:4px}.btn-icon--sm svg{display:block}.shadow-detail-title{font-size:var(--font-size-label);font-weight:600;color:var(--fg);margin-bottom:4px}.slider-control{display:flex;align-items:center;gap:8px}.slider-control-label{min-width:60px;font-size:var(--font-size-md);font-weight:500;color:var(--fg-muted)}.slider-control-range{flex:1;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}.slider-control-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fg);cursor:pointer;transition:background .1s}.slider-control-range::-webkit-slider-thumb:hover{background:var(--accent)}.slider-control-value{min-width:48px;text-align:right;font-size:var(--font-size-md);color:var(--fg-dim)}.shadow-detail-css{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-light);display:flex;align-items:baseline;gap:8px}.shadow-detail-css-label{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--fg-dim);font-weight:500}.shadow-detail-css-value{font-size:var(--font-size-sm);color:var(--fg-muted);word-break:break-all}.border-detail .shadow-detail-card{border:inherit;box-shadow:none}.border-detail-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.border-detail-row .color-mini-swatch{flex-shrink:0}.border-detail-label{min-width:56px;font-size:var(--font-size-md);color:var(--fg-dim)}.border-detail-color-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative}.border-detail-color-wrap .add-token-input{flex:1;min-width:120px}.border-detail-picker-btn{flex-shrink:0}.ai-variable-picker-anchor{position:relative;flex-shrink:0}.border-picker-wrap{position:absolute;top:100%;left:0;z-index:10;margin-top:4px;box-shadow:var(--shadow-md);border-radius:var(--radius-md);overflow:hidden}.haptic-preview-card{position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #0000001a;touch-action:manipulation}.haptic-preview-play-btn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:48px;min-height:48px;padding:0;border:none;border-radius:inherit;background:transparent;color:var(--fg);cursor:pointer;transition:background .15s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.haptic-preview-play-btn:hover:not(:disabled){background:#0000000d}.haptic-preview-play-btn:active:not(:disabled){background:#00000014}.haptic-preview-play-btn:disabled{cursor:default;opacity:.6}.haptic-preview-card--anim-pulse-light{animation:haptic-pulse-light .35s ease-out}.haptic-preview-card--anim-pulse-medium{animation:haptic-pulse-medium .4s ease-out}.haptic-preview-card--anim-pulse-heavy{animation:haptic-pulse-heavy .5s ease-out}.haptic-preview-card--anim-tap{animation:haptic-tap .2s ease-out}.haptic-preview-card--anim-success{animation:haptic-success .45s ease-out}.haptic-preview-card--anim-shake{animation:haptic-shake .4s ease-out}.haptic-preview-card--anim-shake-double{animation:haptic-shake-double .55s ease-out}.haptic-preview-card--anim-buzz{animation:haptic-buzz .5s ease-out}.haptic-preview-card--anim-pulse{animation:haptic-pulse-light .35s ease-out}@keyframes haptic-buzz{0%,to{transform:translate(0) scale(1)}6%{transform:translate(-3px) scale(1.02)}12%{transform:translate(3px) scale(.99)}18%{transform:translate(-2px) scale(1.01)}24%{transform:translate(2px) scale(1)}30%{transform:translate(-2px) scale(1)}36%{transform:translate(2px) scale(1)}42%{transform:translate(-1px) scale(1)}48%{transform:translate(1px) scale(1)}54%{transform:translate(-1px) scale(1)}60%{transform:translate(1px) scale(1)}66%{transform:translate(-1px) scale(1)}72%{transform:translate(1px) scale(1)}78%{transform:translate(-.5px) scale(1)}84%{transform:translate(.5px) scale(1)}90%{transform:translate(-.5px) scale(1)}96%{transform:translate(.5px) scale(1)}}.haptic-ladder-surface{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}.haptics-split{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}.haptics-split-cards{min-width:0}.haptic-ladder-item{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:96px}.haptic-ladder-card{width:96px;height:96px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #0000001a;cursor:pointer;transition:transform .15s ease,outline-color .15s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.haptic-ladder-card:hover{transform:scale(1.03)}.haptic-ladder-card:active{transform:scale(.98)}.haptic-ladder-card--selected{outline:2px solid var(--accent);outline-offset:2px}.haptic-ladder-label{text-align:center;min-height:20px}.haptic-ladder-name{font-size:var(--font-size-sm);color:var(--fg-muted)}.haptic-ladder-name-input{width:90px;font-size:var(--font-size-sm);text-align:center;padding:2px 6px;border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--bg-panel);color:var(--fg)}@keyframes haptic-pulse-light{0%{transform:scale(1)}25%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes haptic-pulse-medium{0%{transform:scale(1)}20%{transform:scale(1.06)}50%{transform:scale(.98)}to{transform:scale(1)}}@keyframes haptic-pulse-heavy{0%{transform:scale(1)}15%{transform:scale(1.1)}40%{transform:scale(.95)}70%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes haptic-tap{0%{transform:scale(1)}40%{transform:scale(.97)}to{transform:scale(1)}}@keyframes haptic-success{0%{transform:scale(1);box-shadow:0 1px 3px #0000000f}30%{transform:scale(1.04);box-shadow:0 2px 8px #22c55e40}to{transform:scale(1);box-shadow:0 1px 3px #0000000f}}@keyframes haptic-shake{0%,to{transform:translate(0)}15%{transform:translate(-4px)}35%{transform:translate(4px)}55%{transform:translate(-3px)}75%{transform:translate(2px)}}@keyframes haptic-shake-double{0%,to{transform:translate(0)}10%{transform:translate(-5px)}25%{transform:translate(5px)}40%{transform:translate(-4px)}50%{transform:translate(0)}60%{transform:translate(-4px)}75%{transform:translate(4px)}90%{transform:translate(-2px)}}.haptic-strength-bars{display:flex;align-items:flex-end;gap:4px;height:18px}.haptic-strength-bar{width:6px;min-height:4px;border-radius:2px;background:var(--fg-muted);transition:opacity .15s ease}.haptic-pattern-tooltip-wrap{position:relative}.haptic-pattern-tooltip-slot{min-height:44px;margin-bottom:4px;display:flex;align-items:center}.haptic-pattern-tooltip{padding:8px 12px;font-size:12px;line-height:1.4;color:var(--fg);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 2px 8px #0000001a;width:100%;box-sizing:border-box}.haptic-pattern-tooltip strong{color:var(--fg);font-weight:600}.haptic-pattern-grid{display:flex;flex-direction:column;gap:16px}.haptic-pattern-group{display:flex;flex-direction:column;gap:8px}.haptic-pattern-group-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted)}.haptic-pattern-cards{display:flex;flex-wrap:wrap;gap:8px}.haptic-pattern-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:72px;padding:12px 10px;background:var(--bg-panel);border:1px solid var(--border-light);border-radius:var(--radius-md);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .1s ease}.haptic-pattern-card:hover{border-color:var(--border);background:var(--bg-elevated)}.haptic-pattern-card--selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:0 0 0 1px var(--accent)}.haptic-pattern-card-visual{display:flex;align-items:center;justify-content:center;min-height:24px}.haptic-pattern-card-label{font-size:12px;font-weight:500;color:var(--fg)}:root{--radius-marker: var(--accent)}.radius-ladder-surface{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}.radius-ladder-item{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:96px}.radius-card{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,outline-color .15s ease}.radius-card:hover{transform:scale(1.03)}.radius-card--selected{outline:2px solid var(--accent);outline-offset:2px}.radius-card-arc{position:absolute;bottom:0;right:0;color:var(--radius-marker);pointer-events:none}.radius-card-labels{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.radius-card-token-name{font-size:var(--font-size-sm);color:var(--fg-muted)}.radius-card-name-input{font-size:var(--font-size-sm);padding:2px 6px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-panel);width:100%;max-width:100px;text-align:center}.radius-optical-roundness{margin-bottom:20px;padding:16px 20px;background:var(--bg-subtle);border:1px solid var(--border-light);border-radius:var(--radius-md)}.radius-optical-title{font-size:var(--font-size-label);font-weight:600;margin:0 0 4px;color:var(--fg)}.radius-optical-desc{font-size:var(--font-size-sm);color:var(--fg-muted);margin:0 0 16px;line-height:1.4;max-width:480px}.radius-optical-visual{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}.radius-optical-diagram{position:relative;width:140px;height:140px;flex-shrink:0;margin-top:20px;margin-bottom:20px}.radius-optical-outer{position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--border-strong);background:var(--bg-panel);overflow:hidden}.radius-optical-inner{position:absolute;top:0;right:0;bottom:0;left:0;border:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);display:flex;align-items:center;justify-content:center}.radius-optical-label-outer{position:absolute;top:-20px;left:0;font-size:10px;font-weight:500;color:var(--fg-muted);white-space:nowrap}.radius-optical-label-padding{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:10px;color:var(--fg-dim);white-space:nowrap}.radius-optical-label-inner{font-size:10px;font-weight:500;color:var(--accent);white-space:nowrap}.radius-optical-calc{display:flex;flex-direction:column;gap:8px;min-width:240px}.radius-optical-formula{font-size:var(--font-size-xs);color:var(--fg-dim);margin-bottom:4px}.radius-optical-row{display:flex;align-items:center;gap:8px}.radius-optical-row-label{width:56px;font-size:var(--font-size-sm);color:var(--fg-muted);flex-shrink:0}.radius-optical-input{width:64px;min-width:0;padding:4px 8px;font-size:var(--font-size-sm);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);font-family:var(--font-mono)}.radius-optical-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}.radius-optical-unit{font-size:var(--font-size-xs);color:var(--fg-dim)}.radius-optical-minus,.radius-optical-eq{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted);width:16px;text-align:center;flex-shrink:0}.radius-optical-divider{border:none;border-top:1px solid var(--border-light);margin:2px 0}.radius-optical-result{font-size:var(--font-size-sm);color:var(--fg)}.radius-optical-save-row{display:flex;align-items:center;gap:6px;padding-top:4px}.radius-optical-save-input{width:120px;min-width:0;padding:4px 8px;font-size:var(--font-size-sm);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);font-family:var(--font-mono)}.radius-optical-save-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}.radius-optical-saved{font-size:var(--font-size-sm);color:var(--color-success, #22c55e);margin:0;animation:radius-saved-fade 2.5s ease forwards}@keyframes radius-saved-fade{0%{opacity:1}70%{opacity:1}to{opacity:0}}.radius-detail-preview-wrap{position:relative}.radius-detail-preview-box{display:flex;align-items:center;justify-content:center}.radius-row-preview{position:relative;min-width:28px;min-height:28px;flex-shrink:0;display:block;box-sizing:border-box}.radius-row-preview--corner{border-top:none!important;border-right:none!important}.radius-row-preview-arc{position:absolute;bottom:0;right:0;color:var(--radius-marker);pointer-events:none}.radius-detail .radius-detail-preview-box{width:96px;height:96px;transition:border-radius .15s ease}.radius-detail-controls{display:flex;flex-direction:column;gap:12px}.radius-detail-controls .slider-control{margin-bottom:0}.radius-detail-input-row{display:flex;align-items:center;gap:8px}.radius-detail-label{min-width:56px;font-size:var(--font-size-md);color:var(--fg-dim)}.radius-detail-input-row .add-token-input{width:80px}.radius-scale-actions{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.radius-scale-hint{font-size:var(--font-size-sm);color:var(--fg-dim)}.add-token-form-value-label{display:flex;align-items:center;gap:8px}.add-token-form-value-label span{font-size:var(--font-size-md);color:var(--fg-muted);white-space:nowrap}.add-token-input--number{width:72px}.opacity-ladder-surface{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end}.opacity-ladder-item{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:96px}.opacity-ladder-card{width:96px;height:96px;border-radius:var(--radius-md);background:var(--accent);border:2px solid transparent;cursor:pointer;transition:border-color .15s,box-shadow .15s}.opacity-ladder-card:hover{border-color:var(--border)}.opacity-ladder-card--selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--bg)}.opacity-ladder-labels{text-align:center}.opacity-ladder-name-input{width:100%;max-width:96px;padding:2px 6px;font-size:var(--font-size-sm);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg)}.opacity-ladder-token-name{font-size:var(--font-size-sm);color:var(--fg-muted);display:block}.opacity-detail-panel{margin-bottom:16px}.opacity-detail-preview-wrap{position:relative}.opacity-detail-preview-box{width:96px;height:96px;border-radius:var(--radius-md);background:var(--accent);border:1px solid var(--border-light);transition:opacity .15s ease}.opacity-detail-controls{display:flex;flex-direction:column;gap:12px}.opacity-detail-controls .slider-control{margin-bottom:0}.opacity-detail-input-row{display:flex;align-items:center;gap:8px}.opacity-detail-label{min-width:56px;font-size:var(--font-size-md);color:var(--fg-dim)}.opacity-detail-input-row .add-token-input{width:80px}.opacity-detail-unit{font-size:var(--font-size-sm);color:var(--fg-muted);white-space:nowrap}.opacity-detail-hint{font-size:var(--font-size-sm);color:var(--fg-dim);margin:8px 0 0;line-height:1.4}.opacity-value-percent{color:var(--fg-muted);font-weight:400}.opacity-row-preview{width:32px;height:28px;min-width:32px;min-height:28px;flex-shrink:0;border-radius:6px;background:var(--accent);border:1px solid var(--border-light);cursor:pointer;transition:opacity .15s ease,border-color .15s}.opacity-row-preview:hover{border-color:var(--accent)}.gradient-list{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.gradient-list-item{cursor:pointer;border-radius:8px;overflow:hidden;border:2px solid transparent;transition:border-color .15s}.gradient-list-item:hover{border-color:var(--border)}.gradient-list-item--selected{border-color:var(--accent)}.gradient-list-item .elevation-card-name{display:block;padding:4px 8px;font-size:var(--font-size-sm);background:var(--bg-elevated)}.gradient-textarea{width:100%;margin-top:4px;padding:8px;font-size:var(--font-size-md);resize:vertical;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--fg)}.gradient-hint{font-size:var(--font-size-sm);color:var(--fg-dim);margin-top:6px}.gradient-detail-preview{min-height:80px}.gradient-detail--structured .shadow-detail-controls{display:flex;flex-direction:column;gap:12px}.gradient-field{display:flex;flex-direction:column;gap:4px}.gradient-field .gradient-angle-input{margin-top:4px;max-width:140px}.gradient-stops-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.gradient-stops-list{display:flex;flex-direction:column;gap:8px}.gradient-stop-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;background:var(--bg-hover);border-radius:var(--radius-sm);position:relative}.gradient-stop-swatch{width:28px;height:28px;border-radius:4px;flex-shrink:0;border:1px solid var(--border)}.gradient-stop-color{flex:1;min-width:120px}.gradient-stop-position{width:52px;text-align:center}.gradient-picker-wrap{position:absolute;top:100%;left:0;z-index:10;margin-top:4px}.focus-ring-strip{width:48px;height:48px;border-radius:6px;background:var(--bg-elevated)}.focus-ring-preview-area{margin-top:16px;padding:16px;background:var(--bg-panel);border-radius:var(--radius-md)}.focus-ring-preview-hint{font-size:var(--font-size-md);color:var(--fg-dim);margin-bottom:12px}.focus-ring-preview-btn{padding:10px 20px;font-size:var(--font-size-base);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg);color:var(--fg);cursor:pointer;transition:outline .1s ease,outline-offset .1s ease}.focus-ring-preview-area--compact{margin-top:0;padding:6px 8px;width:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:transparent}.focus-ring-preview-area--compact .focus-ring-preview-btn{padding:10px 20px;font-size:var(--font-size-base)}.focus-ring-cards-hint{font-size:var(--font-size-md);color:var(--fg-muted);margin:0 0 12px;line-height:1.4}.focus-ring-cards-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:24px;padding:24px;margin-bottom:16px;background:var(--bg);border-radius:var(--radius-lg);border:1px solid var(--border-light)}.focus-ring-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .15s ease}.focus-ring-item:hover{transform:scale(1.05)}.focus-ring-item--selected{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}.focus-ring-item-name-wrap{display:flex;align-items:center;justify-content:center}.focus-ring-item-name{font-size:var(--font-size-sm);color:var(--fg-muted)}.focus-ring-item-name-input{width:100%;min-width:60px;padding:2px 6px;font-size:var(--font-size-sm);border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);text-align:center}.shadow-token-list{margin-top:12px}.shadow-token-row{display:flex;align-items:center;gap:12px;padding:6px 8px;border-bottom:1px solid var(--border-light)}.shadow-token-row:last-child{border-bottom:none}.shadow-token-name{min-width:60px;font-size:var(--font-size-md);color:var(--fg)}.shadow-token-css{flex:1;font-size:var(--font-size-sm);color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.radius-flow{display:flex;flex-direction:column;gap:20px}.radius-flow-row{display:flex;align-items:flex-start;gap:24px}.radius-flow-fields{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0}.radius-flow-fields .radius-controls{margin-bottom:0;padding:10px 14px}.radius-flow-fields .radius-form-inline{margin-top:4px}.radius-flow-fields .btn{align-self:flex-start;margin-top:4px}.radius-preview-square{position:relative;width:72px;height:72px;flex-shrink:0;background:var(--bg);border:2px solid var(--accent-border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:border-radius .15s ease}.radius-preview-value{font-size:var(--font-size-lg);font-weight:600;color:var(--accent)}.radius-preview-label{font-size:var(--font-size-sm);color:var(--fg-muted)}.radius-form-inline{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}.radius-form-inline-label{font-size:var(--font-size-sm);color:var(--fg-muted);margin:0}.radius-form-inline-input{font-size:var(--font-size-sm);padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);min-width:0}.radius-form-inline-input--name{width:88px}.radius-form-inline-input--desc{width:150px}.radius-form-inline-input:focus{outline:none;border-color:var(--accent)}.radius-form-inline .radius-current-name{font-size:var(--font-size-sm);color:var(--fg)}.radius-current-name{font-size:var(--font-size-md);color:var(--fg)}.radius-token-value-input{width:56px;padding:2px 6px;border:1px solid var(--accent);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg-panel);color:var(--fg);outline:none;font-family:var(--font-mono)}.radius-spectrum{margin-bottom:16px}.radius-spectrum-shapes{display:flex;justify-content:center;gap:20px;padding:24px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg)}.radius-shape{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}.radius-shape-box{position:relative;width:72px;height:72px;background:var(--accent-subtle-sm);border:2px solid var(--accent-border);display:flex;align-items:center;justify-content:center;transition:border-color .1s,transform .1s,border-radius .15s ease}.radius-shape:hover .radius-shape-box{border-color:var(--accent);transform:translateY(-2px)}.radius-shape--selected .radius-shape-box{box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}.radius-shape-value{font-size:var(--font-size-label);font-weight:600;color:var(--accent)}.radius-shape-name{font-size:var(--font-size-sm);color:var(--fg-muted)}.token-detail-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.token-detail-actions--end{justify-content:flex-end}.token-description-row{margin-top:12px;display:flex;flex-direction:column;gap:4px}.token-description-label{font-size:var(--font-size-md);font-weight:500;color:var(--fg-muted)}.token-description-input{min-width:0}.radius-controls{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-hover);border-radius:var(--radius-md);margin-bottom:16px}.radius-slider{flex:0 1 auto;width:140px;max-width:160px;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}.radius-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}.radius-input{width:56px;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);text-align:right;background:var(--bg-panel);color:var(--fg)}.radius-input:focus{outline:none;border-color:var(--accent)}.radius-unit{font-size:var(--font-size-sm);color:var(--fg-dim);font-family:var(--font-mono)}.radius-token-list{margin-top:12px}.radius-token-list-hint{font-size:var(--font-size-sm);color:var(--fg-muted);margin:0 0 8px}.radius-token-list-hint strong{color:var(--fg)}.radius-token-row{display:flex;align-items:center;gap:12px;padding:6px 8px;border-bottom:1px solid var(--border-light)}.radius-token-row:last-child{border-bottom:none}.radius-token-name{min-width:100px;font-size:var(--font-size-md);color:var(--fg)}.radius-token-value{flex:1;font-size:var(--font-size-md);color:var(--fg-dim)}.radius-token-list--semantic-style{display:flex;flex-direction:column;gap:2px}.radius-token-row--semantic-style{display:grid;grid-template-columns:40px 1fr 1.5fr auto;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--radius-sm);transition:background .1s}.radius-token-row--semantic-style:hover{background:var(--bg-hover)}.radius-token-row--semantic-style.radius-token-row--selected{background:var(--bg-selected)}.radius-token-preview-wrap{display:flex;align-items:center}.radius-token-preview-swatch{width:32px;height:32px;flex-shrink:0;background:var(--accent-subtle-sm);border:2px solid var(--accent-border);cursor:pointer;transition:border-color .15s}.radius-token-preview-swatch:hover{border-color:var(--accent)}.radius-token-row--selected .radius-token-preview-swatch{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.radius-token-name-col{min-width:0}.radius-token-row--semantic-style .radius-token-name{font-size:var(--font-size-label);font-weight:500;cursor:pointer;min-width:0}.radius-token-row--semantic-style .radius-token-name:hover{text-decoration:underline dotted var(--fg-dim);text-underline-offset:3px}.radius-token-rename-input{font-size:var(--font-size-label);font-weight:500;padding:2px 6px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-panel);width:100%;outline:none;font-family:var(--font-mono)}.radius-token-value-col{min-width:0}.radius-token-ref{font-size:var(--font-size-sm);color:var(--fg-dim);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.radius-token-row--semantic-style .radius-token-value-input{width:64px;padding:2px 6px;font-size:var(--font-size-sm)}.radius-token-actions{display:flex;gap:2px;opacity:0;transition:opacity .1s}.radius-token-row--semantic-style:hover .radius-token-actions{opacity:1}.border-token-list{margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light)}.border-token-list-hint{font-size:var(--font-size-sm);color:var(--fg-muted);margin:0 0 8px}.border-token-list-hint strong{color:var(--fg)}.border-token-row{display:grid;grid-template-columns:40px 1fr 1.5fr auto;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--radius-sm);transition:background .1s;border-bottom:1px solid var(--border-light)}.border-token-row:last-child{border-bottom:none}.border-token-row:hover{background:var(--bg-hover)}.border-token-row--selected{background:var(--bg-selected)}.border-token-preview-swatch{width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-sm);background:var(--bg-panel);cursor:pointer;box-sizing:border-box}.border-token-preview-swatch:hover,.border-token-row--selected .border-token-preview-swatch{outline:2px solid var(--accent);outline-offset:1px}.border-token-name-col{min-width:0}.border-token-name{font-size:var(--font-size-label);font-weight:500;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border-token-name:hover{text-decoration:underline dotted var(--fg-dim);text-underline-offset:3px}.border-token-value-col{min-width:0}.border-token-ref{font-size:var(--font-size-sm);color:var(--fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border-token-actions{display:flex;gap:2px;opacity:0;transition:opacity .1s}.border-token-row:hover .border-token-actions{opacity:1}.color-token-list-section{margin-top:16px}.color-token-list-section:first-of-type{margin-top:12px}.color-token-list-section-header{display:flex;align-items:center;gap:8px;width:100%;padding:8px 0;font-size:var(--font-size-md);font-weight:600;color:var(--fg);background:none;border:none;cursor:pointer;text-align:left}.color-token-list-section-header:hover{color:var(--accent)}.color-token-list-chevron{flex-shrink:0;transition:transform .15s}.color-token-list-chevron--open{transform:rotate(0)}.color-token-list-chevron:not(.color-token-list-chevron--open){transform:rotate(-90deg)}.color-token-list-section-count{margin-left:auto;font-size:var(--font-size-sm);font-weight:500;color:var(--fg-dim)}.foundation-token-list--nested{margin-top:4px;padding-top:4px;border-top:none;padding-left:0}.foundation-token-list{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-light);display:flex;flex-direction:column;gap:2px}.foundation-token-list-hint{font-size:var(--font-size-sm);color:var(--fg-muted);margin:0 0 8px}.foundation-token-list-hint strong{color:var(--fg)}.foundation-token-list--motion .foundation-token-row{grid-template-columns:minmax(180px,1fr) 1fr 40px auto;position:relative}.foundation-token-list--motion .foundation-token-row--with-scope{grid-template-columns:minmax(180px,1fr) 1fr 40px minmax(90px,auto) auto}.foundation-token-list--motion .foundation-token-preview{min-width:40px;width:40px;overflow:visible}.motion-step-section{margin-bottom:24px}.motion-step-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.motion-step-title{font-size:var(--font-size-md);font-weight:600;color:var(--fg);margin:0;flex:1}.motion-step-count{font-size:var(--font-size-xs);color:var(--fg-dim);background:var(--bg-subtle);border:1px solid var(--border-light);border-radius:10px;padding:1px 7px}.motion-step-add-btn{margin-left:4px}.motion-step-section .ctn-step-hint{padding:0 0 10px;margin:0;color:var(--fg-muted);font-size:var(--font-size-base)}.motion-add-curve-preview{flex-shrink:0;width:48px;height:48px;border-radius:8px;background:var(--bg-subtle);border:1px solid var(--border-light);overflow:visible}.motion-dur-inline-list{display:flex;flex-direction:column}.motion-dur-inline-row{display:grid;grid-template-columns:76px 1fr 52px 24px 76px 26px;align-items:center;gap:10px;padding:7px 0;height:38px;border-bottom:1px solid var(--border-light)}.motion-dur-inline-row:last-child{border-bottom:none}.motion-dur-inline-name{font-size:var(--font-size-xs);color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.motion-dur-inline-slider{width:100%;height:4px;accent-color:var(--accent);cursor:pointer;display:block;flex-shrink:0;align-self:center}.motion-dur-inline-input{width:100%;height:28px;padding:0 6px;border:1px solid var(--border);border-radius:6px;font-size:var(--font-size-xs);background:var(--bg-base);color:var(--fg);text-align:right}.motion-dur-inline-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}.motion-dur-unit-label{font-size:var(--font-size-xs);color:var(--fg-muted)}.motion-dur-delete-btn{width:24px;height:24px;border:none;background:transparent;color:var(--fg-dim);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}.motion-dur-delete-btn:hover{background:var(--color-red-alpha, rgba(239, 68, 68, .1));color:var(--color-red, #ef4444)}.motion-dur-inline-row .mtr-preview-wrap{display:flex!important;position:static!important;transform:none!important;background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;gap:0!important;width:76px;flex-shrink:0}.motion-dur-inline-row .mtr-preview-track{width:56px;height:14px;border-radius:7px}.motion-dur-inline-row .mtr-preview-ball{width:10px;height:10px}.motion-dur-inline-row .mtr-preview-ball--run{left:calc(100% - 12px)}.motion-dur-inline-row .mtr-preview-hint{display:none}.motion-easing-gallery{display:flex;flex-direction:column;gap:16px;margin-bottom:12px}.motion-easing-gallery-group{display:flex;flex-direction:column;gap:8px}.motion-easing-gallery-group-hdr{display:flex;align-items:baseline;gap:8px}.motion-easing-gallery-group-name{font-size:var(--font-size-sm);font-weight:600;color:var(--fg)}.motion-easing-gallery-group-hint{font-size:var(--font-size-xs);color:var(--fg-muted)}.motion-easing-gallery-add-all{margin-left:auto}.motion-easing-gallery-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.motion-easing-gallery-tooltip{font-size:var(--font-size-xs);color:var(--fg-muted);margin:4px 0 0}.motion-easing-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 8px 8px;width:100%;border:1.5px solid var(--border-light);border-radius:10px;background:var(--bg-base);cursor:pointer;transition:border-color .14s,background .14s,box-shadow .14s;position:relative}.motion-easing-card:hover{border-color:var(--accent);background:var(--accent-alpha, rgba(59, 130, 246, .06));box-shadow:0 0 0 3px var(--accent-alpha, rgba(59, 130, 246, .12))}.motion-easing-card--added{border-color:var(--accent);background:var(--accent-alpha, rgba(59, 130, 246, .06))}.motion-easing-card--selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-alpha, rgba(59, 130, 246, .18));background:var(--accent-alpha, rgba(59, 130, 246, .1))}.motion-easing-card-svg{width:44px;height:44px}.motion-easing-card-svg .curve-preset-path{stroke-width:.07}.motion-easing-card-label{font-size:12px;color:var(--fg-muted);text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.motion-easing-card--added .motion-easing-card-label{color:var(--accent);font-weight:500}.motion-easing-card-badge{position:absolute;top:5px;right:6px;font-size:11px;line-height:1;color:var(--fg-dim);font-weight:600}.motion-easing-card-badge--added{color:var(--accent)}.motion-easing-custom-btn{align-self:flex-start;margin-top:4px}.motion-easing-editor-panel{margin-top:16px}.motion-dur-gallery-wrap{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}.motion-dur-gallery-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.motion-dur-gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.motion-dur-tile{display:flex;flex-direction:column;gap:5px;padding:10px 10px 8px;border:1.5px solid var(--border-light);border-radius:10px;background:var(--bg-base);transition:border-color .14s,background .14s;position:relative;cursor:default;min-width:0}.motion-dur-tile--added{border-color:var(--accent);background:var(--accent-alpha, rgba(59, 130, 246, .06))}.motion-dur-tile-top{display:flex;align-items:baseline;justify-content:space-between;gap:4px}.motion-dur-tile-name{font-size:var(--font-size-xs);font-weight:600;color:var(--fg)}.motion-dur-tile--added .motion-dur-tile-name{color:var(--accent)}.motion-dur-tile-ms{font-size:12px;color:var(--fg-muted)}.motion-dur-tile-bar-track{height:5px;border-radius:3px;background:var(--border-light, #e5e7eb);overflow:hidden}.motion-dur-tile-bar-fill{height:100%;border-radius:3px;background:var(--accent, #3b82f6);opacity:.5;transition:opacity .14s}.motion-dur-tile--added .motion-dur-tile-bar-fill{opacity:.85}.motion-dur-tile-check{font-size:12px;font-weight:700;color:var(--accent);align-self:flex-end}.motion-dur-tile-add-btn{align-self:flex-end;width:22px;height:22px;border:1.5px solid var(--border);border-radius:6px;background:var(--bg-base);color:var(--fg-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .12s,color .12s,background .12s}.motion-dur-tile-add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-alpha, rgba(59, 130, 246, .08))}.curve-preset:focus-visible,.motion-dur-tile-add-btn:focus-visible,.motion-easing-card:focus-visible{outline:none;box-shadow:var(--focus-ring)}.motion-dur-tile-preview{min-height:18px}.motion-dur-tile-preview .mtr-preview-wrap{position:static!important;transform:none!important;background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;gap:0!important;display:flex!important;width:100%}.motion-dur-tile-preview .mtr-preview-track{width:100%;height:12px;border-radius:6px}.motion-dur-tile-preview .mtr-preview-ball{width:10px;height:10px}.motion-dur-tile-preview .mtr-preview-ball--run{left:calc(100% - 12px)}.motion-dur-tile-preview .mtr-preview-hint{display:none}.motion-easing-token-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.motion-easing-token-chip{display:inline-flex;align-items:stretch;border-radius:20px;border:1.5px solid var(--border-light);background:var(--bg-base);font-size:var(--font-size-xs);transition:border-color .15s,background .15s;overflow:hidden}.motion-easing-token-chip:hover{border-color:var(--accent);background:var(--accent-subtle, #eff6ff)}.motion-easing-token-chip--active{border-color:var(--accent);background:var(--accent-subtle, #eff6ff);color:var(--accent);font-weight:600}.motion-easing-token-chip-select{display:inline-flex;align-items:center;gap:5px;padding:4px 2px 4px 8px;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;min-width:0}.motion-easing-token-chip-delete{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;border:none;border-left:1px solid var(--border-light);background:transparent;cursor:pointer;color:var(--fg-muted);flex-shrink:0}.motion-easing-token-chip:hover .motion-easing-token-chip-delete,.motion-easing-token-chip--active .motion-easing-token-chip-delete{border-left-color:var(--border-light)}.motion-easing-token-chip-delete:hover{color:var(--danger);background:var(--danger-subtle)}.motion-easing-token-chip-delete:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.motion-easing-chip-svg{width:18px;height:18px}.motion-easing-chip-svg path{stroke:currentColor;stroke-width:.12;stroke-linecap:round}.curve-preset-row{display:flex;flex-wrap:wrap;gap:4px}.curve-preset{flex:0 0 calc(20% - 4px);min-width:52px}.motion-add-form{background:var(--bg-subtle);border:1px solid var(--border);border-radius:10px;padding:14px 16px 12px;margin:0 0 16px;display:flex;flex-direction:column;gap:10px}.motion-add-chips{display:flex;flex-wrap:wrap;gap:6px}.motion-add-chip{padding:3px 10px;border-radius:20px;border:1px solid var(--border);background:var(--bg-base);font-size:var(--font-size-xs);cursor:pointer;color:var(--fg-muted);transition:border-color .12s,color .12s,background .12s}.motion-add-chip:hover{border-color:var(--accent);color:var(--accent)}.motion-add-chip--active{background:var(--accent-alpha, rgba(59, 130, 246, .1));border-color:var(--accent);color:var(--accent);font-weight:600}.motion-add-form-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.motion-add-form-prefix{font-size:var(--font-size-xs);color:var(--fg-muted);flex-shrink:0}.motion-add-name-input{height:32px;padding:0 8px;border:1px solid var(--border);border-radius:6px;font-size:var(--font-size-sm);background:var(--bg-base);color:var(--fg);min-width:100px;max-width:160px}.motion-add-name-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}.motion-add-sep{color:var(--fg-muted);font-size:var(--font-size-sm)}.motion-add-ms-input{width:64px;height:32px;padding:0 8px;border:1px solid var(--border);border-radius:6px;font-size:var(--font-size-sm);background:var(--bg-base);color:var(--fg)}.motion-add-ms-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}.motion-add-unit{font-size:var(--font-size-xs);color:var(--fg-muted)}.motion-add-easing-hint{font-size:var(--font-size-xs);color:var(--fg-dim);font-style:italic;flex:1;min-width:0}.motion-add-confirm-btn{margin-left:auto}.motion-add-cancel-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--fg-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px}.motion-add-cancel-btn:hover{background:var(--bg-subtle);color:var(--fg)}.motion-list-group-header{display:flex;align-items:center;justify-content:space-between;padding:5px 12px 4px;background:var(--bg-subtle);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);font-size:var(--font-size-2xs, 10px);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-muted)}.motion-list-group-header:first-child{border-top:none}.motion-list-group-count{font-weight:400;font-size:var(--font-size-2xs, 10px);color:var(--fg-dim);background:var(--bg-base);border:1px solid var(--border-light);border-radius:10px;padding:0 6px;line-height:1.7}.motion-list-duration-thumb{width:28px;height:28px;flex-shrink:0;opacity:.5;transition:opacity .15s}.foundation-token-row:hover .motion-list-duration-thumb,.foundation-token-row--selected .motion-list-duration-thumb{opacity:1}.motion-row-preview-with-preview{position:relative;display:flex;align-items:center;width:28px;height:28px}.motion-list-curve-svg{width:28px;height:28px;flex-shrink:0;opacity:.5;transition:opacity .15s}.foundation-token-row:hover .motion-list-curve-svg,.foundation-token-row--selected .motion-list-curve-svg{opacity:1}.motion-list-curve-path{stroke:var(--accent);stroke-width:.06;fill:none}.foundation-token-list--motion .mtr-preview-wrap{display:none;position:absolute;left:36px;top:50%;transform:translateY(-50%);z-index:20;background:var(--bg-base, #fff);border:1px solid var(--border, #e5e7eb);border-radius:10px;padding:6px 12px;box-shadow:0 4px 16px #0000001f;white-space:nowrap;pointer-events:auto}.foundation-token-list--motion .foundation-token-row:hover .mtr-preview-wrap{display:flex}@keyframes motion-ball-auto{0%{left:3px}to{left:calc(100% - 15px)}}@media (prefers-reduced-motion: no-preference){.foundation-token-list--motion .foundation-token-row:hover .mtr-preview-ball{animation:motion-ball-auto var(--motion-ball-duration, .3s) var(--motion-ball-easing, ease) alternate infinite}}.foundation-token-list--motion .mtr-preview-wrap:hover .mtr-preview-ball{animation:none}.foundation-token-list--motion .mtr-preview-hint{display:none}.motion-list-duration-bar-wrap{width:48px;height:8px;background:var(--border-light);border-radius:4px;overflow:hidden;flex-shrink:0}.motion-list-duration-bar{height:100%;background:var(--accent);border-radius:4px;transition:width .15s ease}.foundation-token-row{display:grid;grid-template-columns:40px 1fr 1.5fr auto;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--radius-sm);transition:background .1s;border-bottom:1px solid var(--border-light)}.foundation-token-row--checkable{grid-template-columns:20px 40px 1fr 1.5fr auto}.foundation-token-row--checkable.foundation-token-row--with-scope{grid-template-columns:20px 40px 1fr 1.5fr minmax(90px,auto) auto}.foundation-token-row:last-child{border-bottom:none}.foundation-token-row:hover{background:var(--bg-hover)}.foundation-token-row--selected{background:var(--bg-selected)}.foundation-token-row--checked{background:var(--accent-subtle, rgba(59, 130, 246, .06))}.foundation-token-checkbox-col{display:flex;align-items:center;justify-content:center}.foundation-token-checkbox{width:14px;height:14px;cursor:pointer;accent-color:var(--accent);opacity:0;transition:opacity .1s}.foundation-token-row:hover .foundation-token-checkbox,.foundation-token-row--checked .foundation-token-checkbox{opacity:1}.foundation-token-preview{display:flex;align-items:center;min-width:0}.foundation-token-preview>*{width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-sm);cursor:pointer;box-sizing:border-box}.foundation-token-row--selected .foundation-token-preview>*{outline:2px solid var(--accent);outline-offset:1px}.foundation-token-name-col{min-width:0;display:flex;flex-direction:column;gap:2px}.foundation-token-name-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-width:0;overflow:hidden}.foundation-token-cssvar-row{display:none;align-items:center;gap:4px;min-width:0}.foundation-token-row:hover .foundation-token-cssvar-row{display:flex}.foundation-token-cssvar{font-size:var(--font-size-sm);color:var(--fg-muted);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.foundation-token-cssvar-copy{flex-shrink:0;padding:1px 3px!important;width:auto!important;height:auto!important;opacity:.6;transition:opacity .1s}.foundation-token-cssvar-copy:hover{opacity:1}.foundation-token-description-slot{display:flex;align-items:center;min-width:0}.foundation-token-description-slot input[type=text]{font-size:var(--font-size-sm);color:var(--fg-muted);background:transparent;border:none;border-bottom:1px solid transparent;padding:0 2px;width:100%;min-width:80px;outline:none;transition:border-color .15s}.foundation-token-description-slot input[type=text]:focus{border-bottom-color:var(--accent);color:var(--fg);background:var(--bg-subtle)}.foundation-token-description-slot input[type=text]::placeholder{color:var(--fg-dim);font-style:italic}.foundation-token-desc-inline{font-size:var(--font-size-sm);color:var(--fg-dim);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.foundation-token-name{font-size:var(--font-size-label);font-weight:500;color:var(--fg);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.foundation-token-name:hover{text-decoration:underline dotted var(--fg-dim);text-underline-offset:3px}.foundation-token-name-input{font-size:var(--font-size-label);font-weight:500;padding:2px 6px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-panel);width:100%;outline:none;font-family:var(--font-mono)}.foundation-token-usage-badge{display:inline-flex;align-items:center;font-size:10px;font-family:var(--font-mono);color:var(--fg-dim);line-height:1}.foundation-token-usage-badge--unused{color:var(--warning, #d97706);font-weight:600}.foundation-token-value-col{min-width:0;font-size:var(--font-size-sm);color:var(--fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;gap:2px}.foundation-token-value-col input{width:64px;padding:2px 6px;font-size:var(--font-size-sm);font-family:var(--font-mono);border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-panel)}.foundation-token-modified-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:600;padding:1px 5px;border-radius:3px;line-height:1.4;width:fit-content}.foundation-token-modified-badge--modified{background:#d977061a;color:var(--warning, #d97706)}.foundation-token-modified-badge--published{background:#16a34a1a;color:var(--success, #16a34a)}.foundation-token-actions{display:flex;gap:2px;opacity:0;transition:opacity .1s}.foundation-token-row:hover .foundation-token-actions{opacity:1}.foundation-token-row--with-scope{grid-template-columns:40px 1fr 1.5fr minmax(90px,auto) auto}.foundation-token-scope-col{display:flex;align-items:center}.token-bulk-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--accent-subtle, rgba(59, 130, 246, .08));border:1px solid var(--accent-alpha, rgba(59, 130, 246, .25));border-radius:var(--radius-sm);margin-bottom:6px}.token-bulk-bar-clear{flex-shrink:0;opacity:.7}.token-bulk-bar-clear:hover{opacity:1}.token-bulk-bar-count{flex:1;font-size:var(--font-size-sm);font-weight:500;color:var(--accent)}.btn--danger{background:var(--color-danger, #dc2626);color:var(--accent-fg, #fff);border-color:var(--color-danger, #dc2626);display:inline-flex;align-items:center;gap:4px}.btn--danger:hover{background:var(--color-danger, #dc2626);border-color:var(--color-danger, #dc2626);filter:brightness(.88)}.spacing-group{margin-bottom:var(--space-5)}.spacing-group-header{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-2)}.spacing-group-label{font-size:var(--font-size-sm);font-weight:600;color:var(--fg);letter-spacing:.01em}.spacing-group-count{font-size:11px;color:var(--fg-muted)}.spacing-group-add-btn{margin-left:auto;font-size:11px;padding:2px 8px;opacity:.7}.spacing-group-add-btn:hover{opacity:1}.spacing-group-add-form{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0 var(--space-3)}.spacing-group-add-form .add-token-input{flex:1;min-width:0}.spacing-bars{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:16px}.spacing-bar-row{display:grid;grid-template-columns:96px 1fr 50px auto;align-items:center;gap:10px;padding:4px 6px;cursor:pointer;transition:background-color .1s;border-radius:var(--radius-sm)}.spacing-bar-row:hover{background:var(--bg-hover)}.spacing-bar-row--selected{background:var(--bg-selected)}.spacing-bar-row--selected .spacing-bar-fill{opacity:1}.spacing-bar-name{font-size:var(--font-size-md);font-weight:500;color:var(--fg-muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spacing-bar-track{flex:1;height:20px;display:flex;align-items:center}.spacing-bar-fill{height:12px;background:linear-gradient(90deg,var(--accent),rgba(37,99,235,.7));opacity:.6;border-radius:2px;transition:width .2s ease,opacity .1s;min-width:2px}.spacing-bar-value{min-width:44px;font-size:var(--font-size-sm);color:var(--fg-dim)}.spacing-bar-name-input{font-size:var(--font-size-md);font-weight:500;color:var(--fg);font-family:var(--font-mono);background:var(--bg-surface);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:2px 6px;width:100%;outline:none;text-align:right}.spacing-bar-delete{opacity:0;transition:opacity .1s}.spacing-bar-row:hover .spacing-bar-delete,.spacing-bar-row--selected .spacing-bar-delete{opacity:1}.spacing-preview{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;background:var(--bg-panel);border:1px solid var(--border-light);border-radius:var(--radius-md);margin-bottom:16px}.spacing-preview-boxes{display:flex;align-items:center;transition:gap .2s ease}.spacing-preview-box{width:64px;height:48px;background:var(--bg-active);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-base);font-weight:600;color:var(--fg-muted)}.spacing-preview-label{font-size:var(--font-size-md);color:var(--accent)}.spacing-token-list{margin-top:12px}.spacing-token-row{display:flex;align-items:center;gap:12px;padding:6px 8px;border-bottom:1px solid var(--border-light)}.spacing-token-row:last-child{border-bottom:none}.spacing-token-name{min-width:48px;font-size:var(--font-size-md);color:var(--fg-muted);cursor:text}.spacing-token-name-input{min-width:60px;font-size:var(--font-size-md);padding:2px 6px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-panel);font-family:inherit;color:var(--fg)}.spacing-token-value{flex:1;font-size:var(--font-size-md);color:var(--fg-dim);cursor:pointer}.spacing-token-value:hover{color:var(--fg)}.spacing-inline-input{width:72px;padding:2px 6px;border:1px solid var(--accent);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg-panel);color:var(--fg);outline:none}.empty-state-hint{margin-top:8px;font-size:var(--font-size-md);color:var(--fg-dim)}.component-builder{display:flex;flex-direction:column;gap:20px}.cb-layout{display:flex;gap:24px;align-items:flex-start}.cb-two-col{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:flex-start}.cb-left-col{min-width:0;display:flex;flex-direction:column;gap:0}.cb-right-col{position:sticky;top:24px;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);overflow:hidden;min-height:480px}.cb-right-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg)}.cb-right-tab{flex:1;padding:9px 12px;font-size:var(--font-size-md);font-weight:500;color:var(--fg-muted);background:none;border:none;cursor:pointer;font-family:var(--font-sans);transition:all .1s;border-bottom:2px solid transparent;margin-bottom:-1px}.cb-right-tab:hover{color:var(--fg);background:var(--bg-hover)}.cb-right-tab--active{color:var(--accent);font-weight:600;border-bottom-color:var(--accent);background:var(--bg-panel)}.cb-right-content{flex:1;overflow-y:auto;padding:16px}.cb-list-panel{width:220px;min-width:220px;display:flex;flex-direction:column;gap:10px}.cb-create-btn,.cb-list-filter{width:100%}.cb-list-filter-input{width:100%;padding:6px 10px;font-size:var(--font-size-label);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg)}.cb-list-filter-input::placeholder{color:var(--fg-dim)}.cb-list-filter-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.cb-create-form{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--bg-hover);border-radius:var(--radius-md)}.cb-create-form-label{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em;margin:0}.cb-create-form-hint{font-size:var(--font-size-sm);color:var(--fg-dim);margin:0;padding:0 2px}.cb-create-form-row{display:flex;gap:6px}.cb-create-form-row .cb-add-input{flex:1}.cb-template-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.cb-template-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px 8px;background:var(--bg-panel);border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all .12s}.cb-template-card:hover{border-color:var(--accent);background:var(--accent-subtle)}.cb-template-card--selected{border-color:var(--accent);background:var(--accent-subtle);box-shadow:0 0 0 1px var(--accent)}.cb-template-card-label{font-size:var(--font-size-sm);font-weight:600;color:var(--fg);line-height:1}.cb-component-cards{display:flex;flex-direction:column;gap:4px}.cb-comp-card{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);overflow:hidden;transition:all .1s}.cb-comp-card:hover{border-color:var(--accent)}.cb-comp-card--active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.cb-comp-card-main{flex:1;display:flex;flex-direction:row;align-items:center;gap:10px;padding:8px 12px;border:none;background:none;cursor:pointer;text-align:left;font-family:var(--font-sans);min-width:0}.cb-comp-thumbnail{flex-shrink:0;width:44px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-hover);border-radius:var(--radius-sm);overflow:hidden}.cb-comp-card-info{display:flex;flex-direction:column;gap:2px;min-width:0}.cb-comp-card-name{font-size:var(--font-size-label);font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cb-comp-card-meta{display:flex;gap:6px;font-size:var(--font-size-sm);color:var(--fg-dim)}.cb-comp-card-meta span{white-space:nowrap}.cb-comp-card-action{flex-shrink:0;margin-right:2px;opacity:0;transition:opacity .1s}.cb-comp-card-action:last-child{margin-right:4px}.cb-comp-card:hover .cb-comp-card-action{opacity:1}.cb-builder-panel{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}.cb-builder-empty{display:flex;align-items:center;justify-content:center;min-height:300px}.cb-builder-header{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md)}.cb-builder-name-row{display:flex;align-items:center;gap:8px}.cb-name-input{font-size:var(--font-size-xl);font-weight:700;border:none;background:none;color:var(--fg);font-family:var(--font-sans);flex:1;outline:none;padding:0}.cb-name-input:focus{border-bottom:2px solid var(--accent)}.cb-desc-input{font-size:var(--font-size-label);border:none;background:none;color:var(--fg-muted);font-family:var(--font-sans);outline:none;padding:0}.cb-desc-input:focus{border-bottom:1px solid var(--border)}.cb-dirty-badge{font-size:var(--font-size-xs);font-weight:600;color:var(--fg-warning, #d97706);background:var(--bg-warning, rgba(245, 158, 11, .06));padding:2px 6px;border-radius:4px;text-transform:uppercase}.cb-builder-actions{display:flex;align-items:center;gap:6px}.cb-sections{display:flex;flex-direction:column;gap:2px}.cb-accordion{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);overflow:hidden}.cb-accordion+.cb-accordion{margin-top:-1px}.cb-accordion-trigger{width:100%;display:flex;align-items:center;gap:6px;padding:10px 14px;border:none;background:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--font-size-label);font-weight:600;color:var(--fg);text-align:left;transition:background .1s}.cb-accordion-trigger:hover{background:var(--bg-hover)}.cb-accordion-arrow{font-size:var(--font-size-sm);color:var(--fg-dim);width:14px;text-align:center;transition:transform .15s ease}.cb-accordion--open>.cb-accordion-trigger>.cb-accordion-arrow{transform:rotate(90deg)}.cb-accordion-label{flex:1}.cb-accordion-content{padding:0 14px 14px}.cb-section{display:flex;flex-direction:column;gap:10px}.cb-section-header{display:flex;align-items:center;gap:8px}.cb-section-title{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em}.cb-add-form{display:flex;gap:6px;align-items:center;padding:8px 10px;background:var(--bg-hover);border-radius:var(--radius-sm);flex-wrap:wrap}.cb-add-input{padding:5px 8px;font-size:var(--font-size-label);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);font-family:var(--font-sans);min-width:120px;flex:1}.cb-add-input:focus{outline:2px solid var(--accent);outline-offset:-1px}.cb-add-select{padding:5px 8px;font-size:var(--font-size-label);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);cursor:pointer}.cb-empty-hint{font-size:var(--font-size-md);color:var(--fg-dim);padding:8px 0}.cb-slot-list{display:flex;flex-direction:column}.cb-slot-header{display:grid;grid-template-columns:1fr 100px 60px 28px;gap:8px;padding:4px 8px;font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;color:var(--fg-dim);letter-spacing:.04em}.cb-slot-row{display:grid;grid-template-columns:1fr 100px 60px 28px;gap:8px;align-items:center;padding:5px 8px;border-bottom:1px solid var(--border-light);font-size:var(--font-size-label)}.cb-slot-row:last-child{border-bottom:none}.cb-slot-name{font-weight:500;display:flex;align-items:center;gap:6px}.cb-slot-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.cb-badge{font-size:var(--font-size-2xs);font-weight:700;color:#fff;background:var(--accent);border-radius:3px;padding:0 4px;line-height:16px}.cb-slot-tag{padding:3px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg);cursor:pointer}.cb-slot-optional{display:flex;justify-content:center}.cb-prop-list{display:flex;flex-direction:column;gap:8px}.cb-prop-row{padding:10px 12px;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg)}.cb-prop-row-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}.cb-prop-name{font-weight:600;font-size:var(--font-size-label)}.cb-prop-type-badge{font-size:var(--font-size-xs);color:var(--accent);background:var(--accent-subtle);padding:1px 6px;border-radius:3px;font-weight:500}.cb-prop-default{display:flex;align-items:center;gap:6px;font-size:var(--font-size-md)}.cb-prop-default-label{color:var(--fg-dim);font-weight:500}.cb-prop-default-input{padding:3px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg-panel);max-width:160px}.cb-prop-toggle{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:var(--font-size-md);color:var(--fg-muted)}.cb-enum-values{margin-top:2px}.cb-enum-tags{display:flex;gap:4px;flex-wrap:wrap;align-items:center}.cb-enum-tag{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;font-size:var(--font-size-md);font-family:var(--font-mono);background:var(--bg-hover);border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all .1s}.cb-enum-tag:hover{border-color:var(--accent)}.cb-enum-tag--default{background:var(--accent-subtle);border-color:var(--accent);font-weight:500}.cb-enum-default-mark{font-size:var(--font-size-xs);color:var(--accent)}.cb-enum-tag-remove{border:none;background:none;cursor:pointer;color:var(--fg-dim);font-size:var(--font-size-md);padding:0 4px;line-height:1;min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}.cb-enum-tag-remove:hover{color:var(--danger)}.cb-enum-add-inline{display:inline-flex}.cb-enum-add-input{width:72px;padding:3px 6px;font-size:var(--font-size-sm);border:1px dashed var(--border);border-radius:4px;background:transparent;color:var(--fg-muted);font-family:var(--font-mono);outline:none}.cb-enum-add-input:focus{border-color:var(--accent);border-style:solid}.cb-slot-tabs{display:flex;gap:2px;background:var(--bg-hover);border-radius:var(--radius-sm);padding:2px;width:fit-content}.cb-slot-tab{padding:4px 10px;font-size:var(--font-size-md);font-weight:500;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--fg-muted);font-family:var(--font-mono);display:flex;align-items:center;gap:4px;transition:all .1s}.cb-slot-tab:hover{color:var(--fg)}.cb-slot-tab--active{background:var(--bg-panel);color:var(--fg);box-shadow:var(--shadow-sm)}.cb-slot-tab-count{font-size:var(--font-size-2xs);color:var(--fg-dim);background:var(--bg-hover);padding:0 4px;border-radius:3px;line-height:14px}.cb-style-props{display:flex;flex-direction:column;gap:4px;margin-top:8px}.style-prop-row{display:flex;align-items:center;gap:6px;padding:4px 0;position:relative}.style-prop-name{width:140px;min-width:140px;padding:4px 8px;border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg);color:var(--fg)}.style-prop-name:focus{border-color:var(--accent);outline:none}.style-prop-value-wrap{flex:1;display:flex;align-items:center;gap:2px;min-width:0}.style-prop-value{flex:1;padding:4px 8px;border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg);color:var(--fg);min-width:0}.style-prop-value:focus{border-color:var(--accent);outline:none}.style-prop-value--ref{color:var(--accent);font-weight:500}.style-prop-pick-btn{width:24px;height:24px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);cursor:pointer;color:var(--accent);font-size:var(--font-size-base);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .1s}.style-prop-pick-btn:hover{background:var(--accent-subtle);border-color:var(--accent)}.style-prop-picker-wrap{position:absolute;top:100%;right:0;z-index:200;margin-top:4px;width:min(420px,calc(100vw - 40px));min-width:280px}.edit-panel .style-prop-picker-wrap{left:0;right:0;width:auto;min-width:0;max-width:100%}.edit-panel .style-prop-picker-wrap .token-picker{width:100%;max-width:none}.style-prop-color-swatch{width:24px;height:24px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;transition:border-color .1s}.style-prop-color-swatch:hover{border-color:var(--accent)}.style-prop-color-input{position:absolute;width:200%;height:200%;top:-50%;left:-50%;opacity:0;cursor:pointer;border:none;padding:0}.style-prop-color-swatch-icon{font-size:var(--font-size-label);line-height:1;pointer-events:none}.style-prop-ref-pill{flex:1;padding:3px 8px;border:1px dashed var(--accent);border-radius:var(--radius-sm);font-size:var(--font-size-md);font-family:var(--font-mono);background:var(--accent-subtle);color:var(--accent);font-weight:500;text-align:left;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .1s}.style-prop-ref-pill:hover{background:var(--accent-border)}.style-prop-pick-btn--active{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent)}.style-prop-slider{width:80px;min-width:80px;height:4px;accent-color:var(--accent);cursor:pointer}.cb-slot-tag-pill{display:inline-flex;align-items:center;padding:2px 7px;border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:var(--font-size-sm);background:var(--bg-hover);color:var(--fg-muted);gap:2px}.cb-slot-tag-pill code{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--fg-muted)}.cb-slot-optional-label{font-size:var(--font-size-sm);color:var(--fg-dim);margin-left:3px}.cb-advanced-toggle{font-size:var(--font-size-sm);color:var(--fg-dim);background:transparent;border:1px solid var(--border-light);padding:2px 7px;border-radius:var(--radius-sm);cursor:pointer;transition:all .1s}.cb-advanced-toggle:hover{border-color:var(--accent);color:var(--accent)}.cb-add-form--slot{display:flex;align-items:center;gap:6px}.cb-add-form-main{flex:1;display:flex;align-items:center;gap:6px;min-width:0}.cb-inferred-tag{font-size:var(--font-size-sm);color:var(--fg-dim);white-space:nowrap;flex-shrink:0}.cb-inferred-tag code{font-family:var(--font-mono);color:var(--success);font-size:var(--font-size-sm)}.cb-prop-type-badge--enum{color:var(--accent);background:var(--accent-subtle)}.cb-prop-type-badge--boolean{color:var(--success);background:var(--success-subtle)}.cb-prop-type-badge--string{color:var(--warning);background:var(--warning-subtle)}.cb-add-prop-btn{align-self:flex-start;margin-top:4px}.cb-variant-selectors{display:flex;flex-direction:column;gap:8px}.cb-selector-group{display:flex;align-items:center;gap:8px}.cb-selector-label{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-dim);text-transform:uppercase;min-width:40px}.cb-selector-tabs{display:flex;gap:3px;flex-wrap:wrap}.cb-selector-tab{padding:3px 10px;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);cursor:pointer;color:var(--fg-muted);font-family:var(--font-mono);transition:all .1s}.cb-selector-tab:hover{border-color:var(--accent);color:var(--fg)}.cb-selector-tab--active{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent);font-weight:500}.cb-variant-context{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--bg-hover);border-radius:var(--radius-sm);font-size:var(--font-size-md);color:var(--fg-muted);margin-bottom:4px}.cb-variant-arrow{color:var(--fg-dim)}.cb-state-suggestions{display:flex;gap:4px;flex-wrap:wrap}.cb-state-tab-wrap{display:flex;align-items:center;gap:1px}.cb-state-delete{width:18px;height:18px;border:none;background:none;cursor:pointer;color:var(--fg-dim);font-size:var(--font-size-sm);display:flex;align-items:center;justify-content:center;border-radius:2px;opacity:0;transition:opacity .1s}.cb-state-tab-wrap:hover .cb-state-delete{opacity:1}.cb-state-delete:hover{color:var(--danger);background:var(--bg-hover)}.cb-preview-panel{display:flex;flex-direction:column;gap:20px}.cb-preview-individual{display:flex;flex-direction:column;gap:10px}.cb-preview-controls{display:flex;flex-wrap:wrap;gap:12px}.cb-preview-control{display:flex;align-items:center;gap:6px}.cb-preview-control-label{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-dim);text-transform:uppercase;min-width:40px}.cb-preview-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;padding:40px 32px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);background-image:linear-gradient(45deg,rgba(0,0,0,.02) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.02) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.02) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;box-shadow:inset 0 1px 3px #0000000a;position:relative;gap:8px}.cb-preview-component-label{position:absolute;top:8px;left:12px;font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-dim);opacity:.5}.cb-preview-info{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:4px}.cb-preview-info-badge{font-size:var(--font-size-sm);font-weight:500;color:var(--fg-dim);background:var(--bg-raised);padding:3px 10px;border-radius:9999px;border:1px solid var(--border-light)}.cb-preview-info-desc{font-size:var(--font-size-md);color:var(--fg-muted);font-style:italic;max-width:400px;text-align:center;line-height:1.4}.cb-preview-grid-section{display:flex;flex-direction:column;gap:10px}.cb-preview-grid-header{display:flex;align-items:center;justify-content:space-between}.cb-code-panel{display:flex;flex-direction:column;gap:8px}.cb-code-tabs{display:flex;align-items:center;gap:2px}.cb-code-tab{padding:5px 12px;font-size:var(--font-size-md);font-weight:500;border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--bg);cursor:pointer;color:var(--fg-muted);font-family:var(--font-sans);transition:all .1s}.cb-code-tab:hover{color:var(--fg)}.cb-code-tab--active{background:var(--bg-code);color:#e0e0e0;border-color:var(--bg-code)}.cb-code-copy-btn{margin-left:auto}.cb-code-block{max-height:400px;overflow:auto;padding:18px 20px;background:var(--bg-code);border-radius:0 var(--radius-md) var(--radius-md) var(--radius-md);font-family:var(--font-mono);font-size:12.5px;line-height:1.65;color:#e2e8f0;white-space:pre;-moz-tab-size:2;tab-size:2;-webkit-overflow-scrolling:touch}.cb-code-block code{color:inherit;font-family:inherit}.cb-code-block .syntax-keyword{color:#ff7b72}.cb-code-block .syntax-string{color:#7ee787}.cb-code-block .syntax-comment{color:#6b7280;font-style:italic}.cb-code-block .syntax-property{color:#d2a8ff}.cb-code-block .syntax-value{color:#79c0ff}.cb-code-block .syntax-number{color:#f8cc75}.sizing-editor.token-editor{min-height:280px}.sizing-editor-header{margin-bottom:20px}.sizing-editor-title{margin:0 0 6px;font-size:var(--font-size-2xl);font-weight:700;color:var(--fg)}.sizing-editor-desc{margin:0;font-size:var(--font-size-label);line-height:1.5;color:var(--fg-muted);max-width:480px}.sizing-editor-controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-bottom:16px}.sizing-type-nav{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}.sizing-type-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:var(--font-size-sm);font-weight:500;color:var(--fg-muted);background:var(--bg-subtle);border:1px solid var(--border-light);border-radius:var(--radius-md);cursor:pointer;transition:background .15s,border-color .15s,color .15s}.sizing-type-pill:hover{background:var(--bg-hover);color:var(--fg);border-color:var(--border)}.sizing-type-pill--active{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent-border)}.sizing-type-pill--active:hover{background:var(--accent-subtle);color:var(--accent)}.sizing-type-pill--empty{opacity:.85}.sizing-type-pill-label{white-space:nowrap}.sizing-type-pill-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;font-size:var(--font-size-xs);font-weight:600;color:var(--fg-muted);background:var(--bg-panel);border-radius:9px}.sizing-type-pill--active .sizing-type-pill-count{color:var(--accent);background:#2563eb26}.sizing-editor-label{display:flex;flex-direction:column;gap:4px;font-size:var(--font-size-md);font-weight:500;color:var(--fg-muted)}.sizing-editor-select{min-width:180px;padding:8px 12px;font-size:var(--font-size-label);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);color:var(--fg);font-family:var(--font-sans);cursor:pointer}.sizing-editor-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.sizing-editor-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.sizing-editor-actions .btn{display:inline-flex;align-items:center;gap:6px}.sizing-add-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:20px}.sizing-add-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}.sizing-add-field{display:flex;flex-direction:column;gap:4px;font-size:var(--font-size-md);color:var(--fg-muted)}.sizing-add-label{font-weight:500;color:var(--fg-muted)}.sizing-add-value{width:90px}.sizing-add-form .sizing-add-submit{align-self:flex-end}.sizing-scale-section{margin-top:8px}.sizing-scale-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.sizing-scale-header .sizing-scale-heading{margin:0 0 4px;font-size:var(--font-size-lg);font-weight:600;color:var(--fg)}.sizing-scale-header .sizing-scale-desc{margin:0;font-size:var(--font-size-md);color:var(--fg-muted);line-height:1.4}.sizing-scale-remove-all{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}.sizing-scale-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.sizing-scale-item{display:grid;grid-template-columns:80px 1fr 88px auto;align-items:center;gap:14px 20px;padding:12px 16px;border-bottom:1px solid var(--border-light);transition:background .1s}.sizing-scale-item:last-child{border-bottom:none}.sizing-scale-item:hover{background:var(--bg-hover)}.sizing-scale-preview{display:flex;align-items:center;justify-content:center;width:80px;min-height:44px;flex-shrink:0}.sizing-scale-name{font-size:var(--font-size-base);font-weight:600;color:var(--fg)}.sizing-scale-value{width:88px;min-width:88px;padding:6px 8px;box-sizing:border-box;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-family:var(--font-mono)}.sizing-scale-value:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.sizing-scale-delete{flex-shrink:0;padding:6px;border-radius:var(--radius-sm)}.sizing-scale-name-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--fg);font-size:var(--font-size-base);font-weight:600;font-family:inherit;cursor:pointer;text-align:left;transition:background .1s}.sizing-scale-name-btn:hover{background:var(--bg-hover)}.sizing-scale-name-btn .sizing-scale-name-icon{opacity:.5}.sizing-scale-name-btn:hover .sizing-scale-name-icon{opacity:.8}.sizing-scale-name-edit{min-width:80px}.sizing-scale-name-input{width:100%;min-width:72px;padding:4px 8px;font-size:var(--font-size-label);font-weight:600;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-family:var(--font-mono)}.sizing-scale-name-input:focus{outline:none;box-shadow:0 0 0 2px var(--accent-subtle)}.sizing-applied-legend{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:16px;background:var(--accent-subtle);border:1px solid var(--accent);border-radius:var(--radius-md);font-size:var(--font-size-label);color:var(--fg)}.sizing-applied-legend-text{flex:1}.sizing-applied-legend-dismiss{flex-shrink:0;color:var(--fg-muted)}.sizing-applied-legend-dismiss:hover{color:var(--fg)}.sizing-draft-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px}.sizing-draft-header{margin-bottom:16px}.sizing-draft-header-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}.sizing-draft-step-badge{display:inline-flex;align-items:center;padding:2px 8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:var(--accent-subtle);color:var(--accent);border-radius:20px}.sizing-draft-title{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--fg)}.sizing-draft-desc{margin:0;font-size:var(--font-size-label);color:var(--fg-muted);line-height:1.4}.sizing-draft-sections{display:flex;flex-direction:column;gap:20px;margin-bottom:16px}.sizing-draft-section{border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden;background:var(--bg)}.sizing-draft-section-title{margin:0;padding:8px 14px;font-size:var(--font-size-label);font-weight:600;color:var(--fg);background:var(--bg-hover);border-bottom:1px solid var(--border-light)}.sizing-draft-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}.sizing-draft-item{display:grid;grid-template-columns:80px 1fr 90px auto;align-items:center;gap:12px 16px;padding:10px 14px;border-bottom:1px solid var(--border-light)}.sizing-draft-item:last-child{border-bottom:none}.sizing-draft-preview{display:flex;align-items:center;justify-content:center;width:80px;min-width:80px;flex-shrink:0}.sizing-draft-name{width:100%;min-width:0;padding:4px 8px;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);box-sizing:border-box}.sizing-draft-name:focus{outline:none;border-color:var(--accent)}.sizing-draft-value{width:100%;min-width:0;padding:4px 8px;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);font-family:var(--font-mono);box-sizing:border-box}.sizing-draft-value:focus{outline:none;border-color:var(--accent)}.sizing-draft-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.sizing-draft-commit{display:flex;align-items:center;gap:8px}.sizing-draft-commit .btn{display:inline-flex;align-items:center;gap:6px}.sizing-preview{display:flex;align-items:center;justify-content:center}.sizing-preview--icon{color:var(--accent)}.sizing-preview--container .dimension-bar{background:var(--accent-subtle);border:1px solid var(--border)}.sizing-preview--aspect-ratio{display:flex;align-items:center;justify-content:center}.sizing-preview-aspect-ratio-box{flex-shrink:0}.brand-accent-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px #00000014}.brand-desc{display:block;font-size:var(--font-size-sm);color:var(--fg-dim);margin-top:1px}.cb-slot-row-wrap{display:flex;flex-direction:column;gap:2px;padding-bottom:6px;border-bottom:1px solid var(--border-light);margin-bottom:4px}.cb-slot-desc-input,.cb-prop-desc-input{width:100%;padding:3px 8px;font-size:var(--font-size-sm);color:var(--fg-muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);transition:border-color .15s,background-color .15s;font-style:italic}.cb-slot-desc-input:hover,.cb-prop-desc-input:hover{border-color:var(--border-light);background:var(--bg-panel)}.cb-slot-desc-input:focus,.cb-prop-desc-input:focus{outline:none;border-color:var(--accent);background:var(--bg-panel);color:var(--fg);font-style:normal}.cb-prop-desc-input{margin-top:2px;margin-bottom:4px}.cb-docs-section{display:flex;flex-direction:column;gap:16px}.cb-docs-description{font-size:var(--font-size-label);color:var(--fg-muted);line-height:1.5;padding:12px 16px;background:var(--bg-raised);border-radius:var(--radius-md);border-left:3px solid var(--accent)}.cb-docs-description p{margin:0}.cb-docs-block{display:flex;flex-direction:column;gap:8px}.cb-docs-heading{font-size:var(--font-size-md);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-dim);margin:0}.cb-docs-table{width:100%;border-collapse:collapse;font-size:var(--font-size-md)}.cb-docs-table th{text-align:left;font-size:var(--font-size-sm);font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.04em;padding:6px 10px;border-bottom:2px solid var(--border);background:var(--bg-raised)}.cb-docs-table td{padding:6px 10px;border-bottom:1px solid var(--border-light);vertical-align:top;color:var(--fg)}.cb-docs-table tr:last-child td{border-bottom:none}.cb-docs-mono{font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:500;color:var(--accent)}.cb-docs-type{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--fg-muted);max-width:200px;word-break:break-word}.cb-docs-tag{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--fg-muted)}.cb-docs-desc-cell{color:var(--fg-muted);font-size:var(--font-size-md);font-style:italic}.cb-docs-states{display:flex;flex-wrap:wrap;gap:6px}.cb-docs-state-badge{font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:500;padding:3px 10px;background:var(--bg-raised);border:1px solid var(--border);border-radius:9999px;color:var(--accent)}.share-view{display:flex;flex-direction:column;gap:24px}.share-downloads{display:flex;flex-direction:column;gap:16px}.share-downloads .settings-project-card{max-width:560px}.settings-editor{display:flex;flex-direction:column;gap:20px}.settings-form{display:flex;flex-direction:column;gap:20px;max-width:560px}.settings-field{display:flex;flex-direction:column;gap:4px}.settings-field--fieldset{border:none;padding:0;margin:0;min-width:0}.settings-label{font-size:var(--font-size-md);font-weight:600;color:var(--fg);text-transform:uppercase;letter-spacing:.04em}.settings-hint{font-size:var(--font-size-sm);color:var(--fg-dim);line-height:1.4}.settings-input,.settings-textarea,.settings-select{padding:8px 12px;font-size:var(--font-size-label);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);color:var(--fg);font-family:inherit;transition:border-color .15s}.settings-input:focus,.settings-textarea:focus,.settings-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.settings-input--short{max-width:140px}.settings-name-row,.settings-field--accent-row .settings-accent-row{display:flex;align-items:center;gap:12px}.settings-color-input{width:40px;height:32px;padding:2px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);cursor:pointer}.settings-input--accent-hex{width:100px;font-family:var(--font-mono)}.settings-logo-wrap{flex-shrink:0;width:44px;height:44px;border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--bg-hover);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:border-color .15s,background .15s}.settings-logo-wrap:hover{border-color:var(--accent);background:var(--accent-subtle-sm)}.settings-logo-preview{width:100%;height:100%;object-fit:contain;padding:4px}.settings-logo-placeholder{font-size:var(--font-size-sm);color:var(--fg-muted);font-weight:500}.settings-input--name{flex:1;min-width:0;max-width:280px}.settings-logo-remove{flex-shrink:0;width:24px;height:24px;padding:0;border:none;border-radius:var(--radius-sm);background:var(--bg-hover);color:var(--fg-muted);font-size:var(--font-size-lg);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.settings-logo-remove:hover{background:var(--danger-subtle);color:var(--danger)}.settings-textarea{resize:vertical;min-height:60px;line-height:1.5}.settings-select{cursor:pointer}.settings-checkboxes{display:flex;flex-wrap:wrap;gap:12px}.settings-checkbox-label{display:flex;align-items:center;gap:6px;cursor:pointer}.settings-checkbox-text{font-size:var(--font-size-label);font-weight:500;color:var(--fg);text-transform:capitalize}.settings-stats{margin-top:8px;padding-top:16px;border-top:1px solid var(--border-light)}.settings-stat-grid{display:flex;gap:24px;margin-top:8px}.settings-stat{display:flex;flex-direction:column;align-items:center;gap:2px}.settings-stat-value{font-size:24px;font-weight:700;color:var(--accent)}.settings-stat-label{font-size:var(--font-size-sm);font-weight:500;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.04em}.settings-section-divider{height:1px;background:var(--border-light);margin:8px 0}.settings-section-title{font-size:var(--font-size-label);font-weight:700;color:var(--fg);text-transform:uppercase;letter-spacing:.06em;margin-bottom:-4px}.settings-principles-list{display:flex;flex-direction:column;gap:6px}.settings-principle-item{display:flex;gap:6px;align-items:center}.settings-principle-item .settings-input{flex:1}.settings-term-row{display:flex;gap:6px;align-items:center}.settings-term-key{flex:0 0 140px;font-weight:600}.settings-term-value{flex:1}.settings-remove-btn{flex:0 0 28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:transparent;color:var(--fg-dim);cursor:pointer;font-size:var(--font-size-base);transition:all .15s}.settings-remove-btn:hover{background:var(--danger-subtle, rgba(220, 38, 38, .08));border-color:var(--danger, #dc2626);color:var(--danger, #dc2626)}.settings-add-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;font-size:var(--font-size-md);font-weight:600;color:var(--accent);background:transparent;border:1px dashed var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;align-self:flex-start}.settings-add-btn:hover{background:var(--accent-subtle);border-color:var(--accent)}.settings-project-card{background:var(--bg-secondary, #f8f9fa);border:1px solid var(--border-subtle, #e5e7eb);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px}.settings-project-autosave{display:flex;align-items:center;gap:6px;font-size:var(--font-size-md);font-weight:500;color:var(--text-secondary, #6b7280)}.settings-autosave-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0}[data-theme=dark] .settings-autosave-dot{background:#4ade80}.settings-project-hint{font-size:var(--font-size-md);color:var(--text-tertiary, #9ca3af);margin:0;line-height:1.5}.settings-project-actions{display:flex;gap:8px;flex-wrap:wrap}.settings-project-error{font-size:var(--font-size-md);color:#ef4444;margin:0;padding:6px 8px;background:#fef2f2;border-radius:4px;border:1px solid #fecaca}.settings-project-success{font-size:var(--font-size-md);color:#16a34a;margin:0;padding:6px 8px;background:#f0fdf4;border-radius:4px;border:1px solid #bbf7d0}[data-theme=dark] .settings-project-error{color:#f87171;background:#f871711f;border-color:#f8717140}[data-theme=dark] .settings-project-success{color:#4ade80;background:#4ade801f;border-color:#4ade8040}.zindex-editor{display:flex;flex-direction:column;gap:16px}.zindex-preset-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.zindex-preset-label{font-size:var(--font-size-md);font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.04em}.zindex-warning{padding:8px 12px;font-size:var(--font-size-md);font-weight:600;color:#b45309;background:#fef3c7;border:1px solid #fbbf24;border-radius:var(--radius-md)}[data-theme=dark] .zindex-warning{color:#fbbf24;background:#fbbf241f;border-color:#fbbf244d}.zindex-stack{display:flex;flex-direction:column;gap:4px}.zindex-layer{display:flex;align-items:center;gap:8px;padding:6px 0;transition:background .15s;border-radius:var(--radius-sm)}.zindex-layer:hover{background:var(--bg-hover)}.zindex-layer--dup{background:#eab3080f}.zindex-token-preview-stack{width:32px;height:32px;min-width:32px;border-radius:var(--radius-sm);box-sizing:border-box;position:relative;outline:1px solid var(--border-light);outline-offset:-1px}.zindex-token-preview-layer{position:absolute;width:16px;height:11px;border:1px solid;border-radius:2px;box-sizing:border-box;box-shadow:0 1px 2px #0000000f}.zindex-value{flex:0 0 56px;font-family:var(--font-mono);font-size:var(--font-size-label);font-weight:700;text-align:right;color:var(--fg)}.zindex-bar-wrap{flex:1;min-width:0}.zindex-bar{height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;padding:0 12px;min-width:80px;transition:width .3s ease}.zindex-bar-label{font-size:var(--font-size-md);font-weight:600;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.2)}.cb-suggested-states{display:flex;flex-direction:column;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-light);margin-bottom:8px}.cb-suggested-states-row{display:flex;flex-wrap:wrap;gap:6px}.cb-state-pill{padding:3px 10px;font-size:var(--font-size-sm);font-weight:600;border-radius:999px;border:1px solid transparent;cursor:default;transition:all .15s}.cb-state-pill--active{background:#16a34a1a;color:#16a34a;border-color:#16a34a4d}.cb-state-pill--suggested{background:transparent;color:var(--fg-dim);border:1px dashed var(--border);cursor:pointer}.cb-state-pill--suggested:hover{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent);border-style:solid}.cb-add-all-states{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:var(--font-size-sm);font-weight:600;color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;align-self:flex-start}.cb-add-all-states:hover{background:var(--accent-subtle)}.a11y-editor{display:flex;flex-direction:column;gap:16px}.a11y-level-badge{font-size:var(--font-size-sm);font-weight:700;color:var(--accent);background:var(--accent-subtle);padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}.a11y-section{border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden}.a11y-section-header{width:100%;display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:var(--font-size-label);font-weight:700;color:var(--fg);background:var(--bg-raised);border:none;cursor:pointer;text-align:left}.a11y-section-header:hover{background:var(--bg-hover)}.a11y-section-chevron{font-size:var(--font-size-xs);color:var(--fg-dim)}.a11y-section-body{padding:14px;display:flex;flex-direction:column;gap:12px}.a11y-counter{display:flex;align-items:center;gap:8px;font-size:var(--font-size-md);font-weight:600}.a11y-counter--error{color:var(--color-danger, #dc2626)}.a11y-counter--warning{color:var(--color-warning, #d97706)}.a11y-counter--info{color:var(--color-info, #2563eb)}.a11y-counter-sep{color:var(--fg-dim)}.a11y-filters{display:flex;gap:4px}.a11y-filter-btn{padding:4px 10px;font-size:var(--font-size-sm);font-weight:600;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--fg-dim);cursor:pointer;transition:all .15s}.a11y-filter-btn:hover{background:var(--bg-hover)}.a11y-filter-btn--active{background:var(--accent);color:#fff;border-color:var(--accent)}.a11y-empty{padding:16px;font-size:var(--font-size-md);color:var(--fg-dim);text-align:center;font-style:italic}.a11y-issues-list{display:flex;flex-direction:column;gap:6px}.a11y-issue{display:flex;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);border-left:3px solid transparent}.a11y-issue--error{background:#dc26260a;border-left-color:var(--color-danger, #dc2626)}.a11y-issue--warning{background:#d977060a;border-left-color:var(--color-warning, #d97706)}.a11y-issue--info{background:#2563eb0a;border-left-color:var(--color-info, #2563eb)}.a11y-issue-icon{flex:0 0 18px;font-size:var(--font-size-md);line-height:18px}.a11y-issue-body{flex:1;display:flex;flex-direction:column;gap:2px}.a11y-issue-path{font-size:var(--font-size-sm);font-family:var(--font-mono);font-weight:600;color:var(--fg)}.a11y-issue-message{font-size:var(--font-size-md);color:var(--fg-dim)}.a11y-issue-wcag{font-size:var(--font-size-xs);font-weight:700;color:var(--accent);background:var(--accent-subtle);padding:1px 6px;border-radius:999px;align-self:flex-start}.a11y-contrast-preview{display:flex;align-items:center;gap:6px;margin-top:4px}.a11y-swatch{width:20px;height:20px;border-radius:var(--radius-sm);border:1px solid var(--border)}.a11y-ratio{font-size:var(--font-size-md);font-weight:700;font-family:var(--font-mono)}.a11y-ratio--fail{color:var(--color-danger, #dc2626)}.a11y-ratio--pass{color:var(--color-success, #16a34a)}.a11y-ratio-req{font-size:var(--font-size-sm);color:var(--fg-dim)}.a11y-preset-bar{display:flex;align-items:center;gap:8px}.a11y-preset-label{font-size:var(--font-size-md);font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.04em}.a11y-guidelines-list{display:flex;flex-direction:column;gap:10px}.a11y-guideline-row{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--border-light);border-radius:var(--radius-sm)}.a11y-guideline-header{display:flex;gap:6px;align-items:center}.a11y-guideline-title{flex:1;padding:4px 8px;font-size:var(--font-size-md);font-weight:600;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg)}.a11y-guideline-cat,.a11y-guideline-level{padding:4px 6px;font-size:var(--font-size-sm);border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg-dim)}.a11y-guideline-desc{padding:4px 8px;font-size:var(--font-size-md);border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg-dim)}.a11y-motion-list{display:flex;flex-direction:column;gap:4px}.a11y-motion-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--border-light)}.a11y-motion-path{flex:1;font-size:var(--font-size-md);font-family:var(--font-mono);font-weight:600;color:var(--fg)}.a11y-motion-value{font-size:var(--font-size-md);font-family:var(--font-mono);color:var(--fg-dim)}.a11y-motion-status{font-size:var(--font-size-xs);font-weight:700;padding:2px 8px;border-radius:999px}.a11y-motion-status--ok{color:#16a34a;background:#16a34a14}.a11y-motion-status--warn{color:#d97706;background:#d9770614}.a11y-reduced-motion-css{margin-top:8px}.a11y-css-preview{padding:12px;font-size:var(--font-size-sm);font-family:var(--font-mono);background:var(--bg-raised);border:1px solid var(--border-light);border-radius:var(--radius-md);overflow-x:auto;white-space:pre;color:var(--fg-dim);max-height:200px}.screen-editor{display:flex;flex-direction:column;gap:20px}.screen-layout{display:flex;gap:20px;min-height:500px}.screen-list-panel{width:240px;flex-shrink:0;display:flex;flex-direction:column;gap:10px}.screen-create-form{display:flex;flex-direction:column;gap:6px}.screen-cards{display:flex;flex-direction:column;gap:4px}.screen-card{display:flex;align-items:center;gap:4px;border-radius:var(--radius-md);border:1px solid var(--border-light);transition:all .15s;overflow:hidden}.screen-card:hover{border-color:var(--border)}.screen-card--active{border-color:var(--accent);background:var(--accent-subtle)}.screen-card-main{flex:1;display:flex;flex-direction:column;gap:1px;padding:8px 10px;background:none;border:none;cursor:pointer;text-align:left;color:var(--fg)}.screen-card-name{font-size:var(--font-size-label);font-weight:500}.screen-card-meta{font-size:var(--font-size-xs);color:var(--fg-dim)}.screen-builder{flex:1;display:flex;flex-direction:column;gap:20px;min-width:0}.screen-builder-empty{display:flex;align-items:center;justify-content:center}.screen-builder-header{display:flex;flex-direction:column;gap:6px}.screen-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}.screen-control{display:flex;align-items:center;gap:8px}.screen-control-label{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.04em}.screen-width-input{width:64px;padding:4px 6px;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);font-family:var(--font-mono)}.screen-select{padding:4px 8px;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg);cursor:pointer}.screen-select--small{padding:3px 6px;font-size:var(--font-size-sm)}.screen-sections{display:flex;flex-direction:column;gap:12px}.screen-sections-header{display:flex;align-items:center;justify-content:space-between}.screen-section-editor{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--bg-raised)}.screen-section-header{display:flex;align-items:center;gap:8px}.screen-section-name{flex:1;padding:4px 8px;font-size:var(--font-size-label);font-weight:500;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--fg);transition:border-color .15s}.screen-section-name:hover{border-color:var(--border-light)}.screen-section-name:focus{outline:none;border-color:var(--accent);background:var(--bg-panel)}.screen-gap-input{width:50px;padding:3px 6px;font-size:var(--font-size-sm);font-family:var(--font-mono);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--fg)}.screen-instances{display:flex;flex-direction:column;gap:6px;padding-left:12px}.screen-instance{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg)}.screen-instance-header{display:flex;align-items:center;justify-content:space-between}.screen-instance-name{font-size:var(--font-size-md);font-weight:600;color:var(--accent)}.screen-instance-props{display:flex;flex-wrap:wrap;gap:8px}.screen-instance-prop{display:flex;align-items:center;gap:4px}.screen-instance-prop-label{font-size:var(--font-size-xs);font-weight:600;color:var(--fg-dim);text-transform:uppercase}.screen-instance-slots{display:flex;flex-direction:column;gap:3px}.screen-instance-slot{display:flex;align-items:center;gap:6px}.screen-slot-input{flex:1;padding:2px 6px;font-size:var(--font-size-sm);border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--fg-muted);transition:border-color .15s;font-style:italic}.screen-slot-input:hover{border-color:var(--border-light)}.screen-slot-input:focus{outline:none;border-color:var(--accent);background:var(--bg-panel);color:var(--fg);font-style:normal}.screen-add-component{padding-top:4px}.screen-preview-section{display:flex;flex-direction:column;gap:12px}.screen-preview-wrapper{overflow-x:auto;padding:8px 0}.screen-preview-device{margin:0 auto;border:2px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-surface);box-shadow:0 4px 24px #0000000f,0 1px 4px #0000000a;min-height:120px}.screen-preview-section-block{display:flex;flex-direction:column}.screen-preview-section-label{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#0000004d;padding:6px 24px 0}.screen-preview-instance{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-label);white-space:nowrap}.screen-preview-empty{display:flex;align-items:center;justify-content:center;min-height:100px;color:#0000004d;font-size:var(--font-size-md);font-style:italic}.screen-preview-empty-section{font-size:var(--font-size-sm);color:#00000040;font-style:italic}.screen-preview-missing{font-size:var(--font-size-sm);color:#e53e3e;font-style:italic}.icon{display:inline-block;vertical-align:middle;flex-shrink:0}.icon-browser{display:flex;flex-direction:column;gap:12px}.icon-browser--compact{gap:8px}.icon-library-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.icon-library-header-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}#icon-library .icon-browser-search-bar{margin-bottom:12px}#icon-library .icon-browser-categories{margin-bottom:10px}#icon-library .icon-browser-sizes{margin-bottom:14px}.icon-browser-search-bar{display:flex;align-items:center;gap:8px}.icon-browser-search{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-label);background:var(--bg);outline:none}.icon-browser-search:focus{border-color:var(--accent)}.icon-browser-count{font-size:var(--font-size-sm);color:var(--fg-muted);white-space:nowrap}.icon-browser-categories{display:flex;gap:4px;flex-wrap:wrap}.icon-browser-cat{padding:4px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;font-size:var(--font-size-sm);color:var(--fg-muted);cursor:pointer;transition:all .15s}.icon-browser-cat:hover{background:var(--bg-hover)}.icon-browser-cat--active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.icon-browser-sizes{display:flex;align-items:center;gap:4px;font-size:var(--font-size-sm);color:var(--fg-muted)}.icon-browser-sizes-label{margin-right:4px}.icon-browser-size-btn{padding:2px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;font-size:var(--font-size-sm);cursor:pointer;font-family:var(--font-mono)}.icon-browser-size-btn--active{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent)}.icon-browser-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:4px;max-height:320px;overflow-y:auto;padding:4px}.icon-browser--compact .icon-browser-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}.icon-browser-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;cursor:pointer;transition:all .15s}.icon-browser-item:hover{background:var(--bg-hover);border-color:var(--border)}.icon-browser-item--selected{background:var(--accent-subtle);border-color:var(--accent)}.icon-browser-item-name{font-size:var(--font-size-2xs);color:var(--fg-muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:64px}.icon-browser-empty{grid-column:1 / -1;text-align:center;padding:24px;color:var(--fg-muted);font-size:var(--font-size-label)}.icon-browser-preview{display:flex;align-items:center;gap:16px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md)}.icon-browser-preview-info{display:flex;flex-direction:column;gap:2px}.icon-browser-preview-name{font-size:var(--font-size-base);font-weight:600}.icon-browser-preview-cat{font-size:var(--font-size-sm);color:var(--fg-muted);text-transform:capitalize}.icon-browser-preview-kw{font-size:var(--font-size-xs);color:var(--fg-dim)}.icon-browser-page{display:flex;flex-direction:column;gap:0;padding:24px;max-width:900px}.icon-browser-page--compact{padding:8px}.icon-browser-page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:16px}.icon-browser-page-title{font-size:var(--font-size-lg);font-weight:600;color:var(--fg);margin:0 0 2px}.icon-browser-page-desc{font-size:var(--font-size-sm);color:var(--fg-muted);margin:0}.icon-browser-tokens{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:20px}.icon-browser-tokens-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;background:var(--bg-subtle);border:none;cursor:pointer;font-size:var(--font-size-sm);color:var(--fg);text-align:left}.icon-browser-tokens-toggle:hover{background:var(--bg-hover)}.icon-browser-tokens-toggle-label{font-weight:600;flex:1}.icon-browser-tokens-count{font-size:var(--font-size-xs);color:var(--fg-muted);margin-right:4px}.icon-browser-tokens-body{padding:12px 14px;display:flex;flex-direction:column;gap:16px}.icon-browser-token-group{display:flex;flex-direction:column;gap:2px}.icon-browser-token-group-header{display:flex;align-items:center;gap:8px;padding:4px 0 6px;border-bottom:1px solid var(--border-subtle);margin-bottom:4px}.icon-browser-token-group-title{font-size:var(--font-size-sm);font-weight:600;color:var(--fg);flex:1}.icon-browser-token-group-hint{font-size:11px;color:var(--fg-dim)}.icon-browser-token-add-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--radius-sm);border:1px dashed var(--border);background:transparent;color:var(--fg-muted);cursor:pointer;flex-shrink:0}.icon-browser-token-add-btn:hover{background:var(--bg-hover);color:var(--fg);border-color:var(--border-strong)}.icon-browser-token-empty{font-size:12px;color:var(--fg-dim);padding:6px 0;margin:0}.icon-token-row{display:grid;grid-template-columns:36px 80px 72px 1fr 26px;align-items:center;gap:8px;padding:3px 2px;border-radius:var(--radius-sm)}.icon-token-row:hover{background:var(--bg-hover)}.icon-token-preview{display:flex;align-items:center;justify-content:center;color:var(--fg-muted)}.icon-token-name{font-size:12px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-token-value{font-size:12px;color:var(--fg-muted);background:transparent;border:1px solid transparent;border-radius:3px;padding:1px 4px;cursor:pointer;text-align:left}.icon-token-value:hover{border-color:var(--border);background:var(--bg)}.icon-token-value-input{font-size:12px;border:1px solid var(--accent);border-radius:3px;padding:1px 4px;width:100%;outline:none;background:var(--bg);color:var(--fg)}.icon-token-cssvar{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--fg-dim);background:transparent;border:none;cursor:pointer;text-align:left;overflow:hidden;white-space:nowrap}.icon-token-cssvar:hover{color:var(--fg-muted)}.icon-token-cssvar span{overflow:hidden;text-overflow:ellipsis}.icon-token-delete{flex-shrink:0}.icon-add-token-form{display:flex;align-items:center;gap:6px;padding:4px 0 6px;flex-wrap:wrap}.icon-add-token-input{flex:1;min-width:80px;font-size:12px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px;background:var(--bg);color:var(--fg);outline:none}.icon-add-token-input:focus{border-color:var(--accent)}.icon-browser-library{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.icon-browser-library-header{display:flex;align-items:center;justify-content:space-between}.icon-browser-section-title{font-size:var(--font-size-sm);font-weight:600;color:var(--fg);margin:0}.icon-browser-item-custom-badge{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--accent)}.icon-browser-item{position:relative}.icon-browser-selected{display:flex;gap:20px;border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;background:var(--bg-subtle);margin-bottom:12px}.icon-browser-selected-left{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:80px}.icon-browser-selected-preview{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--fg)}.icon-browser-selected-meta{display:flex;flex-direction:column;gap:2px;text-align:center}.icon-browser-selected-name{font-size:var(--font-size-sm);font-weight:600;color:var(--fg)}.icon-browser-selected-cat{font-size:11px;color:var(--fg-muted);text-transform:capitalize}.icon-browser-selected-kw{font-size:11px;color:var(--fg-dim)}.icon-browser-selected-custom-tag{font-size:10px;font-weight:600;background:var(--accent-subtle);color:var(--accent);border-radius:10px;padding:1px 6px;letter-spacing:.02em;text-transform:uppercase}.icon-browser-selected-right{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}.icon-browser-code-section{display:flex;flex-direction:column;gap:0}.icon-browser-code-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:0}.icon-browser-code-tab{font-size:12px;padding:5px 12px;border:none;background:transparent;color:var(--fg-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}.icon-browser-code-tab:hover{color:var(--fg)}.icon-browser-code-tab--active{color:var(--fg);border-bottom-color:var(--accent);font-weight:500}.icon-browser-code-block{position:relative;background:var(--bg);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm)}.icon-browser-code-pre{font-family:var(--font-mono);font-size:12px;color:var(--fg);padding:10px 12px;margin:0;white-space:pre-wrap;word-break:break-all;line-height:1.6}.icon-browser-code-copy{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-subtle);color:var(--fg-muted);cursor:pointer}.icon-browser-code-copy:hover{background:var(--bg-hover);color:var(--fg)}.icon-browser-sizes-ref{display:flex;flex-direction:column;gap:4px}.icon-browser-sizes-ref-label{font-size:11px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}.icon-browser-sizes-chips{display:flex;flex-wrap:wrap;gap:4px}.icon-browser-size-chip{font-size:11px;padding:3px 8px;border:1px solid var(--border);border-radius:20px;background:var(--bg);color:var(--fg-muted);cursor:pointer;font-family:var(--font-mono)}.icon-browser-size-chip:hover{border-color:var(--border-strong);color:var(--fg)}.icon-browser-size-chip--active{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent);font-weight:500}.icon-browser-sizes-ref-var{font-size:11px;color:var(--fg-dim)}.icon-add-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1000}.icon-add-modal{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:540px;box-shadow:var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, .18));display:flex;flex-direction:column;gap:0;overflow:hidden}.icon-add-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border-subtle)}.icon-add-modal-title{font-size:var(--font-size-base);font-weight:600;color:var(--fg);margin:0}.icon-add-modal-body{padding:16px 20px;display:flex;gap:16px;align-items:flex-start}.icon-add-preview{width:64px;height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-subtle);color:var(--fg)}.icon-add-preview-empty{font-size:10px;color:var(--fg-dim);font-family:var(--font-mono)}.icon-add-fields{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.icon-add-field{display:flex;flex-direction:column;gap:4px}.icon-add-field--full{width:100%}.icon-add-field-label{font-size:12px;font-weight:500;color:var(--fg-muted)}.icon-add-field-hint{font-size:11px;font-weight:400;color:var(--fg-dim)}.icon-add-textarea{resize:vertical;font-family:var(--font-mono);font-size:12px;line-height:1.5;min-height:80px}.icon-add-error{font-size:12px;color:var(--error, #e63946);margin:0}.cb-add-input--error{border-color:var(--error, #e63946)!important}.icon-add-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--border-subtle)}.sizing-stroke-section{border-top:1px solid var(--border-subtle);padding-top:20px;margin-top:24px;display:flex;flex-direction:column;gap:12px}.sizing-stroke-empty{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.sizing-stroke-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.sizing-stroke-row{display:grid;grid-template-columns:36px 80px 68px 1fr 32px;align-items:center;gap:8px;padding:4px;border-radius:var(--radius-sm)}.sizing-stroke-row:hover{background:var(--bg-hover)}.sizing-stroke-preview{display:flex;align-items:center;justify-content:center;color:var(--fg-muted)}.sizing-stroke-name{font-size:13px;color:var(--fg)}.sizing-stroke-cssvar{font-size:11px;color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-uploader{width:100%}.asset-uploader--compact .asset-uploader-dropzone{padding:12px}.asset-uploader-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;background:transparent}.asset-uploader-dropzone:hover,.asset-uploader--dragging{border-color:var(--accent);background:var(--accent-subtle)}.asset-uploader-icon{font-size:24px;color:var(--fg-muted)}.asset-uploader-label{font-size:var(--font-size-md);color:var(--fg-muted);text-align:center}.asset-uploader-input{display:none}.asset-uploader-confirm{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg)}.asset-uploader-preview{max-width:100%;max-height:160px;object-fit:contain;border-radius:var(--radius-sm);background:repeating-conic-gradient(var(--bg-hover) 0% 25%,var(--bg-subtle) 0% 50%) 50%/16px 16px}.asset-uploader-info{display:flex;flex-direction:column;gap:2px}.asset-uploader-name{font-size:var(--font-size-md);font-weight:500}.asset-uploader-size{font-size:var(--font-size-sm);color:var(--fg-muted)}.asset-uploader-warn{color:var(--danger);font-weight:500}.asset-uploader-actions{display:flex;gap:8px}.asset-picker{display:flex;flex-direction:column;gap:8px}.asset-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px}.asset-picker-item{width:48px;height:48px;padding:2px;border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;background:var(--bg);overflow:hidden}.asset-picker-item:hover{border-color:var(--border)}.asset-picker-item--selected{border-color:var(--accent)}.asset-picker-thumb{width:100%;height:100%;object-fit:cover;border-radius:2px}.cb-docs-panel{display:flex;flex-direction:column;gap:0}.docs-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px}.docs-tab{padding:8px 16px;border:none;background:none;font-size:var(--font-size-label);color:var(--fg-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}.docs-tab:hover{color:var(--fg)}.docs-tab--active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}.docs-usage-guidelines{font-size:var(--font-size-label);color:var(--fg-muted);line-height:1.6;margin:8px 0}.docs-when{margin:8px 0}.docs-when-label{font-size:var(--font-size-md);display:block;margin-bottom:4px}.docs-when-label--do{color:#22c55e}.docs-when-label--dont{color:#ef4444}.docs-when-list{list-style:disc;padding-left:20px;font-size:var(--font-size-label);color:var(--fg);display:flex;flex-direction:column;gap:2px}.docs-dosdonts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.docs-dosdont-card{border:1px solid var(--border);border-radius:var(--radius-md);border-top:4px solid var(--border);overflow:hidden;background:var(--bg-panel)}.docs-dosdont-card--do{border-top-color:var(--success)}.docs-dosdont-card--dont{border-top-color:var(--danger)}.docs-dosdont-card--caution{border-top-color:var(--warning)}.docs-dosdont-header{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border-light)}.docs-dosdont-icon{font-size:var(--font-size-lg);line-height:1}.docs-dosdont-card--do .docs-dosdont-icon{color:var(--success)}.docs-dosdont-card--dont .docs-dosdont-icon{color:var(--danger)}.docs-dosdont-card--caution .docs-dosdont-icon{color:var(--warning)}.docs-dosdont-label{font-size:var(--font-size-md);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.docs-dosdont-image{width:100%;max-height:120px;object-fit:contain;padding:8px;background:repeating-conic-gradient(var(--bg-hover) 0% 25%,var(--bg-subtle) 0% 50%) 50%/12px 12px}.docs-dosdont-text{padding:10px 12px;font-size:var(--font-size-label);color:var(--fg);line-height:1.5}.docs-anatomy{display:flex;flex-direction:column;gap:16px}.docs-anatomy-image{width:100%;max-height:220px;object-fit:contain;border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 32px;background-color:var(--bg-panel);background-image:radial-gradient(circle,#d8d8d8 1px,transparent 1px);background-size:16px 16px}.docs-anatomy-legend{margin-top:4px;display:flex;flex-direction:column;gap:0}.docs-anatomy-legend-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-light)}.docs-anatomy-legend-row:last-child{border-bottom:none}.docs-anatomy-number{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-width:22px;border-radius:50%;background:var(--bg-code);border:2px solid var(--accent-fg);box-shadow:0 1px 3px #0003;color:var(--accent-fg);font-size:var(--font-size-xs);font-weight:700;font-family:var(--font-mono)}.docs-anatomy-legend-name{font-size:var(--font-size-label);font-weight:600;color:var(--fg)}.docs-anatomy-legend-slot{font-size:var(--font-size-sm);font-family:var(--font-mono);background:var(--bg-hover);padding:1px 6px;border-radius:10px;color:var(--fg-muted)}.docs-anatomy-legend-desc{font-size:var(--font-size-md);color:var(--fg-muted);font-style:italic;margin-left:auto}.docs-keyboard-table td:first-child{white-space:nowrap}.docs-kbd{display:inline-block;padding:2px 8px;font-family:var(--font-mono);font-size:var(--font-size-md);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 1px 0 var(--border);min-width:24px;text-align:center}.docs-sub-heading{font-size:var(--font-size-md);font-weight:600;color:var(--fg-muted);margin:12px 0 6px;text-transform:uppercase;letter-spacing:.5px}.docs-a11y-notes{font-size:var(--font-size-label);color:var(--fg);line-height:1.6;margin-bottom:8px}.docs-related{display:flex;gap:6px;flex-wrap:wrap}.docs-related-badge{padding:4px 10px;font-size:var(--font-size-md);border:1px solid var(--accent);border-radius:var(--radius-sm);color:var(--accent);background:var(--accent-subtle)}.docs-changelog{display:flex;flex-direction:column;gap:0;position:relative;padding-left:20px}.docs-changelog:before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--border)}.docs-changelog-entry{display:flex;align-items:baseline;gap:8px;padding:6px 0;position:relative}.docs-changelog-entry:before{content:"";position:absolute;left:-17px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-panel)}.docs-changelog-version{font-size:var(--font-size-md);font-weight:600;padding:2px 8px;background:var(--accent-subtle);border-radius:var(--radius-sm);color:var(--accent);white-space:nowrap}.docs-changelog-date{font-size:var(--font-size-sm);color:var(--fg-dim);white-space:nowrap}.docs-changelog-desc{font-size:var(--font-size-label);color:var(--fg)}.docs-editor{display:flex;flex-direction:column;gap:20px}.docs-editor-section{display:flex;flex-direction:column;gap:8px}.docs-editor-label{font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--fg-muted)}.docs-editor-hint{font-size:11px;color:var(--fg-dim);margin-top:2px}.docs-editor-empty-hint{font-size:11px;color:var(--fg-dim);margin:0 0 4px;font-style:italic}.docs-editor-textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-label);font-family:inherit;resize:vertical;background:var(--bg);outline:none;min-height:48px}.docs-editor-textarea:focus{border-color:var(--accent)}.docs-editor-list-item{display:flex;gap:6px;align-items:center}.docs-editor-list-item input{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg);outline:none}.docs-editor-list-item input:focus{border-color:var(--accent)}.docs-editor-input-sm{width:100px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg);outline:none}.docs-editor-input-sm:focus{border-color:var(--accent)}.docs-editor-select{padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg);outline:none}.docs-editor-select:focus{border-color:var(--accent)}.docs-editor-anatomy-row{display:flex;gap:6px;align-items:center}.docs-editor-anatomy-row input{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg);outline:none}.docs-editor-anatomy-row input:focus{border-color:var(--accent)}.docs-editor-dosdont{display:flex;gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);border-left:3px solid var(--border)}.docs-editor-dosdont--do{border-left-color:#22c55e}.docs-editor-dosdont--dont{border-left-color:#ef4444}.docs-editor-dosdont--caution{border-left-color:#f59e0b}.docs-editor-dosdont input{flex:1;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg);outline:none}.docs-editor-dosdont input:focus{border-color:var(--accent)}.docs-editor-dosdont-actions{display:flex;gap:6px}.docs-editor-changelog-row{display:flex;gap:6px;align-items:center}.docs-editor-changelog-row input{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--bg);outline:none}.docs-editor-changelog-row input:focus{border-color:var(--accent)}.cb-preview-mode-bar{display:flex;gap:2px;padding:0 0 10px;border-bottom:1px solid var(--border-light);margin-bottom:12px}.cb-preview-mode-btn{padding:5px 14px;font-size:var(--font-size-md);font-weight:500;border:1px solid var(--border);border-radius:9999px;background:var(--bg);color:var(--fg-muted);cursor:pointer;font-family:var(--font-sans);transition:all .1s}.cb-preview-mode-btn:hover{color:var(--fg);border-color:var(--fg-dim)}.cb-preview-mode-btn--active{background:var(--fg);color:var(--bg-panel);border-color:var(--fg)}.cb-anatomy-mode{display:flex;flex-direction:column;gap:16px}.cb-anatomy-canvas{width:100%;min-height:200px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:visible;background-color:var(--bg-panel);background-image:radial-gradient(circle,#d0d0d0 1px,transparent 1px);background-size:16px 16px;display:flex;align-items:center;justify-content:center;padding:48px 40px}.anatomy-diagram-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%}.anatomy-diagram-component{position:relative;z-index:1}.anatomy-diagram-component .component-preview{margin:0;background:none;padding:0}.anatomy-overlay-svg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:visible;z-index:2}.anatomy-callout{cursor:default}.cb-anatomy-legend-list{list-style:none;display:flex;flex-direction:column;gap:0;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.cb-anatomy-legend-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border-light);font-size:var(--font-size-label)}.cb-anatomy-legend-item:last-child{border-bottom:none}.cb-anatomy-bubble-sm{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-width:22px;border-radius:50%;background:var(--bg-code);border:2px solid var(--accent-fg);outline:1px solid var(--bg-code);color:var(--accent-fg);font-size:var(--font-size-xs);font-weight:700;font-family:var(--font-mono);box-shadow:0 1px 3px #0003;flex-shrink:0}.cb-anatomy-legend-name{font-weight:600;color:var(--fg);flex-shrink:0}.cb-anatomy-legend-slot{font-size:var(--font-size-sm);font-family:var(--font-mono);background:var(--bg-hover);padding:1px 7px;border-radius:10px;color:var(--fg-muted);flex-shrink:0}.cb-anatomy-legend-desc{font-size:var(--font-size-md);color:var(--fg-muted);font-style:italic;margin-left:auto;text-align:right}.cb-anatomy-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;color:var(--fg-muted);font-size:var(--font-size-label);gap:6px;border:1px dashed var(--border);border-radius:var(--radius-md)}.cb-anatomy-empty-hint{font-size:var(--font-size-md);color:var(--fg-dim)}.command-palette-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:1000}.command-palette{width:100%;max-width:480px;background:var(--bg-panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-md),0 20px 60px #00000026;border:1px solid var(--border);overflow:hidden}.command-palette-input{width:100%;padding:14px 18px;font-size:var(--font-size-15);border:none;border-bottom:1px solid var(--border);background:transparent;color:var(--fg)}.command-palette-input::placeholder{color:var(--fg-dim)}.command-palette-input:focus{outline:none}.command-palette-list{max-height:320px;overflow-y:auto;padding:6px 0}.command-palette-item{display:block;width:100%;padding:10px 18px;text-align:left;font-size:var(--font-size-base);color:var(--fg);background:transparent;border:none;cursor:pointer}.command-palette-item:hover,.command-palette-item--selected{background:var(--bg-hover)}.command-palette-item--current{color:var(--accent);font-weight:600}.command-palette-empty{padding:16px 18px;font-size:var(--font-size-base);color:var(--fg-dim)}.command-palette-footer{padding:8px 18px;font-size:var(--font-size-sm);color:var(--fg-dim);border-top:1px solid var(--border-light)}.command-palette-footer kbd{font-family:var(--font-mono);font-size:var(--font-size-xs);padding:2px 5px;background:var(--bg-hover);border-radius:var(--radius-sm)}.doc-list{padding:0;width:100%}.doc-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.doc-list-title{font-size:var(--font-size-xl);font-weight:600;color:var(--fg);letter-spacing:-.3px}.doc-list-subtitle{font-size:var(--font-size-label);color:var(--fg-muted);margin-top:2px}.doc-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.doc-list-export-hint{margin:20px 0 0;padding:14px 16px;font-size:var(--font-size-sm);color:var(--fg-muted);line-height:1.5;background:var(--bg-hover);border-radius:var(--radius-md);border:1px solid var(--border);max-width:640px}.doc-list-export-hint strong{color:var(--fg);font-weight:600}.doc-card{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s;position:relative}.doc-card:hover{border-color:var(--accent-border);box-shadow:0 2px 8px #0000000f}.doc-card--new{border-style:dashed;border-color:var(--border);color:var(--fg-muted);align-items:center;justify-content:center;min-height:90px;gap:4px}.doc-card--new:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle-sm)}.doc-card-icon{font-size:var(--font-size-xl);line-height:1;margin-bottom:2px}.doc-card-title{font-size:var(--font-size-label);font-weight:600;color:var(--fg);line-height:1.3}.doc-card-desc{font-size:var(--font-size-md);color:var(--fg-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.doc-card-meta{font-size:var(--font-size-sm);color:var(--fg-dim);margin-top:auto;padding-top:8px}.doc-card-body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;text-align:left}.doc-card-tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-size-xs);font-weight:500;color:var(--fg-dim);background:var(--bg);border:1px solid var(--border);border-radius:99px;padding:2px 7px;margin-top:4px;width:fit-content;text-transform:uppercase;letter-spacing:.04em}.doc-card-delete{position:absolute;top:8px;right:8px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--fg-dim);opacity:0;transition:opacity .15s,background .15s}.doc-card:hover .doc-card-delete{opacity:1}.doc-card-delete:hover{background:var(--danger-subtle);color:var(--danger)}.doc-list-empty{grid-column:1 / -1;text-align:center;padding:48px 24px;color:var(--fg-dim);font-size:var(--font-size-base)}.doc-editor{display:flex;flex-direction:column;min-height:100%;padding:0 0 64px}.doc-editor-export-btn{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-label);color:var(--fg-muted);background:transparent;border:1px solid var(--border);cursor:pointer;padding:6px 12px;border-radius:var(--radius-sm);transition:background .12s,color .12s,border-color .12s}.doc-editor-export-btn:hover{background:var(--bg-hover);color:var(--fg);border-color:var(--border-light)}.doc-editor-header{padding:40px 40px 24px;max-width:760px;margin:0 auto;width:100%}.doc-editor-title{font-size:28px;font-weight:700;color:var(--fg);letter-spacing:-.5px;line-height:1.2;outline:none;border:none;width:100%}.doc-editor-title:focus{outline:none}.doc-editor-description{margin-top:10px;font-size:var(--font-size-15);color:var(--fg-muted);line-height:1.6;outline:none}.doc-editor-description:empty:before{content:attr(data-placeholder);color:var(--fg-dim)}.doc-editor-blocks{padding:0 40px;max-width:760px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:24px}.doc-editor-block{display:flex;align-items:flex-start;gap:4px;position:relative;border-radius:var(--radius-sm);padding:4px 0}.doc-editor-block:hover .doc-editor-block-grip,.doc-editor-block:hover .doc-editor-block-delete{opacity:1}.doc-editor-block-grip{display:flex;align-items:center;padding-top:4px;color:var(--fg-dim);cursor:grab;opacity:0;transition:opacity .12s;flex-shrink:0;width:20px}.doc-editor-block-content{flex:1;min-width:0}.doc-editor-block-delete{display:flex;align-items:center;padding-top:4px;background:transparent;border:none;cursor:pointer;color:var(--fg-dim);opacity:0;transition:opacity .12s,color .12s;flex-shrink:0;width:20px}.doc-editor-block-delete:hover{color:var(--danger)}.doc-editor-add{padding:16px 40px;max-width:760px;margin:0 auto;width:100%;position:relative}.doc-editor-add-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:var(--font-size-label);color:var(--fg-muted);background:transparent;border:1px dashed var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .12s,color .12s,background .12s}.doc-editor-add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle-sm)}.doc-editor-page-footer{margin-top:32px;padding:24px 40px 48px;max-width:760px;margin-left:auto;margin-right:auto;width:100%;border-top:1px solid var(--border)}.doc-editor-page-footer-lead{margin:0 0 14px;font-size:var(--font-size-sm);color:var(--fg-muted);line-height:1.5;max-width:520px}.doc-editor-page-footer-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}@media print{.doc-editor-page-footer,.doc-editor-add,.doc-editor-block-grip,.doc-editor-block-delete{display:none!important}.doc-editor{padding-bottom:0}.doc-block-dodont-image-replace,.doc-block-dodont-image-hover-actions,.doc-block-image-edit,.doc-block-list-toolbar,.doc-block-list-add-btn,.doc-block-list-remove-btn,.doc-block-table-add-col,.doc-block-table-col-remove,.doc-block-table-row-remove,.doc-block-table-add-row{display:none!important}}.doc-block-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:12000;padding:var(--space-4)}.doc-block-modal{position:relative;background:var(--bg-panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border-light);width:100%;max-width:520px;height:min(76vh,520px);display:flex;overflow:hidden}.doc-block-modal-nav{flex-shrink:0;width:120px;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--bg-canvas, var(--bg-hover));padding:var(--space-3) var(--space-2);gap:2px;overflow-y:auto}.doc-block-modal-nav-title{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);padding:2px var(--space-2) var(--space-3)}.doc-block-modal-nav-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);padding:6px var(--space-2);border:none;border-radius:var(--radius-md);background:transparent;font-size:var(--font-size-sm);font-weight:500;color:var(--fg-muted);cursor:pointer;text-align:left;transition:background .1s,color .1s;white-space:nowrap}.doc-block-modal-nav-item:hover{background:var(--bg-hover);color:var(--fg)}.doc-block-modal-nav-item--active{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-weight:600}.doc-block-modal-nav-count{font-size:10px;font-weight:500;color:var(--fg-dim);background:var(--bg-hover);border-radius:999px;padding:0 5px;min-width:16px;text-align:center;line-height:16px}.doc-block-modal-nav-item--active .doc-block-modal-nav-count{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}.doc-block-modal-panel{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.doc-block-modal-search{flex-shrink:0;display:flex;align-items:center;gap:var(--space-2);margin:var(--space-2) var(--space-3) var(--space-2);padding:0 var(--space-2) 0 var(--space-3);height:30px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-hover);transition:border-color .12s}.doc-block-modal-search:focus-within{border-color:var(--accent)}.doc-block-modal-search-icon{flex-shrink:0;color:var(--fg-muted)}.doc-block-modal-search-input{flex:1;min-width:0;border:none;background:transparent;font-size:var(--font-size-sm);color:var(--fg);outline:none}.doc-block-modal-search-input::placeholder{color:var(--fg-dim)}.doc-block-modal-close-inline{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--fg-muted);cursor:pointer;transition:background .12s,color .12s}.doc-block-modal-close-inline:hover{background:var(--bg-panel);color:var(--fg)}.doc-block-modal-body{flex:1;min-height:0;overflow-y:auto;padding:var(--space-1) var(--space-3) var(--space-3)}.doc-block-modal-section-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 var(--space-2);padding-top:var(--space-1)}.doc-block-modal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.doc-block-modal-tile{display:flex;align-items:center;gap:var(--space-2);padding:8px var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:left;transition:background .1s,border-color .1s}.doc-block-modal-tile:hover{background:var(--bg-hover);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}.doc-block-modal-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.doc-block-modal-tile-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;border-radius:var(--radius-sm);background:var(--bg-hover);color:var(--fg-muted)}.doc-block-modal-tile:hover .doc-block-modal-tile-icon{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}.doc-block-modal-tile-label{font-size:var(--font-size-sm);font-weight:500;color:var(--fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-block-modal-empty{padding:var(--space-8) var(--space-4);text-align:center;color:var(--fg-muted);font-size:var(--font-size-sm)}.doc-block-modal-footer{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:var(--space-2);border-top:1px solid var(--border);font-size:11px;color:var(--fg-dim)}.doc-block-modal-kbd{display:inline-block;padding:1px 5px;font-size:10px;font-family:var(--font-mono, ui-monospace, monospace);font-weight:600;color:var(--fg-muted);background:var(--bg-hover);border:1px solid var(--border);border-radius:4px}.doc-editor-block-wrap{display:contents}.doc-editor-insert-zone{display:flex;align-items:center;justify-content:center;height:0;overflow:visible;position:relative;z-index:1;opacity:0;transition:opacity .15s}.doc-editor-blocks:hover .doc-editor-insert-zone,.doc-editor-insert-zone:focus-within{opacity:1}.doc-editor-insert-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border-radius:999px;border:1.5px dashed var(--border);background:var(--bg-panel);color:var(--fg-muted);cursor:pointer;transform:translateY(-11px);transition:border-color .1s,color .1s,background .1s}.doc-editor-insert-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg-panel));border-style:solid}.doc-block-embed{display:flex;flex-direction:column;gap:var(--space-2)}.doc-block-embed-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-4);border:1.5px dashed var(--border);border-radius:var(--radius-md);color:var(--fg-muted);background:var(--bg-hover)}.doc-block-embed-empty-title{margin:0;font-size:var(--font-size-sm);font-weight:500}.doc-block-embed-url-row{display:flex;align-items:center;gap:var(--space-2);width:100%;max-width:480px}.doc-block-embed-kind{flex-shrink:0;height:32px;padding:0 var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);color:var(--fg);font-size:var(--font-size-sm);cursor:pointer}.doc-block-embed-url-input{flex:1;height:32px;padding:0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);color:var(--fg);font-size:var(--font-size-sm);outline:none}.doc-block-embed-url-input:focus{border-color:var(--accent)}.doc-block-embed-frame-wrap{width:100%;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--bg-hover)}.doc-block-embed-iframe{width:100%;height:100%;border:none;display:block}.doc-block-embed-controls{display:flex;align-items:center;gap:var(--space-2)}.doc-block-embed-url-input--inline{flex:1}.doc-block-embed-height-input{width:64px;height:28px;padding:0 var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-hover);color:var(--fg);font-size:var(--font-size-sm);text-align:right}.doc-block-embed-height-label{font-size:var(--font-size-sm);color:var(--fg-muted)}.doc-block-embed-caption{font-size:var(--font-size-sm);color:var(--fg-muted);text-align:center;outline:none;margin:0;min-height:1em}.doc-block-embed-caption:empty:before{content:attr(data-placeholder);color:var(--fg-dim)}.doc-block-columns{display:grid;grid-template-columns:1fr 4px 1fr;gap:0;align-items:start}.doc-block-columns-divider{background:var(--border);border-radius:2px;align-self:stretch;margin:0 var(--space-2)}.doc-block-columns-col{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-2);min-height:80px}.doc-block-columns-col-block{position:relative;display:flex;align-items:flex-start;gap:var(--space-1)}.doc-block-columns-col-block-content{flex:1;min-width:0}.doc-block-columns-col-delete{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:2px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--fg-dim);cursor:pointer;opacity:0;transition:opacity .1s}.doc-block-columns-col-block:hover .doc-block-columns-col-delete{opacity:1}.doc-block-columns-col-delete:hover{background:var(--bg-hover);color:var(--color-error, #dc2626)}.doc-block-columns-col-add{display:inline-flex;align-items:center;gap:4px;padding:4px var(--space-2);border:1px dashed var(--border);border-radius:var(--radius-md);background:transparent;color:var(--fg-dim);font-size:var(--font-size-sm);cursor:pointer;transition:border-color .1s,color .1s}.doc-block-columns-col-add:hover{border-color:var(--accent);color:var(--accent)}.doc-block-heading{outline:none;line-height:1.25;color:var(--fg);font-weight:700;padding:2px 0}.doc-block-heading--1{font-size:24px;letter-spacing:-.4px;margin-top:8px}.doc-block-heading--2{font-size:var(--font-size-2xl);letter-spacing:-.3px;margin-top:4px}.doc-block-heading--3{font-size:var(--font-size-lg);letter-spacing:-.2px}.doc-block-heading--4{font-size:var(--font-size-base);font-weight:600;letter-spacing:0}.doc-block-heading--5{font-size:var(--font-size-sm);font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--fg-muted)}.doc-block-text{font-size:var(--font-size-base);line-height:1.7;color:var(--fg);outline:none;padding:2px 0}.doc-block-text:empty:before{content:"Write something...";color:var(--fg-dim)}.doc-block-divider{border:none;border-top:1px solid var(--border);margin:8px 0}.doc-block-callout{border-radius:var(--radius-md);padding:12px 14px;border-left:3px solid}.doc-block-callout--info{background:var(--info-subtle);border-color:var(--info)}.doc-block-callout--tip{background:var(--success-subtle);border-color:var(--success)}.doc-block-callout--warning{background:var(--warning-subtle);border-color:var(--warning)}.doc-block-callout--danger{background:var(--danger-subtle);border-color:var(--danger)}.doc-block-callout-header{margin-bottom:6px}.doc-block-callout-variant{font-size:var(--font-size-sm);font-weight:600;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 6px;color:var(--fg-muted);cursor:pointer}.doc-block-callout-content{font-size:var(--font-size-label);line-height:1.6;color:var(--fg);outline:none}.doc-block-callout-content:empty:before{content:"Add a note...";color:var(--fg-dim)}.doc-block-token-table{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.doc-block-token-table--empty{padding:20px;text-align:center;background:var(--bg);color:var(--fg-muted);font-size:var(--font-size-label)}.doc-block-token-table-header{padding:10px 14px 4px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}.doc-block-token-table-title{font-size:var(--font-size-md);font-weight:600;color:var(--fg-muted);margin:0;text-transform:uppercase;letter-spacing:.06em}.doc-block-token-table-prefix-edit{margin:0;font-size:var(--font-size-md);color:var(--fg-muted);display:inline-flex;align-items:center;gap:6px}.doc-block-token-table-prefix-input{font-family:var(--font-mono);font-size:var(--font-size-sm);padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);min-width:140px}.doc-block-token-table-prefix-input::placeholder{color:var(--fg-dim)}.doc-token-table{width:100%;border-collapse:collapse;font-size:var(--font-size-md)}.doc-token-table th{padding:8px 12px;background:var(--bg);text-align:left;font-weight:600;color:var(--fg-muted);border-bottom:1px solid var(--border);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em}.doc-token-table td{padding:7px 12px;border-bottom:1px solid var(--border-light);vertical-align:middle}.doc-token-table tr:last-child td{border-bottom:none}.doc-token-table tr:hover td{background:var(--bg-hover)}.doc-token-table-path code{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--accent);background:var(--accent-subtle-sm);padding:1px 5px;border-radius:3px}.doc-token-table-raw{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--fg-muted)}.doc-token-table-preview{width:40px}.doc-token-color-swatch{display:inline-block;width:20px;height:20px;border-radius:var(--radius-sm);border:1px solid var(--border);vertical-align:middle}.doc-block-dodont{display:grid;grid-template-columns:1fr 1fr;gap:20px}.doc-block-dodont-col{border-radius:var(--radius-md);padding:18px;border:1px solid var(--border);display:flex;flex-direction:column;gap:0}.doc-block-dodont-media-zone{margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid color-mix(in srgb,var(--border) 85%,transparent)}.doc-block-dodont-copy-zone{display:flex;flex-direction:column;gap:12px;min-width:0}.doc-block-dodont-image-wrap{width:100%;min-height:80px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg);border:1px dashed var(--border)}.doc-block-dodont-image-wrap--filled{border-style:solid;border-color:color-mix(in srgb,var(--border) 90%,var(--fg-muted));overflow:visible}.doc-block-dodont-img{width:100%;height:auto;display:block;vertical-align:top}.doc-block-dodont-image-placeholder{min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px}.doc-block-dodont-image-placeholder .asset-picker{width:100%;max-width:100%}.doc-block-dodont-image-filled{display:flex;flex-direction:column;gap:8px;width:100%}.doc-block-dodont-image-view{position:relative;border-radius:var(--radius-sm);overflow:hidden}.doc-block-dodont-image-hover-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s ease}.doc-block-dodont-image-view:hover .doc-block-dodont-image-hover-actions,.doc-block-dodont-image-hover-actions:focus-within{opacity:1}.doc-block-dodont-remove-float{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--bg-panel) 92%,transparent);color:var(--fg);box-shadow:0 1px 4px #0000001f;cursor:pointer;transition:background .12s,color .12s}.doc-block-dodont-remove-float:hover{background:var(--danger-subtle);color:var(--danger)}.doc-block-dodont-image-replace{font-size:var(--font-size-sm)}.doc-block-dodont-image-replace-summary{cursor:pointer;color:var(--fg-muted);font-weight:500;list-style:none}.doc-block-dodont-image-replace-summary::-webkit-details-marker{display:none}.doc-block-dodont-image-replace-summary:before{content:"▸ ";display:inline-block;transition:transform .12s ease}.doc-block-dodont-image-replace[open] .doc-block-dodont-image-replace-summary:before{transform:rotate(90deg)}.doc-block-dodont-image-replace-body{margin-top:10px;padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-hover)}.doc-block-dodont-caption--image{margin-top:0;margin-bottom:0}.doc-block-dodont-col--do{border-top:3px solid var(--success);background:var(--success-subtle)}.doc-block-dodont-col--dont{border-top:3px solid var(--danger);background:var(--danger-subtle)}.doc-block-dodont-label{display:block;font-size:var(--font-size-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:0;outline:none;min-height:1.25em}.doc-block-dodont-label:focus-visible{box-shadow:0 0 0 2px var(--accent);border-radius:var(--radius-sm)}.doc-block-dodont-label--do{color:var(--success)}.doc-block-dodont-label--dont{color:var(--danger)}.doc-block-dodont-text{font-size:var(--font-size-label);line-height:1.6;color:var(--fg);outline:none}.doc-block-dodont-caption{font-size:var(--font-size-sm);color:var(--fg-muted);margin-top:6px;outline:none}.doc-block-image{margin:8px 0}.doc-block-image-media{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--bg)}.doc-block-image-img{display:block;max-width:100%;height:auto;vertical-align:middle}.doc-block-image-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 20px;color:var(--fg-dim);font-size:var(--font-size-label)}.doc-block-image-placeholder .asset-uploader,.doc-block-image-placeholder .asset-picker{width:100%;max-width:320px}.doc-block-image-url-row{display:flex;align-items:center;gap:8px;width:100%;max-width:320px}.doc-block-image-url-label{font-size:var(--font-size-md);color:var(--fg-muted);flex-shrink:0}.doc-block-image-url-input{flex:1;font-size:var(--font-size-md);padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg)}.doc-block-image-url-input--inline{max-width:280px;margin-top:8px}.doc-block-image-edit{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-light)}.doc-block-image-edit .asset-picker{margin-bottom:8px}.doc-block-image-caption{font-size:var(--font-size-md);color:var(--fg-muted);margin:8px 0 0;outline:none}.doc-block-image-caption:empty:before{content:attr(data-placeholder);color:var(--fg-dim)}.doc-block-code{margin:8px 0;border-radius:var(--radius-md);border:1px solid var(--border);overflow:hidden;background:var(--bg-panel)}.doc-block-code-header{padding:6px 10px;border-bottom:1px solid var(--border);background:var(--bg)}.doc-block-code-language{font-size:12px;color:var(--fg-muted);background:transparent;border:none;outline:none;width:100%;max-width:180px}.doc-block-code-language::placeholder{color:var(--fg-dim)}.doc-block-code-pre{margin:0;padding:12px 14px;overflow-x:auto;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--fg)}.doc-block-code-content{display:block;white-space:pre;outline:none;min-height:60px}.doc-block-code-content:empty:before{content:attr(data-placeholder);color:var(--fg-dim)}.doc-block-list-wrap{display:flex;flex-direction:column;gap:6px}.doc-block-list-toolbar{display:flex;gap:4px}.doc-block-list-type-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--fg-muted);cursor:pointer;transition:background .1s}.doc-block-list-type-btn:hover{background:var(--bg-subtle);color:var(--fg)}.doc-block-list-type-btn--active{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent)}.doc-block-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}.doc-block-list-item{display:flex;align-items:center;gap:6px}.doc-block-list-item-text{flex:1;outline:none;min-width:40px;line-height:1.6;color:var(--fg);font-size:var(--font-size-base)}.doc-block-list-item-text:empty:before{content:"List item";color:var(--fg-dim)}.doc-block-list-remove-btn{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:transparent;color:var(--fg-dim);cursor:pointer;border-radius:3px;opacity:0;transition:opacity .15s;flex-shrink:0}.doc-block-list-item:hover .doc-block-list-remove-btn{opacity:1}.doc-block-list-remove-btn:hover{color:var(--fg);background:var(--bg-subtle)}.doc-block-list-add-btn{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-size-xs);color:var(--fg-dim);background:transparent;border:none;cursor:pointer;padding:2px 0;transition:color .15s}.doc-block-list-add-btn:hover{color:var(--accent)}.doc-block-quote{margin:4px 0;padding:12px 18px;border-left:3px solid var(--accent);background:var(--accent-subtle, var(--bg-subtle));border-radius:0 6px 6px 0}.doc-block-quote-text{margin:0 0 6px;font-size:var(--font-size-base);font-style:italic;line-height:1.6;color:var(--fg);outline:none}.doc-block-quote-text:empty:before{content:"Write a quote...";color:var(--fg-dim);font-style:italic}.doc-block-quote-attribution{font-size:var(--font-size-sm);color:var(--fg-muted);outline:none}.doc-block-quote-attribution:empty:before{content:attr(data-placeholder);color:var(--fg-dim)}.doc-block-table-wrap{display:flex;flex-direction:column;gap:8px}.doc-block-table-scroll{overflow-x:auto}.doc-block-table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}.doc-block-table-th{position:relative;background:var(--bg-subtle);border:1px solid var(--border-light);padding:8px 10px;text-align:left;font-weight:600;color:var(--fg);min-width:120px}.doc-block-table-th--action{min-width:32px;width:32px;background:transparent;border:none}.doc-block-table-td{border:1px solid var(--border-light);padding:8px 10px;vertical-align:top}.doc-block-table-td--action{border:none;padding:4px;width:24px}.doc-block-table-cell-edit{display:block;outline:none;min-width:40px;color:var(--fg);line-height:1.5}.doc-block-table-cell-edit:empty:before{content:"—";color:var(--fg-dim)}.doc-block-table-col-remove,.doc-block-table-row-remove{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:transparent;color:var(--fg-dim);cursor:pointer;border-radius:3px;opacity:0;transition:opacity .15s;position:absolute;top:4px;right:4px}.doc-block-table-th:hover .doc-block-table-col-remove,.doc-block-table-td--action:hover .doc-block-table-row-remove{opacity:1}.doc-block-table-col-remove:hover,.doc-block-table-row-remove:hover{color:var(--fg);background:var(--bg-subtle)}.doc-block-table-row-remove{position:static;opacity:0}tr:hover .doc-block-table-row-remove{opacity:1}.doc-block-table-add-col,.doc-block-table-add-row{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-size-xs);color:var(--fg-dim);background:transparent;border:1px dashed var(--border-light);border-radius:4px;padding:4px 8px;cursor:pointer;transition:color .15s,border-color .15s}.doc-block-table-add-col:hover,.doc-block-table-add-row:hover{color:var(--accent);border-color:var(--accent)}.doc-block-table-add-col{width:28px;justify-content:center;padding:4px}.ai-state-editor{display:flex;flex-direction:column;gap:20px}.ai-state-editor .token-editor-header{padding-right:136px}.ai-defaults-panel{padding:20px;background:var(--bg-subtle);border:1px solid var(--border-light);border-radius:var(--radius-md)}.ai-defaults-panel-title{font-size:var(--font-size-label);font-weight:600;color:var(--fg);margin:0 0 6px}.ai-defaults-panel-desc{font-size:var(--font-size-sm);color:var(--fg-muted);margin:0 0 16px;line-height:1.4}.ai-defaults-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.ai-default-card{display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-sm);transition:border-color .15s}.ai-default-card:hover{border-color:var(--border)}.ai-default-card--added{border-color:var(--accent);background:var(--bg-active)}.ai-default-card-preview{display:flex;align-items:center;justify-content:center;height:48px}.ai-default-card-body{display:flex;flex-direction:column;gap:10px}.ai-default-card-label{font-size:var(--font-size-label);font-weight:600;color:var(--fg)}.ai-default-card-desc{font-size:var(--font-size-sm);color:var(--fg-muted);line-height:1.3}.ai-default-card-fields{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.ai-default-field{display:flex;flex-direction:column;gap:4px}.ai-default-field-label{font-size:11px;font-weight:500;color:var(--fg-muted)}.ai-default-field-row{display:flex;align-items:center;gap:6px}.ai-default-swatch{width:28px;height:28px;border-radius:4px;overflow:hidden;border:1px solid var(--border-light);flex-shrink:0}.ai-default-swatch input[type=color]{width:100%;height:100%;padding:0;border:none;cursor:pointer;background:transparent}.ai-default-input{font-size:var(--font-size-sm);padding:6px 8px;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);min-width:0}.ai-default-input--short{width:72px}.ai-default-select{font-size:var(--font-size-sm);padding:6px 8px;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);min-width:100px}.ai-default-add-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px}.ai-default-card-added{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-sm);font-weight:500;color:var(--accent)}.ai-state-detail-add-wrap{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-light);display:flex;flex-direction:column;gap:10px}.ai-state-detail-add-wrap .btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start}.ai-state-detail-draft-hint{font-size:var(--font-size-sm);color:var(--fg-muted);line-height:1.5;margin:0}.ai-state-ladder{margin-bottom:16px}.ai-state-ladder-surface{width:100%;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;padding:24px;background:var(--bg);border-radius:var(--radius-lg);border:1px solid var(--border-light)}.ai-state-ladder-item{display:flex;flex-direction:column;align-items:center;gap:8px;width:120px;min-width:120px;max-width:120px;flex:0 0 120px}.ai-state-ladder-item .ai-state-card{flex-direction:column;width:120px;max-width:120px;min-height:176px;padding:12px;border-radius:var(--radius-md);border:1px solid var(--border-light);justify-content:flex-start}.ai-state-ladder-item .ai-state-card:last-child{border-bottom:1px solid var(--border-light)}.ai-state-ladder-item .ai-state-card:hover{background:var(--bg-hover)}.ai-state-ladder-item .ai-state-card--active{border-color:var(--accent);background:var(--bg-active)}.ai-state-ladder-item .ai-state-card--active:before{display:none}.ai-state-ladder-item .ai-state-card-anim{flex:0 0 auto;margin-bottom:4px}.ai-state-ladder-item .ai-state-card-body{width:100%;align-items:center;text-align:center}.ai-code-css-vars{margin-top:16px}.ai-code-css-vars-label{display:block;font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted);margin-bottom:8px}.ai-code-css-vars-block{margin:0;padding:12px 16px;background:var(--bg-subtle);border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-family:var(--font-mono);color:var(--fg);overflow-x:auto;white-space:pre}.ai-state-layout{display:grid;grid-template-columns:280px 1fr;gap:0;flex:1;min-height:0;border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden}.ai-state-list{display:flex;flex-direction:column;gap:0;border-right:1px solid var(--border-light);overflow-y:auto;background:var(--bg-subtle)}.ai-state-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:none;background:transparent;cursor:pointer;text-align:left;border-bottom:1px solid var(--border-light);transition:background .12s;position:relative}.ai-state-card:last-child{border-bottom:none}.ai-state-card:hover{background:var(--bg-hover)}.ai-state-card--active{background:var(--bg-active)}.ai-state-card--active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);border-radius:0 2px 2px 0}.ai-state-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:1}.ai-state-card--empty{opacity:.78;transition:opacity .15s}.ai-state-card--empty:hover{opacity:1}.ai-state-card-anim{flex:0 0 44px;height:44px;display:flex;align-items:center;justify-content:center}.ai-state-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.ai-state-card-label{font-size:var(--font-size-label);font-weight:600;color:var(--fg);line-height:1.2}.ai-state-card--active .ai-state-card-label{color:var(--accent)}.ai-state-card-desc{font-size:var(--font-size-sm);color:var(--fg-muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.haptics-card-badge{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:2px 8px;border-radius:999px;font-size:var(--font-size-xs);font-weight:600;background:#16a34a1f;color:var(--success, #16a34a);border:1px solid rgba(22,163,74,.18)}.haptics-added-token-list{display:flex;flex-direction:column;gap:8px}.haptics-added-token-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--bg)}.haptics-added-token-row code{font-size:var(--font-size-sm);color:var(--fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-state-detail{display:flex;flex-direction:column;gap:0;overflow-y:auto;background:var(--bg)}.ai-state-detail-header{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--border-light);background:var(--bg)}.ai-state-detail-header-meta{display:flex;flex-direction:column;gap:2px}.ai-state-detail-header-preview{flex:0 0 44px;height:44px;display:flex;align-items:center;justify-content:center}.ai-state-detail-name{font-size:var(--font-size-base);font-weight:600;color:var(--fg)}.ai-state-detail-desc{font-size:var(--font-size-md);color:var(--fg-muted)}.ai-state-fields{display:flex;flex-direction:column;gap:0;padding:20px 24px;border-bottom:1px solid var(--border-light)}.ai-state-fields-row{display:flex;flex-wrap:wrap;gap:24px 32px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border-light)}.ai-state-fields-row .ai-field--compact{flex:0 1 auto;min-width:0;padding:0;border-bottom:none}.ai-state-fields-row .ai-field-input--compact{width:120px;max-width:140px;flex:0 0 auto}.ai-state-fields-row .ai-duration-slider--compact{width:140px;max-width:180px;flex:0 0 auto}.ai-state-fields-row .ai-field-select--compact{width:180px;max-width:220px;flex:0 0 auto}.ai-state-fields-row .ai-field-input--compact-easing{width:180px;max-width:220px}.ai-field{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-bottom:1px solid var(--border-light)}.ai-field:last-child{border-bottom:none}.ai-field-label{font-size:var(--font-size-md);font-weight:600;color:var(--fg-muted);display:flex;align-items:center;gap:8px}.ai-field-label-value{font-weight:500;font-family:var(--font-mono);color:var(--fg);text-transform:none;letter-spacing:0;font-size:var(--font-size-md);background:var(--bg-subtle);padding:2px 6px;border-radius:4px;margin-left:auto}.ai-field-row{display:flex;align-items:center;gap:8px}.ai-field-row--color{position:relative;flex-wrap:wrap}.ai-field-row--slider{gap:12px}.ai-field-swatch{flex:0 0 32px;width:32px;height:32px;border-radius:6px;border:1px solid var(--border-light);position:relative;overflow:hidden;cursor:pointer;box-shadow:0 1px 3px #0000001f}.ai-field-color-input{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;width:calc(100% + 8px);height:calc(100% + 8px);cursor:pointer;opacity:0}.ai-field-input{padding:7px 10px;font-size:var(--font-size-label);font-family:var(--font-mono);background:var(--bg-input);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--fg);transition:border-color .12s}.ai-field-input:focus{outline:none;border-color:var(--accent)}.ai-field-input--grow{flex:1}.ai-field-input--short{width:88px;flex:0 0 88px}.ai-field-hint{font-size:var(--font-size-sm);color:var(--fg-dim);font-family:var(--font-mono)}.ai-field-select{flex:1;padding:7px 10px;font-size:var(--font-size-label);background:var(--bg-input);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--fg);cursor:pointer;transition:border-color .12s;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.ai-field-select:focus{outline:none;border-color:var(--accent)}.ai-duration-slider{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border-light);border-radius:2px;outline:none;cursor:pointer}.ai-duration-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--accent);cursor:pointer}.ai-duration-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--accent);cursor:pointer}.ai-duration-scale{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--fg-dim);padding:0 2px}.ai-state-css-output{padding:20px 24px;display:flex;flex-direction:column;gap:10px}.ai-state-css-output-label{font-size:var(--font-size-md);font-weight:600;color:var(--fg-muted)}.ai-state-css-output-block{background:var(--bg-code, var(--bg-subtle));border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:14px 16px;display:flex;flex-direction:column;gap:4px}.ai-state-css-line{font-size:var(--font-size-md);font-family:var(--font-mono);display:flex;gap:4px;flex-wrap:wrap;line-height:1.6}.ai-css-prop{color:var(--accent)}.ai-css-colon{color:var(--fg-muted)}.ai-css-val{color:var(--success, #22c55e)}.ai-css-semi{color:var(--fg-dim)}.ai-anim-preview{display:flex;align-items:center;justify-content:center;width:44px;height:44px;position:relative}.ai-anim-preview--large{width:72px;height:72px}.ai-anim-preview--pulse{position:relative}.ai-pulse-dot{width:12px;height:12px;border-radius:50%;background:var(--anim-color, #6366f1);position:relative;z-index:1}.ai-anim-preview--large .ai-pulse-dot{width:18px;height:18px}.ai-pulse-ring{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:12px;height:12px;border-radius:50%;border:2px solid var(--anim-color, #6366f1);opacity:0;animation:ai-pulse-ring var(--anim-dur, 1.4s) cubic-bezier(.4,0,.6,1) infinite}.ai-pulse-ring--delay{animation-delay:calc(var(--anim-dur, 1.4s) * .4)}.ai-anim-preview--large .ai-pulse-ring{width:18px;height:18px}@keyframes ai-pulse-ring{0%{transform:scale(1);opacity:.8}to{transform:scale(2.6);opacity:0}}.ai-anim-preview--stream{flex-direction:column;gap:5px;align-items:flex-start;padding:0 4px}.ai-anim-preview--large.ai-anim-preview--stream{gap:7px;padding:0 6px}.ai-stream-lines{display:flex;flex-direction:column;gap:5px;width:100%}.ai-anim-preview--large .ai-stream-lines{gap:7px}.ai-stream-line{height:3px;border-radius:2px;background:var(--fg-dim);width:100%;opacity:.4}.ai-stream-line--short{width:60%}.ai-anim-preview--large .ai-stream-line{height:4px}.ai-stream-cursor{width:2px;height:12px;border-radius:1px;background:var(--anim-color, #8b5cf6);animation:ai-stream-cursor-blink var(--anim-dur, .6s) linear infinite;align-self:flex-end;margin-top:1px}.ai-anim-preview--large .ai-stream-cursor{width:3px;height:18px}@keyframes ai-stream-cursor-blink{0%,49%{opacity:1}50%,to{opacity:0}}.ai-anim-preview--dots{gap:5px}.ai-anim-preview--large.ai-anim-preview--dots{gap:7px}.ai-dot{width:7px;height:7px;border-radius:50%;background:var(--anim-color, #06b6d4);animation:ai-dot-bounce var(--anim-dur, .9s) cubic-bezier(.45,0,.55,1) infinite}.ai-anim-preview--large .ai-dot{width:10px;height:10px;--bounce-dist: -10px}@keyframes ai-dot-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(var(--bounce-dist, -7px))}}.ai-spinner{width:26px;height:26px;animation:ai-spin-rotate var(--anim-dur, 1s) linear infinite}.ai-anim-preview--large .ai-spinner{width:44px;height:44px}@keyframes ai-spin-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ai-shake-box{width:26px;height:26px;border-radius:6px;border:2px solid var(--anim-color, #ef4444);color:var(--anim-color, #ef4444);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-base);font-weight:800;animation:ai-shake-anim var(--anim-dur, .4s) cubic-bezier(.36,.07,.19,.97) infinite;animation-play-state:running}.ai-anim-preview--large .ai-shake-box{width:44px;height:44px;border-radius:10px;font-size:var(--font-size-3xl);border-width:2.5px}@keyframes ai-shake-anim{0%,70%{transform:translate(0)}73%,79%,85%,91%,97%{transform:translate(-4px)}76%,82%,88%,94%{transform:translate(4px)}to{transform:translate(0)}}.ai-checkmark{width:28px;height:28px;animation:ai-check-scale var(--anim-dur, .5s) cubic-bezier(.34,1.56,.64,1) infinite}.ai-anim-preview--large .ai-checkmark{width:48px;height:48px}.ai-checkmark-path{stroke-dasharray:30;stroke-dashoffset:0;animation:ai-check-draw var(--anim-dur, .5s) cubic-bezier(.34,1.56,.64,1) infinite}@keyframes ai-check-scale{0%{transform:scale(.7);opacity:.5}40%,80%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:.5}}@keyframes ai-check-draw{0%{stroke-dashoffset:30}40%,80%{stroke-dashoffset:0}to{stroke-dashoffset:30}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media (prefers-reduced-motion: reduce){.ai-anim-preview .ai-pulse-ring,.ai-anim-preview .ai-stream-cursor,.ai-anim-preview .ai-dot,.ai-anim-preview .ai-spinner,.ai-anim-preview .ai-shake-box,.ai-anim-preview .ai-checkmark,.ai-anim-preview .ai-checkmark-path{animation:none}.ai-anim-preview--pulse .ai-pulse-dot{opacity:.85}.ai-anim-preview--stream .ai-stream-cursor{opacity:.7}}@keyframes ai-shimmer-sweep{0%{background-position:-200% center}to{background-position:200% center}}.ai-pattern-shimmer{width:40px;height:28px;border-radius:4px;background:linear-gradient(var(--shimmer-angle, 105deg),var(--shimmer-base, #e2e8f0) 25%,var(--shimmer-highlight, #f8fafc) 50%,var(--shimmer-base, #e2e8f0) 75%);background-size:200% 100%;animation:ai-shimmer-sweep var(--shimmer-dur, 1.6s) linear infinite}@keyframes ai-orbit-spin{0%{transform:rotate(0) translate(var(--orbit-radius, 12px)) rotate(0)}to{transform:rotate(360deg) translate(var(--orbit-radius, 12px)) rotate(-360deg)}}.ai-pattern-orbit{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.ai-pattern-orbit:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--orbit-color, #6366f1) 25%,transparent)}.ai-orbit-particle{width:var(--orbit-size, 6px);height:var(--orbit-size, 6px);border-radius:50%;background:var(--orbit-color, #6366f1);box-shadow:0 0 6px var(--orbit-color, #6366f1);animation:ai-orbit-spin var(--orbit-dur, 1.2s) linear infinite;transform-origin:center}@keyframes ai-snake-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ai-pattern-snake{width:36px;height:28px;border-radius:5px;position:relative;overflow:hidden}.ai-pattern-snake:before{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;background:conic-gradient(var(--snake-color, #6366f1) 0deg,transparent 100deg,transparent 260deg,var(--snake-color, #6366f1) 360deg);animation:ai-snake-rotate var(--snake-dur, 2s) linear infinite}.ai-pattern-snake:after{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:4px;background:var(--bg-panel, #fff)}@keyframes ai-wave-bar{0%,to{transform:scaleY(.25);opacity:.5}50%{transform:scaleY(1);opacity:1}}.ai-pattern-wave{display:flex;align-items:center;gap:var(--wave-gap, 3px);height:28px}.ai-wave-bar{width:3px;height:100%;border-radius:2px;background:var(--wave-color, #8b5cf6);transform-origin:center;animation:ai-wave-bar var(--wave-dur, 1s) ease-in-out infinite}.ai-state-group-label{width:100%;flex:0 0 100%;font-size:var(--font-size-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);padding:10px 12px 6px;pointer-events:none;-webkit-user-select:none;user-select:none}.ai-state-group-divider{width:100%;flex:0 0 100%;height:1px;background:var(--border-light);margin:8px 0 0}.ai-pattern-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.ai-field-slider{flex:1;height:4px;accent-color:var(--accent);cursor:pointer}.ai-field-value{min-width:52px;font-size:var(--font-size-sm);color:var(--fg-muted);text-align:right}.ai-state-detail--empty{display:flex;align-items:center;justify-content:center;padding:24px}.ai-state-no-match{font-size:var(--font-size-md);color:var(--fg-muted);margin:0}.ai-state-split{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}.ai-state-split-cards{min-width:0}.ai-state-split-panel{position:sticky;top:0;min-width:0;overflow:hidden}.ai-state-split-panel .ai-state-detail{background:var(--bg-subtle);border:1px solid var(--border-light);border-radius:10px;padding:16px}.ai-state-split-panel .ai-pattern-fields{grid-template-columns:1fr}.ai-state-split-panel .ai-field-row{flex-wrap:nowrap;min-width:0}.ai-state-split-panel .ai-field-slider{flex:1 1 0;min-width:0}.ai-state-split-panel .ai-field-input{min-width:0;width:auto;flex:1 1 0}.ai-state-split-panel .ai-field-input--compact{width:100px;max-width:130px;flex:0 0 auto}.ai-state-split-panel .ai-state-fields-row{flex-direction:column;gap:0;overflow:hidden}.ai-state-split-panel .ai-state-fields-row .ai-field--compact{width:100%}.ai-state-split-panel .ai-duration-slider--compact,.ai-state-split-panel .ai-field-select--compact,.ai-state-split-panel .ai-field-input--compact-easing{flex:1 1 0;min-width:0;width:auto;max-width:none}.ai-state-panel-empty{display:flex;align-items:center;justify-content:center;min-height:160px;background:var(--bg-subtle);border:1px dashed var(--border-light);border-radius:10px;padding:24px}.ai-state-panel-empty p{font-size:var(--font-size-md);color:var(--fg-subtle);margin:0;text-align:center}.comp-catalog{display:flex;flex-direction:column;gap:16px}.comp-catalog-desc{font-size:var(--font-size-lg);color:var(--fg-muted);line-height:1.6;max-width:48rem;margin:0 0 24px}.comp-catalog-body{display:flex;flex-direction:column;min-width:0}.comp-catalog-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}.comp-catalog-toolbar{display:flex;align-items:center;gap:10px;padding:0 4px}.comp-catalog-toolbar-hint{margin:0;padding:0 4px;font-size:var(--font-size-sm);color:var(--fg-muted);line-height:1.4}.comp-catalog-ai-workflow{margin-bottom:16px;padding:14px 16px;background:var(--bg-subtle);border:1px solid var(--border-light);border-radius:var(--radius-md)}.comp-catalog-ai-title{font-size:var(--font-size-label);font-weight:600;margin:0 0 6px;color:var(--fg)}.comp-catalog-ai-desc{font-size:var(--font-size-sm);color:var(--fg-muted);margin:0 0 12px;line-height:1.4}.comp-catalog-ai-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.comp-catalog-search{flex:1}.comp-catalog-search-input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-input);color:var(--fg);font-family:var(--font-sans);font-size:var(--font-size-base);outline:none;transition:border-color .15s}.comp-catalog-search-input:focus{border-color:var(--accent)}.comp-catalog-filter{padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-input);color:var(--fg);font-family:var(--font-sans);font-size:var(--font-size-md);cursor:pointer}.comp-catalog-create{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px}.comp-catalog-create-label{font-size:var(--font-size-label);font-weight:600;color:var(--fg);margin-bottom:12px}.comp-catalog-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-bottom:16px}.comp-catalog-template-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);cursor:pointer;transition:border-color .15s,background .15s}.comp-catalog-template-card:hover{background:var(--bg-hover)}.comp-catalog-template-card--selected{border-color:var(--accent);background:var(--accent-subtle)}.comp-catalog-template-label{font-size:var(--font-size-sm);color:var(--fg-muted);text-align:center}.comp-catalog-template-card--selected .comp-catalog-template-label{color:var(--accent);font-weight:600}.comp-catalog-create-row{display:flex;gap:8px;align-items:center;max-width:360px}.comp-catalog-create-input{width:200px;max-width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-input);color:var(--fg);font-family:var(--font-sans);font-size:var(--font-size-base);outline:none}.comp-catalog-create-input:focus{border-color:var(--accent)}.comp-catalog-create-hint{font-size:var(--font-size-sm);color:var(--fg-muted);margin-top:8px}.comp-catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px;padding:4px}.comp-catalog-card{position:relative;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:24px;cursor:pointer;transition:border-color .2s,box-shadow .2s}.comp-catalog-card:hover{border-color:var(--border-focus);box-shadow:0 4px 6px -1px #0000001a}.comp-catalog-card-preview{height:160px;background:var(--bg-subtle);border-radius:8px;margin-bottom:24px;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}.comp-catalog-card-preview .comp-card-svg{display:flex;align-items:center;justify-content:center}.comp-catalog-card-preview .comp-card-svg svg{max-width:120px;max-height:140px;color:var(--fg)}.comp-catalog-card-info{padding:0}.comp-catalog-card-name-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.comp-catalog-card-name{font-size:20px;font-weight:700;color:var(--fg)}.comp-catalog-card-desc{font-size:14px;color:var(--fg-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}.comp-catalog-card-meta{font-size:var(--font-size-xs);color:var(--fg-dim);margin-top:var(--space-1)}.comp-catalog-card-badge{font-size:var(--font-size-2xs);padding:2px 8px;border-radius:6px;background:var(--bg-subtle);color:var(--fg-muted);border:1px solid var(--border-subtle)}.comp-catalog-card-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s}.comp-catalog-card:hover .comp-catalog-card-actions{opacity:1}.comp-catalog-card-actions .btn-icon{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}.comp-status-badge{font-size:var(--font-size-2xs);padding:1px 8px;border-radius:9999px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.comp-status-badge--ready{background:var(--success-subtle);color:var(--success)}.comp-status-badge--deprecated{background:var(--warning-subtle);color:var(--warning)}.comp-status-badge--clickable{cursor:pointer;border:none;transition:opacity .15s ease}.comp-status-badge--clickable:hover{opacity:.8}.comp-workspace{display:flex;flex-direction:column;height:100%;min-height:0}.comp-workspace-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--border);flex-shrink:0}.comp-workspace-header-left{display:flex;align-items:flex-start;gap:16px;flex:1;min-width:0}.comp-workspace-back{font-family:var(--font-sans);font-size:var(--font-size-md);color:var(--fg-muted);background:none;border:none;cursor:pointer;padding:4px 0;white-space:nowrap;transition:color .15s}.comp-workspace-back:hover{color:var(--accent)}.comp-workspace-name-area{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.comp-workspace-name-input{font-size:var(--font-size-xl);font-weight:700;color:var(--fg);background:none;border:none;outline:none;font-family:var(--font-sans);padding:0;width:100%}.comp-workspace-name-input:focus{border-bottom:1px solid var(--accent)}.comp-workspace-desc-input{font-size:var(--font-size-md);color:var(--fg-muted);background:none;border:none;outline:none;font-family:var(--font-sans);padding:0;width:100%}.comp-workspace-desc-input:focus{border-bottom:1px solid var(--accent)}.comp-workspace-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.comp-workspace-body{display:flex;flex:1;min-height:0;overflow:hidden;width:100%}.comp-structure-panel{width:220px;min-width:200px;max-width:260px;border-right:1px solid var(--border-light);background:var(--bg-panel);display:flex;flex-direction:column;min-height:0}.comp-structure-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border-light)}.comp-structure-title{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);font-weight:700}.comp-structure-count{font-size:11px;color:var(--fg-muted)}.comp-structure-list{display:flex;flex-direction:column;gap:6px;padding:10px;overflow-y:auto;min-height:0}.comp-structure-item{width:100%;text-align:left;border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;color:var(--fg);cursor:pointer}.comp-structure-item:hover{border-color:var(--accent);background:var(--bg-hover)}.comp-structure-item--active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}.comp-structure-item--drop-target{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}.comp-structure-item--dragging{opacity:.55}.comp-structure-item-name{font-size:12px;font-weight:600}.comp-structure-item-tag{font-size:10px;color:var(--fg-muted);font-family:var(--font-mono)}.comp-structure-footer{border-top:1px solid var(--border-light);padding:8px 10px}.comp-structure-hint{margin:0;font-size:11px;color:var(--fg-dim)}.edit-body{display:flex;flex:1;min-height:0;overflow:hidden;width:100%}.edit-canvas{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden;background:var(--bg-subtle)}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--border-light);flex-shrink:0}.canvas-mode-toggle{display:flex;background:var(--bg-hover);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-light)}.canvas-mode-btn{font-size:11px;font-weight:500;padding:4px 12px;border:none;background:transparent;color:var(--fg-dim);cursor:pointer;transition:all .15s;font-family:var(--font-sans)}.canvas-mode-btn.active{background:var(--bg);color:var(--fg);box-shadow:var(--shadow-sm)}.canvas-zoom{font-size:11px;color:var(--fg-dim);display:flex;align-items:center;gap:6px}.canvas-zoom button{width:24px;height:24px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg-muted);font-size:12px;cursor:pointer}.canvas-zoom button:hover{color:var(--fg);background:var(--bg-hover)}.canvas-zoom-fit{width:auto!important;padding:0 8px!important;font-size:11px!important;font-weight:500;letter-spacing:.01em;border-left:1px solid var(--border)!important;margin-left:2px}.canvas-artboard{position:relative;flex:1 1 0;min-height:180px;display:flex;align-items:center;justify-content:center;padding:24px 32px;overflow:auto;background-color:var(--bg-subtle);background-image:radial-gradient(circle,rgba(0,0,0,.12) 1px,transparent 1px);background-size:16px 16px}.canvas-artboard-label{position:absolute;bottom:10px;left:14px;font-size:11px;font-weight:500;font-family:var(--font-mono);color:var(--fg-dim);opacity:.6;pointer-events:none;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 28px)}[data-theme=dark] .canvas-artboard-label{opacity:.5}[data-theme=dark] .canvas-artboard{background-image:radial-gradient(circle,rgba(255,255,255,.15) 1px,transparent 1px)}.canvas-frame{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px 32px;box-shadow:var(--shadow-md);flex-shrink:0}.canvas-preview-clickable{cursor:pointer;display:inline-block;position:relative}.canvas-variants{padding:12px 16px;background:var(--bg);border-top:1px solid var(--border-light);display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex-shrink:0}.canvas-variants-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-dim)}.cv-pills{display:flex;gap:6px;flex-wrap:wrap}.cv-pill{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;background:transparent;font-family:var(--font-sans)}.cv-pill:hover{background:var(--bg-hover)}.cv-pill.active{border-color:var(--accent);background:var(--accent-subtle)}.cv-mini{padding:4px 10px;border-radius:5px;font-size:11px;font-weight:600;border:none;pointer-events:none}.cv-mini.primary{background:var(--accent);color:var(--accent-fg, #fff)}.cv-mini.secondary{background:var(--bg-hover);color:var(--fg)}.cv-mini.ghost{background:transparent;color:var(--accent)}.cv-mini.destructive{background:var(--danger);color:#fff}.cv-name{font-size:10px;color:var(--fg-dim)}.canvas-states{padding:0 16px 12px;background:var(--bg);display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}.canvas-states-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-dim)}.cs-pill{padding:3px 10px;font-size:11px;font-weight:500;border:1px solid var(--border);border-radius:99px;background:var(--bg);color:var(--fg-dim);cursor:pointer;transition:all .15s;font-family:var(--font-sans)}.cs-pill:hover{color:var(--fg);background:var(--bg-hover)}.cs-pill.active{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent);font-weight:600}.canvas-variant-set{padding:0 16px 12px;background:var(--bg);display:flex;flex-direction:column;gap:10px;flex-shrink:0}.canvas-variant-set-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.canvas-variant-set-empty{margin:0;font-size:12px;color:var(--fg-dim)}.comp-variant-set-panel{padding:10px;border:1px solid var(--border-light);border-radius:10px;background:var(--bg-panel);margin-bottom:10px}.comp-variant-set-panel--collapsed{padding-bottom:8px}.canvas-variant-collapse-btn{border:none;background:transparent;color:var(--fg);font-size:12px;font-weight:600;cursor:pointer;padding:0}.canvas-variant-manager{border:1px solid var(--border-light);background:var(--bg-panel);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:8px}.figma-variant-row{display:flex;align-items:flex-start;gap:8px}.figma-variant-row-name{min-width:68px;font-size:11px;color:var(--fg-dim);line-height:30px}.canvas-variant-manager-label{font-size:11px;color:var(--fg-dim)}.canvas-variant-values{display:flex;flex-wrap:wrap;gap:6px}.canvas-variant-prop-select{width:100%;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);padding:6px 8px;font-size:12px}.canvas-variant-value-pill{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:999px;background:var(--bg);padding:2px 6px}.canvas-variant-value-pill--default{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}.canvas-variant-value-name{border:none;background:transparent;color:var(--fg);font-size:11px;cursor:pointer}.canvas-variant-value-remove{border:none;background:transparent;color:var(--fg-dim);font-size:12px;cursor:pointer}.canvas-variant-add-row{display:flex;gap:6px}.canvas-variant-add-input{flex:1;min-width:0;border:1px solid var(--border);border-radius:6px;padding:6px 8px;font-size:12px;background:var(--bg);color:var(--fg)}.canvas-variant-combos{display:flex;flex-wrap:wrap;gap:6px}.canvas-variant-combo-pill{border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--fg-dim);padding:4px 10px;font-size:11px;cursor:pointer}.canvas-variant-combo-pill--active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}.edit-panel{width:320px;min-width:320px;flex-shrink:0;min-height:0;display:flex;flex-direction:column;background:var(--bg);overflow:visible}.panel-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 4px;background:var(--bg);flex-shrink:0}.panel-tab{font-size:12px;font-weight:500;padding:9px 12px;border:none;background:transparent;color:var(--fg-dim);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;font-family:var(--font-sans)}.panel-tab:hover{color:var(--fg)}.panel-tab.active{color:var(--fg);font-weight:600;border-bottom-color:var(--fg)}.panel-tab .tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;font-size:10px;font-weight:700;background:var(--bg-hover);color:var(--fg-dim);border-radius:99px;padding:0 4px;margin-left:4px}.panel-content{flex:1;overflow-y:auto;overflow-x:visible;min-height:0}.panel-tab-body{display:block;padding:12px 16px}.panel-section{padding:10px 12px;border-bottom:1px solid var(--border-light)}.panel-section:last-child{border-bottom:none}.ps-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ps-header:focus{outline:none}.ps-header:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.panel-section--collapsed .ps-header{margin-bottom:0}.ps-toggle{display:inline-flex;align-items:center;justify-content:center;color:var(--fg-dim);transition:transform .2s;flex-shrink:0}.ps-toggle.open{transform:rotate(90deg)}.ps-title{font-size:12px;font-weight:700;color:var(--fg)}.ps-subtitle{font-size:11px;color:var(--fg-dim);margin-top:1px}.slot-pills{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.slot-pill{padding:3px 10px;font-size:11px;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg-dim);cursor:pointer;transition:all .15s;font-family:var(--font-sans)}.slot-pill:hover{background:var(--bg-hover);color:var(--fg)}.slot-pill.active{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent);font-weight:600}.slot-pill .sc{font-size:var(--font-size-sm);color:var(--fg-dim);margin-left:2px}.visual-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}.visual-row:last-child{margin-bottom:0}.v-label{font-size:11px;color:var(--fg-dim);min-width:52px;flex-shrink:0}.v-input{font-size:11px;padding:5px 8px;border:1px solid var(--border-light);border-radius:4px;width:56px;font-family:var(--font-sans)}.v-input:focus{outline:none;border-color:var(--accent)}.v-input.wide{width:100%;flex:1;min-width:0}.v-select{font-size:11px;padding:5px 8px;border:1px solid var(--border-light);border-radius:4px;background:var(--bg);flex:1;min-width:0;font-family:var(--font-sans);cursor:pointer}.swatch{width:24px;height:24px;border-radius:4px;border:1px solid var(--border);flex-shrink:0;cursor:pointer}.edit-panel .swatch,.panel-section .swatch{width:18px!important;height:18px!important;min-height:18px!important;max-height:18px!important;aspect-ratio:unset!important}.icon-btn-sm{width:26px;height:26px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg-dim);font-size:13px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.icon-btn-sm:hover{background:var(--bg-hover);color:var(--fg)}.icon-btn-sm.active{background:var(--accent);color:#fff;border-color:var(--accent)}.slider-row{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.slider-row input[type=range]{flex:1;min-width:50px;height:4px;accent-color:var(--accent)}.slider-row .v-input{width:48px;flex:none}.prop-row{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:12px;min-height:30px}.prop-row-name{font-family:var(--font-mono);font-size:11px;color:var(--fg-muted);min-width:80px;flex-shrink:0}.prop-row-value{flex:1;min-width:0;display:flex;align-items:center;gap:4px}.prop-input{flex:1;font-size:11px;padding:5px 8px;border:1px solid var(--border-light);border-radius:4px;min-width:0;font-family:var(--font-sans)}.prop-input:focus{outline:none;border-color:var(--accent)}.prop-input.token{font-family:var(--font-mono);font-size:10px;color:var(--accent)}.token-btn{width:24px;height:24px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg-dim);font-size:11px;font-family:var(--font-mono);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}.token-btn:hover{background:var(--bg-hover);color:var(--accent);border-color:var(--accent)}.rm-btn{width:20px;height:20px;border:none;border-radius:4px;background:transparent;color:var(--fg-dim);font-size:13px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}.rm-btn:hover{color:var(--danger);background:var(--danger-subtle)}.add-prop-btn{margin-top:6px;padding:5px 10px;font-size:11px;color:var(--fg-dim);border:1px dashed var(--border);border-radius:4px;background:var(--bg);cursor:pointer;width:100%;text-align:left;font-family:var(--font-sans);transition:all .15s}.add-prop-btn:hover{background:var(--bg-hover);color:var(--fg);border-color:var(--fg-dim)}.part-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-light)}.part-item:last-child{border-bottom:none}.part-icon{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}.part-info{flex:1;min-width:0}.part-name{font-size:13px;font-weight:600}.part-tag{font-family:var(--font-mono);font-size:11px;color:var(--fg-dim)}.design-ctx-bar{display:flex;flex-direction:row;gap:4px;padding:8px 12px;overflow-x:auto;border-bottom:1px solid var(--border);flex-wrap:wrap}.ctx-pill{padding:2px 8px;font-size:11px;font-weight:500;border-radius:99px;border:1px solid transparent;background:var(--bg-subtle, var(--bg-hover));color:var(--fg-muted, var(--fg-dim));cursor:pointer;transition:all .15s;white-space:nowrap;font-family:var(--font-sans)}.ctx-pill:hover{background:var(--bg-hover);color:var(--fg)}.ctx-pill--active{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle, rgba(99, 102, 241, .08));font-weight:600}.ctx-pill--state{color:var(--fg-muted, var(--fg-dim))}.ctx-pill--state.ctx-pill--active{border-color:var(--warning, #f59e0b);color:var(--warning, #f59e0b);background:#f59e0b14}.token-chip-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--bg-subtle, var(--bg-hover));border:1px solid var(--border);border-radius:4px;font-size:12px;cursor:pointer;max-width:100%;overflow:hidden;flex:1;min-width:0;font-family:var(--font-sans);color:var(--accent);transition:all .15s}.token-chip-btn:hover{background:var(--bg-hover);border-color:var(--accent)}.token-chip-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.15)}.token-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-size:11px;font-family:var(--font-mono)}.token-chip-arrow{opacity:.5;font-size:10px;flex-shrink:0}.comp-workspace-preview{flex:0 1 auto;max-width:420px;min-width:280px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding-right:16px;border-right:1px solid var(--border-subtle);background:var(--bg-subtle)}.comp-workspace-preview-modes{display:flex;gap:2px;background:var(--bg-subtle);border-radius:var(--radius-md);padding:2px}.comp-workspace-mode-btn{flex:1;padding:6px 12px;font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:500;color:var(--fg-muted);background:none;border:none;border-radius:calc(var(--radius-md) - 2px);cursor:pointer;transition:all .15s}.comp-workspace-mode-btn:hover{color:var(--fg)}.comp-workspace-mode-btn--active{background:var(--bg-panel);color:var(--fg);box-shadow:var(--shadow-sm)}.comp-workspace-preview-canvas{background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:32px;display:flex;align-items:center;justify-content:center;min-height:180px;background-image:radial-gradient(circle,var(--border-subtle) 1px,transparent 1px);background-size:16px 16px}.comp-workspace-playground{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md)}.comp-workspace-playground-row{display:flex;align-items:center;gap:10px}.comp-workspace-playground-label{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted);min-width:60px;font-family:var(--font-mono, monospace)}.comp-workspace-playground-pills{display:flex;gap:4px;flex-wrap:wrap}.comp-workspace-pill{padding:3px 10px;font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:500;color:var(--fg-muted);background:var(--bg-subtle);border:1px solid var(--border);border-radius:9999px;cursor:pointer;transition:all .12s}.comp-workspace-pill:hover{background:var(--bg-hover);color:var(--fg)}.comp-workspace-pill--active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.comp-workspace-variants{display:flex;flex-direction:column;gap:8px}.comp-workspace-variants-header{display:flex;align-items:center;justify-content:space-between}.comp-workspace-variants-title{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted)}.comp-workspace-variants-toggle{display:flex;align-items:center;gap:6px;font-size:var(--font-size-sm);color:var(--fg-muted);cursor:pointer}.comp-workspace-variants-toggle input{accent-color:var(--accent)}.comp-workspace-editor{width:320px;min-width:320px;flex-shrink:0;overflow-y:auto;display:flex;flex-direction:column;background:var(--bg-panel);border-left:1px solid var(--border-subtle)}.comp-workspace-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding-bottom:0;flex-shrink:0;position:sticky;top:0;background:var(--bg);z-index:5}.comp-workspace-tab{display:flex;align-items:center;gap:6px;padding:8px 16px;font-family:var(--font-sans);font-size:var(--font-size-md);font-weight:500;color:var(--fg-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .12s,border-color .12s;margin-bottom:-1px}.comp-workspace-tab:hover{color:var(--fg)}.comp-workspace-tab--active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}.comp-workspace-tab-count{font-size:var(--font-size-2xs);padding:0 5px;border-radius:9999px;background:var(--bg-subtle);color:var(--fg-dim);min-width:18px;text-align:center;line-height:16px}.comp-workspace-tab--active .comp-workspace-tab-count{background:var(--accent-subtle);color:var(--accent)}.comp-workspace-tab-content{flex:1;padding:16px 0;min-height:0}.comp-workspace-section{display:flex;flex-direction:column;gap:12px}.comp-workspace-styles{gap:24px}.comp-workspace-style-group{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md)}.comp-workspace-style-group-title{font-size:var(--font-size-label);font-weight:600;color:var(--fg);margin:0}.comp-workspace-style-group-hint{font-size:var(--font-size-sm);color:var(--fg-dim);margin:0 0 4px}.design-panel-toolbar .design-panel-slots{margin-bottom:4px}.design-panel-section{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--border)}.design-panel-section:first-of-type{border-top:none;padding-top:0}.design-panel-section-label{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.03em}.design-panel-align-row,.design-panel-direction-row{display:flex;gap:4px;flex-wrap:wrap}.design-panel-icon-btn{width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg-dim);font-size:14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.design-panel-icon-btn:hover{background:var(--bg-hover);color:var(--fg)}.design-panel-icon-btn--active{background:var(--accent);color:var(--accent-fg, #fff);border-color:var(--accent)}.design-panel-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.design-panel-row--inline{gap:10px}.design-panel-field{display:inline-flex;align-items:center;gap:4px}.design-panel-field-label{font-size:var(--font-size-sm);color:var(--fg-dim);min-width:20px}.design-panel-input{font-size:var(--font-size-sm);padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);min-width:0;flex:1;max-width:120px}.design-panel-input--short{width:52px;max-width:52px;flex:none}.design-panel-input:focus{outline:none;border-color:var(--accent)}.design-panel-flip{display:flex;gap:4px}.design-panel-select{font-size:var(--font-size-sm);padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg)}.design-panel-select--short{min-width:72px}.design-panel-check-row{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-sm);color:var(--fg);cursor:pointer}.design-panel-check-row input{accent-color:var(--accent)}.design-panel-row--fill{gap:8px;align-items:center}.design-panel-swatch{width:24px;height:24px;border-radius:var(--radius-sm);border:1px solid var(--border);flex-shrink:0}.design-panel-swatch--stroke{background:transparent!important;border-width:2px}.design-panel-add-btn{margin-top:4px}.design-panel{display:flex;flex-direction:column;gap:16px}.design-panel-slots{display:flex;flex-wrap:wrap;gap:4px}.design-panel-slot-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:11px;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg-muted);cursor:pointer;transition:all .15s}.design-panel-slot-pill:hover{background:var(--bg-hover);color:var(--fg)}.design-panel-slot-pill--active{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent);font-weight:600}.design-panel-slot-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.design-panel-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-dim);margin:0 0 8px}.design-panel-section-content{display:flex;flex-direction:column;gap:8px}.design-panel-label{font-size:11px;color:var(--fg-dim);min-width:52px;flex-shrink:0}.design-panel-value-wrap{display:flex;align-items:center;gap:6px;flex:1;min-width:0;position:relative}.design-panel-value-wrap .design-panel-input{max-width:none}.design-panel-swatch-input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.design-panel-token-btn{width:26px;height:26px;padding:0;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg-dim);font-size:11px;font-family:var(--font-mono);cursor:pointer;flex-shrink:0}.design-panel-token-btn:hover{background:var(--bg-hover);color:var(--accent);border-color:var(--accent)}.design-panel-picker-wrap{position:absolute;top:100%;left:0;z-index:20;margin-top:4px}.design-panel-slider-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.design-panel-slider{flex:1;min-width:60px;height:4px;accent-color:var(--accent)}.design-panel-slider-value{font-size:11px;color:var(--fg-dim);min-width:32px}.design-panel-direction-btns,.design-panel-align-btns{display:flex;gap:2px}.design-panel-padding-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:140px}.design-panel-add-prop{margin-top:6px;padding:6px 10px;font-size:11px;color:var(--fg-dim);border:1px dashed var(--border);border-radius:var(--radius-sm);background:var(--bg);cursor:pointer;width:100%;text-align:left;transition:all .15s}.design-panel-add-prop:hover{background:var(--bg-hover);color:var(--fg);border-color:var(--accent)}.comp-workspace-events-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}.comp-workspace-events-table{display:flex;flex-direction:column;gap:2px;margin-top:8px}.comp-workspace-events-row{display:grid;grid-template-columns:80px 1fr 60px 1fr;gap:12px;align-items:center;padding:6px 0;font-size:12px;border-bottom:1px solid var(--border-light)}.comp-workspace-events-name{font-family:var(--font-mono);font-weight:600;color:var(--accent)}.comp-workspace-events-handler{font-family:var(--font-mono);font-size:11px;padding:2px 6px;border-radius:4px;background:var(--accent-subtle);color:var(--accent)}.comp-workspace-events-slot{font-family:var(--font-mono);font-size:11px;color:var(--fg-dim)}.comp-workspace-events-desc{font-size:12px;color:var(--fg-muted)}.cb-code-panel--dark .cb-code-tabs{background:var(--bg-inset, #1e2030);padding:0 8px;border-radius:var(--radius-md) var(--radius-md) 0 0;border:1px solid var(--border);border-bottom:none}.cb-code-panel--dark .cb-code-tab{font-size:12px;padding:9px 13px;background:transparent;color:#fff6;border:none;border-bottom:2px solid transparent;margin-bottom:-1px}.cb-code-panel--dark .cb-code-tab:hover{color:#ffffffb3}.cb-code-panel--dark .cb-code-tab--active{color:#fff;border-bottom-color:var(--accent)}.cb-code-actions{display:flex;gap:6px;margin-left:auto}.cb-code-panel--dark .cb-code-copy-btn,.cb-code-panel--dark .cb-code-download-btn{padding:3px 9px;font-size:11px;background:#ffffff14;color:#fff9;border:none;border-radius:4px;cursor:pointer}.cb-code-panel--dark .cb-code-copy-btn:hover:not(:disabled),.cb-code-panel--dark .cb-code-download-btn:hover:not(:disabled){background:#ffffff24;color:#ffffffe6}.cb-code-panel--dark .cb-code-copy-btn:disabled,.cb-code-panel--dark .cb-code-download-btn:disabled{opacity:.5;cursor:not-allowed}.cb-code-block--dark{background:var(--bg-code);padding:20px 24px;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:#a9b1d6;border:1px solid var(--border);border-radius:0 0 var(--radius-md) var(--radius-md);margin:0;overflow:auto;max-height:380px;-webkit-overflow-scrolling:touch}.cb-code-api-placeholder{padding:20px 24px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:0 0 var(--radius-md) var(--radius-md);border-top:none}.cb-code-api-text{font-size:13px;color:var(--fg-muted);margin:0}@media (max-width: 900px){.comp-workspace-body{flex-direction:column}.comp-structure-panel{width:100%;max-width:none;min-width:0;border-right:none;border-bottom:1px solid var(--border-light);max-height:180px}.comp-workspace-preview{width:100%;max-width:none;min-width:0;position:static;max-height:none;border-right:none;border-bottom:1px solid var(--border-subtle)}.comp-workspace-editor{width:100%;min-width:0;max-height:none;border-left:none}.comp-catalog-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.edit-body{flex-direction:column}.edit-canvas{border-right:none;border-bottom:1px solid var(--border);min-height:0}.edit-canvas .canvas-artboard{max-height:min(320px,38vh);min-height:120px}.edit-panel{width:100%;min-width:0}.comp-workspace--embedded .comp-workspace-body{flex:1;height:auto;min-height:400px}}.comp-page{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--bg);overflow:hidden}.comp-page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;height:52px;flex-shrink:0;background:#fffffff2;border-bottom:1px solid var(--border)}.comp-page-header--in-topbar{width:100%;min-width:0;height:100%;padding:0 var(--space-4);background:transparent;border-bottom:none}[data-theme=dark] .comp-page-header{background:#1a1a1af2}[data-theme=dark] .comp-page-header--in-topbar{background:transparent}.comp-page-header-left{display:flex;align-items:center;gap:12px;min-width:0}.comp-page-back{font-size:13px;font-weight:500;color:var(--fg-muted);background:none;border:none;cursor:pointer;padding:5px 8px;border-radius:var(--radius-sm);transition:color .15s,background .15s}.comp-page-back:hover{color:var(--fg);background:var(--bg-hover)}.comp-page-header-divider{width:1px;height:22px;background:var(--border);flex-shrink:0}.comp-page-title{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}.comp-page-status{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;font-size:10px;font-weight:700;border-radius:99px;text-transform:uppercase;letter-spacing:.04em}.comp-page-status-dot{width:5px;height:5px;border-radius:50%}.comp-page-status--ready{background:var(--success-subtle);color:var(--success)}.comp-page-status--ready .comp-page-status-dot{background:var(--success)}.comp-page-status--draft{background:var(--warning-subtle);color:var(--warning)}.comp-page-status--draft .comp-page-status-dot{background:var(--warning)}.comp-page-status--deprecated{background:var(--bg-hover);color:var(--fg-dim)}.comp-page-header-center{display:flex;align-items:center;gap:0;background:var(--bg-hover);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-light)}.comp-page-mode-btn{display:flex;align-items:center;gap:5px;padding:5px 14px;font-size:12px;font-weight:500;border:none;background:transparent;color:var(--fg-dim);cursor:pointer;transition:all .15s}.comp-page-mode-btn:hover{color:var(--fg)}.comp-page-mode-btn--active{background:var(--bg);color:var(--fg);box-shadow:var(--shadow-sm);font-weight:600}.comp-page-header-right{display:flex;align-items:center;gap:6px}.comp-page-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;font-size:12px;font-weight:500;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--fg);cursor:pointer}.comp-page-btn--ghost{border-color:transparent}.comp-page-btn--ghost:hover{background:var(--bg-hover);border-color:var(--border-light)}.comp-page-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.comp-page-body .comp-workspace--embedded{flex:1;min-height:0}.comp-workspace--embedded{display:flex;flex-direction:column;min-height:0;overflow:hidden}.comp-workspace--embedded .comp-workspace-embedded-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:6px 16px;background:var(--bg);border-bottom:1px solid var(--border-light);flex-shrink:0}.topbar-edit-actions-slot{display:flex;align-items:center;justify-content:flex-end;min-width:0}.comp-workspace-embedded-bar--in-topbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0;background:transparent;border-bottom:none;flex-shrink:0}.comp-workspace--embedded .comp-workspace-body{flex:1;min-height:0;max-height:min(90vh,880px);overflow:hidden}.comp-page-body .comp-doc-view{flex:1;min-height:0}.comp-doc-view{min-height:0;overflow:auto}.comp-doc-view--empty{padding:24px;color:var(--fg-muted)}.comp-doc-layout{display:flex;max-width:1200px;margin:0 auto;padding:0 32px}.comp-doc-main{flex:1;min-width:0;max-width:820px;padding:40px 48px 80px 0}.comp-doc-toc{width:200px;flex-shrink:0;position:sticky;top:52px;align-self:flex-start;padding:40px 0 40px 32px;border-left:1px solid var(--border-light);max-height:calc(100vh - 52px);overflow-y:auto}.comp-doc-toc-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-dim);margin-bottom:16px}.comp-doc-toc-list{list-style:none;display:flex;flex-direction:column;gap:2px}.comp-doc-toc-item a{display:flex;align-items:center;gap:8px;padding:5px 10px;font-size:12px;font-weight:500;color:var(--fg-dim);text-decoration:none;border-radius:var(--radius-sm);transition:color .15s,background .15s}.comp-doc-toc-item a:hover{color:var(--fg);background:var(--bg-hover)}.comp-doc-toc-item--active a{color:var(--accent);background:var(--accent-subtle);font-weight:600}.comp-doc-toc-dot{width:5px;height:5px;border-radius:50%;background:var(--border);flex-shrink:0}.comp-doc-toc-item--active .comp-doc-toc-dot{background:var(--accent)}.comp-doc-section{margin-bottom:56px}.comp-doc-section-number{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:8px}.comp-doc-section-title{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--fg);margin-bottom:16px}.comp-doc-section-desc{font-size:14px;color:var(--fg-muted);line-height:1.7;max-width:640px}.comp-doc-a11y-placeholder{max-width:640px}.comp-doc-a11y-placeholder p{font-size:14px;color:var(--fg-muted);line-height:1.7;margin:0}.comp-doc-overview-hero{margin-top:24px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.comp-doc-preview-canvas{padding:48px 32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fafbff,#f5f7ff);border-bottom:1px solid var(--border-light);min-height:160px}.comp-doc-playground-bar{display:flex;align-items:center;gap:12px;padding:10px 20px;flex-wrap:wrap}.comp-doc-pg-ctrl{display:flex;align-items:center;gap:6px}.comp-doc-pg-ctrl label{font-size:10px;font-weight:700;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.04em}.comp-doc-pg-pills{display:flex;gap:4px;flex-wrap:wrap}.comp-doc-pill{font-size:11px;font-weight:500;padding:3px 9px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg-dim);cursor:pointer;transition:all .15s}.comp-doc-pill:hover{color:var(--fg);background:var(--bg-hover)}.comp-doc-pill--active{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent);font-weight:600}.comp-doc-usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.comp-doc-usage-card{padding:16px 20px;border-radius:var(--radius-md);border:1px solid var(--border-light)}.comp-doc-usage-card--do{border-left:3px solid var(--success);background:var(--success-subtle)}.comp-doc-usage-card--dont{border-left:3px solid var(--danger);background:var(--danger-subtle)}.comp-doc-usage-card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}.comp-doc-usage-card--do .comp-doc-usage-card-title{color:var(--success)}.comp-doc-usage-card--dont .comp-doc-usage-card-title{color:var(--danger)}.comp-doc-usage-card ul{margin:0;padding-left:18px;font-size:13px;color:var(--fg-muted);line-height:1.6}.comp-doc-variant-gallery{margin-top:20px}.comp-doc-table-wrap{margin-top:20px;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.comp-doc-table{width:100%;border-collapse:collapse;font-size:13px}.comp-doc-table thead{background:var(--bg-subtle)}.comp-doc-table th{text-align:left;padding:9px 16px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-dim);border-bottom:1px solid var(--border)}.comp-doc-table td{padding:10px 16px;border-bottom:1px solid var(--border-light);vertical-align:top}.comp-doc-table tr:last-child td{border-bottom:none}.comp-doc-t-name{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--accent)}.comp-doc-t-type{font-family:var(--font-mono);font-size:11px;padding:2px 6px;border-radius:4px;background:var(--accent-subtle);color:var(--accent)}.comp-doc-t-default{font-family:var(--font-mono);font-size:12px;color:var(--fg-dim)}.comp-doc-t-desc{font-size:13px;color:var(--fg-muted)}.comp-doc-t-slot{font-family:var(--font-mono);font-size:11px;padding:2px 6px;border-radius:4px;background:var(--warning-subtle);color:var(--warning)}.comp-doc-badge-opt{font-size:var(--font-size-sm);font-weight:700;text-transform:uppercase;padding:1px 5px;border-radius:3px;background:var(--bg-hover);color:var(--fg-dim);margin-left:4px}.comp-doc-kbd{font-family:var(--font-mono);font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;background:var(--bg-hover);border:1px solid var(--border)}.comp-doc-code-block{margin-top:20px;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.comp-doc-code-tabs{display:flex;align-items:center;background:#1e2030;padding:0 8px;border-bottom:1px solid rgba(255,255,255,.08)}.comp-doc-code-tab{font-size:12px;font-weight:500;padding:9px 13px;border:none;background:transparent;color:#fff6;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}.comp-doc-code-tab:hover{color:#ffffffb3}.comp-doc-code-tab--active{color:#fff;border-bottom-color:var(--accent)}.comp-doc-code-copy-btn{margin-left:auto;padding:3px 9px;font-size:11px;font-weight:500;border:none;background:#ffffff14;color:#fff9;border-radius:4px;cursor:pointer;transition:all .15s}.comp-doc-code-copy-btn:hover{background:#ffffff24;color:#ffffffe6}.comp-doc-code-content{background:var(--bg-code);padding:20px 24px;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:#a9b1d6;overflow-x:auto;max-height:380px;margin:0}@media (max-width: 900px){.comp-doc-toc{display:none}.comp-doc-main{max-width:100%;padding-right:0}.comp-doc-usage-grid{grid-template-columns:1fr}}.icon-scale-group{margin-bottom:24px}.icon-scale-group-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.icon-size-scale-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.icon-size-scale-item{display:grid;grid-template-columns:80px 96px 96px 1fr 32px;align-items:center;gap:14px 16px;padding:12px 16px;border-bottom:1px solid var(--border-light);transition:background .1s}.icon-size-scale-item:last-child{border-bottom:none}.icon-size-scale-item:hover{background:var(--bg-hover)}.icon-size-scale-preview{display:flex;align-items:center;justify-content:center;width:80px;min-height:44px;color:var(--accent);flex-shrink:0}.icon-size-scale-name{font-size:var(--font-size-base);font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;border:none;padding:0;cursor:default;text-align:left;font-family:var(--font-mono)}.icon-size-scale-name:hover{color:var(--accent);cursor:text}.icon-size-scale-cssvar{font-size:11px;color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-stroke-scale-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.icon-stroke-scale-item{display:grid;grid-template-columns:80px 96px 80px 1fr 32px;align-items:center;gap:14px 16px;padding:12px 16px;border-bottom:1px solid var(--border-light);transition:background .1s}.icon-stroke-scale-item:last-child{border-bottom:none}.icon-stroke-scale-item:hover{background:var(--bg-hover)}.icon-stroke-scale-preview{display:flex;align-items:center;justify-content:center;width:80px;min-height:44px;color:var(--accent);flex-shrink:0}.icon-import-modal{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, .18));width:min(780px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}.icon-import-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}.icon-import-drop-zone{border:2px dashed var(--border);border-radius:var(--radius-md);padding:32px 24px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--bg-subtle)}.icon-import-drop-icon{color:var(--fg-dim);margin-bottom:4px}.icon-import-drop-title{font-size:var(--font-size-base);font-weight:600;color:var(--fg);margin:0}.icon-import-drop-hint{font-size:var(--font-size-sm);color:var(--fg-muted);margin:0}.icon-import-drop-btns{display:flex;gap:8px;margin-top:8px}.icon-import-loading{font-size:13px;color:var(--fg-muted);text-align:center;padding:16px}.icon-import-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border-subtle)}.icon-import-summary-count{font-size:13px;color:var(--fg-muted)}.icon-import-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;max-height:380px;overflow-y:auto;padding-right:4px}.icon-import-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-subtle)}.icon-import-item--error{opacity:.45;border-color:var(--error, #e63946)}.icon-import-item--duplicate{opacity:.55}.icon-import-item-preview{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--fg)}.icon-import-item-error-icon{font-size:18px;font-weight:700;color:var(--error, #e63946)}.icon-import-item-name{font-size:11px;font-family:var(--font-mono);color:var(--fg-muted);background:transparent;border:1px solid transparent;border-radius:3px;padding:2px 4px;width:100%;text-align:center;transition:border-color .12s}.icon-import-item-name:focus{border-color:var(--accent);outline:none;color:var(--fg)}.icon-import-item-name--disabled{pointer-events:none;opacity:.5}.icon-import-item-badge{font-size:10px;font-weight:600;padding:1px 5px;border-radius:99px}.icon-import-item-badge--error{background:var(--error-subtle, #fde8e8);color:var(--error, #e63946)}.icon-import-item-badge--dup{background:var(--bg-hover);color:var(--fg-muted)}.bp-onboarding-intro{background:var(--bg-hover);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-5)}.bp-onboarding-intro-text{font-size:var(--font-size-sm);color:var(--fg-muted);line-height:1.6;margin:0}.bp-onboarding-intro-text strong{color:var(--fg);font-weight:600}.bp-spacing-hint{margin-top:var(--space-2);font-size:var(--font-size-sm);color:var(--fg-warning, #b45309);background:color-mix(in srgb,var(--fg-warning, #b45309) 8%,transparent);border:1px solid color-mix(in srgb,var(--fg-warning, #b45309) 25%,transparent);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);line-height:1.5}.bp-spacing-hint strong{font-weight:600}.bp-section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.breakpoints-widths-table{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.breakpoints-widths-header{display:grid;grid-template-columns:96px 140px 1fr;gap:0 16px;padding:8px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}.breakpoints-width-row{display:grid;grid-template-columns:96px 140px 1fr;gap:0 16px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border-light);transition:background .1s}.breakpoints-width-row:last-child{border-bottom:none}.breakpoints-width-row:hover{background:var(--bg-hover)}.breakpoints-width-label{font-size:var(--font-size-base);font-weight:600;color:var(--fg)}.breakpoints-width-input-wrap{display:flex;align-items:center;gap:4px}.breakpoints-width-input{width:80px!important;text-align:right}.breakpoints-width-unit{font-size:var(--font-size-sm);color:var(--fg-muted)}.breakpoints-cssvar{font-size:11px;color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bp-token-group{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}.bp-token-group-header{display:flex;align-items:center;gap:8px;padding:4px 0 6px;border-bottom:1px solid var(--border-light);margin-bottom:4px}.bp-token-group-title{font-size:var(--font-size-sm);font-weight:600;color:var(--fg);flex:1}.bp-token-group-hint{font-size:11px;color:var(--fg-dim)}.bp-token-row{display:grid;grid-template-columns:1fr 96px 1fr 28px;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);transition:background .1s}.bp-token-row:hover{background:var(--bg-hover)}.bp-token-name{font-size:12px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bp-token-value{font-size:12px;color:var(--fg-muted);text-align:right}.bp-token-cssvar{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--fg-dim);background:transparent;border:none;padding:2px 6px;border-radius:var(--radius-sm);cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;font-family:var(--font-mono);transition:background .1s}.bp-token-cssvar:hover{background:var(--bg-hover);color:var(--accent)}.bp-token-cssvar span{overflow:hidden;text-overflow:ellipsis}.bp-token-delete{opacity:.4}.bp-token-row:hover .bp-token-delete{opacity:1}.bp-grid-diagram{display:flex;flex-direction:column;gap:2px;padding:20px 16px 16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;-webkit-user-select:none;user-select:none}.bp-grid-measure{display:flex;align-items:center;gap:0;height:20px;margin-bottom:2px}.bp-grid-measure-line{flex:1;height:1px;background:var(--accent);opacity:.7}.bp-grid-measure-line--content{background:var(--fg-muted)}.bp-grid-measure-label{flex-shrink:0;padding:0 8px;font-size:11px;font-family:var(--font-mono);font-weight:600;color:var(--accent);white-space:nowrap}.bp-grid-measure-label--content{color:var(--fg-muted)}.bp-grid-measure-line:before,.bp-grid-measure-line:after{content:"";display:block;width:1px;height:6px;background:inherit;margin-top:-3px}.bp-grid-measure--device{margin-bottom:6px}.bp-grid-measure--content{margin-bottom:10px}.bp-grid-visual{display:flex;align-items:stretch;height:64px;gap:0;border-radius:var(--radius-sm);overflow:hidden}.bp-grid-margin-block{flex-shrink:0;background:repeating-linear-gradient(-45deg,var(--border-light) 0px,var(--border-light) 1px,transparent 1px,transparent 6px);border:1px solid var(--border-light);min-width:1px}.bp-grid-col-wrap{display:flex;align-items:stretch;min-width:0}.bp-grid-col-block{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;border-radius:2px;position:relative}.bp-grid-col-label{font-size:10px;font-family:var(--font-mono);font-weight:700;color:var(--fg);opacity:.75;white-space:nowrap;pointer-events:none;text-shadow:0 0 4px var(--bg-panel)}.bp-grid-gutter-block{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;position:relative;min-width:1px}.bp-grid-gutter-label{font-size:var(--font-size-sm);font-family:var(--font-mono);color:var(--fg-dim);white-space:nowrap;pointer-events:none;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);line-height:1}.bp-grid-bottom{display:flex;align-items:flex-start;margin-top:6px;gap:0}.bp-grid-bottom-cell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;min-width:0;overflow:hidden}.bp-grid-bottom-val{font-size:10px;font-family:var(--font-mono);font-weight:600;color:var(--fg-muted);white-space:nowrap}.bp-grid-bottom-name{font-size:var(--font-size-sm);color:var(--fg-dim);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.bp-summary-table{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-panel)}.bp-summary-header,.bp-summary-row{display:grid;grid-template-columns:80px repeat(6,1fr);align-items:center;gap:8px;padding:8px 16px}.bp-summary-header{background:var(--bg-hover);border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}.bp-summary-row{background:transparent;border:none;border-bottom:1px solid var(--border-light);cursor:pointer;text-align:left;transition:background .1s;width:100%}.bp-summary-row:last-child{border-bottom:none}.bp-summary-row:hover{background:var(--bg-hover)}.bp-summary-row--active{background:var(--accent-subtle, rgba(var(--accent-rgb, 59, 130, 246), .06));box-shadow:inset 3px 0 0 var(--accent)}.bp-summary-row--active:hover{background:var(--accent-subtle, rgba(var(--accent-rgb, 59, 130, 246), .1))}.bp-summary-device{font-size:var(--font-size-sm);font-weight:600;color:var(--fg)}.bp-summary-val{font-size:12px;color:var(--fg-muted);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layout-grid-section h3.layout-panel-title{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}.tv-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-panel)}.tv-table{width:100%;min-width:600px;border-collapse:collapse;table-layout:fixed}.tv-th-token{width:200px;min-width:160px}.tv-th-light{width:210px;min-width:160px}.tv-th-mode{width:220px;min-width:180px}.tv-th-add{width:44px;min-width:44px}.tv-thead-row{background:var(--bg-hover);border-bottom:1px solid var(--border)}.tv-th{padding:8px 12px;text-align:left;font-size:11px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.tv-th-token{position:sticky;left:0;z-index:2;background:var(--bg-hover);border-right:1px solid var(--border-light)}.tv-mode-header{display:flex;align-items:center;gap:6px}.tv-mode-header--light{color:var(--fg-dim)}.tv-mode-hint{font-size:10px;color:var(--fg-dim);text-transform:none;letter-spacing:0;font-weight:400}.tv-mode-name{flex:1}.tv-mode-actions{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .1s}.tv-th:hover .tv-mode-actions{opacity:1}.tv-mode-icon-btn{background:none;border:none;padding:2px 4px;border-radius:var(--radius-sm);color:var(--fg-dim);cursor:pointer;display:flex;align-items:center;transition:background .1s,color .1s}.tv-mode-icon-btn:hover{background:var(--bg-panel);color:var(--fg)}.tv-mode-icon-btn--danger:hover{color:var(--error, #ef4444)}.tv-add-mode-btn{width:28px;height:28px;border:1px dashed var(--border);border-radius:var(--radius-sm);background:none;color:var(--fg-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .1s,color .1s}.tv-add-mode-btn:hover{border-color:var(--accent);color:var(--accent)}.tv-section-row{background:var(--bg-hover)}.tv-section-cell{padding:0}.tv-section-toggle{width:100%;display:flex;align-items:center;gap:6px;padding:6px 12px;background:none;border:none;cursor:pointer;text-align:left;border-top:1px solid var(--border-light)}.tv-section-toggle:hover{background:var(--bg-active, var(--bg-hover))}.tv-section-chevron{font-size:14px;color:var(--fg-dim);transition:transform .15s;display:inline-block;transform:rotate(0);line-height:1}.tv-section-chevron--open{transform:rotate(90deg)}.tv-section-label{font-size:var(--font-size-sm);font-weight:600;color:var(--fg);flex:1}.tv-section-meta{font-size:11px;color:var(--fg-dim)}.tv-section-badge{color:var(--accent);font-weight:500}.tv-token-row{border-bottom:1px solid var(--border-light);transition:background .08s}.tv-token-row:last-child{border-bottom:none}.tv-token-row:hover{background:var(--bg-hover)}.tv-cell-name{padding:8px 12px;position:sticky;left:0;background:var(--bg-panel);border-right:1px solid var(--border-light);transition:background .08s;z-index:1}.tv-token-row:hover .tv-cell-name{background:var(--bg-hover)}.tv-token-short{font-size:12px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.tv-td-light,.tv-td-mode{padding:4px 8px;vertical-align:middle}.tv-cell-light{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--radius-sm);opacity:.85}.tv-cell-lock-icon{color:var(--fg-dim);flex-shrink:0}.tv-cell-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0;border:1px solid rgba(0,0,0,.08)}.tv-cell-swatch--icon{background:transparent;border-color:var(--border);display:flex;align-items:center;justify-content:center;color:var(--fg-dim)}.tv-cell-value{font-size:11px;color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.tv-cell-mode{height:100%}.tv-cell-display{display:flex;align-items:center;gap:6px;padding:6px 8px;width:100%;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:background .1s;min-height:36px}.tv-cell-display:hover:not(:disabled){background:var(--bg-active, var(--bg-hover))}.tv-cell-display:disabled{cursor:default}.tv-cell-mode--overridden .tv-cell-display{background:rgba(var(--accent-rgb, 59, 130, 246),.05)}.tv-cell-mode--overridden .tv-cell-display:hover{background:rgba(var(--accent-rgb, 59, 130, 246),.1)}.tv-cell-inherit{font-size:11px;color:var(--fg-dim);font-style:italic;flex:1}.tv-cell-reset{opacity:0;display:flex;align-items:center;padding:2px;border-radius:3px;color:var(--fg-dim);cursor:pointer;transition:opacity .1s,color .1s,background .1s;flex-shrink:0}.tv-cell-display:hover .tv-cell-reset{opacity:1}.tv-cell-reset:hover{color:var(--error, #ef4444);background:var(--bg-hover)}.tv-cell-editor{display:flex;align-items:center;gap:4px;padding:4px 6px}.tv-color-picker{width:28px;height:28px;border:none;border-radius:var(--radius-sm);padding:0;cursor:pointer;flex-shrink:0;background:none}.tv-hex-input{width:90px;font-size:11px;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input, var(--bg-panel));color:var(--fg)}.tv-hex-input:focus{outline:none;border-color:var(--accent)}.tv-apply-btn{padding:3px 8px!important}.tv-empty{padding:32px 24px;text-align:center;color:var(--fg-muted)}.tv-empty .empty-state-hint{margin-top:4px}.te-modes-bar{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:16px}.te-modes-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.te-mode-chip{display:flex;align-items:center;gap:5px;padding:4px 10px;background:var(--bg-hover);border:1px solid var(--border);border-radius:20px;font-size:var(--font-size-sm);color:var(--fg);font-weight:500}.te-mode-chip--light{background:var(--bg-panel);border-color:var(--border);color:var(--fg-muted);font-style:italic}.te-mode-chip-hint{font-size:10px;color:var(--fg-dim);font-style:italic;font-weight:400}.te-mode-chip-delete{padding:1px!important;opacity:.5;color:var(--fg-dim)!important}.te-mode-chip-delete:hover{opacity:1;color:var(--error, #ef4444)!important}.te-quick-add{border-style:dashed!important}.te-add-mode-trigger{margin-left:4px}.te-add-mode-form{display:flex;align-items:center;gap:6px;padding:8px 0 2px}.te-add-mode-form .add-token-input{flex:1;max-width:260px}.te-modes-stats{margin:0;padding-top:2px}.te-other-overrides-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;margin-top:24px}.te-add-override-form{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 14px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:12px}.te-add-override-form .add-token-input{min-width:80px}.te-pick-var-btn{display:inline-flex;align-items:center;gap:5px;flex:1 1 160px;min-width:120px;height:30px;padding:0 10px;background:var(--bg-canvas);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--fg-dim);font-size:var(--font-size-xs);cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.te-pick-var-btn:hover{border-color:var(--accent);background:var(--bg-hover);color:var(--fg)}.te-pick-var-btn--set{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg-canvas));color:var(--fg);justify-content:space-between}.te-pick-var-btn-change{flex-shrink:0;font-size:10px;color:var(--fg-dim);margin-left:6px;opacity:.7}.te-pick-var-btn--set:hover .te-pick-var-btn-change{opacity:1;color:var(--accent)}.te-other-overrides-empty{padding:20px 16px;background:var(--bg-panel);border:1px dashed var(--border);border-radius:var(--radius-lg);margin-top:8px}.te-other-overrides-empty .empty-state-hint{margin:0}.te-category-heading{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.06em;margin:20px 0 8px;padding:0 2px}.te-empty-state{padding:40px 24px;text-align:center;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg)}.te-placeholder-text{font-size:var(--font-size-base);font-weight:600;color:var(--fg);margin:0 0 6px}#theme-table{margin-top:0}.te-mode-chip-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.te-mode-chip-count{font-size:10px;font-weight:600;color:var(--fg-muted);background:var(--bg-hover);border-radius:10px;padding:1px 5px;white-space:nowrap}.te-mode-chip-generate{display:flex;align-items:center;gap:3px;padding:2px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--fg-muted);font-size:11px;font-weight:500;cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}.te-mode-chip-generate:hover{background:#fef3c7;color:#d97706;border-color:#fbbf24}.te-mode-chip--empty{border-color:var(--warning)!important;background:var(--warning-subtle)!important}.te-mode-chip--empty .te-mode-chip-generate--pulse{background:var(--warning-subtle);color:var(--warning);border-color:var(--warning);animation:pulse-generate 1.8s ease-in-out infinite}@keyframes pulse-generate{0%,to{opacity:1}50%{opacity:.55}}.te-mode-chip-generate-label{font-size:10px;font-weight:600;letter-spacing:.01em}.te-generate-hint{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;background:var(--warning-subtle);border:1px solid var(--warning);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--fg);margin-top:8px;line-height:1.5}.te-generate-hint-icon{flex-shrink:0;margin-top:1px;color:var(--warning)}.te-generate-hint strong{color:var(--warning)}.theme-code-download-all-row{display:flex;justify-content:flex-end;margin-bottom:4px}.te-onboarding{position:relative;background:var(--bg-panel);border:1px solid var(--border);border-left:3px solid var(--accent, #6b96ff);border-radius:var(--radius-lg);padding:16px 40px 16px 16px;margin-bottom:16px}.te-onboarding-close{position:absolute;top:10px;right:10px;opacity:.5}.te-onboarding-close:hover{opacity:1}.te-onboarding-title{display:flex;align-items:center;gap:6px;font-weight:600;font-size:var(--font-size-sm);color:var(--fg);margin-bottom:12px}.te-onboarding-intro{margin:0 0 10px;font-size:var(--font-size-xs);color:var(--fg-muted);line-height:1.5}.te-onboarding-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.te-onboarding-step{display:flex;align-items:flex-start;gap:10px}.te-onboarding-num{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--accent, #6b96ff);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}.te-onboarding-step strong{display:block;font-size:var(--font-size-sm);font-weight:600;color:var(--fg)}.te-onboarding-hint{display:block;font-size:var(--font-size-xs);color:var(--fg-muted);margin-top:1px;line-height:1.5}.te-onboarding-hint code{font-family:var(--font-mono, monospace);background:var(--bg-hover);padding:1px 4px;border-radius:3px;font-size:11px}.te-onboarding-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.te-onboarding-details{margin-top:10px}.te-onboarding-details summary{cursor:pointer;color:var(--fg-muted);font-size:var(--font-size-xs)}.te-onboarding-steps--compact{margin-top:8px;gap:8px}.tv-ref-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-hover);color:var(--fg-muted);cursor:pointer;transition:background .1s,color .1s,border-color .1s}.tv-ref-btn:hover{background:var(--accent-subtle, #e8edff);color:var(--accent, #6b96ff);border-color:var(--accent, #6b96ff)}.tv-cell-value--ref{color:var(--accent, #6b96ff);font-size:10px}.tv-ref-picker-portal{position:fixed;z-index:2000;min-width:320px;max-width:360px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.18))}.cl-entry-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}.cl-entry{position:relative;padding:14px 16px 12px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg)}.cl-entry-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}.cl-entry-date{flex-shrink:0;font-size:11px;font-family:var(--font-mono, monospace);color:var(--fg-dim);background:var(--bg-canvas);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1px 6px}.cl-entry-title{font-size:var(--font-size-sm);font-weight:600;color:var(--fg);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cl-entry-delete{flex-shrink:0;margin-left:auto;color:var(--fg-dim);opacity:0;transition:opacity .15s}.cl-entry:hover .cl-entry-delete{opacity:1}.cl-entry-delete:hover{color:var(--error, #e55)}.cl-entry-text{font-size:var(--font-size-sm);color:var(--fg);white-space:pre-wrap;word-break:break-word;line-height:1.55;margin:0}.cl-add-form{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:16px}.cl-add-textarea{width:100%;min-height:80px;padding:8px 10px;background:var(--bg-canvas);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--fg);font-size:var(--font-size-sm);font-family:inherit;resize:vertical;line-height:1.5;box-sizing:border-box;transition:border-color .15s}.cl-add-textarea:focus{outline:none;border-color:var(--accent)}.cl-add-form-actions{display:flex;gap:6px;align-items:center}.cl-empty-state{padding:40px 24px;text-align:center;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);margin-top:16px}.unit-calc-wrap{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;align-items:flex-end}.unit-calc-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--bg-panel);color:var(--fg-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px #00000026;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}.unit-calc-btn:hover,.unit-calc-btn--open{background:var(--bg-hover);color:var(--accent);border-color:var(--accent);box-shadow:0 4px 16px #00000038}.unit-calc-popover{position:absolute;bottom:calc(100% + 10px);right:0;width:240px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 8px 32px #0003;padding:12px 14px;display:flex;flex-direction:column;gap:8px}.unit-calc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}.unit-calc-title{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-dim)}.unit-calc-close{color:var(--fg-dim)}.unit-calc-close:hover{color:var(--fg)}.unit-calc-divider{height:1px;background:var(--border);margin:0 -14px}.unit-calc-base{display:flex;align-items:center;gap:8px}.unit-calc-base-input-wrap{display:flex;align-items:center;gap:4px;flex:1}.unit-calc-row{display:flex;align-items:center;gap:8px;border-radius:var(--radius-sm);padding:1px 0;transition:background .1s}.unit-calc-label{min-width:36px;font-size:12px;font-family:var(--font-mono, monospace);font-weight:500;color:var(--fg-dim);text-align:right;flex-shrink:0}.unit-calc-unit-label{font-size:11px;font-family:var(--font-mono, monospace);color:var(--fg-dim)}.unit-calc-input{flex:1;width:100%;min-width:0;height:28px;padding:0 8px;background:var(--bg-canvas);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--fg);font-size:13px;font-family:var(--font-mono, monospace);text-align:right;transition:border-color .15s;box-sizing:border-box}.unit-calc-input:focus{outline:none;border-color:var(--accent)}.unit-calc-input::-webkit-inner-spin-button,.unit-calc-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.unit-calc-input[type=number]{-moz-appearance:textfield}.home-view{max-width:1040px;margin:0 auto;padding:48px 40px 80px;display:flex;flex-direction:column;gap:40px}@media (max-width: 767px){.home-view{padding:24px 20px 48px;gap:28px}}@media (max-width: 480px){.home-view{padding:20px 16px 40px;gap:24px}}.home-hero{display:flex;align-items:stretch;justify-content:space-between;gap:40px;margin-bottom:32px}.home-hero-left{flex:1.1;min-width:0}.home-hero-right{flex:1;display:flex;align-items:center;justify-content:flex-end}.home-hero-container-svg{width:399px;height:277px;display:block;margin-top:-34px;margin-bottom:-34px;flex-shrink:0}.home-hero-container-svg>div,.home-hero-container-svg svg{width:100%!important;height:100%!important;display:block}.home-hero-logo-wrap{display:flex;align-items:center;justify-content:flex-end;width:100%}.home-hero-logo-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:280px;height:180px;border:2px dashed var(--border);border-radius:16px;color:var(--fg-dim);background:var(--bg-subtle, var(--bg-secondary));cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;transition:border-color .15s,background .15s,transform .12s}.home-hero-logo-empty:hover{border-color:var(--accent);background:var(--bg-hover)}.home-hero-logo-empty:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.home-onboarding-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 20px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-subtle)}.home-hero-logo-empty-icon{opacity:.4;color:var(--fg-dim)}.home-hero-logo-empty-label{font-size:.9375rem;font-weight:500;color:var(--fg-dim)}.home-hero-logo-empty-hint{font-size:var(--font-size-xs);color:var(--fg-dimmer, var(--fg-dim));opacity:.7;text-align:center;padding:0 16px}.home-hero-logo-frame{width:220px;height:220px;border-radius:24px;background:radial-gradient(circle at 0 0,rgba(255,255,255,.9),transparent 55%),var(--bg-panel);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center}.home-hero-logo-img{max-width:150px;max-height:150px;object-fit:contain}.home-hero-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--accent-subtle);color:var(--accent);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}.home-hero-badge-dot{width:6px;height:6px;border-radius:999px;background:var(--accent)}.home-hero-title{font-size:clamp(2.4rem,4.8vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--fg);margin:0 0 14px}.home-hero-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.home-hero-desc{font-size:var(--font-size-lg);color:var(--fg-muted);line-height:1.5;max-width:40rem}.home-version-badge{display:inline-flex;align-items:center;padding:2px 8px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-family:var(--font-mono);color:var(--fg-muted);flex-shrink:0}.home-hero-actions{display:flex;align-items:center;gap:12px;margin-top:20px}.welcome-continue-p{margin-top:12px;font-size:var(--font-size-sm);color:var(--fg-dim, #6b7280)}.welcome-continue-link{background:none;border:none;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer;text-underline-offset:2px}.welcome-continue-link:hover{color:var(--accent-hover, var(--accent))}.home-hero-cta{padding-inline:18px}.home-hero-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:240px}.home-hero-tile{aspect-ratio:1;border-radius:14px;border:none;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;cursor:pointer;transition:filter .15s,transform .1s,box-shadow .15s;color:#fff}.home-hero-tile:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 6px 20px #2563eb59}.home-hero-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.home-hero-tile-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center}.home-hero-tile-icon svg{width:28px;height:28px}.home-hero-tile--light{background:#2563eb1f}.home-hero-tile--light .home-hero-tile-icon svg,.home-hero-tile--light .home-hero-tile-icon svg path,.home-hero-tile--light .home-hero-tile-icon svg circle{fill:var(--fg);stroke:var(--fg)}.home-hero-tile--selected{background:var(--bg-panel);border:2px solid var(--accent)}.home-hero-tile--selected .home-hero-tile-icon svg,.home-hero-tile--selected .home-hero-tile-icon svg path,.home-hero-tile--selected .home-hero-tile-icon svg circle{fill:var(--fg);stroke:var(--fg)}.home-hero-tile--accent{background:var(--accent)}.home-hero-tile--accent .home-hero-tile-icon svg,.home-hero-tile--accent .home-hero-tile-icon svg path,.home-hero-tile--accent .home-hero-tile-icon svg circle{fill:#fff;stroke:#fff}.home-hero-tile--empty{background:#2563eb1f;cursor:default;pointer-events:none}.home-hero-tile--empty:hover{transform:none;box-shadow:none;filter:none}@media (max-width: 960px){.home-hero{flex-direction:column;align-items:flex-start}.home-hero-right{width:100%;justify-content:flex-start}.home-hero-tiles{max-width:280px}}.home-section{margin-bottom:48px}.home-section-header{font-size:28px;font-weight:700;color:var(--fg);margin:0 0 20px;padding-bottom:12px;border-bottom:none}.home-section-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.home-foundations-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}@media (max-width: 960px){.home-foundations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 600px){.home-foundations-grid{grid-template-columns:minmax(0,1fr)}}.home-foundation-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 16px 18px;border-radius:16px;border:1px solid var(--border-subtle);background:var(--bg-subtle);height:198px;cursor:pointer;text-align:center;transition:background .15s,border-color .15s;box-shadow:none}.home-foundation-card:hover{background:var(--bg-hover);border-color:var(--border);box-shadow:none}.home-foundation-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.home-foundation-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center}.home-foundation-icon svg{width:56px;height:56px}.home-foundation-name{font-size:1rem;font-weight:600;color:var(--fg)}.home-foundation-arrow{font-size:1rem;color:var(--fg-muted)}.edit-sub-tabs{display:inline-flex;align-items:center;gap:2px;margin:4px 0 20px;padding:3px;background:var(--bg-hover);border:none;border-radius:8px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.edit-sub-tabs::-webkit-scrollbar{display:none}.edit-sub-tab{padding:5px 14px;border-radius:5px;font-size:var(--font-size-sm);font-weight:400;color:var(--fg-muted);background:none;border:none;cursor:pointer;font-family:inherit;transition:background .12s,color .12s;white-space:nowrap;flex-shrink:0}.edit-sub-tab:hover{color:var(--fg);background:#0000000d}[data-theme=dark] .edit-sub-tab:hover{background:#ffffff12}.edit-sub-tab--active{background:var(--bg-panel);color:var(--fg);font-weight:500;box-shadow:0 1px 3px #0000001f,0 0 0 .5px #0000000a}.home-section-personas{margin-top:0}.home-section-divider{margin-bottom:24px}.home-section-subheader{font-size:var(--font-size-base);color:var(--fg-muted);margin:-12px 0 0;line-height:1.5}.home-persona-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.home-persona-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width: 900px){.home-persona-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 800px){.home-persona-grid,.home-persona-grid--3{grid-template-columns:minmax(0,1fr)}}.home-persona-card{width:100%;border-radius:24px;border:1px solid var(--border-subtle);background:var(--bg-panel);padding:28px 28px 30px;display:flex;flex-direction:column;gap:0;box-shadow:none;text-align:left}.home-persona-card--disabled{opacity:.45;cursor:default;pointer-events:none}.home-persona-cta-soon{display:inline-block;margin-top:20px;font-size:var(--font-size-sm);color:var(--fg-muted);font-style:italic}.home-persona-icon-outer{width:48px;height:48px;border-radius:14px;background:var(--bg-subtle);display:flex;align-items:center;justify-content:center;margin-bottom:18px}.home-persona-icon-inner{width:53px;height:53px;border-radius:10px;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;box-shadow:none}.home-persona-icon{color:var(--accent);flex-shrink:0}.home-persona-card:first-child .home-persona-icon{width:34px;height:38px}.home-persona-card:last-child .home-persona-icon{width:26px;height:26px}.home-persona-title{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;color:var(--fg);margin:0 0 8px}.home-persona-desc{font-size:.9375rem;color:var(--fg-muted);line-height:1.5;max-width:28rem;margin:0 0 20px}.home-persona-cta{align-self:flex-start;background:var(--bg)!important;color:var(--fg)!important;border:1.5px solid var(--fg)!important;border-radius:10px;padding:10px 20px;font-size:.9375rem;font-weight:500;margin-top:0;box-shadow:none!important}.home-persona-cta:hover{background:var(--bg-hover)!important;border-color:var(--fg)!important;color:var(--fg)!important;box-shadow:none!important}.home-persona-cta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.overview-description-field{margin-bottom:20px;padding:12px 0;border-bottom:1px solid var(--border-light)}.overview-description-label{display:block;font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted);margin-bottom:6px}.overview-description-textarea{width:100%;max-width:560px;padding:8px 12px;font-size:var(--font-size-md);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-panel);color:var(--fg);font-family:inherit;resize:vertical;min-height:60px}.section-overview{padding:4px 0 24px}.section-overview-preview{pointer-events:none;opacity:.92}.section-overview>.page-desc+.section-overview-preview{margin-top:14px}.section-overview-preview .overview-preview-haptics{pointer-events:auto}.semantic-overview-groups{margin-top:32px;display:flex;flex-direction:column;gap:32px}.semantic-overview-group{border-top:1px solid var(--border-light);padding-top:20px}.semantic-overview-title{font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);margin-bottom:12px}.semantic-overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.semantic-overview-card{padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--border-light);background:var(--bg-panel);display:flex;gap:10px;align-items:center}.semantic-overview-swatch{width:40px;height:28px;border-radius:6px;border:1px solid var(--border-light)}.semantic-overview-meta{flex:1;min-width:0}.semantic-overview-name-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px}.semantic-overview-name{font-size:var(--font-size-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.semantic-overview-ref{font-size:var(--font-size-xs);color:var(--fg-muted)}.section-override-wrap{padding:4px 0}.section-override-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}.section-override-title{font-size:var(--font-size-sm);font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}.section-override-nav-btn{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-size-sm);color:var(--accent);background:none;border:none;cursor:pointer;font-family:inherit;padding:0}.section-override-nav-btn:hover{text-decoration:underline}.section-override-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md)}.section-override-table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}.section-override-th{padding:8px 12px;text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);background:var(--bg-panel);border-bottom:1px solid var(--border);white-space:nowrap}.section-override-th--path{width:30%;min-width:180px}.section-override-row:nth-child(2n) .section-override-td{background:var(--bg-panel)}.section-override-row:hover .section-override-td{background:var(--bg-hover)}.section-override-td{padding:6px 12px;border-bottom:1px solid var(--border-subtle);vertical-align:middle;position:relative}.section-override-td--path{font-family:var(--font-mono);font-size:11px;color:var(--fg-muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-override-val{display:inline-block;min-width:60px;padding:2px 6px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-mono);font-size:12px;transition:background .12s}.section-override-val:hover{background:var(--bg-hover)}.section-override-val--empty,.section-override-dash{color:var(--fg-dim)}.section-override-edit-wrap{display:flex;align-items:center;gap:4px}.section-override-input{font-family:var(--font-mono);font-size:12px;padding:2px 6px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);width:120px}.section-override-input:focus{outline:none}.section-override-save{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:2px 6px;cursor:pointer;font-size:12px;font-weight:600}.section-override-reset{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:999px;background:var(--bg-hover);border:none;color:var(--fg-muted);font-size:10px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1}.section-override-row:hover .section-override-reset{display:flex}.section-override-empty{padding:40px 24px;text-align:center;color:var(--fg-muted);font-size:var(--font-size-sm)}.section-override-empty p{margin:0 0 12px}.section-override-cta{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;font-family:inherit}.section-override-cta:hover{background:var(--accent-hover)}.overview-preview-motion-row{display:flex;align-items:center;gap:16px;padding:5px 0;border-bottom:1px solid var(--border-light)}.overview-preview-motion-row:last-child{border-bottom:none}.overview-preview-haptic-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:999px;white-space:nowrap}.overview-preview-radius,.overview-preview-haptics{padding:4px 0 8px}.overview-preview-shadow,.overview-preview-border,.overview-preview-motion,.overview-preview-opacity,.overview-preview-zIndex,.overview-preview-gradient,.overview-preview-focusRing,.overview-preview-breakpoints,.overview-preview-ai{background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-lg, 12px);padding:28px 24px;margin-top:4px}.overview-preview-sizing{background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-lg, 12px);padding:28px 24px;margin-top:4px;display:flex;flex-direction:column;gap:0}.overview-radius-stage{background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-lg, 12px);padding:28px 24px;margin-top:4px}.overview-radius-grid{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}.overview-radius-item{display:flex;flex-direction:column;align-items:center;gap:8px}.overview-radius-card{width:96px;height:96px;background:var(--bg-preview, var(--bg-panel));border:1px solid var(--border-preview, var(--border-light));box-sizing:border-box}.overview-radius-name{font-size:var(--font-size-sm);font-weight:600;color:var(--fg)}.overview-radius-value{font-size:var(--font-size-xs);color:var(--fg-dim)}.overview-preview-sizing-group{display:flex;flex-direction:column;gap:12px;padding-top:28px;margin-top:4px;border-top:1px solid var(--border-light)}.overview-preview-sizing-group:first-child{padding-top:0;margin-top:0;border-top:none}.overview-preview-sizing-cat{font-size:var(--font-size-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-muted)}.overview-preview-sizing-bars{display:flex;flex-direction:column;gap:6px}.overview-preview-sizing-row{display:flex;align-items:center;gap:10px}.overview-preview-sizing-bar{height:8px;background:var(--accent);opacity:.65;border-radius:2px;flex-shrink:0;min-width:4px}.overview-preview-sizing-name{font-size:var(--font-size-sm);font-weight:600;color:var(--fg);min-width:52px}.overview-preview-sizing-val{font-size:var(--font-size-xs);color:var(--fg-dim)}.overview-sizing-shape-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end}.overview-sizing-shape-item{display:flex;flex-direction:column;align-items:center;gap:6px}.overview-motion-curve-grid{display:flex;flex-wrap:wrap;gap:12px;padding:4px 0 12px}.overview-motion-curve-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;background:var(--bg-panel);border:1px solid var(--border-light);border-radius:var(--radius-md);width:88px}.overview-motion-curve-card svg{width:60px;height:60px}.overview-motion-curve-name{font-size:var(--font-size-xs);color:var(--fg-muted);text-align:center;word-break:break-all}.overview-typo-specimen{display:flex;flex-direction:column;gap:0;padding:4px 0 8px}.overview-typo-specimen-row{display:flex;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid var(--border-light)}.overview-typo-specimen-row:last-child{border-bottom:none}.overview-typo-specimen-meta{display:flex;flex-direction:column;gap:2px;min-width:72px;flex-shrink:0}.overview-typo-specimen-name{font-size:var(--font-size-xs);color:var(--fg-muted)}.overview-typo-specimen-name--base{color:var(--accent)}.overview-typo-specimen-value{font-size:var(--font-size-xs);color:var(--fg-dim)}.overview-typo-specimen-sample{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:480px;flex:1}.feedback-popover{position:absolute;bottom:calc(100% + 8px);left:8px;right:8px;background:var(--bg-panel);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));padding:14px 14px 12px;z-index:200;display:flex;flex-direction:column;gap:10px}.feedback-popover-close{position:absolute;top:8px;right:8px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--fg-muted);cursor:pointer;border-radius:var(--radius-sm);padding:0}.feedback-popover-close:hover{background:var(--bg-hover);color:var(--fg)}.feedback-popover-title{font-size:var(--font-size-sm);font-weight:600;color:var(--fg);margin:0;padding-right:20px}.feedback-emoji-row{display:flex;gap:4px}.feedback-emoji-btn{flex:1;font-size:20px;line-height:1;padding:6px 4px;border:1.5px solid var(--border-light);border-radius:var(--radius-md);background:transparent;cursor:pointer;transition:border-color .1s,background .1s,transform .1s}.feedback-emoji-btn:hover{background:var(--bg-hover);transform:scale(1.1)}.feedback-emoji-btn--active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.feedback-comment{width:100%;box-sizing:border-box;font-size:var(--font-size-sm);font-family:var(--font-sans);color:var(--fg);background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 8px;resize:none;outline:none;line-height:1.4}.feedback-comment:focus{border-color:var(--accent)}.feedback-send-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:7px 12px;font-size:var(--font-size-sm);font-weight:500;font-family:var(--font-sans);border:none;border-radius:var(--radius-md);background:var(--accent);color:#fff;cursor:pointer;transition:opacity .15s}.feedback-send-btn:disabled{opacity:.4;cursor:not-allowed}.feedback-send-btn:not(:disabled):hover{opacity:.88}.feedback-popover-sent{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;font-size:var(--font-size-sm);color:var(--fg-muted);text-align:center}.feedback-popover-sent span{font-size:28px}.sidebar-utility-btn[data-tooltip]{position:relative}.sidebar-utility-btn[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translate(-50%);background:var(--fg);color:var(--bg);font-size:11px;font-weight:500;font-family:var(--font-sans);white-space:nowrap;padding:4px 8px;border-radius:var(--radius-sm);pointer-events:none;opacity:0;transition:opacity .12s,transform .12s;transform:translate(-50%) translateY(4px);z-index:300}.sidebar-utility-btn[data-tooltip]:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.fp-panel{display:flex;flex-direction:column;gap:0;padding:0}.fp-header{display:flex;align-items:center;gap:8px;padding:14px 16px 10px;border-bottom:1px solid var(--border)}.fp-title{font-size:12px;font-weight:600;color:var(--fg);flex:1}.fp-count{font-size:11px;color:var(--fg-muted);background:var(--bg-subtle);border-radius:10px;padding:1px 7px;min-width:22px;text-align:center}.fp-add-wrap{position:relative}.fp-add-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg-subtle);color:var(--fg-muted);font-size:12px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}.fp-add-btn:hover,.fp-add-btn--open{background:var(--accent);color:#fff;border-color:var(--accent)}.fp-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:230px;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 36px #00000038,0 2px 8px #0000001a;z-index:900;padding:6px;overflow:hidden}.fp-kind-row{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border-radius:8px;border:none;background:transparent;cursor:pointer;text-align:left;transition:background .12s}.fp-kind-row:hover{background:var(--bg-subtle)}.fp-kind-icon{font-size:16px;width:24px;text-align:center;flex-shrink:0;line-height:1}.fp-kind-info{display:flex;flex-direction:column;gap:1px}.fp-kind-name{font-size:13px;font-weight:500;color:var(--fg)}.fp-kind-hint{font-size:11px;color:var(--fg-muted)}.fp-name-form{margin:10px 16px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}.fp-name-form-label{display:flex;align-items:center;gap:6px}.fp-name-kind-icon{font-size:15px;line-height:1}.fp-name-kind-text{font-size:11px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em}.fp-name-input{width:100%;padding:7px 10px;border-radius:7px;border:1px solid var(--border);background:var(--bg-panel);color:var(--fg);font-size:13px;outline:none;box-sizing:border-box;transition:border-color .15s}.fp-name-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px #6366f126}.fp-name-input--err{border-color:#ef4444}.fp-name-err{font-size:11px;color:#ef4444}.fp-name-actions{display:flex;gap:6px}.fp-empty{padding:36px 16px 24px;text-align:center}.fp-empty-icon{font-size:32px;margin-bottom:10px;opacity:.25}.fp-empty-title{font-size:14px;font-weight:500;color:var(--fg);margin:0 0 6px}.fp-empty-hint{font-size:12px;color:var(--fg-muted);line-height:1.5;margin:0}.fp-list{display:flex;flex-direction:column;gap:1px;padding:8px 12px 12px}.fp-card{background:var(--bg-subtle, rgba(0,0,0,.03));border:1px solid transparent;border-radius:10px;overflow:hidden;transition:border-color .15s;margin-bottom:4px}.fp-card:hover{border-color:var(--border)}.fp-card-header{display:flex;align-items:center;gap:6px;padding:9px 10px 6px}.fp-card-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0;line-height:1}.fp-card-name{flex:1;font-size:13px;font-weight:500;color:var(--fg)}.fp-card-type{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);opacity:.7}.fp-card-remove{opacity:0;padding:2px 5px;border-radius:4px;border:none;background:transparent;color:var(--fg-muted);cursor:pointer;font-size:14px;line-height:1;transition:opacity .15s,background .15s,color .15s}.fp-card:hover .fp-card-remove{opacity:1}.fp-card-remove:hover{background:#ef44441a;color:#ef4444}.fp-card-body{padding:0 10px 10px}.fp-field-label{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted);margin-bottom:6px}.fp-field-hint{display:block;font-size:10px;color:var(--fg-muted);opacity:.6;margin-top:5px}.fp-enum{display:flex;flex-direction:column}.fp-enum-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.fp-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 8px 3px 7px;border-radius:20px;border:1px solid var(--border);background:var(--bg-panel);font-size:12px;color:var(--fg);cursor:pointer;transition:all .12s;-webkit-user-select:none;user-select:none;line-height:1.4}.fp-chip:hover{border-color:var(--accent);background:#6366f10d}.fp-chip--active{border-color:var(--accent);background:#6366f11a;color:var(--accent);font-weight:500}.fp-chip-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}.fp-chip-x{background:transparent;border:none;color:inherit;opacity:.4;cursor:pointer;font-size:12px;padding:0 0 0 3px;line-height:1;transition:opacity .12s}.fp-chip-x:hover{opacity:1}.fp-chip-add{border:none;background:transparent;font-size:12px;color:var(--fg-muted);outline:none;padding:3px 4px;min-width:60px;width:70px}.fp-chip-add:focus{color:var(--fg)}.fp-chip-add::placeholder{color:var(--fg-muted);opacity:.5}.fp-bool{display:flex;align-items:center;gap:10px}.fp-toggle{display:flex;align-items:center;gap:8px;border:none;background:transparent;cursor:pointer;padding:0}.fp-toggle-track{position:relative;width:36px;height:20px;border-radius:10px;background:var(--border);transition:background .2s;flex-shrink:0}.fp-toggle--on .fp-toggle-track{background:var(--accent)}.fp-toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s}.fp-toggle--on .fp-toggle-thumb{transform:translate(16px)}.fp-toggle-text{font-size:13px;color:var(--fg-muted);min-width:24px}.fp-text{display:flex;flex-direction:column}.fp-text-input{padding:6px 9px;border-radius:7px;border:1px solid var(--border);background:var(--bg-panel);color:var(--fg);font-size:13px;outline:none;transition:border-color .15s}.fp-text-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px #6366f126}.slot-selected{outline:1px solid color-mix(in srgb,var(--fg) 35%,transparent)!important;outline-offset:1px!important;border-radius:2px}.canvas-preview-clickable [data-slot],.canvas-preview-clickable--tool-move [data-slot]{cursor:pointer}.canvas-preview-clickable--tool-hand,.canvas-preview-clickable--tool-hand [data-slot]{cursor:grab}.canvas-preview-clickable--tool-text,.canvas-preview-clickable--tool-text [data-slot]{cursor:text}.canvas-preview-clickable--tool-frame,.canvas-preview-clickable--tool-frame [data-slot],.canvas-preview-clickable--tool-shape,.canvas-preview-clickable--tool-shape [data-slot],.canvas-preview-clickable--tool-pen,.canvas-preview-clickable--tool-pen [data-slot]{cursor:crosshair}.cv-pill{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg-panel);cursor:pointer;transition:all .15s;min-width:70px}.cv-pill:hover{border-color:var(--accent);background:#6366f10a}.cv-pill.active{border-color:var(--accent);background:#6366f114;box-shadow:0 0 0 3px #6366f126}.cv-mini-preview{width:80px;height:32px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:6px}.cv-mini-scale{transform:scale(.55);transform-origin:center center;pointer-events:none;display:flex;align-items:center;justify-content:center}.cv-mini-scale .component-preview{display:flex;align-items:center;justify-content:center}.cv-name{font-size:11px;color:var(--fg-muted);font-weight:500}.cv-pill.active .cv-name{color:var(--accent)}.dp-layer-selector{display:flex;align-items:center;gap:8px;padding:10px 16px 8px;border-bottom:1px solid var(--border)}.dp-layer-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted);flex-shrink:0}.dp-ctx-banner{display:flex;align-items:center;gap:6px;padding:7px 16px;font-size:12px;font-weight:500;border-bottom:1px solid var(--border);margin-bottom:2px}.dp-ctx-banner--base{background:#6b72800f;color:var(--fg-muted)}.dp-ctx-banner--variant{background:#6366f112;color:#6366f1}.dp-ctx-banner--state{background:#10b98112;color:#059669}.dp-ctx-layer{font-weight:600}.dp-ctx-divider{opacity:.4}.dp-ctx-mode{opacity:.8}.parts-tree{display:flex;flex-direction:column;gap:2px;padding:8px 0 10px}.parts-layer{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;transition:background .12s}.parts-layer:hover{background:var(--bg-subtle)}.parts-layer--root{background:#6366f10d}.parts-layer-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.parts-layer-info{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}.parts-layer-name{font-size:13px;font-weight:500;color:var(--fg)}.parts-layer-hint{font-size:11px;color:var(--fg-muted);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.parts-layer-optional{font-size:10px;color:var(--fg-muted);background:var(--bg-subtle);border-radius:4px;padding:1px 5px;border:1px solid var(--border)}.parts-layer-remove{opacity:0;padding:2px 6px;border-radius:4px;border:none;background:transparent;color:var(--fg-muted);cursor:pointer;font-size:14px;line-height:1;transition:opacity .12s,background .12s,color .12s}.parts-layer:hover .parts-layer-remove{opacity:1}.parts-layer-remove:hover{background:#ef44441a;color:#ef4444}.parts-add-btn{display:flex;align-items:center;gap:5px;padding:7px 10px;border-radius:7px;border:1px dashed var(--border);background:transparent;color:var(--fg-muted);font-size:12px;cursor:pointer;width:100%;transition:border-color .15s,color .15s,background .15s;margin-top:4px}.parts-add-btn:hover{border-color:var(--accent);color:var(--accent);background:#6366f10a}.parts-add-form{display:flex;flex-direction:column;gap:7px;padding:10px;background:var(--bg-subtle);border-radius:8px;border:1px solid var(--border);margin-top:6px}.parts-add-form-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted)}.parts-add-input{padding:6px 9px;border-radius:6px;border:1px solid var(--border);background:var(--bg-panel);color:var(--fg);font-size:13px;outline:none;transition:border-color .15s}.parts-add-input:focus{border-color:var(--accent)}.parts-add-preview{font-size:11px;color:var(--fg-muted)}.parts-add-preview code{color:var(--accent);font-weight:600}.parts-add-actions{display:flex;gap:6px}.dp-add-layer-btn{width:24px;height:24px;border-radius:6px;border:1px dashed var(--border);background:transparent;color:var(--fg-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s,color .15s,background .15s}.dp-add-layer-btn:hover{border-color:var(--accent);color:var(--accent);background:#6366f10f;border-style:solid}.dp-add-layer-form{padding:10px 16px 12px;background:var(--bg-subtle);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px}.dp-add-layer-input{padding:7px 10px;border-radius:7px;border:1px solid var(--accent);background:var(--bg-panel);color:var(--fg);font-size:13px;outline:none;box-shadow:0 0 0 2px #6366f126}.dp-add-layer-quick{display:flex;flex-wrap:wrap;gap:4px}.dp-add-layer-quick-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;border:1px solid var(--border);background:var(--bg-panel);color:var(--fg);font-size:11px;cursor:pointer;transition:border-color .12s,background .12s}.dp-add-layer-quick-btn:hover{border-color:var(--accent);background:#6366f112;color:var(--accent)}.dp-add-layer-actions{display:flex;gap:6px}.dp-content-editor{padding:8px 16px 10px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}.dp-content-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted)}.dp-content-input{padding:6px 10px;border-radius:7px;border:1px solid var(--border);background:var(--bg-panel);color:var(--fg);font-size:13px;outline:none;transition:border-color .15s}.dp-content-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px #6366f11f}.dp-icon-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px}.dp-icon-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:5px;border:1px solid transparent;background:var(--bg-subtle);font-size:14px;cursor:pointer;transition:all .1s;line-height:1}.dp-icon-cell:hover{border-color:var(--accent);background:#6366f114}.dp-icon-cell--active{border-color:var(--accent);background:#6366f126}.canvas-preview-clickable .component-preview-root,.canvas-preview-clickable [data-slot]{position:relative}.canvas-preview-clickable [data-slot]:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:inherit;border:1px solid transparent;pointer-events:none;transition:border-color .12s}.canvas-preview-clickable [data-slot].slot-selected:after{border-color:color-mix(in srgb,var(--fg) 45%,transparent)}.canvas-draw-preview{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 65%,#ffffff);background:color-mix(in srgb,var(--accent) 18%,transparent);border-radius:6px;pointer-events:none;z-index:8}.canvas-slot-transform-box{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 70%,white 30%);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent);border-radius:6px;z-index:9;cursor:move}.canvas-resize-handle{position:absolute;width:8px;height:8px;border-radius:50%;border:1px solid #fff;background:var(--accent);padding:0;cursor:nwse-resize}.canvas-resize-handle--nw{top:-5px;left:-5px;cursor:nwse-resize}.canvas-resize-handle--ne{top:-5px;right:-5px;cursor:nesw-resize}.canvas-resize-handle--sw{left:-5px;bottom:-5px;cursor:nesw-resize}.canvas-resize-handle--se{right:-5px;bottom:-5px;cursor:nwse-resize}.canvas-floating-tools{position:absolute;left:50%;bottom:12px;transform:translate(-50%);z-index:20;display:inline-flex;align-items:center;gap:2px;padding:6px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#1f1f22;box-shadow:0 10px 24px #0000004d}.canvas-tool-btn{width:34px;height:34px;border-radius:10px;border:none;background:transparent;color:#ffffffb8;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.canvas-tool-btn:hover{background:#ffffff14;color:#fff}.canvas-tool-btn--active{background:#2f6ff6;color:#fff}.canvas-tool-icon{font-size:15px;line-height:1}.canvas-inline-input{min-width:24px;border:1px solid var(--accent);border-radius:6px;background:color-mix(in srgb,var(--bg-panel) 90%,white 10%);padding:2px 6px;font:inherit;line-height:inherit;outline:none}