.overview-guide{background:var(--color__background);color:var(--color__text-900);flex:1;min-inline-size:0;overflow-y:auto;container-type:inline-size}.overview-guide__container{--container__max-width:80rem;--container__padding:0 clamp(var(--spacing__lg), 4cqw, 3.5rem);inline-size:100%}.overview-guide__hero{background:var(--color__surface);border-block-end:var(--thickness) solid var(--color__border-subtle);padding-block:clamp(2.5rem,5cqw,4.75rem)}.overview-guide__hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,4cqw,4rem);display:grid}.overview-guide__intro{--stack__gap:var(--spacing__xl);align-items:start}.overview-guide .docs-title{--docs-title__size:clamp(2.25rem, 4cqw, 3.75rem);margin:0}.overview-guide h1>span{color:var(--color__accent)}.overview-guide .docs-section-title{--docs-section-title__size:clamp(1.5rem, 2.6cqw, 2rem);margin:0}.overview-guide p{margin:0}.overview-guide__lede{--docs-lede__size:1.0625rem;max-inline-size:42ch}.overview-guide__actions{--inline__gap:var(--spacing__lg);font-size:.8125rem}.overview-guide .overview-guide__availability{color:var(--color__text-600);font-size:.6875rem}.overview-guide__availability span{margin-inline:var(--spacing__sm)}.overview-specimen{background:var(--color__surface);border:var(--thickness) solid var(--color__border);border-radius:var(--roundness);box-shadow:6px 6px 0 var(--color__surface-muted);min-inline-size:0}.overview-specimen__bar,.overview-specimen__tokens{--inline__gap:var(--spacing__sm);padding:.875rem var(--spacing__lg)}.overview-specimen__bar{border-block-end:var(--thickness) solid var(--color__border-subtle)}.overview-specimen__tag{background:var(--color__accent-subtle);color:var(--color__text-on-accent-subtle);padding:.1rem .45rem;font-size:.625rem}.overview-specimen__form{--stack__gap:var(--spacing__lg);padding:var(--spacing__xl) var(--spacing__lg) var(--spacing__md)}.overview-specimen__heading{--inline__gap:var(--spacing__md)}.overview-specimen__icon{background:var(--color__accent-subtle);block-size:2.625rem;color:var(--color__text-on-accent-subtle);font-size:var(--font-size__xl);flex:none;justify-content:center;align-items:center;inline-size:2.625rem;display:flex}.overview-specimen .overview-specimen__heading h2{letter-spacing:-.02em;margin:0;font-size:.9375rem}.overview-specimen__heading p{font-size:var(--font-size__xs);margin-block-start:var(--spacing__2xs)}.overview-specimen__form .field{--field__control-background:var(--color__surface);inline-size:100%;min-inline-size:0;max-inline-size:none}.overview-specimen__submit{--inline__gap:var(--spacing__sm)}.overview-specimen__submit .button{font-size:var(--font-size__xs)}.overview-specimen .overview-specimen__feedback{color:var(--color__text-600);overflow-wrap:anywhere;font-size:.6875rem}.overview-specimen__recipes{border-block-start:var(--thickness) solid var(--color__border-subtle);padding:0 var(--spacing__lg) var(--spacing__md)}.overview-specimen__recipes>p{color:var(--color__text-600);margin-block:var(--spacing__md);font-size:.6875rem}.overview-specimen__recipes .link{color:inherit}.overview-specimen__code{font-size:.75rem}.overview-specimen__code>summary{color:var(--color__text-700);cursor:pointer;font-weight:600}.overview-specimen__code>.code-block{margin-block-start:var(--spacing__sm)}.overview-specimen__tokens{background:var(--color__surface-muted);border-block-start:var(--thickness) solid var(--color__border-subtle);color:var(--color__text-600);font-size:.5625rem}.overview-specimen__tokens span{--inline__gap:.375rem}.overview-specimen__tokens i{block-size:.625rem;inline-size:.625rem;display:block}.overview-specimen__color{background:var(--color__accent)}.overview-specimen__space{border-inline:2px solid var(--color__text-600)}.overview-specimen__shape{border:var(--thickness) solid var(--color__text-600);border-radius:var(--roundness)}.overview-guide__section{scroll-margin-top:var(--spacing__xl);padding-block:clamp(2rem,3.5cqw,3rem)}.overview-guide__section-heading{--inline__gap:var(--spacing__lg);margin-block-end:var(--spacing__xl)}.overview-guide__resources{--grid__min-width:14rem;--grid__gap:var(--spacing__lg)}.overview-resource{--card__spacing-inline:var(--spacing__lg);--card__spacing-block:var(--spacing__lg)}.overview-resource .content{--stack__gap:var(--spacing__sm)}.overview-resource .header h3{justify-content:space-between;margin:0;display:flex}.overview-resource .header h3>span{color:var(--color__text-600);font-weight:400}.overview-resource .description{font-size:.8125rem}.overview-resource__visual{background:var(--color__surface);border-block-end:var(--thickness) solid var(--color__border-subtle);justify-content:center;gap:var(--spacing__lg);block-size:10rem;padding:var(--spacing__xl) var(--spacing__lg);flex-direction:column;display:flex}.overview-resource__type{letter-spacing:-.05em;align-items:baseline;gap:var(--spacing__lg);font-size:3rem;line-height:1;display:flex}.overview-resource__type>span{color:var(--color__text-600);font-family:var(--font-family__monospace);letter-spacing:0;font-size:.625rem}.overview-resource__swatches{gap:.375rem;display:flex}.overview-resource__swatches i{background:var(--color__primary-900);flex:1;block-size:1.75rem}.overview-resource__swatches i:nth-child(2){background:var(--color__primary-700)}.overview-resource__swatches i:nth-child(3){background:var(--color__primary-500)}.overview-resource__swatches i:nth-child(4){background:var(--color__primary-200)}.overview-resource__swatches i:nth-child(5){background:var(--color__primary-50)}.overview-resource__sample-button{align-self:start}.overview-resource__sample-row{font-size:.6875rem}.overview-resource__writing-label{color:var(--color__text-600);font-size:.6875rem}.overview-resource__writing-example{font-size:var(--font-size__sm)}.overview-resource__writing-example>span{color:var(--color__accent);margin-inline-end:var(--spacing__xs)}.overview-resource__writing-line{background:var(--color__border-subtle);block-size:var(--thickness);inline-size:70%}@container (width<54rem){.overview-guide__hero-grid{grid-template-columns:minmax(0,1fr)}.overview-guide__intro{max-inline-size:38rem}.overview-guide .docs-title{--docs-title__size:clamp(2.25rem, 6cqw, 3.5rem)}.overview-guide__lede{max-inline-size:52ch}.overview-specimen{inline-size:100%;max-inline-size:32rem}}@container (width<32rem){.overview-guide__resources{grid-template-columns:minmax(0,1fr)}.overview-resource__visual{block-size:9rem}}