.design-reference{background:var(--ts-background)}.design-shell{padding-block:var(--ts-space-16) var(--ts-space-24)}.design-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(18rem,.6fr);gap:var(--ts-space-8);align-items:end;padding-block-end:var(--ts-space-10);border-block-end:var(--ts-border-width) solid var(--ts-border)}.design-kicker{margin:0 0 var(--ts-space-3);color:var(--ts-primary-soft-foreground);font-weight:600}.design-hero h1{max-inline-size:var(--ts-measure-heading);margin:0;font-size:var(--ts-text-6xl);line-height:var(--ts-leading-tight);letter-spacing:var(--ts-tracking-tight)}.design-lede{max-inline-size:var(--ts-measure);margin:var(--ts-space-5) 0 0;color:var(--ts-text-2);font-size:var(--ts-text-xl);line-height:var(--ts-leading-normal)}.design-index{position:sticky;z-index:var(--ts-z-sticky);inset-block-start:0;display:flex;gap:var(--ts-space-1);overflow-x:auto;margin-inline:calc(-1 * var(--ts-space-3));padding:var(--ts-space-3);background:color-mix(in srgb,var(--ts-background) 92%,transparent);border-block-end:var(--ts-border-width) solid var(--ts-border);backdrop-filter:blur(12px)}.design-index a{flex:0 0 auto;padding:var(--ts-space-2) var(--ts-space-3);color:var(--ts-text-2);font-size:var(--ts-text-sm);font-weight:600;text-decoration:none;border-radius:var(--ts-radius)}.design-index a:hover{color:var(--ts-text-1);background:var(--ts-surface-hover)}.design-section{padding-block:var(--ts-space-16);scroll-margin-block-start:var(--ts-space-16);border-block-end:var(--ts-border-width) solid var(--ts-border)}.design-section-head{display:grid;grid-template-columns:minmax(12rem,.45fr) minmax(0,.75fr);gap:var(--ts-space-8);align-items:start;margin-block-end:var(--ts-space-8)}.design-section-head h2,.design-component h3,.design-foundations h3,.design-type-meta h3{margin:0}.design-section-head h2{font-size:var(--ts-text-4xl);letter-spacing:var(--ts-tracking-tight)}.design-section-head p{max-inline-size:var(--ts-measure);margin:0;color:var(--ts-text-2);line-height:var(--ts-leading-normal)}.design-role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ts-space-3)}.design-role{display:grid;min-block-size:7rem;align-content:space-between;padding:var(--ts-space-4);color:var(--ts-text-1);background:var(--role-bg);border:var(--ts-border-width) solid var(--role-border, var(--ts-border));border-radius:var(--ts-radius-lg)}.design-role span{font-weight:600}.design-role code{color:inherit}.design-role[data-role=background]{--role-bg: var(--ts-background)}.design-role[data-role=surface]{--role-bg: var(--ts-surface-1)}.design-role[data-role=text]{--role-bg: var(--ts-text-1);color:var(--ts-text-inverse)}.design-role[data-role=primary]{--role-bg: var(--ts-primary);color:var(--ts-text-on-primary);--role-border: var(--ts-primary)}.design-role[data-role=success]{--role-bg: var(--ts-success-solid);color:var(--ts-text-on-solid);--role-border: var(--ts-success-solid)}.design-role[data-role=warning]{--role-bg: var(--ts-warning);color:var(--ts-text-on-warning);--role-border: var(--ts-warning)}.design-role[data-role=danger]{--role-bg: var(--ts-danger);color:var(--ts-text-on-solid);--role-border: var(--ts-danger)}.design-role[data-role=info]{--role-bg: var(--ts-info);color:var(--ts-text-on-solid);--role-border: var(--ts-info)}.design-ramps{display:grid;gap:var(--ts-space-5);margin-block-start:var(--ts-space-8)}.design-ramp{margin:0}.design-ramp figcaption{margin-block-end:var(--ts-space-2);font-size:var(--ts-text-sm);font-weight:600}.design-ramp ol{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin:0;padding:0;list-style:none;overflow:hidden;border:var(--ts-border-width) solid var(--ts-border);border-radius:var(--ts-radius-lg)}.design-ramp li{display:grid;min-block-size:4.5rem;place-items:end center;padding:var(--ts-space-1);color:var(--ts-neutral-12);background:var(--ramp-step)}.design-ramp li:nth-child(n+9){color:var(--ts-neutral-1)}.design-ramp li span{padding:var(--ts-space-0-5) var(--ts-space-1);font-size:var(--ts-text-xs);font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--ts-background) 82%,transparent);border-radius:var(--ts-radius-sm)}.design-ramp li:nth-child(n+9) span{background:color-mix(in srgb,var(--ts-text-1) 70%,transparent)}.design-ramp[data-ramp=neutral]{--ramp-1: var(--ts-neutral-1);--ramp-2: var(--ts-neutral-2);--ramp-3: var(--ts-neutral-3);--ramp-4: var(--ts-neutral-4);--ramp-5: var(--ts-neutral-5);--ramp-6: var(--ts-neutral-6);--ramp-7: var(--ts-neutral-7);--ramp-8: var(--ts-neutral-8);--ramp-9: var(--ts-neutral-9);--ramp-10: var(--ts-neutral-10);--ramp-11: var(--ts-neutral-11);--ramp-12: var(--ts-neutral-12)}.design-ramp[data-ramp=primary]{--ramp-1: var(--ts-accent-1);--ramp-2: var(--ts-accent-2);--ramp-3: var(--ts-accent-3);--ramp-4: var(--ts-accent-4);--ramp-5: var(--ts-accent-5);--ramp-6: var(--ts-accent-6);--ramp-7: var(--ts-accent-7);--ramp-8: var(--ts-accent-8);--ramp-9: var(--ts-accent-9);--ramp-10: var(--ts-accent-10);--ramp-11: var(--ts-accent-11);--ramp-12: var(--ts-accent-12)}.design-ramp[data-ramp=success]{--ramp-1: var(--ts-success-1);--ramp-2: var(--ts-success-2);--ramp-3: var(--ts-success-3);--ramp-4: var(--ts-success-4);--ramp-5: var(--ts-success-5);--ramp-6: var(--ts-success-6);--ramp-7: var(--ts-success-7);--ramp-8: var(--ts-success-8);--ramp-9: var(--ts-success-9);--ramp-10: var(--ts-success-10);--ramp-11: var(--ts-success-11);--ramp-12: var(--ts-success-12)}.design-ramp[data-ramp=warning]{--ramp-1: var(--ts-warning-1);--ramp-2: var(--ts-warning-2);--ramp-3: var(--ts-warning-3);--ramp-4: var(--ts-warning-4);--ramp-5: var(--ts-warning-5);--ramp-6: var(--ts-warning-6);--ramp-7: var(--ts-warning-7);--ramp-8: var(--ts-warning-8);--ramp-9: var(--ts-warning-9);--ramp-10: var(--ts-warning-10);--ramp-11: var(--ts-warning-11);--ramp-12: var(--ts-warning-12)}.design-ramp[data-ramp=danger]{--ramp-1: var(--ts-danger-1);--ramp-2: var(--ts-danger-2);--ramp-3: var(--ts-danger-3);--ramp-4: var(--ts-danger-4);--ramp-5: var(--ts-danger-5);--ramp-6: var(--ts-danger-6);--ramp-7: var(--ts-danger-7);--ramp-8: var(--ts-danger-8);--ramp-9: var(--ts-danger-9);--ramp-10: var(--ts-danger-10);--ramp-11: var(--ts-danger-11);--ramp-12: var(--ts-danger-12)}.design-ramp[data-ramp=info]{--ramp-1: var(--ts-info-1);--ramp-2: var(--ts-info-2);--ramp-3: var(--ts-info-3);--ramp-4: var(--ts-info-4);--ramp-5: var(--ts-info-5);--ramp-6: var(--ts-info-6);--ramp-7: var(--ts-info-7);--ramp-8: var(--ts-info-8);--ramp-9: var(--ts-info-9);--ramp-10: var(--ts-info-10);--ramp-11: var(--ts-info-11);--ramp-12: var(--ts-info-12)}.design-ramp li:nth-child(1){--ramp-step: var(--ramp-1)}.design-ramp li:nth-child(2){--ramp-step: var(--ramp-2)}.design-ramp li:nth-child(3){--ramp-step: var(--ramp-3)}.design-ramp li:nth-child(4){--ramp-step: var(--ramp-4)}.design-ramp li:nth-child(5){--ramp-step: var(--ramp-5)}.design-ramp li:nth-child(6){--ramp-step: var(--ramp-6)}.design-ramp li:nth-child(7){--ramp-step: var(--ramp-7)}.design-ramp li:nth-child(8){--ramp-step: var(--ramp-8)}.design-ramp li:nth-child(9){--ramp-step: var(--ramp-9)}.design-ramp li:nth-child(10){--ramp-step: var(--ramp-10)}.design-ramp li:nth-child(11){--ramp-step: var(--ramp-11)}.design-ramp li:nth-child(12){--ramp-step: var(--ramp-12)}.design-type-scale{display:grid;gap:var(--ts-space-1)}.design-type-scale>div{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:var(--ts-space-4);align-items:baseline;padding-block:var(--ts-space-3);border-block-end:var(--ts-border-width) solid var(--ts-border)}.design-type-scale p{margin:0;font-size:var(--sample-size);line-height:var(--ts-leading-tight)}.design-type-scale [data-type="6xl"]{--sample-size: var(--ts-text-6xl)}.design-type-scale [data-type="5xl"]{--sample-size: var(--ts-text-5xl)}.design-type-scale [data-type="4xl"]{--sample-size: var(--ts-text-4xl)}.design-type-scale [data-type="3xl"]{--sample-size: var(--ts-text-3xl)}.design-type-scale [data-type="2xl"]{--sample-size: var(--ts-text-2xl)}.design-type-scale [data-type=xl]{--sample-size: var(--ts-text-xl)}.design-type-scale [data-type=lg]{--sample-size: var(--ts-text-lg)}.design-type-scale [data-type=base]{--sample-size: var(--ts-text-base)}.design-type-scale [data-type=sm]{--sample-size: var(--ts-text-sm)}.design-type-scale [data-type=xs]{--sample-size: var(--ts-text-xs)}.design-type-meta,.design-foundations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ts-space-6);margin-block-start:var(--ts-space-8)}.design-type-meta>div,.design-foundations>div{padding:var(--ts-space-6);background:var(--ts-surface-1);border:var(--ts-border-width) solid var(--ts-border);border-radius:var(--ts-radius-lg)}.design-weight-400{font-weight:400}.design-weight-500{font-weight:500}.design-weight-600{font-weight:600}.design-weight-700{font-weight:700}.design-measure{max-inline-size:var(--ts-measure);line-height:var(--ts-leading-normal)}.design-space-scale,.design-radius-scale,.design-shadow-scale{display:flex;flex-wrap:wrap;gap:var(--ts-space-4);align-items:end;margin-block-start:var(--ts-space-5)}.design-space-scale span{display:grid;justify-items:center;gap:var(--ts-space-2)}.design-space-scale i{inline-size:var(--space);block-size:var(--space);min-inline-size:var(--ts-space-1);min-block-size:var(--ts-space-1);background:var(--ts-primary);border-radius:var(--ts-radius-sm)}.design-space-scale [data-space="1"]{--space: var(--ts-space-1)}.design-space-scale [data-space="2"]{--space: var(--ts-space-2)}.design-space-scale [data-space="3"]{--space: var(--ts-space-3)}.design-space-scale [data-space="4"]{--space: var(--ts-space-4)}.design-space-scale [data-space="6"]{--space: var(--ts-space-6)}.design-space-scale [data-space="8"]{--space: var(--ts-space-8)}.design-space-scale [data-space="12"]{--space: var(--ts-space-12)}.design-space-scale [data-space="16"]{--space: var(--ts-space-16)}.design-radius-scale span,.design-shadow-scale span{display:grid;inline-size:5rem;block-size:5rem;place-items:center;background:var(--ts-surface-raised);border:var(--ts-border-width) solid var(--ts-border);border-radius:var(--shape-radius);box-shadow:var(--shape-shadow)}.design-radius-scale [data-radius=sm]{--shape-radius: var(--ts-radius-sm)}.design-radius-scale [data-radius=base]{--shape-radius: var(--ts-radius)}.design-radius-scale [data-radius=md]{--shape-radius: var(--ts-radius-md)}.design-radius-scale [data-radius=lg]{--shape-radius: var(--ts-radius-lg)}.design-radius-scale [data-radius=xl]{--shape-radius: var(--ts-radius-xl)}.design-radius-scale [data-radius="2xl"]{--shape-radius: var(--ts-radius-2xl)}.design-radius-scale [data-radius=full]{--shape-radius: var(--ts-radius-full)}.design-shadow-scale [data-shadow=xs]{--shape-shadow: var(--ts-shadow-xs)}.design-shadow-scale [data-shadow=sm]{--shape-shadow: var(--ts-shadow-sm)}.design-shadow-scale [data-shadow=md]{--shape-shadow: var(--ts-shadow-md)}.design-shadow-scale [data-shadow=lg]{--shape-shadow: var(--ts-shadow-lg)}.design-shadow-scale [data-shadow=xl]{--shape-shadow: var(--ts-shadow-xl)}.design-focus-target{display:inline-block;margin-block-start:var(--ts-space-3);padding:var(--ts-space-2) var(--ts-space-3);border-radius:var(--ts-radius)}.design-focus-target:focus-visible{outline:var(--ts-focus-ring-width) solid var(--ts-ring);outline-offset:var(--ts-focus-ring-offset)}.design-theme-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ts-space-5)}.design-theme{padding:var(--ts-space-8);color:var(--ts-text-1);background:var(--ts-background);border:var(--ts-border-width) solid var(--ts-border);border-radius:var(--ts-radius-xl);box-shadow:var(--ts-shadow-md)}.design-theme h3{margin:0;font-size:var(--ts-text-2xl)}.design-theme p{color:var(--ts-text-2)}.design-theme>div{display:flex;flex-wrap:wrap;gap:var(--ts-space-2);align-items:center}.design-diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ts-space-5)}.design-diagram{min-inline-size:0;margin:0;padding:var(--ts-space-5);background:var(--ts-surface-1);border:var(--ts-border-width) solid var(--ts-border);border-radius:var(--ts-radius-xl)}.design-diagram figcaption{display:flex;justify-content:space-between;gap:var(--ts-space-4);margin-block-end:var(--ts-space-5)}.design-diagram figcaption span{color:var(--ts-text-3);font-size:var(--ts-text-sm)}.design-token-span{display:flex;min-block-size:5rem;overflow:hidden;border:var(--ts-border-width) solid var(--ts-border);border-radius:var(--ts-radius-lg)}.design-token-span>span{display:grid;align-content:center;padding-inline:var(--ts-space-4)}.design-token-span b,.design-token-span small{white-space:nowrap}.design-token-hit{inline-size:72%;color:var(--ts-text-on-primary);background:var(--ts-primary)}.design-token-write{inline-size:28%;min-inline-size:6rem;color:var(--ts-text-1);background:var(--ts-warning-soft)}.design-diagram-result{display:flex;flex-wrap:wrap;gap:var(--ts-space-2);margin-block:var(--ts-space-4) 0;color:var(--ts-text-2)}.design-diagram-result span{margin-inline-start:auto;font-variant-numeric:tabular-nums}.design-waterfall,.design-node-grid{margin:0;padding:0;list-style:none}.design-waterfall{display:grid;gap:var(--ts-space-4)}.design-waterfall li{position:relative;display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:0 var(--ts-space-3);padding-inline-start:var(--ts-space-5)}.design-waterfall li:before{position:absolute;inset-block:0;inset-inline:0 auto;inline-size:var(--ts-space-1);content:"";background:var(--ts-border-strong);border-radius:var(--ts-radius-full)}.design-waterfall .is-chosen:before,.design-waterfall .is-result:before{background:var(--ts-primary)}.design-waterfall .is-fallback:before{background:repeating-linear-gradient(to bottom,var(--ts-warning) 0 .35rem,transparent .35rem .65rem)}.design-waterfall span{grid-row:1 / span 2;color:var(--ts-text-3);font-variant-numeric:tabular-nums}.design-waterfall small{color:var(--ts-text-3)}.design-cost-bars{display:grid;gap:var(--ts-space-4)}.design-cost-bars div{display:grid;grid-template-columns:5rem minmax(0,1fr) 4rem;gap:var(--ts-space-3);align-items:center}.design-cost-bars i{block-size:var(--ts-space-5);background:var(--ts-primary);border-radius:var(--ts-radius-sm)}.design-cost-bars b{text-align:end;font-variant-numeric:tabular-nums}.design-node-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ts-space-3)}.design-node-grid li{display:grid;gap:var(--ts-space-1);padding:var(--ts-space-4);border:var(--ts-border-width) solid var(--node-border);border-radius:var(--ts-radius-lg);background:var(--node-background)}.design-node-grid li[data-state=healthy]{--node-border: var(--ts-success-border);--node-background: var(--ts-success-soft)}.design-node-grid li[data-state=draining]{--node-border: var(--ts-warning-border);--node-background: var(--ts-warning-soft)}.design-node-grid li[data-state=replacing]{--node-border: var(--ts-danger-border);--node-background: var(--ts-danger-soft)}.design-node-grid small{color:var(--ts-text-3)}.design-component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ts-space-5)}.design-component{min-inline-size:0;padding:var(--ts-space-6);background:var(--ts-surface-1);border:var(--ts-border-width) solid var(--ts-border);border-radius:var(--ts-radius-xl)}.design-component--wide,.design-component--full{grid-column:1 / -1}.design-component>header{margin-block-end:var(--ts-space-5);padding-block-end:var(--ts-space-4);border-block-end:var(--ts-border-width) solid var(--ts-border)}.design-component>header p{max-inline-size:var(--ts-measure);margin:var(--ts-space-2) 0 0;color:var(--ts-text-2)}.design-specimens,.design-stack{display:grid;gap:var(--ts-space-4)}.design-specimens>div{display:grid;gap:var(--ts-space-2)}.design-specimens>div>span{color:var(--ts-text-3);font-size:var(--ts-text-xs);font-weight:600}.design-row{display:flex;flex-wrap:wrap;gap:var(--ts-space-2);align-items:center}.design-field-grid,.design-card-grid,.design-alert-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ts-space-4)}.design-card-grid,.design-alert-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.design-card-grid mortar-card[interactive] a{display:grid;min-block-size:100%;align-content:space-between;color:inherit;text-decoration:none}.design-card-grid small{color:var(--ts-text-3)}.design-component fieldset{display:grid;gap:var(--ts-space-2);margin:0;padding:0;border:0}.design-component legend{margin-block-end:var(--ts-space-2);font-weight:600}.design-overflow,.design-code-overflow{max-inline-size:100%;margin-block-end:var(--ts-space-5);overflow:hidden}.design-code-overflow{max-inline-size:28rem;margin-block-start:var(--ts-space-4)}.design-component mortar-tabs [data-tabpanel]{padding:var(--ts-space-4)}.design-component mortar-tabs [data-tabpanel] p{margin:0}.design-component mortar-tooltip>button{min-block-size:2.5rem;padding-inline:var(--ts-space-4);color:var(--ts-text-1);background:var(--ts-surface-raised);border:var(--ts-border-width) solid var(--ts-input);border-radius:var(--ts-radius)}.design-component mortar-tooltip>button:hover{border-color:var(--ts-input-hover)}.design-component mortar-tooltip>button:focus-visible{outline:var(--ts-focus-ring-width) solid var(--ts-ring);outline-offset:var(--ts-focus-ring-offset)}.design-fallback{margin-block:var(--ts-space-3) 0;color:var(--ts-text-3);font-size:var(--ts-text-sm)}.design-component mortar-toaster[inline]{position:static;inline-size:min(100%,38rem);pointer-events:auto}.design-chat-frame{--console-measure: 46rem;--console-gutter: var(--ts-space-5);block-size:34rem;overflow:hidden;background:var(--ts-background);border:var(--ts-border-width) solid var(--ts-border);border-radius:var(--ts-radius-lg)}.design-chat-frame .chat{block-size:100%}.design-chat-frame .composer{position:relative}.design-component svg{inline-size:1.1em;block-size:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}@media(max-width:62rem){.design-hero,.design-section-head{grid-template-columns:1fr}.design-role-grid,.design-field-grid,.design-card-grid,.design-alert-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:44rem){.design-shell{padding-block-start:var(--ts-space-10)}.design-role-grid,.design-type-meta,.design-foundations,.design-theme-pair,.design-diagram-grid,.design-component-grid,.design-field-grid,.design-card-grid,.design-alert-grid{grid-template-columns:1fr}.design-ramp ol{grid-template-columns:repeat(6,minmax(0,1fr))}.design-ramp li{min-block-size:3.5rem}.design-type-scale>div{grid-template-columns:2.75rem minmax(0,1fr)}.design-component{padding:var(--ts-space-4)}.design-chat-frame{--console-gutter: var(--ts-space-3);block-size:30rem}}@media(prefers-reduced-transparency:reduce){.design-index{background:var(--ts-background);backdrop-filter:none}}