.specimen-inline{flex-wrap:wrap;align-items:center;gap:1rem 2rem;display:flex}.specimen-intro{gap:1rem;max-width:48rem;padding-block:2rem;display:grid}.specimen-nav{align-content:start;gap:.125rem;padding-block:1rem 2rem;display:grid}.specimen-nav a{display:block}.specimen-nav-label{margin-bottom:.75rem}.specimen-content,.specimen-state{min-width:0}.specimen-control-group{padding-top:2rem;scroll-margin-top:2rem}.specimen-control-heading{gap:.5rem;display:grid}@media (width>=64rem){.specimen-layout{grid-template-columns:12rem minmax(0,1fr);gap:3rem;display:grid}.specimen-nav{align-self:start;max-height:calc(100dvh - 4rem);padding:.5rem;position:sticky;top:2rem;overflow-y:auto}.specimen-content .specimen-row{grid-template-columns:minmax(0,12rem) minmax(0,1fr)}}@media (width<=63.999rem){.specimen-nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}.specimen-nav-label{grid-column:1/-1}}.specimen-nav a{padding-block:.5rem}.specimen-section{scroll-margin-top:2rem}.specimen-section-heading{gap:.75rem;padding-block:2rem 1rem;display:grid}.specimen-row{grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:2rem;padding-block:2rem;display:grid}.specimen-description,.specimen-sample{overflow-wrap:anywhere;min-width:0}.specimen-description{align-content:start;gap:.5rem;display:grid}.specimen-sample p+p{margin-top:.75rem}.specimen-section{padding-bottom:2rem}.specimen-prose{max-width:36rem;padding-top:1rem}.specimen-colors,.specimen-state-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;padding-block:2rem;display:grid}.specimen-color-sample{margin-block:1rem;padding:1rem}.specimen-inverse{background:var(--text)}.specimen-state{align-content:start;justify-items:start;gap:1rem;display:grid}.specimen-state input{width:100%}.specimen-menu-link{background:var(--surface);padding:.75rem}.specimen-menu-link:hover{background:var(--accent)}.specimen-dropcaps{margin-top:0}.specimen-dropcaps p{display:flow-root}.specimen-wordmark{align-self:center}@media (width<=48rem){.specimen-row{grid-template-columns:minmax(0,1fr);gap:1rem}.specimen-colors,.specimen-state-grid{grid-template-columns:minmax(0,1fr)}}.specimen-icon-variants{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;display:grid}.specimen-icon-set{gap:.75rem;display:grid}.specimen-icon-surface{justify-content:space-around;align-items:center;gap:1rem;padding:1.5rem;display:flex}.specimen-icon-light{background:#fbfbfb}.specimen-icon-dark{background:#08090b}.specimen-icon{flex-shrink:0;height:auto}.specimen-icon-small{width:1rem}.specimen-icon-medium{width:2rem}.specimen-icon-large{width:4rem}@media (width<=48rem){.specimen-icon-variants{grid-template-columns:minmax(0,1fr)}}.specimen-palette{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:2rem;padding-block:1.5rem 3rem;display:grid}.specimen-palette-item{align-content:start;gap:.5rem;display:grid}.specimen-swatch{outline:.0625rem solid color-mix(in srgb, var(--text) 15%, transparent);outline-offset:-.0625rem;height:7rem;margin-bottom:.5rem}.specimen-color-values{white-space:pre-line;overflow-wrap:anywhere}.select-field{gap:.625rem;min-width:0;display:grid}.select-control{min-width:0;position:relative}.select-input{appearance:none;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;align-items:center;width:100%;min-width:0;padding-inline-end:3rem;display:flex;overflow:hidden}.select-input:disabled{cursor:not-allowed;opacity:.5}.select-chevron{inset-inline-end:1rem;pointer-events:none;width:.75rem;height:.75rem;position:absolute;top:50%;transform:translateY(-50%)}@supports (appearance:base-select){.select-input{appearance:base-select}.select-input::picker(select){appearance:base-select}.select-input::picker-icon{display:none}.select-input::picker(select){background:var(--background);max-width:calc(100vw - 2rem);max-height:20rem;box-shadow:0 .5rem 2rem color-mix(in srgb, var(--text) 16%, transparent);border:0;border-radius:0;margin-block:.5rem;padding:.375rem;overflow:auto}.select-input option{overflow-wrap:anywhere;gap:.75rem;min-height:2.75rem;padding:.625rem .75rem}.select-input option:hover,.select-input option:focus-visible{background:var(--surface);outline-offset:-.125rem}.select-input option:checked{background:color-mix(in srgb, var(--accent) 10%, var(--background))}.select-input option::checkmark{order:1;margin-inline-start:auto}}.text-field{gap:.5rem;width:100%;min-width:0;display:grid}.text-field-input{border:.0625rem solid color-mix(in srgb, var(--text) 25%, transparent);background:var(--surface);border-radius:0;width:100%;min-width:0;min-height:2.75rem;padding:.75rem;display:block}textarea.text-field-input{resize:vertical}input.text-field-input{height:var(--control-height)}.text-field-input:hover:not(:disabled):not(:read-only){border-color:var(--accent)}.text-field-input:disabled{cursor:not-allowed}.text-field-input:read-only{background:var(--background)}.text-field-input[aria-invalid=true]{border-color:var(--color-red)}