.cs{--cs-plate:#f6f6f3;--cs-view-h:min(78dvh, 720px);flex-direction:column;gap:28px;display:flex}.cs-lede{max-width:34ch;font:400 clamp(20px, 2.2vw, 28px) / 1.35 var(--font-body), sans-serif;color:var(--fg);margin:0}.cs-facts{flex-wrap:wrap;gap:16px 48px;margin:0;display:flex}.cs-facts dd{font:500 14px var(--font-mono), monospace;color:var(--fg);margin:4px 0 0}.cs-glance{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);grid-template-columns:repeat(3,1fr);display:grid}.cs-glance>div{padding:20px 24px 22px 0}.cs-glance>div+div{border-left:1px solid var(--hair);padding-left:24px}.cs-glance h2{margin:0}.cs-glance p{color:var(--fg);margin:8px 0 0;font-size:17px;line-height:1.5}.cs-chapter{border-top:1px solid var(--hair);scroll-margin-top:calc(var(--topbar) + 8px);flex-direction:column;gap:20px;margin-top:8dvh;padding-top:8dvh;display:flex}.cs-glance+.cs-chapter{border-top:0;margin-top:0}.cs-label{font:600 12px var(--font-mono), monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0}.cs-headline{font:800 clamp(28px, 4vw, 52px) / 1.08 var(--font-display), sans-serif;color:var(--fg);text-wrap:balance;margin:0}.cs-body{max-width:60ch;color:var(--body);margin:0;font-size:17px;line-height:1.6}.cs-tradeoff{grid-template-columns:12ch 1fr;gap:10px 24px;max-width:76ch;margin:4px 0 0;display:grid}.cs-tradeoff dt{font:500 12px var(--font-mono), monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}.cs-tradeoff dd{color:var(--fg);margin:0;font-size:16px;line-height:1.5}.cs-figure{flex-direction:column;gap:12px;margin:12px 0 0;display:flex}.cs-figure-stage{width:100%;position:relative}.cs-still{width:100%;height:100%;transition:opacity .3s;display:block;overflow:visible}.cs-still :is(rect,circle,line){fill:none;stroke:var(--body);stroke-width:1.5px;stroke-linecap:round;vector-effect:non-scaling-stroke}.cs-still [data-fill]{fill:var(--body);stroke:none}.cs-still text{fill:var(--fg);font-family:var(--font-display), sans-serif;font-weight:800}.cs-still text[data-face=mono]{font-family:var(--font-mono), monospace;font-weight:600}.cs-still .cs-gold :is(rect,circle,line){stroke:var(--gold)}.cs-still .cs-gold [data-fill],.cs-still .cs-gold text{fill:var(--gold)}.cs-figure-caption{max-width:60ch;min-height:2.8em;font:500 13px / 1.4 var(--font-mono), monospace;color:var(--muted);margin:0}.cs-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.cs-steps{flex-wrap:wrap;gap:8px;display:flex}.cs-step{border:1px solid var(--hair);color:var(--body);font:600 12px var(--font-mono), monospace;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:0 0;border-radius:999px;padding:8px 14px;transition:border-color .2s,color .2s}.cs-step:hover{color:var(--fg)}.cs-step[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}.cs-step:focus-visible,.cs-thumb:focus-visible,.cs-pan input:focus-visible{outline:1px dashed var(--fg);outline-offset:4px}.cs-plate{margin:12px 0 0}.cs-plate-frame{background:var(--cs-plate);border:1px solid var(--hair);border-radius:12px;transition:opacity .6s;overflow:hidden}.cs-plate-bar{background:#e9e9e4;gap:6px;padding:10px 12px;display:flex}.cs-plate-bar i{background:#c9c9c2;border-radius:50%;width:8px;height:8px}.cs-plate-view{position:relative;overflow:hidden}.cs-plate-view img{width:100%;height:auto;display:block}.cs-plate[data-tall] .cs-plate-view{max-height:var(--cs-view-h)}.cs-plate[data-tall] .cs-plate-view img{transform:translateY(min(0px, calc(var(--pan,0) * (var(--cs-view-h) - 100%))));will-change:transform;transition:transform .25s ease-out}.cs-plate[data-frame=phone]{--cs-view-h:min(70dvh, 600px)}.cs-plate[data-frame=phone] .cs-plate-frame{background:#101014;border-radius:36px;width:min(300px,100%);padding:10px}.cs-plate[data-frame=phone] .cs-plate-view{background:var(--cs-plate);border-radius:26px}.cs-plate[data-frame=modal] .cs-plate-frame{place-items:center;padding:clamp(20px,5vw,56px);display:grid}.cs-plate[data-frame=modal] .cs-plate-view{width:min(100%, calc(var(--w) * 1px));border-radius:8px;box-shadow:0 12px 40px #0000002e}.cs-plate figcaption{font:500 12px var(--font-mono), monospace;color:var(--muted);margin-top:10px}.cs-pan{white-space:nowrap;align-items:center;gap:12px;margin-top:10px;display:none}.cs-plate[data-pans] .cs-pan{display:flex}.cs-pan input{width:min(240px,60%);accent-color:var(--gold)}.cs-walk{flex-direction:column;gap:12px;margin:12px 0 0;display:flex}.cs-walk-stage{background:var(--cs-plate);position:relative;overflow:hidden}.cs-walk-shot{opacity:0;width:100%;height:auto;transition:opacity .22s;position:absolute;top:0;left:0}.cs-walk-shot[data-on]{opacity:1;will-change:transform}.cs-walk-dim{opacity:0;background:#0c0e1873;transition:opacity .26s;position:absolute;inset:0}.cs-walk-stage[data-dim] .cs-walk-dim{opacity:1}.cs-walk-modal{opacity:0;border-radius:8px;transition:opacity .26s,scale .26s;position:absolute;top:50%;left:50%;overflow:hidden;translate:-50% -50%;scale:.96;box-shadow:0 16px 48px #0000004d}.cs-walk-modal[data-on]{opacity:1;scale:1}.cs-walk-modal>img:first-child{width:100%;height:auto;display:block}.cs-walk-inset{object-fit:cover;position:absolute}.cs-walk-cursor{opacity:0;pointer-events:none;width:0;height:0;transition:opacity .2s;position:absolute}.cs-walk-cursor[data-on]{opacity:1}.cs-walk[data-hold] .cs-walk-cursor,.cs-walk[data-failed] .cs-walk-cursor{opacity:0}.cs-walk-solo .cs-walk-jump{display:none}@media (scripting:none){.cs-walk .cs-steps{display:none}}.cs-walk-cursor svg{filter:drop-shadow(0 1px 2px #00000059);position:absolute;top:-1px;left:-2px}.cs-walk-ripple{opacity:0;background:#00783c66;border-radius:50%;width:46px;height:46px;position:absolute;top:0;left:0;transform:translate(-50%,-50%)scale(.2)}.cs-gallery{flex-direction:column;gap:16px;display:flex}.cs-gallery .cs-plate{margin:0}.cs-thumbs{flex-wrap:wrap;gap:10px;display:flex}.cs-thumb{aspect-ratio:4/3;background:var(--cs-plate);border:1px solid var(--hair);cursor:pointer;border-radius:6px;width:96px;padding:0;overflow:hidden}.cs-thumb img{width:100%;display:block}.cs-thumb[aria-pressed=true]{border-color:var(--gold)}.cs-phones{gap:20px;padding-bottom:8px;display:flex;overflow-x:auto}.cs-phones .cs-plate{flex:none;width:min(270px,80vw)}.cs-chapter:last-of-type{min-height:50dvh}.cs-rail{display:none}@media (min-width:1200px) and (pointer:fine){.cs-rail{z-index:5;display:block;position:fixed;top:50%;right:24px;translate:0 -50%}.cs-rail ol{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.cs-rail a{font:500 12px var(--font-mono), monospace;color:var(--muted);padding:2px 0 2px 22px;text-decoration:none;display:block;position:relative}.cs-rail a:before{content:"";background:#efe9dc40;border-radius:50%;width:4px;height:4px;margin-top:-2px;position:absolute;top:50%;left:4px}.cs-rail a:hover{color:var(--fg)}.cs-rail a[aria-current=true]{color:var(--gold)}.cs-rail a[aria-current=true]:before{background:var(--gold)}}.cs-replay{align-self:flex-start;display:none}@media (scripting:enabled) and (prefers-reduced-motion:no-preference){html[data-stage=running]:not([data-figures=off]) .cs-figure-stage[data-live] .cs-still{opacity:0}html[data-stage=running]:not([data-figures=off]) .cs-replay{display:inline-flex}html[data-stage=running] .cs-figure-stage[data-still]~.cs-replay{display:none}}@media (scripting:enabled) and (prefers-reduced-motion:no-preference) and (min-width:768px) and (pointer:fine){html[data-stage=running]:not([data-figures=off]) .cs-plate-frame:not([data-revealed]){opacity:0}}@media (max-width:767px){.cs-glance{grid-template-columns:1fr}.cs-glance>div+div{border-left:0;border-top:1px solid var(--hair);padding-left:0}.cs-tradeoff{grid-template-columns:1fr;gap:2px 0}.cs-tradeoff dd{margin-bottom:10px}.cs-walk-cursor svg{width:13px;height:16px}.cs-walk-ripple{width:28px;height:28px}}@media (prefers-reduced-motion:reduce){.cs-walk-replay{display:none}.cs-walk-solo .cs-walk-jump{display:revert}.cs-walk-shot,.cs-walk-dim,.cs-walk-modal,.cs-walk-cursor,.cs-plate[data-tall] .cs-plate-view img,.cs-still,.cs-plate-frame{transition:none}}