.page{max-width:var(--width-content);min-height:100dvh;padding:var(--space-6) var(--space-5);gap:var(--space-7);flex-direction:column;margin-inline:auto;display:flex}.logo-dark{display:none}@media (prefers-color-scheme:dark){.logo-light{display:none}.logo-dark{display:block}}[data-theme=light] .logo-light{display:block}[data-theme=light] .logo-dark,[data-theme=dark] .logo-light{display:none}[data-theme=dark] .logo-dark{display:block}.main{gap:var(--space-7);flex-direction:column;display:flex}h1{letter-spacing:var(--tracking-display);margin-bottom:var(--space-3);font-size:2.25rem}h2{margin-bottom:var(--space-2);font-size:1.125rem}.lead{max-width:var(--width-prose);opacity:.8;font-size:1.125rem}.hint{opacity:.65;margin-bottom:var(--space-4);font-size:.875rem}code{background:hsl(var(--muted));border-radius:var(--radius-sm);padding:.1em .35em;font-family:ui-monospace,SF Mono,SFMono-Regular,Menlo,monospace;font-size:.85em}.tokens{flex-direction:column;display:flex}.tokens h2+.hint{margin-top:0}.tokens h2:not(:first-child){margin-top:var(--space-6)}.spacing-demo{gap:var(--space-2);flex-direction:column;display:flex}.spacing-bar{height:var(--space-2);background:hsl(var(--accent-9));border-radius:var(--radius-full);transition:width var(--duration-ui) var(--ease-out)}.swatches{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));padding:0;list-style:none;display:grid}.swatch{gap:var(--space-1);padding:var(--space-3);border:var(--border-width) solid hsl(var(--border));border-radius:var(--radius-md);flex-direction:column;display:flex}.swatch-chip{height:var(--space-6);border:var(--border-width) solid hsl(var(--border));border-radius:var(--radius-sm)}.swatch-label{margin-top:var(--space-1);font-size:.875rem}.swatch-var{opacity:.65;background:0 0;padding:0;font-size:.75rem}.steps ol{padding-left:var(--space-5);gap:var(--space-2);max-width:var(--width-prose);flex-direction:column;display:flex}.footer{padding-top:var(--space-6);border-top:var(--border-width) solid hsl(var(--border));margin-top:auto;font-size:.875rem}.footer-link{align-items:center;gap:var(--space-2);opacity:.75;transition:opacity var(--duration-fast) var(--ease-out), scale var(--duration-press) var(--ease-out);text-decoration:none;display:inline-flex}@media (hover:hover) and (pointer:fine){.footer-link:hover{opacity:1}}.footer-link:active{scale:var(--press-scale)}