.component-page{background:var(--gal-surface, #f8f9fa);color:var(--gal-on-surface, #1a2332);display:grid;gap:2rem;font-family:var(--font-sans, system-ui, sans-serif);padding:2.5rem 2rem 4rem;transition:background-color var(--gal-motion-normal, .2s) ease,color var(--gal-motion-normal, .2s) ease}.component-page-header,.component-section-heading{display:grid;gap:.8rem}.component-page-header{max-width:58rem}.component-eyebrow{color:var(--gal-on-surface-variant, #6b7280);font-family:var(--font-mono, monospace);font-size:.72rem;font-weight:400;letter-spacing:.18em;line-height:1;margin:0;text-transform:uppercase}.component-eyebrow a{color:inherit;text-decoration:none}.component-eyebrow a:hover{text-decoration:underline}.component-page h1,.component-page h2,.component-page h3,.component-page p,.component-page dl{margin:0}.component-page h1{font-family:var(--font-display, Georgia, serif);font-size:clamp(2.6rem,2.2rem + 1.8vw,4.1rem);font-style:italic;font-weight:400;line-height:.95;letter-spacing:-.02em}.component-page h2{font-family:var(--font-display, Georgia, serif);font-size:1.75rem;font-weight:400;line-height:1.15;letter-spacing:-.01em}.component-section-heading h2{font-family:var(--font-sans, system-ui, sans-serif);font-size:1.125rem;font-weight:700;letter-spacing:0;line-height:1.3}.component-page h3{font-family:var(--font-sans, system-ui, sans-serif);font-size:.875rem;font-weight:700;letter-spacing:.01em;line-height:1.3}.component-page .lede{color:var(--gal-on-surface, #374151);font-size:1.125rem;line-height:1.55;max-width:52ch}.component-stage-copy{color:var(--gal-on-surface, #374151);font-size:1rem;line-height:1.6;max-width:60ch}.component-section-heading p{color:var(--gal-on-surface-variant, #6b7280);font-size:.875rem;line-height:1.5;max-width:60ch}.component-playground,.component-section{background:var(--gal-surface-bright, #ffffff);border:1px solid color-mix(in oklch,var(--gal-outline, #ced3da) 25%,transparent);border-radius:var(--gal-radius-lg, 1rem);box-shadow:var(--gal-elevation-lg, 0 10px 15px rgba(0, 0, 0, .06), 0 4px 6px rgba(0, 0, 0, .04));padding:1.2rem;transition:background-color var(--gal-motion-normal, .2s) ease,border-color var(--gal-motion-normal, .2s) ease,box-shadow var(--gal-motion-normal, .2s) ease}.component-playground{container-type:inline-size;display:grid;gap:1.2rem;grid-template-columns:1fr}.component-controls{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.component-controls label,.component-controls fieldset{display:grid;gap:.4rem}.component-controls span,.component-controls legend{color:var(--gal-on-surface, #334155);font-size:.875rem;font-weight:600;line-height:1.3}.component-controls select,.component-controls input[type=text],.component-controls input[type=number]{background:var(--gal-surface-bright, #ffffff);border:1px solid color-mix(in oklch,var(--gal-outline, #ced3da) 35%,transparent);border-radius:var(--gal-radius, .75rem);font-family:inherit;font-size:.875rem;padding:.7rem .8rem}.component-stage{display:grid;gap:1rem}.component-stage-header{align-items:start;display:flex;gap:1rem;justify-content:space-between}.component-stage-badge{border:1px solid color-mix(in oklch,var(--gal-outline, #ced3da) 15%,transparent);border-radius:999px;color:var(--gal-on-surface, #334155);font-family:var(--font-mono, monospace);font-size:.72rem;font-weight:600;letter-spacing:.12em;line-height:1;padding:.4rem .75rem;text-transform:uppercase}.component-stage-surface{align-items:start;background:radial-gradient(circle at top right,color-mix(in oklch,var(--gal-primary, #295dff) 12%,transparent),transparent 42%),linear-gradient(180deg,var(--gal-surface-bright, #ffffff),color-mix(in oklch,var(--gal-surface-dim, #f1f3f5) 95%,transparent));border:1px solid color-mix(in oklch,var(--gal-outline, #ced3da) 25%,transparent);border-radius:var(--gal-radius-lg, 1rem);display:grid;gap:1rem;justify-items:start;min-height:12rem;padding:1.4rem;transition:background var(--gal-motion-normal, .2s) ease,border-color var(--gal-motion-normal, .2s) ease}.component-stage-surface.is-stretch-stage{justify-items:stretch}.component-stage-surface.is-stretch-stage>*{max-width:100%;min-width:0}.component-stage-metrics{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}.component-stage-metrics dt{color:var(--gal-on-surface-variant, #64748b);font-family:var(--font-mono, monospace);font-size:.72rem;font-weight:400;letter-spacing:.12em;line-height:1;text-transform:uppercase}.component-stage-metrics dd{font-family:var(--font-mono, monospace);font-size:.875rem;font-variant-numeric:tabular-nums;font-weight:600;line-height:1.3;margin-top:.3rem}.component-variant-grid,.component-size-grid{display:grid;gap:1rem}.component-variant-grid{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}.component-size-grid{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.component-inner-card{background:var(--gal-surface-bright, #ffffff);border:1px solid color-mix(in oklch,var(--gal-outline, #ced3da) 20%,transparent);border-radius:var(--gal-radius, .75rem);display:grid;gap:.85rem;justify-items:start;padding:1rem}@container (max-width: 62rem){.component-controls{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.component-stage-header{align-items:start;flex-direction:column}.component-stage-badge{align-self:flex-start}}@media(max-width:920px){.component-playground{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.component-page,.component-page *{transition-duration:0ms!important}}