.case-hero{padding-bottom:var(--spacing-section);border-bottom:1px solid var(--color-line);gap:1.5rem;display:grid}.case-dek{max-width:40rem;color:color-mix(in srgb, var(--color-ink) 75%, transparent);font-size:1.0625rem;line-height:1.55}.case-facts{gap:1rem 2rem;margin-top:1rem;display:grid}.case-facts div{border-top:1px solid var(--color-line);gap:.35rem;padding-top:.85rem;display:grid}.case-facts dt,.case-token,.case-sub,.case-table .is-head,.case-ledger dt span{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-caps);text-transform:uppercase}.case-facts dt{color:var(--color-ink-muted)}.case-facts dd{font-family:var(--font-editorial);font-size:1.375rem;font-weight:300;line-height:1.2}.case-toc{gap:.15rem 2rem;margin-block:1rem;display:grid}.case-toc a{border-bottom:1px solid var(--color-line);font-family:var(--font-editorial);transition:color var(--duration-base) var(--ease-quiet);align-items:baseline;gap:.75rem;padding-block:.4rem;font-size:1.25rem;font-weight:300;display:flex}.case-toc a span{font-family:var(--font-mono);font-size:var(--text-label);color:var(--color-accent)}.case-toc a:hover{color:var(--color-accent)}@media (width>=48rem){.case-facts{grid-template-columns:repeat(4,minmax(0,1fr))}.case-toc{grid-template-columns:repeat(2,minmax(0,1fr));max-width:48rem}}.case-section{padding:var(--spacing-section) var(--spacing-gutter) 0;gap:2.5rem;scroll-margin-top:4rem;display:grid}.case-section.is-last{padding-bottom:var(--spacing-section-end)}.case-head{gap:1rem;max-width:44rem;display:grid}.case-note,.case-role{color:color-mix(in srgb, var(--color-ink) 65%, transparent);line-height:1.5}.case-role{font-size:.875rem}.case-note code,.case-list code,.case-steps code{font-family:var(--font-mono);color:var(--color-ink);font-size:.85em}.case-token{color:var(--color-ink)}.case-hex{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:color-mix(in srgb, var(--color-ink) 70%, transparent);font-size:.8125rem}.case-swatches,.case-grounds,.case-space,.case-radii,.case-layouts,.case-shots,.case-list,.case-steps,.case-durations{margin:0;padding:0;list-style:none}.case-swatches{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:2rem 1.25rem;display:grid}.case-swatch{align-content:start;gap:.4rem;display:grid}.case-chip{aspect-ratio:4/3;border:1px solid var(--color-line);margin-bottom:.5rem;display:block}.case-ratio{font-family:var(--font-mono);color:color-mix(in srgb, var(--color-ink) 60%, transparent);font-size:.75rem}.case-ratio b{color:var(--color-ink);margin-left:.25rem;font-weight:600}.case-grounds{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:1.5rem 1rem;display:grid}.case-grounds li{gap:.35rem;min-width:0;display:grid}.case-ground{aspect-ratio:1;border-radius:var(--radius-card);text-transform:capitalize;align-items:flex-end;margin-bottom:.4rem;padding:.85rem;display:flex;overflow:hidden}.case-ground>span{font-size:clamp(1.125rem,1.6vw,1.5rem)}.case-grounds .case-token{overflow-wrap:anywhere}.case-specimen.is-spec dl{grid-template-columns:minmax(0,1fr)}.case-families{gap:1.25rem;display:grid}.case-family{border:1px solid var(--color-line);border-radius:var(--radius-card);align-content:start;gap:.75rem;padding:1.5rem;display:grid}.case-family .text-mega{line-height:1}@media (width>=48rem){.case-families{grid-template-columns:repeat(2,minmax(0,1fr))}}.case-table{border-top:1px solid var(--color-ink);display:grid}.case-row{border-bottom:1px solid var(--color-line);grid-template-columns:repeat(2,minmax(0,1fr));align-items:baseline;gap:.5rem 1.25rem;padding:.9rem 0;font-size:.875rem;display:grid}.case-row.is-head{color:var(--color-ink-muted)}.case-css{font-family:var(--font-mono);color:color-mix(in srgb, var(--color-ink) 70%, transparent);overflow-wrap:anywhere;font-size:.75rem}.case-sample{white-space:nowrap;text-overflow:clip;grid-column:1/-1;margin-top:.5rem;overflow:hidden}@media (width>=64rem){.case-row{grid-template-columns:13rem minmax(0,1.4fr) 5rem 5rem 5rem 4rem}.case-table.is-motion .case-row{grid-template-columns:13rem 12rem minmax(0,1fr) 9rem}.case-table.is-bp .case-row{grid-template-columns:8rem 10rem 5rem minmax(0,1fr)}.case-table.is-z .case-row{grid-template-columns:13rem 5rem minmax(0,1fr)}}.case-space{gap:1.5rem;display:grid}.case-space li{align-items:center;gap:.4rem 1.5rem;display:grid}.case-bar-track{align-items:center;height:2.5rem;display:flex}.case-bar{background:color-mix(in srgb, var(--color-gold) 35%, transparent);border-inline:1px solid var(--color-gold);height:100%;display:block}@media (width>=64rem){.case-space li{grid-template-columns:13rem 16rem 10rem minmax(0,1fr)}}.case-radii{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:1.5rem;display:grid}.case-radii li{gap:.4rem;display:grid}.case-radius{border:1px solid var(--color-ink);background:var(--color-sheet);height:5rem;margin-bottom:.4rem;display:block}.case-radius.is-card{border-radius:var(--radius-card)}.case-radius.is-inner{border-radius:var(--radius-inner)}.case-radius.is-pill{border-radius:var(--radius-pill);height:3rem}.case-radius.is-round{border-radius:var(--radius-round);width:5rem}.case-eases{gap:1.25rem;display:grid}.case-ease{border:1px solid var(--color-line);border-radius:var(--radius-card);outline-offset:4px;gap:.5rem;padding:1.5rem;display:grid}.case-curve{width:9rem;height:9rem;margin-bottom:.75rem;overflow:visible}.case-axis{fill:none;stroke:var(--color-line);stroke-width:1px}.case-path{fill:none;stroke:var(--color-gold);stroke-width:2px;stroke-linecap:round}.case-play{background:var(--color-line);height:2px;margin-top:.75rem;display:block;overflow:hidden}.case-play-fill{background:var(--color-ink);transform-origin:0;height:100%;transition-property:transform;display:block;transform:scaleX(0)}.group:hover .case-play-fill,.group:focus-visible .case-play-fill{transform:scaleX(1)}.case-durations{gap:1rem;display:grid}.case-durations li{outline-offset:4px;gap:.35rem;padding-bottom:1rem;display:grid}@media (width>=48rem){.case-eases{grid-template-columns:repeat(2,minmax(0,1fr))}.case-durations{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}}.case-layouts{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:2rem 1.25rem;display:grid}.case-layouts li{gap:.4rem;display:grid}.case-diagram{border:1px solid var(--color-line);gap:.35rem;height:8.5rem;margin-bottom:.75rem;padding:.5rem;display:grid}.case-diagram span{background:color-mix(in srgb, var(--color-gold) 22%, transparent);border:1px solid color-mix(in srgb, var(--color-gold) 60%, transparent)}.case-diagram.is-rail{grid-template-columns:26% 1fr}.case-diagram.is-contents{grid-template-columns:32% 1fr}.case-diagram.is-split{grid-template-columns:7fr 5fr}.case-diagram:is(.is-rail,.is-contents,.is-split) span:nth-child(n+3),.case-diagram.is-catalog span:nth-child(4){display:none}.case-diagram.is-catalog{grid-template-columns:repeat(3,1fr)}.case-diagram.is-quartet{grid-template-columns:repeat(4,1fr)}.case-diagram.is-twelve{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(12,1fr)}.case-diagram.is-twelve span:first-child{grid-area:1/1/auto/6}.case-diagram.is-twelve span:nth-child(2){grid-area:2/8/auto/13}.case-diagram.is-twelve span:nth-child(3){grid-area:3/3/auto/9}.case-diagram.is-twelve span:nth-child(4){display:none}.case-specimens,.case-molecules{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.25rem;display:grid}.case-molecules{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}.case-specimen{border:1px solid var(--color-line);border-radius:var(--radius-card);grid-template-rows:1fr auto;gap:1rem;margin:0;padding:1.5rem;display:grid}.case-specimen.is-deep{border-color:var(--color-deep);background:var(--color-deep);color:var(--color-sage)}.case-specimen.is-deep figcaption,.case-specimen.is-deep .case-token{color:var(--color-sage)}.case-specimen.is-card{padding:1rem}.case-specimen figcaption{color:color-mix(in srgb, var(--color-ink) 65%, transparent);gap:.35rem;font-size:.875rem;display:grid}.case-stage{flex-wrap:wrap;align-items:center;gap:.75rem;min-height:6rem;display:flex}.case-stage.is-block{display:block}.case-stage .crumbs{margin-bottom:0}.case-stage.filter-list{align-content:center;display:grid}.case-arrows{gap:1.5rem;font-size:1.75rem}.case-shots{gap:2.5rem 1.25rem;display:grid}.case-shots li{align-content:start;gap:.4rem;display:grid}.case-shots img{border:1px solid var(--color-line);width:100%;height:auto;transition:opacity var(--duration-base) var(--ease-quiet);margin-bottom:.75rem}.case-shots a:hover img{opacity:.85}.case-shots li.is-phone img{width:min(100%,15rem)}@media (width>=48rem){.case-shots{grid-template-columns:repeat(2,minmax(0,1fr))}}.case-columns{gap:2.5rem;display:grid}@media (width>=64rem){.case-columns{grid-template-columns:repeat(3,minmax(0,1fr))}.case-columns.is-two{grid-template-columns:5fr 7fr}}.case-sub{color:var(--color-ink-muted);margin-bottom:1rem}.case-ledger{border-top:1px solid var(--color-ink);display:grid}.case-ledger div{border-bottom:1px solid var(--color-line);justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.8rem;display:flex}.case-ledger dt{gap:.2rem;font-size:.9375rem;display:grid}.case-ledger dt span{color:color-mix(in srgb, var(--color-ink) 50%, transparent)}.case-ledger dd{font-family:var(--font-editorial);white-space:nowrap;font-size:1.5rem;font-weight:300}.case-list,.case-steps{align-content:start;gap:.85rem;line-height:1.5;display:grid}.case-list li{border-bottom:1px solid var(--color-line);padding-bottom:.85rem}.case-steps{counter-reset:step}.case-steps li{counter-increment:step;grid-template-columns:2rem minmax(0,1fr);display:grid}.case-steps li:before{content:counter(step, decimal-leading-zero);font-family:var(--font-mono);font-size:var(--text-label);color:var(--color-accent);padding-top:.2rem}.case-steps a{text-underline-offset:.2em;text-decoration:underline}.case-code{border-radius:var(--radius-card);background:var(--color-deep);color:var(--color-sage);margin:0;padding:1.5rem;font-family:ui-monospace,monospace;font-size:.8125rem;line-height:1.6;overflow:auto}