:root{--green:#41b883;--navy:#35495e;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{color:var(--navy);background:#fbfdfc;margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5}.hero{text-align:center;background:linear-gradient(160deg, var(--green), var(--navy));color:#fff;place-content:center;min-height:100vh;padding:0 1rem;display:grid}.hero h1{margin:0;font-size:clamp(2.5rem,10vw,6rem)}.hint{font-size:2rem;animation:1.6s ease-in-out infinite bob}@keyframes bob{50%{transform:translateY(.5rem)}}main{max-width:42rem;margin:0 auto;padding:0 1rem 60vh}.demo{padding:30vh 0 0}code{background:#35495e1a;border-radius:4px;padding:.1em .35em}.control{align-items:center;gap:.5rem;margin-bottom:1rem;font-weight:600;display:flex}.waypoint,.card{opacity:0;background:#fff;border:1px solid #35495e26;border-radius:12px;margin:1.5rem 0;padding:1.5rem;transition:opacity .5s,transform .5s,border-color .3s;transform:translateY(2rem);box-shadow:0 10px 30px #35495e14}.card h3{margin:0 0 .25rem}.card.tall{place-content:center;min-height:70vh;display:grid}.going-in{opacity:1;border-color:var(--green);transform:none}.going-out.direction-up{transform:translateY(-2rem)}.state-card dl{grid-template-columns:auto 1fr;gap:.25rem 1rem;margin:0;display:grid}.state-card dt{font-weight:700}.state-card dd{margin:0;font-family:ui-monospace,monospace}.log{background:var(--navy);color:#fff;border-radius:12px;width:12rem;padding:.75rem 1rem;font-size:.8rem;position:fixed;bottom:1rem;right:1rem}.log h2{margin:0 0 .5rem;font-family:ui-monospace,monospace;font-size:.8rem}.log ol{gap:.2rem;margin:0;padding:0;list-style:none;display:grid}.log li{justify-content:space-between;font-family:ui-monospace,monospace;display:flex}.log .empty{opacity:.6}@media (prefers-reduced-motion:reduce){.waypoint,.card,.hint{opacity:1;transition:none;animation:none;transform:none}}