.case-head{padding:var(--tile-pad);padding-top:calc(var(--nav-size) + var(--space-56));gap:var(--space-56);flex-direction:column;grid-column:span 6;display:flex}.case-eyebrow .num{color:var(--accent)}.case-head>div:first-child{container-type:inline-size}.case-title{font-size:min(100cqi / var(--em) * .995, 10rem * var(--text-scale-display));letter-spacing:-.05em;margin-top:var(--space-32);white-space:nowrap;width:fit-content;font-weight:600;line-height:.9}.case-title[data-accent]{margin-top:calc(var(--space-32) + .2em)}.case-lede{margin-top:var(--space-40)}@media (width<=640px){.case-lede{margin-top:var(--space-32)}}.case-lede-lead{max-width:24em;font-size:calc(clamp(1.5rem, 1.2vw + 1.1rem, 2.25rem) * var(--text-scale));letter-spacing:-.02em;color:var(--text);text-wrap:pretty;line-height:1.2;display:block}.case-lede-rest{max-width:var(--measure-case);margin-top:var(--space-16);font-size:var(--text-body);line-height:1.55;display:block}.case-meta{gap:var(--hairline);background:var(--rule-soft);border-top:1px solid var(--rule-soft);grid-auto-columns:1fr;grid-auto-flow:column;margin:0;display:grid}.case-meta>div{background:var(--tile);padding:18px var(--space-24) var(--space-16)}.case-meta>div:first-child{padding-left:0}.case-meta dt{align-items:baseline;gap:var(--space-8);font-size:var(--text-label);color:var(--accent);display:flex}.case-meta dd{margin:var(--space-12) 0 0;font-family:var(--font-mono);font-size:var(--text-label-value);letter-spacing:.02em;line-height:1.75}.case-meta dd span{display:block}@media (width<=640px){.case-meta{grid-template-columns:1fr 1fr;grid-auto-flow:row}.case-meta>div{padding:var(--space-12) var(--space-16)}.case-meta>div:nth-child(odd){padding-left:0}.case-meta>div:last-child:nth-child(odd){grid-column:1/-1}.case-meta dd{margin-top:var(--space-8);line-height:1.6}}.case-note,.case-chain{padding:var(--tile-pad);gap:var(--space-20);flex-direction:column;grid-column:span 3;display:flex}.case-note .prose,.case-chain .prose{max-width:var(--measure-case)}@media (width<=834px){.case-note,.case-chain{grid-column:span 4}.case-note .prose,.case-chain .prose{max-width:none}}.case-url{min-height:var(--touch);margin-block:calc((1lh - var(--touch)) / 2);align-items:center;gap:11px;display:inline-flex}.case-url .dot{background:var(--accent);border-radius:50%;flex-shrink:0;width:8px;height:8px;position:relative}.case-url .dot:after{content:"";background:var(--accent);animation:dotPulse var(--duration-pulse) var(--ease-entrance) 3;border-radius:50%;position:absolute;inset:0}.case-url:focus-visible .dot:after{animation-iteration-count:infinite}@media (hover:hover) and (pointer:fine){.case-url:hover .dot:after{animation-iteration-count:infinite}}.case-url .mono{font-size:var(--text-label-value);letter-spacing:.08em;text-transform:none;color:var(--text);transition:border-color var(--duration-hint) ease;border-bottom:1px solid #0000}.case-url:hover .mono{border-bottom-color:var(--accent)}@keyframes dotPulse{0%{opacity:.55;transform:scale(1)}85%,to{opacity:0;transform:scale(2.8)}}.case-chain{gap:var(--space-16)}.case-chain ul{gap:var(--space-16);flex-direction:column;list-style:none;display:flex}.case-chain li{font-size:var(--text-compact);justify-content:space-between;gap:14px;padding-bottom:9px;display:flex}.case-chain li:not(:last-child){border-bottom:1px solid var(--rule-soft)}.case-chain li:last-child{padding-bottom:0}.case-chain .via{font-size:var(--text-label-value);text-transform:none;letter-spacing:.04em;color:var(--text-muted)}.case-section{padding:var(--tile-pad);gap:var(--space-16);flex-direction:column;grid-column:span 2;min-height:250px;display:flex}@media (width<=834px){.case-section{grid-column:span 4}}@media (width>=641px) and (width<=834px){.case-section{column-gap:var(--space-32);row-gap:var(--space-16);grid-template-rows:auto 1fr;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:0;display:grid}.case-section .case-eyebrow,.case-section .case-h2{grid-column:1}.case-section .prose{grid-area:1/2/span 2}}.case-h2{font-size:var(--text-title-sm);text-wrap:balance;letter-spacing:-.03em;font-weight:600;line-height:1.05}.case-ref{padding:var(--tile-pad);gap:var(--space-24);flex-direction:column;grid-column:span 4;display:flex}.case-ref .prose{max-width:var(--measure-case)}@media (width<=834px){.case-ref{grid-column:span 4}.case-ref .prose{max-width:none}}.case-ref-cols{gap:var(--space-40);grid-template-columns:repeat(2,1fr);display:grid}@media (width<=640px){.case-ref-cols{gap:var(--space-32);grid-template-columns:1fr}}.case-made{padding:var(--tile-pad);gap:var(--space-24);flex-direction:column;grid-column:span 2;display:flex}.case-made .case-stack{gap:var(--space-16);font-family:var(--font-mono);font-size:var(--text-label-value);color:var(--text-2);flex-direction:column;display:flex}.case-made .case-stack>*{padding:0 0 9px}.case-made .case-stack>:not(:last-child){border-bottom:1px solid var(--rule-soft)}.case-made .case-stack>button{min-height:var(--touch)}@media (width<=834px){.case-made{grid-column:span 4}}.case-ref-col{gap:var(--space-40);flex-direction:column;min-width:0;display:flex}.case-ref-col>*{max-width:var(--measure-case)}.case-sky{gap:var(--space-12);flex-direction:column;flex:1;margin:0;padding:0;display:flex}.case-ref:has(.case-sky-col){position:relative}.case-ref:has(.case-sky-col)>*{z-index:2;position:relative}.case-ref:has(.case-sky-col):before{content:"";z-index:1;pointer-events:none;transition:opacity var(--duration-wash) ease;background:linear-gradient(#fbe29a4d 0%,#f8c06a3d 8%,#f0975c30 16%,#dd7a7226 26%,#b3638f21 38%,#7d55951c 52%,#63489e14 66%,#4f45870d 78%,#0000 92%);position:absolute;inset:0 -380px 0 0;mask-image:linear-gradient(90deg,#0000 0%,#000 25% 70%,#0000 96%)}.case-ref:has(.case-sky-col):has(theme-sky.is-dark):before{opacity:0}.case-ref:has(.case-sky-col):after{content:"";z-index:1;pointer-events:none;opacity:0;transition:opacity var(--duration-wash) ease;background:linear-gradient(#0000 14%,#1a235008 30%,#262e630d 44%,#333c7813 58%,#4550941c 72%,#5d6bb226 83%,#7d8ac933 92%,#9eaae242 100%);position:absolute;inset:0 -380px 0 0;mask-image:linear-gradient(90deg,#0000 0%,#000 25% 70%,#0000 96%)}.case-ref:has(.case-sky-col):has(theme-sky.is-dark):after{opacity:1}@media (width<=640px){.case-ref:has(.case-sky-col):before,.case-ref:has(.case-sky-col):after{position:fixed;inset:0;mask-image:none}.case-ref:has(.case-sky-col):not(:has(.ts-glyph.is-seen)):before,.case-ref:has(.case-sky-col):not(:has(.ts-glyph.is-seen)):after{opacity:0}}.case-sky-stage{min-height:200px;padding:var(--space-40);flex:1;place-items:center;display:grid}.case-sky-stage theme-sky{width:min(112px,40%)}.case-cap{color:var(--accent);text-transform:none;letter-spacing:.08em;font-size:var(--text-label-value);transition:color var(--duration-wash) ease}.by-touch{display:none}@media (pointer:coarse){.by-mouse{display:none}.by-touch{display:inline}}@media (any-pointer:fine) and (prefers-reduced-motion:no-preference){.case-eyebrow .num{transition:color var(--duration-move) var(--ease-interaction)}.grid[data-does=slides] .case-eyebrow .num{color:var(--cb-slide)}.grid[data-does=clicks] .case-eyebrow .num{color:var(--cb-click)}.grid[data-does=hides] .case-eyebrow .num{color:var(--cb-hide)}}.case-swatches{background:var(--tile);border:1px solid var(--rule-soft);flex-direction:column;display:flex;overflow:hidden}.case-swatches li{display:flex}.case-swatches .case-swatch-btn{isolation:isolate;appearance:none;min-width:0;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;flex:1;align-items:stretch;min-height:60px;margin:0;padding:0;display:flex;position:relative}.case-swatches .case-chip{aspect-ratio:1;height:auto;box-shadow:none;flex:none}.case-swatches .case-text{padding:var(--space-12) var(--space-16)}.case-swatches .case-hex{padding:var(--space-12) var(--space-16);align-items:center;display:flex}.case-swatches li:not(:last-child) .case-text,.case-swatches li:not(:last-child) .case-hex{box-shadow:0 1px 0 var(--rule-soft)}.case-swatches .case-swatch-btn:focus-visible{outline:2px solid var(--swatch);outline-offset:-2px}.case-swatches .case-swatch-btn[aria-pressed=true]{background:color-mix(in srgb, var(--swatch) 14%, transparent);box-shadow:inset calc(var(--hairline) * 3) 0 0 var(--swatch)}@media (hover:hover) and (pointer:fine){.case-swatches .case-swatch-btn:before{content:"";z-index:-1;background:var(--swatch-fill);clip-path:inset(0 100% 0 0);transition:clip-path var(--duration-move) var(--ease-interaction);position:absolute;inset:0}.case-swatches .case-swatch-btn:hover:before{clip-path:inset(0)}.case-swatches .case-swatch-btn:hover .case-role,.case-swatches .case-swatch-btn:hover .case-use,.case-swatches .case-swatch-btn:hover .case-hex{color:var(--cb-ink)}.case-swatches .case-swatch-btn:hover .case-role,.case-swatches .case-swatch-btn:hover .case-use{transition-delay:calc(var(--duration-move) * .12)}.case-swatches .case-swatch-btn:hover .case-hex{transition-delay:calc(var(--duration-move) * .3)}}.case-swatches .case-text{flex:1;min-width:0}.case-swatches .case-role,.case-swatches .case-use{display:block}.case-swatches .case-role,.case-swatches .case-use,.case-swatches .case-hex,.case-swatches .case-chip{transition:color var(--duration-move) var(--ease-interaction), box-shadow var(--duration-move) var(--ease-interaction)}.case-chip{height:34px;box-shadow:inset 0 0 0 1px var(--rule-soft);display:flex}.case-chip span{flex:1}.case-role{font-size:var(--text-detail);color:var(--text);line-height:1.35}.case-use{font-size:var(--text-detail-sub);color:var(--text-2);line-height:1.35}.case-hex{font-size:var(--text-label);text-transform:none;letter-spacing:.04em;color:var(--text-muted);flex:none}.case-ref code,.case-note code{font-family:var(--font-mono);color:var(--text);font-size:.9em}.case-room{flex:1;width:100%;min-height:260px;margin:0;padding:0;position:relative;overflow:hidden}.case-room wire-lab{touch-action:pan-y pinch-zoom;display:block;position:absolute;inset:0}.case-room .case-room-pause{position:absolute;bottom:0;right:0}.case-mark{align-items:center;gap:var(--space-20);flex-direction:column;margin:0;padding:0;display:flex}.case-mark cb-mark{width:min(180px,100%);color:var(--text);display:block}.case-mark cb-mark svg{width:100%;height:auto;display:block}.case-mark .logo-shape-1{fill:var(--cb-cyan)}.case-mark .logo-shape-2{fill:var(--cb-purple)}.case-mark .logo-shape-3{fill:var(--cb-coral)}.case-nav{padding:var(--tile-pad);grid-column:span 6}.case-nav a{min-height:var(--touch);margin-block:calc((1lh - var(--touch)) / 2);font-size:var(--text-label-value);letter-spacing:.14em;color:var(--text-muted);transition:color var(--duration-hint) ease;align-items:center;display:inline-flex}.case-nav a:hover{color:var(--text)}.cursor-trail{z-index:999;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}