.specimen-inline{flex-wrap:wrap;align-items:center;gap:1rem 2rem;display:flex}.specimen-intro{gap:1rem;min-width:0;padding-block:2rem;display:grid}.specimen-intro-description{max-width:64rem}.specimen-intro h1 span{max-width:100%;display:inline-block}.specimen-nav{align-content:start;gap:.125rem;padding-block:1rem 2rem;display:grid}.specimen-nav a{padding-block:.5rem;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-section{padding-bottom:2rem;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-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 .text-field-input{width:100%}.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-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;place-items:center;height:7rem;margin-bottom:.5rem;display:grid}.specimen-color-values{white-space:pre-line;overflow-wrap:anywhere}.specimen-control-narrow{width:16rem;max-width:100%}.specimen-theme-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-block:1.5rem;display:grid}.specimen-theme{min-width:0;padding:var(--box-padding);background:var(--background);overflow-wrap:anywhere}.specimen-theme-label{margin-bottom:1.5rem}.specimen-theme .specimen-state-grid,.specimen-theme .specimen-row,.specimen-theme .specimen-colors{grid-template-columns:minmax(0,1fr)}.specimen-theme .specimen-state{justify-items:stretch}.specimen-composition{gap:1.5rem;display:grid}@media (width<=64rem){.specimen-theme-pair{grid-template-columns:minmax(0,1fr)}}.specimen-blue-scale{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:1.5rem;display:grid}.specimen-blue-step{text-align:center;min-width:0}.specimen-blue-swatch{height:3rem;margin-bottom:.5rem}.specimen-blue-values{margin-block:1rem 2rem}.specimen-blue-values summary{cursor:pointer;padding-block:.5rem}.specimen-blue-value-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:1rem;padding-block:1rem;display:grid}.specimen-blue-key{width:1rem;height:1rem}@media (width<=24rem){.specimen-blue-scale{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1rem}}.specimen-focus-reference{outline:var(--focus-outline-width) solid var(--accent);outline-offset:var(--focus-outline-offset)}.specimen-surface-levels{gap:.75rem;margin-block:.75rem;display:grid}.specimen-surface-sample{place-items:center;min-height:5rem;padding:.75rem;display:grid}.specimen-surface-levels code{overflow-wrap:anywhere}.specimen-interface-icons{gap:1.5rem;margin:0;padding:0;list-style:none;display:grid}.specimen-interface-icons li{align-items:center;gap:1rem;display:flex}.specimen-interface-icon{flex:0 0 2rem;justify-content:center;align-items:center;display:inline-flex}.specimen-search-icon{width:1rem;height:1rem}.specimen-qr-icon{width:1.125rem;height:1.125rem}.select-field{gap:.625rem;min-width:0;display:grid}.select-control{min-width:0;max-width:100%;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:1}.select-chevron{inset-inline-end:1rem;pointer-events:none;background:var(--surface);width:.75rem;height:.75rem;box-shadow:0 0 0 .75rem var(--surface);position:absolute;top:50%;transform:translateY(-50%)}.select-input:hover:not(:disabled)+.select-chevron{background:color-mix(in srgb, var(--accent) 8%, var(--surface));box-shadow:0 0 0 .75rem color-mix(in srgb, var(--accent) 8%, var(--surface))}@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{min-height:var(--control-height);padding:var(--control-padding-block) var(--control-padding-inline);overflow-wrap:anywhere;white-space:normal;gap:.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{width:100%;min-width:0;min-height:var(--control-height);padding:var(--control-padding-block) var(--control-padding-inline);border:.0625rem solid color-mix(in srgb, var(--text) 25%, transparent);background:var(--surface);border-radius:0;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)}