[data-hero-demo]{--demo-scene:9s;--demo-fix-at:2.4s;--demo-start:var(--demo-fix-at);flex-direction:column;gap:12px;display:flex}[data-hero-demo] .demo-tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;display:grid}[data-hero-demo][data-demo-tabs="3"] .demo-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}[data-hero-demo][data-demo-tabs="4"] .demo-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}[data-hero-demo][data-demo-tabs="6"] .demo-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}@media (width<24rem){[data-hero-demo][data-demo-tabs="6"] .demo-tab{letter-spacing:-.02em;font-size:.625rem}}[data-hero-demo] .demo-tab{border:2px solid var(--ink);border-radius:var(--radius-tile);background-color:var(--white);min-block-size:60px;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px 0;font-size:.6875rem;font-weight:600;display:flex;position:relative;overflow:hidden}[data-hero-demo] .demo-tab[aria-selected=true]{background-color:var(--ink);color:var(--white)}[data-hero-demo] .demo-progress{background-color:var(--signal);block-size:4px;inline-size:0;position:absolute;inset-block-end:0;inset-inline-start:0}[data-hero-demo][data-cycle=on] .demo-tab[aria-selected=true] .demo-progress{animation:demo-progress var(--demo-scene) linear forwards}[data-hero-demo]:hover .demo-progress,[data-hero-demo]:focus-within .demo-progress{animation-play-state:paused}[data-hero-demo] .demo-scene{flex-direction:column;gap:12px;display:flex}[data-hero-demo] .demo-scene[hidden]{display:none}[data-hero-demo] .demo-cards{grid-template-columns:1fr 1fr;gap:12px;display:grid}[data-hero-demo] .demo-card{border:2px solid var(--ink);border-radius:var(--radius-tile);box-shadow:3px 3px 0 var(--ink);margin:0;padding:10px 14px;font-size:.9375rem;font-weight:600;line-height:1.3}[data-hero-demo] .demo-label{align-items:center;gap:6px;margin-block-end:2px;font-size:.75rem;font-weight:700;display:flex}[data-hero-demo] .demo-problem{background-color:var(--alert-tint)}[data-hero-demo] .demo-fix{background-color:var(--mint)}@media (width<40rem){[data-hero-demo] .demo-card{padding:8px 10px;font-size:.8125rem}[data-hero-demo] .demo-label{font-size:.6875rem}}[data-hero-demo] .demo-device{--screen-zoom:.6;block-size:280px}@media (width>=80rem){[data-hero-demo] .demo-device{--screen-zoom:.75;block-size:360px}}@media (width>=90rem){[data-hero-demo] .demo-device{--screen-zoom:.85;block-size:400px}}[data-hero-demo] .demo-screen{grid-template-columns:1fr 1fr;gap:12px;block-size:100%;display:grid}@media (prefers-reduced-motion:no-preference){[data-hero-demo] .demo-problem{animation:demo-drop .6s var(--ease-spring) .4s backwards}[data-hero-demo] .demo-fix{animation:demo-drop .6s var(--ease-spring) var(--demo-fix-at) backwards}}@keyframes demo-progress{to{inline-size:100%}}@keyframes demo-drop{0%{opacity:0;translate:0 12px;scale:.94}}