:root{--kn0-void: #0D1117;--kn1-iron: #374151;--kn2-slate: #4B5563;--kn3-ash: #6B7280;--bs0-sand: #E4E2DA;--bs1-linen: #EEEDE9;--bs2-parchment: #F5F4F0;--fr0-sage: #5C9E86;--fr1-fern: #3E7A62;--fr2-forest: #2D5E4A;--fr3-deepwater: #254D5A;--bl0-ember: #C5414C;--bl1-ochre: #AB5A2B;--bl2-grain: #8D6B20;--bl3-moss: #567A37;--bl4-heather: #885DB4}:root{--space-xs: .375rem;--space-sm: .75rem;--space-md: 1.5rem;--space-lg: 2.25rem;--space-xl: 3rem;--space-2xl: 3.75rem;--space-3xl: 4.5rem;--space-4xl: 6rem;--width-content: 1080px;--width-prose: 70ch;--width-narrow: 640px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-full: 9999px;--z-base: 0;--z-raised: 1;--z-content: 10;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-toast: 500}:root,[data-theme=light]{--color-bg: var(--bs2-parchment);--color-bg-elevated: var(--bs1-linen);--color-bg-sunken: var(--bs0-sand);--color-text: var(--kn0-void);--color-text-secondary: var(--kn2-slate);--color-text-tertiary: var(--kn3-ash);--color-border: var(--kn1-iron);--color-border-subtle: rgba(55,65,81,.12);--color-ghost-border: rgba(55,65,81,.25);--color-bg-code: var(--fr3-deepwater);--color-accent: var(--fr1-fern);--color-accent-hover: var(--fr2-forest);--color-accent-text: var(--bs2-parchment)}[data-theme=dark]{--color-bg: var(--kn0-void);--color-bg-elevated: var(--kn1-iron);--color-bg-sunken: var(--kn2-slate);--color-text: var(--bs2-parchment);--color-text-secondary: var(--bs0-sand);--color-text-tertiary: var(--kn3-ash);--color-border: var(--kn2-slate);--color-border-subtle: rgba(75,85,99,.25);--color-ghost-border: rgba(245,244,240,.25);--color-bg-code: var(--fr3-deepwater);--color-accent: var(--fr0-sage);--color-accent-hover: var(--fr1-fern);--color-accent-text: var(--bs2-parchment)}[data-surface=light]{background:var(--bs2-parchment);--color-bg: var(--bs2-parchment);--color-bg-elevated: var(--bs1-linen);--color-bg-sunken: var(--bs0-sand);--color-text: var(--kn0-void);--color-text-secondary: var(--kn2-slate);--color-text-tertiary: var(--kn3-ash);--color-border: var(--kn1-iron);--color-border-subtle: rgba(55,65,81,.12);--color-ghost-border: rgba(55,65,81,.25);--color-bg-code: var(--fr3-deepwater);--color-accent: var(--fr1-fern);--color-accent-hover: var(--fr2-forest);--color-accent-text: var(--bs2-parchment)}[data-surface=dark]{background:var(--kn0-void);--color-bg: var(--kn0-void);--color-bg-elevated: var(--kn1-iron);--color-bg-sunken: var(--kn2-slate);--color-text: var(--bs2-parchment);--color-text-secondary: var(--bs0-sand);--color-text-tertiary: var(--kn3-ash);--color-border: var(--kn2-slate);--color-border-subtle: rgba(75,85,99,.25);--color-ghost-border: rgba(245,244,240,.25);--color-bg-code: var(--fr3-deepwater);--color-accent: var(--fr0-sage);--color-accent-hover: var(--fr1-fern);--color-accent-text: var(--bs2-parchment)}[data-surface=tinted]{background:var(--bs1-linen);--color-bg: var(--bs1-linen);--color-bg-elevated: var(--bs2-parchment);--color-bg-sunken: var(--bs0-sand);--color-text: var(--kn0-void);--color-text-secondary: var(--kn2-slate);--color-text-tertiary: var(--kn3-ash);--color-border: var(--kn1-iron);--color-border-subtle: rgba(55,65,81,.12);--color-ghost-border: rgba(55,65,81,.25);--color-bg-code: var(--fr3-deepwater);--color-accent: var(--fr1-fern);--color-accent-hover: var(--fr2-forest);--color-accent-text: var(--bs2-parchment)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);font-size:16px;line-height:1.7;background:var(--color-bg);color:var(--color-text);transition:background-color .2s ease,color .2s ease}img{max-width:100%;display:block}a{color:var(--color-accent)}:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:inherit}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}:root{--font-display: "Fraunces", Georgia, serif;--font-body: "Instrument Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Courier New", monospace}.container{width:100%;max-width:var(--width-content);margin:0 auto;padding:0 var(--space-lg)}@media(max-width:640px){.container{padding:0 var(--space-md)}}.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height);z-index:var(--z-dropdown);transition:background-color .2s ease,border-color .2s ease,transform .25s ease;background:transparent;border-bottom:1px solid transparent}.nav.filled{background:var(--color-bg);border-bottom-color:#37415133}[data-theme=dark] .nav.filled{border-bottom-color:#4b556366}.nav.hidden{transform:translateY(-100%);border-bottom-color:transparent!important}.nav-inner{max-width:var(--width-content);margin:0 auto;padding:0 var(--space-lg);height:100%;display:flex;align-items:center;justify-content:flex-start}.nav-logo{font-family:var(--font-display);font-size:22px;font-weight:800;font-variation-settings:"opsz" 20;color:var(--bs2-parchment);text-decoration:none;letter-spacing:-.02em;transition:color .2s ease}.nav-logo span{color:var(--fr0-sage)}.nav.filled .nav-logo{color:var(--color-text)}.nav.filled .nav-logo span{color:var(--color-accent)}.nav-logo-icon{height:1.25em;width:auto;display:inline-block;vertical-align:middle;margin-right:.35em}.nav-links{display:flex;align-items:center;gap:var(--space-md);list-style:none;padding:0;margin:0 0 0 auto}@media(max-width:640px){.nav-links{display:none}}.nav-links a{font-size:14px;font-weight:500;color:#f5f4f0b3;text-decoration:none;transition:color .12s ease}.nav-links a:hover{color:var(--bs2-parchment);font-weight:600}.nav-links a.active{color:var(--fr0-sage);font-weight:600}.nav.filled .nav-links a{color:var(--color-text-secondary)}.nav.filled .nav-links a:hover,.nav.filled .nav-links a.active{color:var(--color-accent);font-weight:600}.nav-right{display:flex;align-items:center;gap:var(--space-xs);margin-left:var(--space-sm)}.theme-toggle{width:36px;height:36px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:#f5f4f099;font-size:20px;transition:background-color .12s ease,color .12s ease}.theme-toggle:hover{background:#f5f4f01a;color:var(--bs2-parchment)}.nav.filled .theme-toggle{color:var(--kn3-ash)}.nav.filled .theme-toggle:hover{background:var(--color-bg-elevated);color:var(--color-text)}.github-link{width:36px;height:36px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:#f5f4f099;font-size:20px;text-decoration:none;transition:background-color .12s ease,color .12s ease}.github-link:hover{background:#f5f4f01a;color:var(--bs2-parchment)}.nav.filled .github-link{color:var(--kn3-ash)}.nav.filled .github-link:hover{background:var(--color-bg-elevated);color:var(--color-text)}.nav-cta{height:36px;padding:0 16px;margin-left:var(--space-xs);background:transparent;color:var(--bs2-parchment);border-radius:var(--radius-md);border:1.5px solid rgba(245,244,240,.35);font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;transition:background-color .12s ease,border-color .12s ease}.nav-cta:hover{background:#f5f4f01a;border-color:#f5f4f099;color:var(--bs2-parchment)}.nav.filled .nav-cta{background:var(--color-accent);color:var(--color-accent-text);border-color:transparent}.nav.filled .nav-cta:hover{background:var(--color-accent-hover);color:var(--bs2-parchment)}.hamburger{display:none;width:36px;height:36px;border:none;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center;border-radius:var(--radius-md);color:var(--color-text);font-size:22px}@media(max-width:640px){.hamburger{display:flex}}.mobile-drawer{position:fixed;top:0;left:0;right:0;background:var(--color-bg);z-index:var(--z-overlay);transform:translateY(calc(-100% - 2px));transition:transform .25s ease;border-bottom:1px solid var(--color-border-subtle)}.mobile-drawer.open{transform:translateY(var(--nav-height))}.mobile-drawer a{display:flex;align-items:center;height:52px;padding:0 var(--space-md);font-size:16px;font-weight:500;color:var(--color-text);text-decoration:none;border-bottom:1px solid var(--color-border-subtle);transition:background .12s ease,color .12s ease}.mobile-drawer a:hover{background:var(--color-bg-elevated);color:var(--color-accent)}.mobile-drawer .drawer-cta{margin:var(--space-md);height:48px;background:var(--color-accent);color:var(--color-accent-text);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}.mobile-drawer .drawer-cta:hover{background:var(--color-accent-hover);border-bottom:none}:root{--nav-height: 64px;--subnav-height: 44px;--scroll-offset: calc(var(--nav-height) + var(--subnav-height))}.sub-nav{position:sticky;top:var(--nav-height);z-index:var(--z-content);background:transparent;border-bottom:1px solid rgba(75,85,99,.25);height:var(--subnav-height);overflow-x:auto;scrollbar-width:none;transition:transform .25s ease,background-color .2s ease,border-color .2s ease}.sub-nav.hidden{transform:translateY(calc(-1 * var(--nav-height)))}.sub-nav::-webkit-scrollbar{display:none}.sub-nav-inner{max-width:var(--width-content);margin:0 auto;padding:0 var(--space-lg);display:flex;align-items:stretch;position:relative;height:100%}.sub-nav-link{padding:0 16px;font-size:14px;font-weight:500;color:#f5f4f099;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;border-bottom:2px solid transparent;transition:color .12s ease}.sub-nav-link:hover{color:var(--bs2-parchment)}.sub-nav-link.active{color:var(--bs2-parchment);font-weight:600}.sub-nav-indicator{position:absolute;bottom:0;height:2px;background:var(--color-accent);transition:left .2s ease-out,width .2s ease-out;pointer-events:none}.sub-nav.filled{background:var(--color-bg);border-bottom-color:var(--color-border-subtle)}.sub-nav.filled .sub-nav-link{color:var(--color-text-secondary)}.sub-nav.filled .sub-nav-link:hover,.sub-nav.filled .sub-nav-link.active{color:var(--color-text);font-weight:600}.section-eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-sm)}.section-title{font-family:var(--font-display);font-size:clamp(28px,4vw,42px);font-weight:700;font-variation-settings:"opsz" 36;letter-spacing:-.02em;line-height:1.15;color:var(--color-text);margin-bottom:var(--space-md)}.section-desc{font-size:17px;line-height:1.7;color:var(--color-text-secondary);max-width:60ch;margin-bottom:var(--space-xl)}.page-header{padding:var(--space-4xl) 0 var(--space-3xl);border-bottom:1px solid var(--color-border-subtle);margin-bottom:var(--space-3xl)}.page-eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-sm)}.page-title{font-family:var(--font-display);font-size:clamp(36px,6vw,64px);font-weight:800;font-variation-settings:"opsz" 72;letter-spacing:-.03em;line-height:1.05;color:var(--color-text);margin-bottom:var(--space-md)}.page-title em{font-style:italic;color:var(--color-accent)}.page-desc{font-size:17px;line-height:1.7;color:var(--color-text-secondary);max-width:65ch}.btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;font-family:var(--font-body);font-size:13px;font-weight:600;border-radius:var(--radius-md);border:none;cursor:pointer;text-decoration:none;transition:background-color .12s ease,transform 80ms ease;line-height:1}.btn:active{transform:scale(.98)}.btn-p{background:var(--color-accent);color:var(--color-accent-text)}.btn-p:hover{background:var(--color-accent-hover);color:var(--bs2-parchment)}.btn-s{background:var(--color-bg-sunken);color:var(--color-text)}.btn-s:hover{background:var(--color-bg-elevated)}[data-theme=dark] .btn-s:hover,[data-surface=dark] .btn-s:hover{background:var(--kn3-ash)}.btn-g{background:transparent;color:var(--color-text);border:1.5px solid var(--color-border)}.btn-g:hover{background:var(--color-bg-elevated)}.btn-d{background:var(--bl0-ember);color:var(--bs2-parchment)}.btn-d:hover{background:#a8343e}.btn-sm{height:32px;padding:0 12px;font-size:12px}.btn-lg{height:48px;padding:0 20px;font-size:14px}.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;letter-spacing:.04em}.badge-neutral{background:var(--bs0-sand);color:var(--kn1-iron)}[data-theme=dark] .badge-neutral{background:var(--kn1-iron);color:var(--bs0-sand)}.badge-forest{background:#3e7a621f;color:var(--fr2-forest)}[data-theme=dark] .badge-forest{background:#5c9e8626;color:var(--fr0-sage)}.badge-moss{background:#567a371f;color:#3a5523}[data-theme=dark] .badge-moss{background:#567a3726;color:#7aad52}.badge-grain{background:#8d6b201f;color:#6b4e17}[data-theme=dark] .badge-grain{background:#8d6b2026;color:#c4943a}.badge-ember{background:#c5414c1a;color:#9b2f38}[data-theme=dark] .badge-ember{background:#c5414c26;color:#e06870}.badge-heather{background:#885db41f;color:#5e3d8a}[data-theme=dark] .badge-heather{background:#885db426;color:#aa82d4}.reveal{opacity:0;transform:translateY(20px);transition:opacity .4s ease-out,transform .4s cubic-bezier(.16,1,.3,1)}.reveal.is-visible{opacity:1;transform:translateY(0)}.reveal:nth-child(2){transition-delay:60ms}.reveal:nth-child(3){transition-delay:.12s}.reveal:nth-child(4){transition-delay:.18s}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.page-footer{padding:var(--space-3xl) 0 var(--space-xl)}.footer-inner{max-width:var(--width-content);margin:0 auto;padding:0 var(--space-lg)}.footer-top{margin-bottom:var(--space-xl)}.footer-logo{font-family:var(--font-display);font-size:28px;font-weight:800;font-variation-settings:"opsz" 28;color:var(--color-text);margin-bottom:var(--space-xs)}.footer-logo span{color:var(--fr1-fern)}.footer-tagline{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--space-md)}.footer-nav{display:flex;gap:var(--space-md);flex-wrap:wrap}.footer-nav a{font-size:14px;color:var(--color-text-tertiary);text-decoration:none;transition:color .12s ease;white-space:nowrap}.footer-nav a:hover{color:var(--color-text-secondary)}.footer-hr{border:none;border-top:1px solid var(--color-border-subtle);margin:0 0 var(--space-lg)}.footer-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}.footer-copy{font-size:12px;color:var(--color-text-tertiary)}.footer-links{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:center}.footer-links a{font-size:12px;color:var(--color-text-tertiary);text-decoration:none;transition:color .12s ease;white-space:nowrap}.footer-links a:hover{color:var(--color-text-secondary)}.nav-view-link{cursor:pointer}#about,#foundations,#components{padding:var(--space-3xl) 0}.hero{min-height:calc(100vh + var(--subnav-height));display:flex;align-items:center;position:relative;overflow:hidden;margin-top:calc(-1 * var(--subnav-height));padding-top:calc(var(--space-4xl) + var(--subnav-height));padding-bottom:var(--space-4xl)}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 20% 60%,rgba(62,122,98,.12) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 80% 30%,rgba(37,77,90,.15) 0%,transparent 60%);pointer-events:none}.hero-inner{position:relative;width:100%;max-width:var(--width-content);margin:0 auto;padding:0 var(--space-lg)}.hero-eyebrow{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-md);opacity:0;animation:fadeUp .6s ease-out .1s forwards}.hero-title{font-family:var(--font-display);font-size:clamp(56px,9vw,112px);font-weight:800;font-variation-settings:"opsz" 72;line-height:1;letter-spacing:-.03em;color:var(--color-text);margin-bottom:var(--space-lg);opacity:0;animation:fadeUp .7s ease-out .2s forwards}.hero-title em{font-style:italic;color:var(--color-accent)}.hero-desc{font-size:clamp(16px,2vw,20px);line-height:1.65;color:var(--color-text-tertiary);max-width:52ch;margin-bottom:var(--space-xl);opacity:0;animation:fadeUp .7s ease-out .35s forwards}.hero-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;opacity:0;animation:fadeUp .7s ease-out .45s forwards}.btn-primary{height:48px;padding:0 24px;background:var(--color-accent);color:var(--color-accent-text);border-radius:var(--radius-md);font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;transition:background-color .12s ease}.btn-primary:hover{background:var(--color-accent-hover);color:var(--bs2-parchment)}.btn-ghost{height:48px;padding:0 24px;background:transparent;color:var(--color-text);border-radius:var(--radius-md);font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--color-ghost-border);cursor:pointer;transition:background-color .12s ease,border-color .12s ease}.btn-ghost:hover{background:#f5f4f014;border-color:#f5f4f080}.hero-palette-strip{position:absolute;right:var(--space-lg);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:3px;opacity:0;animation:fadeIn 1s ease-out .7s forwards}@media(max-width:900px){.hero-palette-strip{display:none}}.palette-swatch{width:8px;height:28px;border-radius:var(--radius-sm)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4xl);align-items:center}@media(max-width:768px){.about-grid{grid-template-columns:1fr;gap:var(--space-2xl)}}.about-text p{font-size:16px;line-height:1.75;color:var(--color-text-secondary);margin-bottom:var(--space-md)}.about-text p:last-child{margin-bottom:0}.about-palettes{display:flex;flex-direction:column;gap:var(--space-sm)}.palette-row{display:flex;gap:4px}.palette-row .swatch{height:40px;flex:1;border-radius:var(--radius-sm);transition:transform .15s ease,flex .2s ease}.palette-row .swatch:hover{transform:scaleY(1.15);flex:2}.palette-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);margin-bottom:6px}.type-specimen{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-bottom:var(--space-xl)}@media(max-width:640px){.type-specimen{grid-template-columns:1fr}}.specimen-card{background:var(--color-bg-elevated);border-radius:var(--radius-lg);padding:var(--space-lg)}.specimen-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-tertiary);margin-bottom:var(--space-md)}.specimen-display{font-family:var(--font-display);font-size:clamp(32px,5vw,56px);font-weight:800;font-variation-settings:"opsz" 48;letter-spacing:-.02em;line-height:1.1;color:var(--color-text);margin-bottom:var(--space-sm)}.specimen-display em{font-style:italic;color:var(--color-accent)}.specimen-body{font-size:15px;line-height:1.7;color:var(--color-text-secondary)}.specimen-mono{font-family:var(--font-mono);font-size:13px;background:var(--color-bg-code);color:var(--bs2-parchment);padding:var(--space-md);border-radius:var(--radius-md);line-height:1.6}.spacing-scale{display:flex;flex-direction:column;gap:var(--space-sm)}.scale-row{display:flex;align-items:center;gap:var(--space-md)}.scale-label{font-family:var(--font-mono);font-size:11px;color:var(--color-text-tertiary);width:140px;flex-shrink:0}.scale-bar-wrap{flex:1;height:24px;display:flex;align-items:center}.scale-bar{height:8px;background:var(--color-accent);border-radius:var(--radius-sm);opacity:.7;transition:opacity .15s ease}.scale-row:hover .scale-bar{opacity:1}.components-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}.card{background:var(--color-bg-elevated);border-radius:var(--radius-lg);padding:20px;transition:background-color .18s ease;text-decoration:none;display:block;color:inherit}.card:hover{background:var(--color-bg-sunken)}.card-tag{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);margin-bottom:8px}.card-title{font-size:15px;font-weight:600;color:var(--color-text);margin-bottom:6px;line-height:1.3}.card-body{font-size:13px;color:var(--color-text-secondary);line-height:1.6;margin-bottom:14px}.card-meta{font-size:11px;color:var(--color-text-tertiary);display:flex;justify-content:space-between;align-items:center}.card-arrow{color:var(--color-accent);font-weight:500}.card-icon-wrap{width:32px;height:32px;border-radius:var(--radius-md);background:#3e7a621f;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:18px;color:var(--color-accent)}[data-theme=dark] .card-icon-wrap{background:#5c9e8626}.card-highlight-light{background:var(--kn0-void)}.card-highlight-light:hover{background:var(--kn1-iron)}.card-highlight-dark{background:var(--kn1-iron);border:1px solid var(--kn2-slate)}.card-highlight-dark:hover{background:var(--kn2-slate)}.card-highlight-light .card-title,.card-highlight-dark .card-title{color:var(--bs2-parchment)}.card-highlight-light .card-body{color:var(--kn3-ash)}.card-highlight-dark .card-body{color:var(--bs0-sand)}.card-highlight-light .card-tag,.card-highlight-light .card-arrow,.card-highlight-dark .card-tag,.card-highlight-dark .card-arrow{color:var(--fr0-sage)}.card-highlight-light .card-meta,.card-highlight-dark .card-meta{color:var(--kn3-ash)}.btn-showcase{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg);align-items:center}.badge-showcase{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-lg);align-items:center}.input-showcase{max-width:400px;margin-bottom:var(--space-lg)}.field{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--space-md)}.field-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-tertiary)}.field-input{height:48px;padding:0 14px;border:1.5px solid transparent;border-radius:var(--radius-md);background:var(--color-bg-elevated);font-family:var(--font-body);font-size:14px;color:var(--color-text);transition:background .18s ease,border-color .15s ease,box-shadow .15s ease;outline:none}.field-input::placeholder{color:var(--color-text-tertiary)}.field-input:hover{background:var(--color-bg-sunken)}.field-input:focus{background:var(--color-bg-sunken);border-color:var(--color-accent);box-shadow:0 0 0 3px #3e7a6226}[data-theme=dark] .field-input:focus{box-shadow:0 0 0 3px #5c9e862e}.field-error .field-input{border-color:var(--bl0-ember)}.field-hint{font-size:11px;color:var(--color-text-tertiary)}.field-error-msg{font-size:11px;color:var(--bl0-ember)}.divider-demo{margin-bottom:var(--space-lg)}.divider-demo p{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--space-sm)}hr.hairline{border:none;border-top:1px solid var(--color-border-subtle);margin:var(--space-sm) 0}hr.section-divider{border:none;border-top:1px solid var(--color-border);opacity:.4;margin:var(--space-md) 0}hr.decorative{border:none;border-top:2px solid var(--color-accent);width:32px;margin:var(--space-md) 0}.blockquote-demo{border-left:3px solid var(--color-accent);padding:4px 0 4px 20px;margin-bottom:var(--space-lg)}.blockquote-demo p{font-family:var(--font-display);font-style:italic;font-variation-settings:"opsz" 16;font-size:16px;color:var(--color-text-secondary);line-height:1.7}.blockquote-demo footer{font-size:12px;color:var(--color-text-tertiary);margin-top:8px}.pullquote-demo{text-align:center;padding:0 var(--space-xl);margin-bottom:var(--space-lg)}.pullquote-rule{width:32px;height:2px;background:var(--color-accent);margin:0 auto var(--space-md)}.pullquote-demo p{font-family:var(--font-display);font-style:italic;font-variation-settings:"opsz" 20;font-size:clamp(18px,3vw,24px);color:var(--color-text);line-height:1.4;letter-spacing:-.01em}.pullquote-demo figcaption{margin-top:var(--space-md);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}.attribution-demo{background:var(--color-bg-elevated);border-radius:var(--radius-lg);padding:20px 24px;display:flex;gap:16px;align-items:flex-start}[data-theme=dark] .attribution-demo{border:1px solid var(--kn2-slate)}.attribution-avatar{width:40px;height:40px;border-radius:var(--radius-full);background:#3e7a6226;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--fr2-forest);flex-shrink:0}[data-theme=dark] .attribution-avatar{background:#5c9e8626;color:var(--fr0-sage)}.attribution-quote{font-family:var(--font-display);font-style:italic;font-variation-settings:"opsz" 14;font-size:14px;color:var(--color-text-secondary);line-height:1.65;margin-bottom:8px}.attribution-name{font-size:13px;font-weight:600;color:var(--color-text)}.attribution-role{font-size:12px;color:var(--color-text-secondary)}.surface-demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-radius:var(--radius-lg);overflow:hidden}@media(max-width:640px){.surface-demo-grid{grid-template-columns:1fr}}.surface-demo-cell{padding:var(--space-lg)}.surface-demo-cell h4{font-family:var(--font-display);font-size:16px;font-weight:700;font-variation-settings:"opsz" 16;margin-bottom:8px;letter-spacing:-.01em;color:var(--color-text)}.surface-demo-cell p{font-size:13px;line-height:1.6;margin-bottom:14px;color:var(--color-text-secondary)}.surface-demo-cell .mini-btn{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--radius-md);font-size:12px;font-weight:600;border:none;cursor:pointer}.all-swatches{display:flex;height:48px;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-3xl);cursor:default}.all-swatches .sw{flex:1;transition:flex .2s ease;position:relative}.all-swatches .sw:hover{flex:3}.all-swatches .sw .sw-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--kn0-void);color:var(--bs2-parchment);font-family:var(--font-mono);font-size:10px;padding:4px 8px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease}.all-swatches .sw:hover .sw-tip{opacity:1}.palette-section{margin-bottom:var(--space-4xl);scroll-margin-top:var(--scroll-offset, 108px)}.palette-header{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:start;margin-bottom:var(--space-xl)}@media(max-width:768px){.palette-header{grid-template-columns:1fr}}.palette-name{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);font-weight:800;font-variation-settings:"opsz" 36;letter-spacing:-.02em;line-height:1.1;margin-bottom:var(--space-sm)}.palette-concept{font-size:15px;line-height:1.7;color:var(--color-text-secondary)}.palette-swatches{display:flex;gap:6px;flex-wrap:wrap}.palette-swatch-large{flex:1;min-width:64px;height:72px;border-radius:var(--radius-md);position:relative;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.palette-swatch-large:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026}.palette-swatch-large .swatch-hex{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.02em;opacity:0;transition:opacity .15s ease}.palette-swatch-large:hover .swatch-hex{opacity:1}.palette-divider{height:1px;background:var(--color-border-subtle);margin:var(--space-4xl) 0}.token-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-sm)}.token-card{background:var(--color-bg-elevated);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .15s ease}.token-card:hover{box-shadow:0 4px 16px #00000014}[data-theme=dark] .token-card:hover{box-shadow:0 4px 16px #0000004d}.token-color-strip{height:56px;position:relative}.token-color-strip .copy-btn{position:absolute;top:50%;right:8px;transform:translateY(-50%);background:#00000040;color:#fff;border:none;border-radius:var(--radius-sm);padding:4px 8px;font-size:10px;font-family:var(--font-mono);cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.token-card:hover .copy-btn{opacity:1}.copy-btn:hover{background:#00000073}.copy-btn.copied{background:#3e7a62cc}.token-info{padding:14px 16px}.token-name{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--color-accent);margin-bottom:4px}.token-hex{font-family:var(--font-mono);font-size:11px;color:var(--color-text-tertiary);margin-bottom:8px}.token-role{font-size:13px;font-weight:600;color:var(--color-text);margin-bottom:4px}.token-desc{font-size:12px;color:var(--color-text-secondary);line-height:1.55}.token-usage{margin-top:10px;display:flex;gap:4px;flex-wrap:wrap}.usage-pill{font-size:10px;font-weight:600;padding:2px 6px;border-radius:var(--radius-sm);letter-spacing:.04em}.usage-light{background:var(--bs0-sand);color:var(--kn1-iron)}[data-theme=dark] .usage-light{background:#e4e2da1f;color:var(--bs0-sand)}.usage-dark{background:var(--kn1-iron);color:var(--bs0-sand)}[data-theme=dark] .usage-dark{background:#37415180;color:var(--kn3-ash)}.usage-both{background:#3e7a621a;color:var(--fr2-forest)}[data-theme=dark] .usage-both{background:#5c9e861f;color:var(--fr0-sage)}.semantic-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}@media(max-width:640px){.semantic-grid{grid-template-columns:1fr}}.semantic-mode{background:var(--color-bg-elevated);border-radius:var(--radius-lg);padding:var(--space-md)}.semantic-mode-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--space-md)}.semantic-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--color-border-subtle)}.semantic-row:last-child{border-bottom:none}.semantic-dot{width:20px;height:20px;border-radius:var(--radius-sm);flex-shrink:0;border:1px solid rgba(0,0,0,.08)}.semantic-token-name{font-family:var(--font-mono);font-size:11px;color:var(--color-accent);flex:1}.semantic-resolves{font-family:var(--font-mono);font-size:10px;color:var(--color-text-tertiary)}.wcag-table{width:100%;border-collapse:collapse;font-size:13px}.wcag-table th{text-align:left;padding:10px 14px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);border-bottom:1px solid var(--color-border-subtle)}.wcag-table td{padding:10px 14px;border-bottom:1px solid var(--color-border-subtle);color:var(--color-text-secondary);vertical-align:middle}.wcag-table tr:hover td{background:var(--color-bg-elevated)}.wcag-pair{display:flex;align-items:center;gap:8px}.wcag-dot-wrap{display:flex;gap:2px}.wcag-dot{width:16px;height:16px;border-radius:var(--radius-sm);border:1px solid rgba(0,0,0,.08)}.wcag-pass{color:var(--bl3-moss);font-weight:600}.wcag-large{color:var(--bl2-grain);font-weight:600}.wcag-ratio{font-family:var(--font-mono);font-size:12px}.code-block{background:var(--color-bg-code);border-radius:var(--radius-lg);padding:var(--space-md);font-family:var(--font-mono);font-size:12px;line-height:1.7;color:var(--bs2-parchment);overflow-x:auto;position:relative}.code-comment{color:var(--fr0-sage);opacity:.7}.code-prop{color:var(--bs0-sand)}.code-val{color:var(--bs2-parchment)}.code-copy-btn{position:absolute;top:12px;right:12px;background:#f5f4f026;color:var(--bs2-parchment);border:none;border-radius:var(--radius-sm);padding:4px 10px;font-size:11px;font-family:var(--font-body);font-weight:600;cursor:pointer;transition:background .12s ease}.code-copy-btn:hover{background:#f5f4f040}.code-copy-btn.copied{background:#567a3780}