.lab-header{border-bottom:1px solid var(--fp-line)}.lab-header>.container{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:96px}.lab-header>div>span{font-size:0.75rem;color:var(--fp-muted)}.lab-header>div>div{display:flex;align-items:center;gap:24px;font-size:0.75rem}.lab-header a{text-decoration:none}.lab-hero{padding:96px 0 64px}.lab-hero h1{font-size:clamp(3.5rem,7vw,6.5rem);margin:32px 0}.lab-hero>p:not(.eyebrow){max-width:500px;font-size:1.25rem;color:var(--fp-muted)}.lab-hero nav{display:flex;gap:32px;flex-wrap:wrap;font-size:0.8125rem;margin-top:48px}.lab-hero nav a{min-height:44px;display:flex;align-items:center}.lab-section{padding:80px 0;border-top:1px solid var(--fp-line)}.lab-section-heading{max-width:740px;margin-bottom:48px}.lab-section-heading h2{font-size:clamp(2rem,4vw,3.5rem);margin:24px 0}.lab-section-heading>p{font-size:1.125rem;color:var(--fp-muted)}.page-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.page-preview{padding:32px;min-height:300px;display:flex;flex-direction:column;align-items:start;background:var(--fp-subtle);color:var(--fp-text);border:1px solid var(--fp-line);border-radius:12px;text-decoration:none}.page-preview[data-theme=accent]{background:var(--fp-canvas);border-color:transparent}.page-preview h3{font-size:2.125rem;margin:40px 0}.page-preview>span:last-child{margin-top:auto;font-size:0.75rem;display:flex;align-items:center;gap:16px}.page-preview .eyebrow{font-size:0.625rem}.page-preview:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}.material-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}.material-pair figure{margin:0}.material-pair img{border-radius:12px;width:100%;height:auto;aspect-ratio:1.75}.material-pair figcaption{margin-top:16px;font-size:0.75rem;color:var(--fp-muted)}.lab-note{font-size:0.8125rem;color:var(--fp-muted);max-width:740px;margin-top:24px}.lab-toolbar{display:flex;gap:32px;align-items:center;justify-content:space-between;margin:24px 0}.lab-toolbar>p{font-size:0.75rem;max-width:410px;color:var(--fp-muted)}.lab-toolbar [role=radiogroup]{display:flex;gap:20px}.lab-toolbar .ui-legend{font-size:0.75rem}.matrix-wrap{overflow:auto;background:var(--fp-canvas);color:var(--fp-text);padding:24px 12px;border:1px solid var(--fp-border);border-radius:12px}.state-matrix{border-collapse:separate;border-spacing:12px;width:100%;min-width:1090px;text-align:center}.state-matrix th{font-size:0.625rem;font-weight:500;text-transform:capitalize;white-space:nowrap}.state-matrix thead th{padding-bottom:16px}.state-matrix th:first-child{text-align:left;padding-right:16px}.state-matrix td{padding:14px 6px}.state-matrix .ui-button{min-width:124px;font-size:0.8125rem;padding-inline:16px}.lab-example-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}.lab-inline{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.lab-example-row .lab-inline{margin-top:20px}.lab-example-row .eyebrow{font-size:0.625rem}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px}.ui-input[data-preview-state=focus]{outline:3px solid var(--fp-focus);outline-offset:3px}.selection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:64px}.selection-grid h3{font-size:1.5rem;margin-bottom:24px}.selection-grid .ui-legend{margin-bottom:12px}.response-demo{padding:32px;background:var(--fp-subtle);border-radius:12px}.response-demo .ui-select{width:auto;min-width:220px}.response-output{min-height:125px;padding-top:32px}.response-output>p{font-size:0.875rem;color:var(--fp-muted)}.lab-two-column{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;margin-top:56px}.lab-dialog-specimen{padding:32px;background:var(--fp-surface);border:1px solid var(--fp-line);border-radius:12px}.lab-dialog-specimen h3{font-size:1.875rem}.lab-dialog-specimen p{font-size:0.875rem;margin:20px 0 24px;color:var(--fp-muted)}.resize-stage{padding:32px;background:var(--fp-subtle);border-radius:12px}.content-specimen{padding:32px;background:var(--fp-surface);border:1px solid var(--fp-line);border-radius:12px;min-width:0;width:100%;container-type:inline-size}.content-specimen h3{font-size:clamp(2rem,7cqi,3.75rem);margin:32px 0 24px;overflow-wrap:anywhere}.content-specimen>p:not(.eyebrow){font-size:1rem;color:var(--fp-muted);margin-bottom:24px}.content-specimen .ui-button{font-size:0.875rem}.lab-footer{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--fp-line);padding:32px 0;font-size:0.75rem}.lab-footer a{display:flex;gap:8px;align-items:center}
@media(max-width:900px){.page-preview-grid{grid-template-columns:1fr}.page-preview{min-height:270px}.page-preview h3{font-size:2.5rem}.lab-two-column{grid-template-columns:1fr;gap:32px}.lab-example-row{grid-template-columns:1fr;gap:40px}.lab-toolbar{align-items:start;flex-wrap:wrap}.lab-toolbar>p{max-width:550px}.selection-grid{gap:24px}.lab-header>div>span{display:none}}
@media(max-width:600px){.lab-header>.container{gap:16px;min-height:80px}.lab-header>div>div{gap:8px;font-size:0.625rem}.lab-hero{padding:64px 0 40px}.lab-hero h1{font-size:3.5rem}.lab-hero>p:not(.eyebrow){font-size:1.0625rem}.lab-hero nav{gap:12px 24px;margin-top:32px}.lab-section{padding:56px 0}.lab-section-heading{margin-bottom:32px}.lab-section-heading>p{font-size:1rem}.page-preview{padding:24px}.page-preview h3{font-size:2.25rem}.material-pair{grid-template-columns:1fr;gap:32px}.field-grid{grid-template-columns:1fr;gap:28px}.selection-grid{grid-template-columns:1fr;gap:32px}.lab-toolbar [role=radiogroup]{gap:16px}.response-demo{padding:24px}.response-demo .ui-select{width:100%;min-width:0}.lab-inline .ui-button{font-size:0.8125rem}.lab-dialog-specimen{padding:24px}.resize-stage{padding:16px}.content-specimen{padding:20px}.content-specimen h3{font-size:2rem}.content-specimen .ui-button{padding-inline:16px;font-size:0.75rem}.lab-footer{flex-direction:column}.state-matrix{min-width:1050px}}

.control-size-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-bottom:64px}.control-size-grid>div{display:grid;gap:24px;align-content:start}.control-size-grid .ui-button{justify-self:start}@media(max-width:700px){.control-size-grid{grid-template-columns:1fr;gap:40px}}

.basis-lab-brand{display:flex;align-items:baseline;gap:12px;font:550 30px/1 var(--fp-font-display);letter-spacing:var(--fp-tracking-heading);text-decoration:none}.basis-lab-brand span{font:400 11px/1.4 var(--fp-font-body);letter-spacing:0}@media(max-width:600px){.basis-lab-brand span{display:none}.lab-header>div{gap:12px}.lab-header a:not(.basis-lab-brand){font-size:12px}}