.ui-foundations-preview{--fnd-heading:#09090b;--fnd-body:#52525b;--fnd-subtle:#71717b;--fnd-white:#fff;--fnd-page:#f4f4f5;--fnd-card:#fff;--fnd-brand:#000;--fnd-brand-medium:#27272a;--fnd-success:#009e60;--fnd-danger:#dc143c;--fnd-explanation-danger:#bd1235;--fnd-explanation-success:#047857;--fnd-explanation-warning:#9a4d00;--fnd-line:#e4e4e7;--fnd-line-subtle:#ececee;--fnd-line-medium:#d4d4d8;--fnd-line-strong:#a1a1aa;--fnd-skeleton:#e0e0e4;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:12px;--radius-2xl:16px;--font-sans:var(--font-inter),"Inter","SF Pro Text","Segoe UI",ui-sans-serif,system-ui,sans-serif;--font-mono:"Geist Mono","SFMono-Regular",Consolas,"Liberation Mono",ui-monospace,monospace;--shadow-fnd-control:0 1px 2px #0000000a;--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--fnd-hover:#f4f4f5;--fnd-field:#fafafa;--ease-out-quart:cubic-bezier(.25,1,.5,1);--focus-ring:0 0 0 2px #71717b8c;--preview-state-duration:.26s;--preview-state-easing:var(--ease-out-quart);--preview-state-transition:var(--preview-state-duration)var(--preview-state-easing);--preview-text-fade:var(--preview-state-transition);--preview-surface-fade:var(--preview-state-transition);--preview-reveal-transition:.15s ease-out}.dark .ui-foundations-preview{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--fnd-heading:#fafafa;--fnd-body:#d4d4d8;--fnd-subtle:#a1a1aa;--fnd-page:#18181b;--fnd-card:#18181b;--fnd-brand:#fafafa;--fnd-brand-medium:#e4e4e7;--fnd-line:#202023;--fnd-line-subtle:#1c1c1f;--fnd-line-medium:#2a2a2e;--fnd-line-strong:#3f3f46;--fnd-hover:#111113;--fnd-field:#27272a;--fnd-success:#34d399;--fnd-danger:#fb7185;--fnd-explanation-danger:#fda4af;--fnd-explanation-success:#6ee7b7;--fnd-explanation-warning:#fbbf24;--fnd-skeleton:#3f3f46}.dark .ui-foundations-preview #gallery-content{background:#09090b}.dark .ui-foundations-preview .playground-preview .bg-fnd-white{background-color:var(--fnd-card)}.dark .ui-foundations-preview .playground-settings,.dark .ui-foundations-preview .playground-settings .bg-fnd-white{background:var(--fnd-card)}.ui-foundations-preview *{box-sizing:border-box}.ui-foundations-preview{scroll-behavior:smooth;background:var(--fnd-page);color:var(--fnd-body);font-family:var(--font-sans);font-optical-sizing:auto;font-kerning:normal;font-variant-ligatures:common-ligatures contextual;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;margin:0;font-size:16px;line-height:1.5}.ui-foundations-preview button,.ui-foundations-preview input,.ui-foundations-preview select,.ui-foundations-preview textarea{font:inherit}.ui-foundations-preview .playground-settings input[type=number],.ui-foundations-preview .playground-settings output,.ui-foundations-preview .playground-settings [role=slider]{font-variant-numeric:tabular-nums}.ui-foundations-preview button,.ui-foundations-preview select,.ui-foundations-preview input[type=range]{cursor:pointer}@layer base{.ui-foundations-preview h1,.ui-foundations-preview h2,.ui-foundations-preview h3,.ui-foundations-preview h4,.ui-foundations-preview h5,.ui-foundations-preview h6{color:var(--fnd-heading);letter-spacing:-.03em;font-weight:600;line-height:1.2}}.ui-foundations-preview ::selection{background:var(--fnd-heading);color:var(--fnd-card)}.ui-foundations-preview .microlabel{font-family:var(--font-sans);font-size:12px;font-weight:500}.ui-foundations-preview .grain:before{z-index:0;content:"";opacity:.42;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitchTiles'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");position:fixed;inset:0}.ui-foundations-preview .preview-stage{--example-value-font-size:.875rem;background-color:var(--preview-neutral-fafafa,#f9f9f9);background-image:repeating-linear-gradient(135deg,#0000 0 15px,#a1a1aa1f 15px 16px);flex:none;height:720px;min-height:720px}.ui-foundations-preview .preview-stage>.example-preview-ink{height:100%;min-height:0;overflow:clip}.ui-foundations-preview .playground-preview .preview-stage :is(.ap-measure>b,.ap-activity-value,.id-lesson-annotation p,.ap-activity-instructions,.measurement-readout,.measurement-readout__row>strong,.book-callouts__label,.book-callouts__label-content>strong,.book-callouts__contrast,.book-guide,.book-breathing-card__measure>b,.lesson-guide__leader>span,.lesson-guide-mobile,.rule-demo-callout>span,.matched-height-values,.hit-lesson-measure strong,.hit-area-dimension strong,.hit-lesson-callout__values dt,.hit-lesson-callout__values dd,.core-guide__values,.contrast-mobile-value,.input-contrast-details>.input-contrast-mobile-value,.headline-specimen__measurement-value,.id-volume-label output){font-size:var(--example-value-font-size);line-height:1.5}.ui-foundations-preview .guidance-dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#09090b61}.ui-foundations-preview .spacing-guidance-scale{background:var(--preview-neutral-ffffff,#fff);border-radius:8px;justify-content:center;align-items:end;gap:8px;height:88px;padding:8px;display:flex}.ui-foundations-preview .spacing-guidance-scale>span{background:var(--preview-neutral-3e3e3e,#3e3e3e);border-radius:4px 4px 2px 2px;width:20px;position:relative}.ui-foundations-preview .spacing-guidance-scale b{inset-inline:0;color:var(--preview-neutral-ffffff,#fff);font:700 9px/12px var(--font-mono);text-align:center;position:absolute;bottom:3px}.ui-foundations-preview .spacing-guidance-card{border:1px solid var(--fnd-line);background:var(--preview-neutral-ffffff,#fff);border-radius:10px;flex-direction:column;width:148px;margin-inline:auto;padding:12px;display:flex}.ui-foundations-preview .spacing-guidance-card__badge{background:var(--preview-neutral-a1a1aa,#a1a1aa);border-radius:999px;width:48px;height:12px}.ui-foundations-preview .spacing-guidance-card__title{background:var(--preview-neutral-3e3e3e,#3e3e3e);border-radius:3px;width:104px;height:12px}.ui-foundations-preview .spacing-guidance-card__copy{background:var(--preview-neutral-d4d4d8,#d4d4d8);border-radius:2px;width:116px;height:7px}.ui-foundations-preview .spacing-guidance-card__copy--short{width:76px;margin-top:5px}.ui-foundations-preview .spacing-guidance-card__gap{color:var(--fnd-success);background-color:color-mix(in srgb,currentColor 5%,transparent);background-image:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,currentColor 28%,transparent)3px 4px);font:700 9px/1 var(--font-mono);align-self:stretch;place-items:center;display:grid}.ui-foundations-preview .spacing-guidance-card__gap--wide{height:24px;margin-block:4px}.ui-foundations-preview .spacing-guidance-card__gap--tight{height:8px;margin-block:4px}.ui-foundations-preview .spacing-guidance-box-model{border:1px dashed var(--preview-neutral-a1a1aa,#a1a1aa);background:var(--preview-neutral-ffffff,#fff);border-radius:9px;place-items:center;width:168px;height:88px;margin-inline:auto;display:grid;position:relative}.ui-foundations-preview .spacing-guidance-box-model__margin{color:var(--fnd-subtle);font:600 9px/1 var(--font-mono);position:absolute;top:3px;left:7px}.ui-foundations-preview .spacing-guidance-box-model__border{border:2px solid var(--preview-neutral-3e3e3e,#3e3e3e);background:repeating-linear-gradient(135deg,#3e3e3e0f 0 3px,#0000 3px 6px);border-radius:7px;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:10px;display:grid}.ui-foundations-preview .spacing-guidance-box-model__padding{color:var(--fnd-body);font:700 9px/1 var(--font-mono)}.ui-foundations-preview .spacing-guidance-box-model__content{background:var(--preview-neutral-3e3e3e,#3e3e3e);width:58px;height:32px;color:var(--preview-neutral-ffffff,#fff);font:700 9px/1 var(--font-mono);border-radius:4px;place-items:center;display:grid}.ui-foundations-preview .spacing-guidance-form{background:var(--preview-neutral-ffffff,#fff);border-radius:8px;flex-direction:column;width:156px;min-height:88px;margin-inline:auto;padding:8px 12px;display:flex}.ui-foundations-preview .spacing-guidance-form__label{background:var(--preview-neutral-71717a,#71717a);border-radius:2px;width:54px;height:6px}.ui-foundations-preview .spacing-guidance-form__label--short{width:38px}.ui-foundations-preview .spacing-guidance-form__field{border:1px solid var(--preview-neutral-a1a1aa,#a1a1aa);background:var(--preview-neutral-fafafa,#fafafa);border-radius:5px;height:18px}.ui-foundations-preview .spacing-guidance-form__gap{color:var(--fnd-success);background-image:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,currentColor 28%,transparent)3px 4px);font:700 8px/1 var(--font-mono);place-items:center;display:grid}.ui-foundations-preview .spacing-guidance-form__gap--tight{height:8px}.ui-foundations-preview .spacing-guidance-form__gap--wide{height:24px}.ui-foundations-preview .example-preview-ink{--fnd-heading:var(--preview-neutral-3e3e3e,#3e3e3e);--fnd-body:var(--preview-neutral-5e5e5e,#5e5e5e);--fnd-subtle:var(--preview-neutral-5e5e5e,#5e5e5e);--example-secondary-text:var(--preview-neutral-5e5e5e,#5e5e5e);color:var(--preview-neutral-3e3e3e,#3e3e3e)}.ui-foundations-preview .preview-stage .example-preview-ink :is(.book-type-article__body,.book-type-article__helper,.book-font-card__date,.book-font-card__details dt,.book-pricing-card__period,.book-leading-paragraphs,.book-muted,.book-eyebrow,.book-naming-path,.book-unbuilt,.book-activity p,.book-prose>p,.core-support,.core-feedback,.core-numeric-row>span,.core-reading-copy>p,.core-focus-test .core-focus-instruction,.rule-demo-support,.rule-demo-eyebrow,.rule-demo-description-copy,.rule-demo-feedback,.book-feedback,.hit-lesson-action,.searchable-select-example__task p,.searchable-select-example__scroll-hint,.searchable-select-example__result,.book-callouts__label-content>strong,.book-callouts__label-content [data-property]>span,.measurement-readout__row>span,.matched-height-values__row>:first-child,.hit-lesson-callout__values dt,.lesson-guide__value-row>span,.table-alignment-table thead th),.ui-foundations-preview .example-preview-ink .book-demo:not([data-example=tinted-text],[data-example=image-contrast],[data-example=palette-roles],[data-example=color-families]) .book-stack>p:not(.font-feature-specimen){color:var(--example-secondary-text)}.ui-foundations-preview .example-preview-ink .book-demo .font-feature-example .font-feature-specimen{color:var(--fnd-heading)}.ui-foundations-preview [data-corrected=false]{--value-leader-color:#ff5268;--explanation-color:var(--fnd-explanation-danger)}.ui-foundations-preview [data-corrected=true]{--value-leader-color:var(--fnd-success);--explanation-color:var(--fnd-explanation-success)}.ui-foundations-preview .value-leader{color:var(--value-leader-color,#ff5268);fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;flex-shrink:0;overflow:visible}.ui-foundations-preview .value-leader circle{fill:currentColor;stroke:none}.ui-foundations-preview .foundation-settings-grid{display:grid}.ui-foundations-preview .foundation-setting-cell{border-bottom:1px solid var(--fnd-line)}.ui-foundations-preview .foundation-setting-cell:last-child{border-bottom:0}.ui-foundations-preview .foundation-setting-range{flex:none;width:clamp(6.5rem,12vw,12rem)}.ui-foundations-preview .optical-padding-guide{background-color:color-mix(in srgb,currentColor 5%,transparent);isolation:isolate;border:0;overflow:hidden}.ui-foundations-preview .optical-padding-guide:before{content:"";opacity:.24;background-image:repeating-linear-gradient(135deg,#0000 0 2px,currentColor 2px 3px);position:absolute;inset:0}.ui-foundations-preview .optical-example-card{box-shadow:0 8px 24px #09090b0b,0 1px 3px #09090b09}.ui-foundations-preview .sliding-example-tab{color:var(--preview-neutral-b8b8b8,#b8b8b8)}.ui-foundations-preview .sliding-example-tab[aria-selected=true],.ui-foundations-preview .sliding-example-tab:hover,.ui-foundations-preview .sliding-example-tab:focus-visible,.ui-foundations-preview .sliding-example-tab[aria-selected=true] svg{color:var(--preview-neutral-ffffff,#fff)}.ui-foundations-preview .sliding-example-tab svg{color:inherit}.ui-foundations-preview .standalone-control-icon.lucide{width:16px!important;height:16px!important;font-size:16px!important}.ui-foundations-preview .control-tooltip{pointer-events:none;opacity:0;transform-origin:100% 100%;will-change:transform,opacity;transition:opacity .1s ease-out,transform 0s linear .1s;transform:translateY(6px)scale(.92)}.ui-foundations-preview .control-tooltip-trigger:hover .control-tooltip{opacity:1;transition:opacity .18s cubic-bezier(.16,1,.3,1) 70ms,transform .18s cubic-bezier(.16,1,.3,1) 70ms;transform:translateY(0)scale(1)}.ui-foundations-preview .control-tooltip-trigger:focus-within .control-tooltip{opacity:1;transition:opacity .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1);transform:translateY(0)scale(1)}.ui-foundations-preview .optical-collapsible-tabs{width:44px;height:44px;position:relative}.ui-foundations-preview .optical-collapsible-tabs__trigger,.ui-foundations-preview .optical-collapsible-tabs__tab{color:#ffffffa6;white-space:nowrap;background:0 0;border:0;border-radius:999px;flex-shrink:0;align-items:center;min-width:0;height:36px;margin-inline-start:0;padding-inline:14px;font-size:14px;font-weight:500;line-height:1;display:flex;overflow:hidden}.ui-foundations-preview .optical-collapsible-tabs__trigger{z-index:3;background:var(--preview-neutral-3e3e3e,#3e3e3e);width:36px;max-width:36px;color:var(--preview-neutral-ffffff,white);opacity:1;pointer-events:auto;box-shadow:var(--shadow-fnd-control);justify-content:center;padding:0;transition:opacity .1s ease-out,transform .14s ease-out;position:absolute;inset-block-start:4px;inset-inline-start:4px;transform:scale(1)}.ui-foundations-preview .optical-collapsible-tabs__rail{z-index:2;background:var(--preview-neutral-3e3e3e,#3e3e3e);width:44px;max-width:calc(100vw - 20px);height:44px;box-shadow:var(--shadow-fnd-control);opacity:0;pointer-events:none;scrollbar-width:none;border-radius:999px;transition:width .3s cubic-bezier(.22,.78,.24,1),opacity .11s ease-out;position:absolute;inset-block-end:0;inset-inline-start:50%;overflow:auto hidden;transform:translate(-50%)}.ui-foundations-preview .optical-collapsible-tabs__rail::-webkit-scrollbar{display:none}.ui-foundations-preview .optical-collapsible-tabs__content{align-items:center;width:max-content;min-width:max-content;height:44px;padding:4px;display:flex;position:relative}.ui-foundations-preview .optical-collapsible-tabs__tab{z-index:1;opacity:0;max-width:180px;transition:color .12s ease-out,opacity .14s ease-out,transform .18s var(--ease-out-quart);margin-inline-start:8px;transition-delay:0s;position:relative;transform:translateY(3px)}.ui-foundations-preview .optical-collapsible-tabs__tab:first-of-type{margin-inline-start:0}.ui-foundations-preview .optical-collapsible-tabs__tab.is-selected{color:var(--preview-neutral-ffffff,white)}.ui-foundations-preview .optical-collapsible-tabs__indicator{z-index:0;opacity:0;pointer-events:none;filter:opacity(0);background:#fff3;border-radius:999px;transition:filter .14s ease-out 90ms;position:absolute;inset-block:4px;box-shadow:inset 0 0 0 1px #ffffff40}.ui-foundations-preview .optical-collapsible-tabs.is-open .optical-collapsible-tabs__trigger{opacity:0;pointer-events:none;box-shadow:none;transform:scale(.82)}.ui-foundations-preview .optical-collapsible-tabs.is-open .optical-collapsible-tabs__rail{width:var(--tabs-expanded-width);opacity:1;pointer-events:auto}.ui-foundations-preview .optical-collapsible-tabs.is-open .optical-collapsible-tabs__indicator{filter:opacity()}.ui-foundations-preview .optical-collapsible-tabs.is-open .optical-collapsible-tabs__tab{opacity:1;transition-delay:calc(90ms + var(--tab-index,0)*9ms);transform:translateY(0)}.ui-foundations-preview .optical-collapsible-tabs__tab:not(.is-selected):hover{color:var(--preview-neutral-ffffff,white)}.ui-foundations-preview .optical-collapsible-tabs__trigger:focus-visible,.ui-foundations-preview .optical-collapsible-tabs__tab:focus-visible{outline:2px solid var(--preview-neutral-ffffff,white);outline-offset:-2px}.ui-foundations-preview .optical-collapsible-tabs__trigger:active,.ui-foundations-preview .optical-collapsible-tabs__tab:active{transform:scale(.98)}.ui-foundations-preview .color-weight-sidebar{border:1px solid var(--fnd-line);background:var(--preview-neutral-ffffff,white);border-radius:12px;width:100%;overflow:hidden}.ui-foundations-preview .color-weight-sidebar__links{gap:2px;padding:4px;display:grid}.ui-foundations-preview .color-weight-sidebar__link{border-radius:8px;align-items:center;gap:10px;min-height:40px;padding:0 6px;font-size:15px;font-weight:500;line-height:1;text-decoration:none;transition:background-color .16s ease-out,color .16s ease-out;display:flex}.ui-foundations-preview .color-weight-sidebar__link:hover{background:var(--fnd-page)}.ui-foundations-preview .color-weight-sidebar__link.is-active{font-weight:500}.ui-foundations-preview .color-weight-sidebar__link:focus-visible{outline:2px solid var(--fnd-heading);outline-offset:2px}.ui-foundations-preview .color-weight-sidebar__icon{flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.ui-foundations-preview .headline-specimen{border:1px solid var(--fnd-line);background:var(--preview-neutral-ffffff,white);border-radius:18px;width:min(620px,100% - 8px);overflow:hidden}.ui-foundations-preview .headline-specimen__canvas{padding:clamp(34px,7vw,48px)}.ui-foundations-preview .headline-specimen__alignment{position:relative}.ui-foundations-preview .headline-specimen__hatch{border-radius:3px 0 0 3px;width:12px;position:absolute;inset-block:-10px;inset-inline-end:calc(100% - var(--headline-guide-inset,0px))}.ui-foundations-preview .headline-specimen__headline{z-index:1;color:var(--fnd-heading);letter-spacing:-.055em;text-wrap:balance;margin:0;font-weight:650;line-height:1;position:relative}.ui-foundations-preview .headline-specimen__line{transform-origin:0;transition:transform .18s var(--ease-out-quart)}.ui-foundations-preview .headline-specimen__line+.headline-specimen__line{margin-block-start:2px}.ui-foundations-preview .headline-specimen__single-line{white-space:nowrap}.ui-foundations-preview .headline-specimen__measurement{z-index:2;align-items:center;gap:12px;display:inline-flex;position:absolute;inset-block-end:-35px;inset-inline-start:calc(-9px + var(--headline-guide-inset,0px))}.ui-foundations-preview .headline-specimen__measurement-line{flex-shrink:0;width:46px;height:20px}.ui-foundations-preview .headline-specimen__measurement-value{border:1px solid var(--fnd-line-medium);background:var(--preview-neutral-ffffff,white);min-height:24px;color:var(--fnd-heading);font-family:var(--font-mono);box-shadow:var(--shadow-fnd-control);border-radius:999px;align-items:center;padding-inline:8px;font-size:11px;font-weight:700;line-height:1;display:inline-flex}.ui-foundations-preview .headline-specimen__copy-lines{width:min(288px,92%);height:auto;color:var(--fnd-skeleton);margin-block-start:58px;display:block}.ui-foundations-preview .color-picker-popover{transform-origin:0 0;animation:.18s cubic-bezier(.16,1,.3,1) both color-picker-in}@keyframes color-picker-in{0%{opacity:0;transform:translateY(-4px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .color-picker-popover{animation:none}}@media (min-width:1024px){.ui-foundations-preview .foundation-settings-grid{grid-template-columns:repeat(var(--settings-columns),minmax(0,1fr))}.ui-foundations-preview .foundation-settings-grid--compact{grid-template-columns:repeat(var(--settings-columns),minmax(0,24rem));justify-content:start}.ui-foundations-preview .foundation-setting-cell{border-right:1px solid var(--fnd-line);border-bottom:0;padding-right:1.25rem}.ui-foundations-preview .foundation-setting-cell+.foundation-setting-cell{padding-left:1.25rem}.ui-foundations-preview .foundation-settings-grid--compact .foundation-setting-cell:not(:last-child){padding-right:3.75rem}.ui-foundations-preview .foundation-settings-grid--compact .foundation-setting-cell+.foundation-setting-cell{padding-left:3.75rem}.ui-foundations-preview .foundation-setting-cell:last-child{border-right:0}.ui-foundations-preview .foundation-setting-cell:only-child{padding-inline:0}}.ui-foundations-preview .radius-reveal,.ui-foundations-preview .value-reveal{opacity:0}.ui-foundations-preview .radius-reveal--guide{transform-origin:100% 0}.ui-foundations-preview .radius-reveal--badge{transform-origin:0 100%;display:inline-flex}.ui-foundations-preview .radius-reveal.is-open,.ui-foundations-preview [data-values=true] .value-reveal,.ui-foundations-preview .preview-enter,.ui-foundations-preview .book-scene,.ui-foundations-preview .book-scene :is(.book-card,.book-prose,.book-profile-body,.book-photo-caption,.book-empty,.book-project-list,#book-article)>:not(.book-guide,.book-dot-pattern,.sr-only){animation:.22s ease-out both radius-spring-open}.ui-foundations-preview .preview-enter,.ui-foundations-preview .book-scene,.ui-foundations-preview .book-scene :is(.book-card,.book-prose,.book-profile-body,.book-photo-caption,.book-empty,.book-project-list,#book-article)>:not(.book-guide,.book-dot-pattern,.sr-only){animation-fill-mode:backwards}.ui-foundations-preview .book-scene :is(.book-card,.book-prose,.book-profile-body,.book-photo-caption,.book-empty,.book-project-list,#book-article)>:not(.book-guide,.book-dot-pattern,.sr-only),.ui-foundations-preview .radius-reveal--inner.is-open{animation-delay:40ms}.ui-foundations-preview .radius-reveal--badge.is-open,.ui-foundations-preview .radius-reveal--callout.is-open,.ui-foundations-preview [data-values=true] .value-reveal:not(.value-reveal--guide){animation-delay:80ms}.ui-foundations-preview .radius-reveal.is-closed,.ui-foundations-preview [data-values=false] .value-reveal{opacity:0;transition:opacity .16s ease-out}.ui-foundations-preview .value-reveal{pointer-events:none;visibility:hidden}.ui-foundations-preview [data-values=true] .value-reveal{visibility:visible}.ui-foundations-preview [data-values=false] .value-reveal{transition:opacity .16s ease-out,visibility 0s linear .16s}.ui-foundations-preview .reading-width-stops button[data-values] .value-reveal{opacity:0;visibility:hidden;transition:opacity var(--preview-reveal-transition),visibility 0s linear .15s;animation:none;transform:none}.ui-foundations-preview .reading-width-stops button[data-values=true] .value-reveal{opacity:1;visibility:visible;transition-delay:0s}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .reading-width-stops button[data-values] .value-reveal{transition:none!important;animation:none!important}}.ui-foundations-preview .radius-value-pill{background:var(--preview-neutral-ffffff,white);box-shadow:none;letter-spacing:.01em}@keyframes radius-spring-open{0%{opacity:0}to{opacity:1}}.ui-foundations-preview .btn{white-space:nowrap;border:0;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:12px 20px;font-size:14px;font-weight:600;line-height:1;transition:background-color .16s ease-out,border-color .16s ease-out,transform .16s ease-out;display:inline-flex}.ui-foundations-preview .btn:active{transform:scale(.98)}.ui-foundations-preview .btn:focus-visible{outline:2px solid var(--fnd-heading);outline-offset:2px}.ui-foundations-preview .btn--primary{background:var(--fnd-heading);color:var(--preview-neutral-ffffff,white)}.ui-foundations-preview .btn--outline{border:1px solid var(--fnd-line-medium);background:var(--preview-neutral-ffffff,white);color:var(--fnd-heading)}@media (hover:hover){.ui-foundations-preview .btn--primary:hover{background:var(--fnd-brand-medium)}.ui-foundations-preview .btn--outline:hover{border-color:var(--fnd-line-strong);background:var(--fnd-page)}}.ui-foundations-preview .premium-range{--range-progress:50%;appearance:none;background:0 0;outline:none;height:44px;display:block}.ui-foundations-preview .premium-range::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--fnd-heading)0 var(--range-progress),var(--fnd-line-medium)var(--range-progress)100%);border-radius:999px;height:6px}.ui-foundations-preview .premium-range::-webkit-slider-thumb{appearance:none;border:2px solid var(--fnd-heading);background:var(--preview-neutral-ffffff,white);border-radius:999px;width:18px;height:18px;margin-top:-6px}.ui-foundations-preview .premium-range::-moz-range-track{background:var(--fnd-line-medium);border-radius:999px;height:6px}.ui-foundations-preview .premium-range::-moz-range-progress{background:var(--fnd-heading);border-radius:999px;height:6px}.ui-foundations-preview .premium-range::-moz-range-thumb{border:2px solid var(--fnd-heading);background:var(--preview-neutral-ffffff,white);border-radius:999px;width:16px;height:16px}.ui-foundations-preview .premium-range:focus-visible{box-shadow:var(--focus-ring);border-radius:8px}.ui-foundations-preview .premium-range.premium-hue::-webkit-slider-runnable-track{background:linear-gradient(90deg,red 0%,#ff0 16.67%,#0f0 33.33%,#0ff 50%,#00f 66.67%,#f0f 83.33%,red 100%)}.ui-foundations-preview .premium-range.premium-hue::-moz-range-track{background:linear-gradient(90deg,red 0%,#ff0 16.67%,#0f0 33.33%,#0ff 50%,#00f 66.67%,#f0f 83.33%,red 100%)}.ui-foundations-preview .premium-range.premium-hue::-moz-range-progress{background:0 0}.ui-foundations-preview .foundation-press{--press-scale:.97;--press-duration:.2s;transition:transform var(--press-duration)ease-out}.ui-foundations-preview .foundation-press:active{transform:scale(var(--press-scale))}.ui-foundations-preview .foundation-press--heavy{transition:all .7s ease-in-out}.ui-foundations-preview .foundation-press--heavy:active{filter:blur(1px);transform:scale(.84)rotate(-2deg)}.ui-foundations-preview .foundation-press:focus-visible{outline:2px solid var(--fnd-heading);outline-offset:2px}.ui-foundations-preview .motion-track{border:1px solid var(--fnd-line);background:var(--preview-neutral-ffffff,white);width:min(220px,100%);height:72px;box-shadow:var(--shadow-fnd-control);border-radius:12px;position:relative;overflow:hidden}.ui-foundations-preview .motion-track:before{background:var(--fnd-line);content:"";width:1px;position:absolute;inset-block:14px;inset-inline-start:50%}.ui-foundations-preview .motion-fluid,.ui-foundations-preview .motion-fixed{--motion-duration:.24s;background:var(--fnd-heading);border-radius:9px;width:30px;height:30px;position:absolute;top:20px;left:20px}.ui-foundations-preview .motion-fluid{transition:transform var(--motion-duration)cubic-bezier(.2,.8,.2,1)}.ui-foundations-preview .motion-fluid.is-open{transform:translate(148px)}.ui-foundations-preview .motion-fixed{animation:fixed-close var(--motion-duration)ease-in-out both}.ui-foundations-preview .motion-fixed.is-open{animation-name:fixed-open}@keyframes fixed-open{0%{transform:translate(0)}to{transform:translate(148px)}}@keyframes fixed-close{0%{transform:translate(148px)}to{transform:translate(0)}}.ui-foundations-preview pre{font-family:var(--font-mono);margin:0}@media (max-width:767px){.ui-foundations-preview .motion-track{width:180px}.ui-foundations-preview .motion-fluid.is-open{transform:translate(108px)}@keyframes fixed-open{0%{transform:translate(0)}to{transform:translate(108px)}}@keyframes fixed-close{0%{transform:translate(108px)}to{transform:translate(0)}}}@media (prefers-reduced-motion:reduce){.ui-foundations-preview{scroll-behavior:auto}.ui-foundations-preview *,.ui-foundations-preview :before,.ui-foundations-preview :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.ui-foundations-preview .radius-reveal,.ui-foundations-preview .value-reveal{transform:scale(1)}.ui-foundations-preview .radius-reveal.is-open,.ui-foundations-preview [data-values=true] .value-reveal,.ui-foundations-preview .preview-enter,.ui-foundations-preview .book-scene,.ui-foundations-preview .book-scene :is(.book-card,.book-prose,.book-profile-body,.book-photo-caption,.book-empty,.book-project-list,#book-article)>:not(.book-guide,.book-dot-pattern,.sr-only){animation:.14s ease-out both radius-fade-open!important}.ui-foundations-preview .preview-enter,.ui-foundations-preview .book-scene,.ui-foundations-preview .book-scene :is(.book-card,.book-prose,.book-profile-body,.book-photo-caption,.book-empty,.book-project-list,#book-article)>:not(.book-guide,.book-dot-pattern,.sr-only){animation-fill-mode:backwards!important}.ui-foundations-preview .radius-reveal.is-closed,.ui-foundations-preview [data-values=false] .value-reveal{transform:scale(1);transition:opacity .12s linear!important}.ui-foundations-preview [data-values=false] .value-reveal{transition:opacity .12s linear,visibility 0s linear .12s!important}.ui-foundations-preview .optical-collapsible-tabs__rail,.ui-foundations-preview .optical-collapsible-tabs__indicator,.ui-foundations-preview .optical-collapsible-tabs__tab{transition-delay:0s!important}.ui-foundations-preview .control-tooltip{transition:opacity .1s ease-out!important;transform:none!important}.ui-foundations-preview .control-tooltip-trigger:hover .control-tooltip{transition-duration:.18s!important;transition-delay:70ms!important;transform:none!important}.ui-foundations-preview .control-tooltip-trigger:focus-within .control-tooltip{transition-duration:.18s!important;transition-delay:0s!important;transform:none!important}}@keyframes radius-fade-open{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1)}}.dark .ui-foundations-preview .playground-preview{--preview-neutral-18181b:#dcdcdf;--preview-neutral-303030:#c8c8cb;--preview-neutral-3e3e3e:#e4e4e7;--preview-neutral-505050:#adadb0;--preview-neutral-525252:#ababae;--preview-neutral-52525b:#a9a9ac;--preview-neutral-5e5e5e:#a1a1a4;--preview-neutral-62626a:#9b9b9e;--preview-neutral-62626b:#9b9b9e;--preview-neutral-65656d:#99999c;--preview-neutral-6b6b73:#949497;--preview-neutral-71717a:#8e8e91;--preview-neutral-71717b:#a1a1aa;--preview-neutral-85858f:#7d7d80;--preview-neutral-8a8a8a:#7b7b7e;--preview-neutral-a1a1aa:#656568;--preview-neutral-aaaab2:#5e5e61;--preview-neutral-b8b8b8:#545457;--preview-neutral-b9b9be:#525255;--preview-neutral-c4c4cb:#48484b;--preview-neutral-d4d4d8:#3b3b3e;--preview-neutral-dce5dd:#333336;--preview-neutral-dde4ec:#2f2f32;--preview-neutral-e4e4e7:#2e2e31;--preview-neutral-e5e7eb:#2c2c2f;--preview-neutral-e8e1d9:#323235;--preview-neutral-e8e8e8:#2c2c2f;--preview-neutral-e9ebef:#28282b;--preview-neutral-eaeaed:#29292c;--preview-neutral-eff6ff:#1f1f22;--preview-neutral-f0f0f0:#252528;--preview-neutral-f0f0f2:#242427;--preview-neutral-f1f1f2:#242427;--preview-neutral-f1f2f4:#232326;--preview-neutral-f4f4f5:#212124;--preview-neutral-f6f7f8:#1f1f22;--preview-neutral-f7f7f8:#1f1f22;--preview-neutral-fafafa:#1c1c1f;--preview-neutral-fef2f2:#202023;--preview-neutral-fff1f2:#202023;--preview-neutral-ffffff:#18181b}.dark .ui-foundations-preview .playground-preview .book-image-hero,.dark .ui-foundations-preview .playground-preview .book-image-hero-copy h3,.dark .ui-foundations-preview .playground-preview .book-palette-card .book-button{color:#fff}.dark .ui-foundations-preview .example-preview-ink input[type=checkbox]:not(.sr-only):not([role=switch]):checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2318181b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 6 2.5 2.5L10 3'/%3E%3C/svg%3E")}
@font-face{font-family:TypeUI Foundations Inter;src:url(/ui-foundations/fonts/InterVariable.woff2)format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:TypeUI Foundations Inter;src:url(/ui-foundations/fonts/InterVariable-Italic.woff2)format("woff2");font-weight:100 900;font-style:italic;font-display:swap}.ui-foundations-preview{--font-inter:"TypeUI Foundations Inter";--foundation-control-shadow:0 1px 2px #0000000a;--foundation-control-size:44px;--foundation-control-inner-size:calc(var(--foundation-control-size) - 10px);--foundation-control-radius:16px;--foundation-control-font:500 14px/20px var(--font-sans);--foundation-canvas-background:#00000080;--foundation-canvas-inset:16px;--foundation-picker-height:44px;--foundation-settings-height:44px;--foundation-canvas-min-height:calc(100dvh - 4rem - 2px);background:var(--fnd-card);font-family:TypeUI Foundations Inter,ui-sans-serif,system-ui,sans-serif;position:relative;overflow:clip}.ui-foundations-preview .playground-preview,.ui-foundations-preview .preview-stage,.ui-foundations-preview .preview-stage>.example-preview-ink,.ui-foundations-preview .foundation-preview-loading{min-height:var(--foundation-canvas-min-height);height:auto}.ui-foundations-preview .foundation-settings-grid{padding-inline:clamp(16px,4vw,64px)}.ui-foundations-preview .preview-stage>.example-preview-ink{flex-direction:column;justify-content:center;max-width:100%;display:flex}.ui-foundations-preview .preview-stage>.example-preview-ink>*{min-height:0}.ui-foundations-preview .playground-preview[data-has-actions]{background-color:var(--preview-neutral-fafafa,#f9f9f9);background-image:repeating-linear-gradient(135deg,#0000 0 15px,#a1a1aa1f 15px 16px);padding-block:0;position:relative}.ui-foundations-preview .playground-preview[data-has-actions] .preview-stage{background:0 0}.ui-foundations-preview .foundation-canvas-actions{top:16px;right:var(--foundation-canvas-inset);z-index:35;max-width:calc(100% - 2*var(--foundation-canvas-inset));font-family:var(--font-sans);font-size:14px;line-height:20px;position:absolute}.ui-foundations-preview .foundation-canvas-navigation{top:16px;left:var(--foundation-canvas-inset);z-index:45;width:max-content;max-width:calc(100% - 2*var(--foundation-canvas-inset));font-family:var(--font-sans);position:absolute}.ui-foundations-preview .foundation-canvas-download{bottom:16px;right:var(--foundation-canvas-inset);z-index:45;max-width:calc(100% - 2*var(--foundation-canvas-inset) - 60px);font-family:var(--font-sans);position:absolute}.ui-foundations-preview .foundation-canvas-control{min-height:var(--foundation-control-size);border-radius:var(--foundation-control-radius);background:var(--foundation-canvas-background);color:#fff;font:var(--foundation-control-font);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid #ffffff1a;transition:background-color .15s;box-shadow:0 10px 15px -3px #0000001a}.ui-foundations-preview .foundation-canvas-control:hover{--foundation-canvas-background:#0009}.ui-foundations-preview .foundation-canvas-control:active{--foundation-canvas-background:#000000b3}.ui-foundations-preview .foundation-canvas-control:focus-visible{outline-offset:-2px;outline:2px solid #fff}.ui-foundations-preview .foundation-canvas-control:is(button,label){height:var(--foundation-control-size)}.ui-foundations-preview .foundation-canvas-navigation>button{height:auto;padding-block:10px}.ui-foundations-preview .foundation-canvas-icon{width:var(--foundation-control-size)}.ui-foundations-preview .foundation-canvas-button{height:calc(var(--foundation-control-size) - 2px);min-height:calc(var(--foundation-control-size) - 2px);font:inherit}.ui-foundations-preview .foundation-canvas-button-icon{width:calc(var(--foundation-control-size) - 2px);padding-inline:0}.ui-foundations-preview .playground-preview[data-controls]{position:relative}.ui-foundations-preview .gallery-playground .playground-preview .foundation-example-controls{--fnd-heading:#fff;--fnd-subtle:#fffc;--fnd-line-medium:#ffffff40;--focus-ring:0 0 0 2px #fffc;z-index:40;background:var(--foundation-canvas-background);width:320px;max-width:calc(100% - 128px);padding:4px 12px;position:absolute;top:16px;left:50%;translate:-50%}.ui-foundations-preview .playground-preview[data-controls=comparison] .foundation-example-controls{width:max-content;padding:4px}.ui-foundations-preview .playground-preview[data-controls=radius] .foundation-example-controls{width:640px}.ui-foundations-preview .foundation-comparison-switcher{align-items:center;gap:4px;display:flex}.ui-foundations-preview .foundation-comparison-switcher>button{height:var(--foundation-control-inner-size);min-height:var(--foundation-control-inner-size);border-radius:calc(var(--foundation-control-radius) - 4px);color:#fffc;font:inherit;white-space:nowrap;padding:0 12px;transition:background-color .15s,color .15s}.ui-foundations-preview .foundation-comparison-switcher>button:hover{background:#ffffff1a}.ui-foundations-preview .foundation-comparison-switcher>button[aria-pressed=true]{color:#18181b;background:#fff}.ui-foundations-preview .foundation-comparison-switcher>button:focus-visible{outline-offset:-2px;outline:2px solid #fff}.ui-foundations-preview .playground-preview[data-controls]:not([data-controls=comparison]) .foundation-example-controls{padding-right:48px}.ui-foundations-preview .foundation-example-controls>.foundation-example-help>button{position:absolute;top:50%;right:4px;translate:0 -50%}.ui-foundations-preview .foundation-example-controls .foundation-settings-grid{grid-template-columns:repeat(var(--settings-columns),minmax(0,1fr));border:0;gap:16px;padding:0}.ui-foundations-preview .foundation-example-controls .foundation-settings-grid .foundation-setting-cell{border:0;flex-direction:column;justify-content:center;align-items:stretch;gap:4px;min-height:0;padding:0}.ui-foundations-preview .foundation-example-controls .foundation-setting-cell>span{color:#fffc;font:inherit;letter-spacing:normal;text-transform:none;text-align:center}.ui-foundations-preview .foundation-example-controls .foundation-setting-cell>div{justify-content:center;min-height:0}.ui-foundations-preview .foundation-example-controls .foundation-setting-range{flex-direction:column;align-items:center;width:100%;min-width:0;display:flex}.ui-foundations-preview .foundation-range-tooltip{z-index:60;color:#fff;width:max-content;max-width:100%;font:var(--foundation-control-font);text-align:center;white-space:normal;pointer-events:none;background:#27272a;border-radius:8px;padding:8px 12px;position:absolute;top:calc(100% + 12px);left:50%;translate:-50%;box-shadow:0 8px 24px #09090b29}.ui-foundations-preview .foundation-example-controls .foundation-setting-cell strong{color:#fff;font:inherit;font-variant-numeric:tabular-nums;background:#ffffff1a;border-color:#ffffff26}.ui-foundations-preview .foundation-example-controls .reading-width-control{width:100%;max-width:100%}.ui-foundations-preview .foundation-example-controls .premium-range{height:var(--foundation-control-inner-size)}.ui-foundations-preview .foundation-example-controls .premium-range::-webkit-slider-runnable-track{background:linear-gradient(to right,#fff var(--range-progress),#ffffff40 var(--range-progress))}.ui-foundations-preview .foundation-example-controls .premium-range::-moz-range-track{background:#ffffff40}.ui-foundations-preview .foundation-example-controls .premium-range::-moz-range-progress{background:#fff}.ui-foundations-preview .foundation-example-controls .premium-range::-webkit-slider-thumb{background:#fff;border-color:#fff}.ui-foundations-preview .foundation-example-controls .premium-range::-moz-range-thumb{background:#fff;border-color:#fff}.ui-foundations-preview .playground-preview[data-controls=comparison] .preview-stage>.example-preview-ink{padding-block:72px}.ui-foundations-preview .playground-preview[data-controls=range] .preview-stage>.example-preview-ink{padding-block:104px}.ui-foundations-preview .playground-preview[data-controls=radius] .preview-stage>.example-preview-ink{padding-block:124px}.ui-foundations-preview .preview-stage .book-demo[data-example]{padding-block:88px}.ui-foundations-preview .preview-stage .animation-principles-preview{padding-block:100px}.ui-foundations-preview .preview-stage .book-feedback:empty{display:none}.ui-foundations-preview .preview-stage .book-notes:has(>.preview-notes__details:empty){display:none}.ui-foundations-preview .preview-utility-controls{bottom:16px;left:var(--foundation-canvas-inset);right:auto}.ui-foundations-preview .foundation-canvas-extra-controls{justify-content:center;align-items:center;gap:12px;max-width:calc(100% - 32px);display:flex;bottom:16px;left:50%;translate:-50%}@media (min-width:640px){.ui-foundations-preview{--foundation-canvas-inset:32px}.ui-foundations-preview .foundation-comparison-switcher>button{padding-inline:16px}}@media (min-width:768px){.ui-foundations-preview{--foundation-canvas-inset:48px}}@media (min-width:1024px){.ui-foundations-preview{--foundation-canvas-inset:64px}}@media (min-width:768px) and (max-width:1535px){.ui-foundations-preview .gallery-playground .playground-preview[data-controls=radius] .foundation-example-controls{top:80px}.ui-foundations-preview .playground-preview[data-controls=radius] .preview-stage>.example-preview-ink{padding-block:188px}}@media (min-width:768px) and (max-width:1279px){.ui-foundations-preview .gallery-playground .playground-preview .foundation-example-controls{top:80px}.ui-foundations-preview .playground-preview[data-controls=comparison] .preview-stage>.example-preview-ink{padding-block:136px}.ui-foundations-preview .playground-preview[data-controls=range] .preview-stage>.example-preview-ink{padding-block:168px}}@media (max-width:767px){.ui-foundations-preview .foundation-canvas-extra-controls{bottom:76px}.ui-foundations-preview .foundation-canvas-actions{top:calc(var(--foundation-picker-height) + var(--foundation-settings-height) + 56px);z-index:41;left:50%;right:auto;translate:-50%}.ui-foundations-preview .foundation-canvas-navigation{top:16px;left:50%;translate:-50%}.ui-foundations-preview .playground-preview[data-controls=radius] .foundation-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}.ui-foundations-preview .playground-preview[data-controls=radius] .foundation-setting-cell:last-child{flex-direction:row;grid-column:1/-1;justify-content:center;align-items:center;gap:8px}.ui-foundations-preview .playground-preview[data-controls=radius] .foundation-setting-cell:last-child>div{flex:none}.ui-foundations-preview .gallery-playground .playground-preview .foundation-example-controls{top:calc(var(--foundation-picker-height) + 36px);max-width:calc(100% - 32px)}.ui-foundations-preview .foundation-example-controls .foundation-setting-range{position:static}.ui-foundations-preview .foundation-range-tooltip{top:calc(100% + 74px)}.ui-foundations-preview .foundation-example-controls .foundation-explanation-tooltip{top:calc(100% + 64px)}.ui-foundations-preview .foundation-example-controls .foundation-explanation-tooltip:before{height:74px;top:-74px}.ui-foundations-preview .playground-preview[data-controls=comparison] .preview-stage>.example-preview-ink{padding-block:max(200px,calc(var(--foundation-picker-height) + var(--foundation-settings-height) + 112px))}.ui-foundations-preview .playground-preview[data-controls=range] .preview-stage>.example-preview-ink{padding-block:max(232px,calc(var(--foundation-picker-height) + var(--foundation-settings-height) + 112px))}.ui-foundations-preview .playground-preview[data-controls=radius] .preview-stage>.example-preview-ink{padding-block:max(304px,calc(var(--foundation-picker-height) + var(--foundation-settings-height) + 112px))}}@media (max-width:1024px){.ui-foundations-preview .preview-stage .book-demo[data-example][data-values] .book-annotated{min-width:0;padding:24px 0}.ui-foundations-preview .preview-stage .book-callouts{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:24px;display:flex;position:static}.ui-foundations-preview .preview-stage .book-callouts>svg{display:none}.ui-foundations-preview .preview-stage .book-callouts__label{width:auto;max-width:100%;position:static;transform:none}.ui-foundations-preview .preview-stage .book-callouts__inline-value{white-space:normal}}@media (max-width:640px){.ui-foundations-preview .preview-stage .book-demo[data-example=leading] .book-leading-card{padding:24px}}@media (prefers-reduced-motion:reduce){.ui-foundations-preview{--preview-state-duration:0s;--preview-reveal-transition:none}}