.segmented-switch{position:relative;display:inline-flex;align-items:center;gap:var(--switch-gap);max-width:100%}.segmented-switch__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:var(--switch-radius);background:var(--switch-indicator);transition:transform var(--motion-duration-base) var(--motion-ease-standard),width var(--motion-duration-base) var(--motion-ease-standard),height var(--motion-duration-base) var(--motion-ease-standard),background-color var(--motion-duration-fast) var(--motion-ease-standard);will-change:transform,width,height}.segmented-switch__option{position:relative;z-index:1;min-height:var(--switch-option-height);padding:var(--switch-option-padding-y) var(--switch-option-padding-x);border:0;border-radius:var(--switch-radius);background:transparent;color:var(--switch-text);cursor:pointer;font-family:var(--text-body-font);font-size:var(--text-body-size);font-weight:var(--text-body-weight);line-height:var(--text-body-line-height);letter-spacing:0;white-space:nowrap;transition:color var(--motion-duration-fast) var(--motion-ease-standard),opacity var(--motion-duration-fast) var(--motion-ease-standard)}.segmented-switch__option[data-active=true]{color:var(--switch-text-active)}.segmented-switch__option:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}@media(max-width:760px){.segmented-switch{display:flex;flex-wrap:wrap}.segmented-switch__option{font-size:var(--text-body-size)}}:root{color-scheme:light;--font-heading: Geist, Arial, sans-serif;--font-body: "IBM Plex Sans", Arial, sans-serif;--palette-cold-slate-light: #E0E0E0;--palette-cold-slate-dark: #353A3E;--palette-soft-graphite-light: #E0E1E3;--palette-soft-graphite-dark: #1E1D1B;--palette-urban-fog-light: #E0E0E0;--palette-urban-fog-dark: #232426;--palette-sage-shadow-light: #EBF1E5;--palette-sage-shadow-dark: #2D2F2B;--palette-warm-ash-light: #F5EDE7;--palette-warm-ash-dark: #232426;--palette-mist-charcoal-light: #E3E3E3;--palette-mist-charcoal-dark: #39393B;--theme-surface: var(--palette-soft-graphite-light);--theme-ink: var(--palette-soft-graphite-dark);--color-white: var(--theme-surface);--color-black: var(--theme-ink);--page-max-width: 1120px;--radius-sm: 6px;--border-soft: color-mix(in srgb, var(--color-black) 18%, transparent);--shadow-soft: 0 18px 44px color-mix(in srgb, var(--color-black) 12%, transparent);--focus-ring: color-mix(in srgb, var(--color-black) 52%, transparent);--text-display-font: var(--font-heading);--text-display-size: 72px;--text-display-line-height: 80px;--text-display-weight: 700;--text-h1-font: var(--font-heading);--text-h1-size: 56px;--text-h1-line-height: 64px;--text-h1-weight: 500;--text-h2-font: var(--font-heading);--text-h2-size: 40px;--text-h2-line-height: 48px;--text-h2-weight: 500;--text-h3-font: var(--font-body);--text-h3-size: 28px;--text-h3-line-height: 36px;--text-h3-weight: 600;--text-h4-font: var(--font-body);--text-h4-size: 22px;--text-h4-line-height: 30px;--text-h4-weight: 600;--text-body-large-font: var(--font-body);--text-body-large-size: 20px;--text-body-large-line-height: 32px;--text-body-large-weight: 400;--text-body-font: var(--font-body);--text-body-size: 16px;--text-body-line-height: 26px;--text-body-weight: 400;--text-body-small-font: var(--font-body);--text-body-small-size: 14px;--text-body-small-line-height: 22px;--text-body-small-weight: 400;--text-caption-font: var(--font-body);--text-caption-size: 12px;--text-caption-line-height: 18px;--text-caption-weight: 400;--text-label-button-font: var(--font-body);--text-label-button-size: 14px;--text-label-button-line-height: 20px;--text-label-button-weight: 500;--motion-duration-fast: .16s;--motion-duration-base: .28s;--motion-ease-standard: cubic-bezier(.22, 1, .36, 1);--switch-gap: 10px;--switch-option-height: 38px;--switch-option-padding-x: 16px;--switch-option-padding-y: 6px;--switch-radius: 999px;--switch-indicator: #353A3E;--switch-text: var(--color-black);--switch-text-active: var(--color-white)}html[data-theme=dark]{color-scheme:dark;--theme-surface: var(--palette-warm-ash-dark);--theme-ink: var(--palette-warm-ash-light);--color-white: var(--theme-surface);--color-black: var(--theme-ink);--border-soft: color-mix(in srgb, var(--color-black) 20%, transparent);--shadow-soft: 0 18px 44px color-mix(in srgb, #000000 26%, transparent);--focus-ring: color-mix(in srgb, var(--color-black) 64%, transparent);--switch-indicator: #353A3E;--switch-text: var(--color-black);--switch-text-active: var(--color-white)}*{box-sizing:border-box}body{min-height:100vh;margin:0;background:var(--color-white);color:var(--color-black);font-family:var(--text-body-font);font-size:var(--text-body-size);font-weight:var(--text-body-weight);line-height:var(--text-body-line-height)}button{font:inherit}.app-shell{width:min(100% - 32px,var(--page-max-width));margin:0 auto;padding:32px 0 56px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:28px;border-bottom:1px solid var(--border-soft)}.brand{display:grid;gap:6px}.eyebrow,.component-label{margin:0;font-family:var(--text-caption-font);font-size:var(--text-caption-size);font-weight:var(--text-caption-weight);line-height:var(--text-caption-line-height);letter-spacing:0;opacity:.48}.eyebrow{text-transform:uppercase}h1,h2{margin:0;letter-spacing:0}h1{font-family:var(--text-h1-font);font-size:var(--text-h1-size);font-weight:var(--text-h1-weight);line-height:var(--text-h1-line-height)}h2{font-family:var(--text-h4-font);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-line-height)}.theme-toggle{display:inline-grid;grid-template-columns:1fr 1fr;width:184px;min-height:40px;padding:3px;border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--color-black) 6%,transparent)}.theme-toggle button{border:0;border-radius:4px;background:transparent;color:var(--color-black);cursor:pointer;font-family:var(--text-label-button-font);font-size:var(--text-label-button-size);font-weight:var(--text-label-button-weight);line-height:var(--text-label-button-line-height)}.theme-toggle button[data-active=true]{background:var(--color-black);color:var(--color-white)}.component-stage{display:grid;gap:46px;padding-top:42px}.section-header{display:flex;align-items:end;justify-content:space-between;gap:16px}.muted{margin:8px 0 0;max-width:560px;font-family:var(--text-body-small-font);font-size:var(--text-body-small-size);font-weight:var(--text-body-small-weight);line-height:var(--text-body-small-line-height);opacity:.72}.switch-showcase{display:grid;gap:46px;padding:46px 0}.demo-row{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:28px}@media(max-width:760px){.app-shell{width:min(100% - 24px,var(--page-max-width));padding-top:24px}.topbar,.section-header{align-items:start;flex-direction:column}.theme-toggle{width:100%}.demo-row{grid-template-columns:1fr;gap:12px}}.text-display{font-family:var(--text-display-font);font-size:var(--text-display-size);font-weight:var(--text-display-weight);line-height:var(--text-display-line-height)}.text-h1{font-family:var(--text-h1-font);font-size:var(--text-h1-size);font-weight:var(--text-h1-weight);line-height:var(--text-h1-line-height)}.text-h2{font-family:var(--text-h2-font);font-size:var(--text-h2-size);font-weight:var(--text-h2-weight);line-height:var(--text-h2-line-height)}.text-h3{font-family:var(--text-h3-font);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);line-height:var(--text-h3-line-height)}.text-h4{font-family:var(--text-h4-font);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-line-height)}.text-body-large{font-family:var(--text-body-large-font);font-size:var(--text-body-large-size);font-weight:var(--text-body-large-weight);line-height:var(--text-body-large-line-height)}.text-body{font-family:var(--text-body-font);font-size:var(--text-body-size);font-weight:var(--text-body-weight);line-height:var(--text-body-line-height)}.text-body-small{font-family:var(--text-body-small-font);font-size:var(--text-body-small-size);font-weight:var(--text-body-small-weight);line-height:var(--text-body-small-line-height)}.text-caption{font-family:var(--text-caption-font);font-size:var(--text-caption-size);font-weight:var(--text-caption-weight);line-height:var(--text-caption-line-height)}.text-label-button{font-family:var(--text-label-button-font);font-size:var(--text-label-button-size);font-weight:var(--text-label-button-weight);line-height:var(--text-label-button-line-height)}
