:root{--hearth-gray-50: #fafafa;--hearth-gray-100: #f4f4f5;--hearth-gray-200: #e4e4e7;--hearth-gray-300: #d4d4d8;--hearth-gray-400: #a1a1aa;--hearth-gray-500: #71717a;--hearth-gray-600: #52525b;--hearth-gray-700: #3f3f46;--hearth-gray-800: #27272a;--hearth-gray-900: #18181b;--hearth-gray-950: #09090b;--hearth-blue-500: #3b82f6;--hearth-blue-600: #2563eb;--hearth-blue-700: #1d4ed8;--hearth-green-500: #22c55e;--hearth-green-600: #16a34a;--hearth-green-700: #15803d;--hearth-amber-500: #f59e0b;--hearth-amber-600: #d97706;--hearth-amber-700: #b45309;--hearth-red-500: #ef4444;--hearth-red-600: #dc2626;--hearth-red-700: #b91c1c;--hearth-space-1: 4px;--hearth-space-2: 8px;--hearth-space-3: 12px;--hearth-space-4: 16px;--hearth-space-6: 24px;--hearth-space-8: 32px;--hearth-space-12: 48px;--hearth-space-16: 64px;--hearth-text-xs: 12px;--hearth-text-sm: 14px;--hearth-text-base: 16px;--hearth-text-lg: 20px;--hearth-text-xl: 24px;--hearth-text-2xl: 30px;--hearth-text-3xl: 36px;--hearth-weight-normal: 400;--hearth-weight-medium: 500;--hearth-weight-semibold: 600;--hearth-weight-bold: 700;--hearth-leading-tight: 1.2;--hearth-leading-normal: 1.5;--hearth-radius-sm: 4px;--hearth-radius-md: 8px;--hearth-radius-lg: 12px;--hearth-radius-xl: 20px;--hearth-radius-full: 9999px;--hearth-shadow-sm: 0 1px 0 rgba(15, 23, 42, .05);--hearth-shadow-md: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .05);--hearth-shadow-lg: 0 2px 4px rgba(15, 23, 42, .06), 0 12px 24px rgba(15, 23, 42, .08);--hearth-z-header: 30;--hearth-z-drawer: 40;--hearth-z-modal: 50;--hearth-z-toast: 60;--hearth-duration-fast: .15s;--hearth-duration-normal: .2s;--hearth-duration-slow: .3s;--hearth-easing-out: cubic-bezier(.2, .8, .2, 1);--hearth-easing-in-out: cubic-bezier(.4, 0, .2, 1);--hearth-surface-primary: var(--hearth-gray-50);--hearth-surface-secondary: var(--hearth-gray-100);--hearth-surface-elevated: #ffffff;--hearth-text-primary: var(--hearth-gray-900);--hearth-text-secondary: var(--hearth-gray-700);--hearth-text-muted: var(--hearth-gray-500);--hearth-text-placeholder: var(--hearth-gray-400);--hearth-border-default: var(--hearth-gray-200);--hearth-border-strong: var(--hearth-gray-300);--hearth-status-healthy: var(--hearth-green-600);--hearth-status-attention: var(--hearth-amber-600);--hearth-status-critical: var(--hearth-red-600);--hearth-status-neutral: var(--hearth-gray-500);--hearth-status-healthy-bg: #dcfce7;--hearth-status-attention-bg: #fef3c7;--hearth-status-critical-bg: #fee2e2;--hearth-status-neutral-bg: var(--hearth-gray-100);--hearth-action-primary: var(--hearth-blue-600);--hearth-action-primary-hover: var(--hearth-blue-700);--hearth-action-warning: var(--hearth-amber-600);--hearth-action-success: var(--hearth-green-600);--hearth-action-danger: var(--hearth-red-600);--hearth-focus-ring: var(--hearth-blue-500);--hearth-page-padding-mobile: var(--hearth-space-4);--hearth-page-padding-desktop: var(--hearth-space-6);--hearth-card-padding: var(--hearth-space-4);--hearth-table-cell-y: var(--hearth-space-2);--hearth-table-cell-x: var(--hearth-space-3);--hearth-section-gap: var(--hearth-space-4);--hearth-inline-gap: var(--hearth-space-2);--hearth-text-caption: var(--hearth-text-xs);--hearth-text-body: var(--hearth-text-sm);--hearth-text-body-large: var(--hearth-text-base);--hearth-text-subsection: var(--hearth-text-lg);--hearth-text-section-header: var(--hearth-text-lg);--hearth-text-page-title: var(--hearth-text-xl);--hearth-text-hero: var(--hearth-text-3xl);--hearth-radius-control: var(--hearth-radius-sm);--hearth-radius-card: var(--hearth-radius-md);--hearth-radius-panel: var(--hearth-radius-lg);--hearth-radius-pill: var(--hearth-radius-full);--hearth-touch-target-min: 44px}[data-theme=dark],.dark{--hearth-surface-primary: var(--hearth-gray-900);--hearth-surface-secondary: var(--hearth-gray-800);--hearth-surface-elevated: var(--hearth-gray-800);--hearth-text-primary: var(--hearth-gray-50);--hearth-text-secondary: var(--hearth-gray-200);--hearth-text-muted: var(--hearth-gray-400);--hearth-text-placeholder: var(--hearth-gray-500);--hearth-border-default: var(--hearth-gray-700);--hearth-border-strong: var(--hearth-gray-600);--hearth-status-healthy-bg: rgba(34, 197, 94, .12);--hearth-status-attention-bg: rgba(245, 158, 11, .12);--hearth-status-critical-bg: rgba(239, 68, 68, .12);--hearth-status-neutral-bg: var(--hearth-gray-800)}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--hearth-text-body);line-height:var(--hearth-leading-normal);background:var(--hearth-surface-primary);color:var(--hearth-text-primary);-webkit-font-smoothing:antialiased;transition:background var(--hearth-duration-normal),color var(--hearth-duration-normal)}h1,h2,h3,h4{font-weight:var(--hearth-weight-semibold);margin:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:2px solid var(--hearth-focus-ring);outline-offset:2px;border-radius:var(--hearth-radius-control)}code,kbd,.mono{font-family:ui-monospace,SFMono-Regular,JetBrains Mono,Menlo,monospace;font-size:12px}.app-shell{min-height:100vh;max-width:1240px;margin:0 auto;padding:var(--hearth-page-padding-mobile)}@media (min-width: 768px){.app-shell{padding:var(--hearth-page-padding-desktop)}}.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:24px;border-bottom:1px solid var(--hearth-border-default);margin-bottom:32px}.brand-mark{display:flex;align-items:center;gap:12px}.brand-mark .dot{width:28px;height:28px;border-radius:var(--hearth-radius-card);background:linear-gradient(135deg,var(--hearth-action-primary),var(--hearth-status-attention))}.brand-mark .title{font-size:var(--hearth-text-xl);font-weight:var(--hearth-weight-semibold)}.brand-mark .ver{font-family:ui-monospace,monospace;font-size:11px;padding:2px 6px;background:var(--hearth-surface-secondary);color:var(--hearth-text-muted);border-radius:var(--hearth-radius-control)}.theme-toggle{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;background:var(--hearth-surface-elevated);border:1px solid var(--hearth-border-default);border-radius:var(--hearth-radius-pill);font-size:var(--hearth-text-body);color:var(--hearth-text-primary);cursor:pointer;min-height:var(--hearth-touch-target-min)}.theme-toggle:hover{border-color:var(--hearth-action-primary)}.section{margin-bottom:64px;padding-top:16px}.section h2{font-size:var(--hearth-text-page-title);margin-bottom:4px}.section .sec-desc{color:var(--hearth-text-muted);font-size:var(--hearth-text-body);margin-bottom:24px}.subsection{margin-bottom:32px}.subsection h3{font-size:var(--hearth-text-subsection);margin-bottom:12px;color:var(--hearth-text-primary)}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.swatch{border-radius:var(--hearth-radius-card);border:1px solid var(--hearth-border-default);background:var(--hearth-surface-elevated);overflow:hidden}.swatch .chip{height:64px}.swatch .meta{padding:8px 12px;font-size:var(--hearth-text-caption)}.swatch .meta .name{font-weight:var(--hearth-weight-medium);color:var(--hearth-text-primary)}.swatch .meta .val{font-family:ui-monospace,monospace;color:var(--hearth-text-muted);margin-top:2px}.type-row{display:flex;align-items:baseline;gap:16px;padding:8px 0;border-top:1px solid var(--hearth-border-default)}.type-row:first-child{border-top:none}.type-row .tok{flex:0 0 200px;font-family:ui-monospace,monospace;font-size:12px;color:var(--hearth-text-muted)}.space-row{display:flex;align-items:center;gap:16px;padding:4px 0}.space-row .label{flex:0 0 120px;font-family:ui-monospace,monospace;font-size:12px;color:var(--hearth-text-muted)}.space-row .bar{background:var(--hearth-action-primary);height:8px;border-radius:2px}.callout{background:var(--hearth-surface-elevated);border:1px solid var(--hearth-border-default);border-radius:var(--hearth-radius-card);padding:16px;margin-bottom:16px}.toks{font-family:ui-monospace,monospace;font-size:11px;color:var(--hearth-text-muted);margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 12px}.toks span:before{content:"·";margin-right:6px;color:var(--hearth-text-placeholder)}.toks span:first-child:before{display:none}.demo-frame{background:var(--hearth-surface-elevated);border:1px solid var(--hearth-border-default);border-radius:var(--hearth-radius-panel);padding:24px}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.toc{position:sticky;top:16px;align-self:start;display:none}@media (min-width: 1024px){.with-toc{display:grid;grid-template-columns:1fr 200px;gap:48px}.toc{display:block}}.toc a{display:block;padding:6px 8px;font-size:var(--hearth-text-caption);color:var(--hearth-text-muted);text-decoration:none;border-radius:var(--hearth-radius-control)}.toc a:hover{color:var(--hearth-text-primary);background:var(--hearth-surface-secondary)}.toc h4{font-size:10px;font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--hearth-text-muted);padding:0 8px;margin-bottom:8px}.btn-primary{background:var(--hearth-action-primary);color:#fff;border:none;padding:8px 16px;border-radius:var(--hearth-radius-control);font-weight:var(--hearth-weight-medium);cursor:pointer;min-height:var(--hearth-touch-target-min)}.btn-primary:hover{background:var(--hearth-action-primary-hover)}