@layer components{body{background-color:var(--bp-ground);padding:clamp(14px,3vw,34px)}.guide{background-color:var(--bp-sheet);background-image:linear-gradient(var(--bp-line) 1px, transparent 1px), linear-gradient(90deg, var(--bp-line) 1px, transparent 1px);outline:1.5px solid var(--bp-frame);outline-offset:-10px;background-position:-1px -1px;background-size:28px 28px;max-inline-size:64rem;margin-inline:auto;padding:clamp(20px,4vw,52px);position:relative;overflow:clip}@media (prefers-contrast:more){.guide{outline-color:currentColor}}@media (forced-colors:active){.guide{background-image:none;outline:1px solid canvastext}}.guide-reg{border:0 solid var(--bp-accent);block-size:16px;inline-size:16px;position:absolute}@media (forced-colors:active){.guide-reg{border-color:canvastext}}.guide-reg-tl{border-block-start-width:2px;border-inline-start-width:2px;inset-block-start:4px;inset-inline-start:4px}.guide-reg-tr{border-block-start-width:2px;border-inline-end-width:2px;inset-block-start:4px;inset-inline-end:4px}.guide-reg-bl{border-block-end-width:2px;border-inline-start-width:2px;inset-block-end:4px;inset-inline-start:4px}.guide-reg-br{border-block-end-width:2px;border-inline-end-width:2px;inset-block-end:4px;inset-inline-end:4px}.guide-mark path,.guide-mark circle,.guide-mark-sample path,.guide-mark-sample circle{fill:none;stroke:var(--bp-ink);stroke-width:3.2px}.guide-mark .guide-mark-accent,.guide-mark-sample .guide-mark-accent{stroke:var(--bp-accent)}.guide-mark .guide-mark-prick,.guide-mark-sample .guide-mark-prick{fill:var(--bp-accent);stroke:none}@media (forced-colors:active){.guide-mark path,.guide-mark circle,.guide-mark-sample path,.guide-mark-sample circle{stroke:canvastext}.guide-mark .guide-mark-prick,.guide-mark-sample .guide-mark-prick{fill:canvastext}}.guide-mark{block-size:2em;inline-size:2em}.guide-mark-row{align-items:flex-end;gap:var(--space-6);margin-block-end:var(--space-4);display:flex}.guide-header{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-block-end:var(--space-8);display:flex}.guide-home{align-items:center;gap:var(--space-2);color:var(--color-text);font-weight:600;text-decoration:none;display:inline-flex}.guide-home-dim{color:var(--color-text-subtle)}.guide-back{font-size:var(--text-sm)}.guide-main h1{font-size:var(--text-display-sm);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin-block-end:var(--space-2)}.guide-lede{max-inline-size:60ch;font-size:var(--text-lg);line-height:var(--leading-normal);color:var(--color-text-subtle);margin-block-end:var(--space-4)}.guide-section{margin-block-start:var(--space-16)}.guide-section h2{border-block-end:1px solid var(--color-border);font-size:var(--text-2xl);margin-block-end:var(--space-4);padding-block-end:var(--space-2)}@media (prefers-contrast:more){.guide-section h2{border-color:currentColor}}.guide-section h3{margin-block:var(--space-6) var(--space-3);font-size:var(--text-sm);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-subtle);font-weight:600}.guide-note{max-inline-size:65ch;line-height:var(--leading-normal);color:var(--color-text-subtle);margin-block-end:var(--space-4)}.swatches{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));margin:0;padding:0;list-style:none;display:grid}.swatch{column-gap:var(--space-3);grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;display:grid}.swatch-chip{border-radius:var(--radius-md);grid-row:1/3;block-size:2.75rem;inline-size:2.75rem}.swatch-chip-bordered{box-shadow:inset 0 0 0 1px var(--color-border)}.swatch-name{font-family:var(--font-mono);font-size:var(--text-sm);align-self:end}.swatch-hex{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-subtle);align-self:start}.gradient-bar{block-size:3rem;margin-block:var(--space-4) var(--space-2);border-radius:var(--radius-md);background:var(--gradient-accent)}.type-families{gap:var(--space-3);margin-block-end:var(--space-6);display:grid}.type-families div{gap:var(--space-3);grid-template-columns:4rem 1fr;align-items:baseline;display:grid}.type-families dt{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-subtle)}.type-families dd{font-size:var(--text-lg);margin:0}.type-scale{gap:var(--space-4);margin:0;padding:0;list-style:none;display:grid}.type-scale li{align-items:baseline;gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.type-spec{color:var(--color-text)}.type-label{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-subtle)}.space-scale{gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.space-scale li{align-items:center;gap:var(--space-4);display:flex}.space-bar{border-radius:var(--radius-sm);background:var(--gradient-accent);block-size:1rem}.space-label{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-subtle)}.radius-grid,.shadow-grid,.motion-grid{gap:var(--space-6);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.radius-grid li,.shadow-grid li,.motion-grid li{gap:var(--space-2);justify-items:center;display:grid}.radius-chip{background:var(--gradient-accent);block-size:4rem;inline-size:4rem}.shadow-grid{margin-block-start:var(--space-8)}.shadow-card{border-radius:var(--radius-lg);background:var(--color-surface);block-size:5rem;inline-size:5rem}.guide-chip-label{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-subtle)}.motion-swatch{--d:var(--duration-normal);--e:var(--easing-standard);border-radius:var(--radius-md);background:var(--gradient-accent);block-size:4rem;inline-size:4rem;transition:transform var(--d) var(--e)}@media (hover:hover) and (pointer:fine){.motion-swatch:hover{transform:translateY(-.5rem)scale(1.05)}}@media (prefers-reduced-motion:reduce){.motion-swatch{transition:none}}.element-row{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.element-field{gap:var(--space-1);font-size:var(--text-sm);color:var(--color-text-subtle);flex-direction:column;display:inline-flex}.principles{gap:var(--space-3);max-inline-size:70ch;margin:0;padding-inline-start:var(--space-6);display:grid}.principles li{line-height:var(--leading-normal)}.guide-titleblock{margin-block-start:var(--space-16)}.guide-tb{border:1px solid var(--bp-frame);background-color:var(--bp-line-strong);grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;display:grid}@media (prefers-contrast:more){.guide-tb{border-color:currentColor}}@media (forced-colors:active){.guide-tb{border-color:canvastext;gap:0}}@media (width>=52rem){.guide-tb{grid-template-columns:minmax(0,2.2fr) minmax(0,1.6fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}}.guide-tb-cell{padding:var(--space-2) var(--space-3);background-color:var(--bp-sheet);align-content:start;gap:2px;display:grid}@media (forced-colors:active){.guide-tb-cell{border:1px solid canvastext}}@media (width<=52rem){.guide-tb-cell-project{grid-column:1/-1}}.guide-tb-label{font-family:var(--bp-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp-ink-2);font-size:.5625rem}.guide-tb-value{font-family:var(--bp-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--bp-ink);font-size:.6875rem}.guide-tb-fine{font-family:var(--bp-mono);letter-spacing:.04em;color:var(--bp-ink-2);font-size:.5625rem}.guide-tb-refs{align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;grid-column:1/-1;display:flex}.guide-tb-refs a{min-block-size:24px;font-family:var(--bp-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp-ink-2);align-items:center;font-size:.6875rem;text-decoration:none;display:inline-flex}@media (hover:hover) and (pointer:fine){.guide-tb-refs a:hover{color:var(--bp-accent)}}.guide-tb-refs a:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:2px}.presets{gap:var(--space-3);margin:var(--space-4) 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));padding:0;list-style:none;display:grid}.preset{gap:var(--space-2);justify-items:start;display:grid}.preset-name{font-weight:600}.preset-chip{inline-size:var(--space-8);block-size:var(--space-3);border-radius:var(--radius-full);background-color:var(--color-primary)}.preset-class{font-size:var(--text-sm);color:var(--color-text-subtle)}}