.how{--how-bg: #17140F;--how-sand: #2A241B;--how-ink: #F1E8D6;--how-dim: #B8AC94;--how-faint: #8C826F;--how-rule: rgba(241, 232, 214, .14);--how-card: rgba(23, 20, 15, .78);position:relative;background:var(--how-bg);color:var(--how-ink)}.how-stage{position:sticky;top:0;height:100dvh;overflow:hidden}.how-stage canvas{display:block;width:100%;height:100%}.how-stage #stage-wind{position:absolute;inset:0;pointer-events:none}.how-sound{position:absolute;right:24px;top:76px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;font:500 13px Space Grotesk,sans-serif;color:var(--how-ink);background:#17140fb3;border:1px solid var(--how-rule);border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);transition:border-color .2s,background-color .2s}.how-sound:hover{border-color:var(--how-ink)}.how-sound:focus-visible{outline:2px solid var(--how-ink);outline-offset:2px}.how-sound .w1,.how-sound .w2{opacity:.25;transition:opacity .2s}.how-sound[aria-pressed=true]{border-color:#e9b23c}.how-sound[aria-pressed=true] .w1,.how-sound[aria-pressed=true] .w2{opacity:1}.how-hud{position:absolute;right:28px;bottom:24px;font:12px/1.5 Space Mono,ui-monospace,monospace;color:var(--how-faint);text-align:right;pointer-events:none}.how-steps{position:relative;margin-top:-100dvh;pointer-events:none}.step{min-height:100dvh;display:flex;align-items:center;padding:0 var(--mlc-x, clamp(16px, 5vw, 72px));pointer-events:none}.step.tall{min-height:260dvh;align-items:flex-start}.step.tall .card{position:sticky;top:14vh}.card{pointer-events:auto;width:min(440px,100%);min-width:0;box-sizing:border-box;overflow-wrap:anywhere;padding:26px 28px 22px;background:var(--how-card);border:1px solid var(--how-rule);border-radius:12px;backdrop-filter:blur(6px);opacity:.35;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}.step.on .card{opacity:1;transform:none}.card h1{font-family:"DM Serif Display",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(44px,5.4vw,72px);line-height:1;margin:6px 0 16px;text-wrap:balance}.card h2{font-family:"DM Serif Display",Georgia,serif;font-style:italic;font-weight:400;font-size:30px;line-height:1.1;margin:14px 0 10px}.card p{margin:0 0 12px;font-size:16.5px;line-height:1.6;color:var(--how-dim)}.card p em,.card p i{color:var(--how-ink)}.card .kicker{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--how-faint);margin:0}.card .lede{font-size:18.5px;color:var(--how-ink)}.card .num{font:400 clamp(32px,3.4vw,46px)/1.05 "Space Mono",ui-monospace,monospace;color:#e9b23c;margin:0;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.card .num-sub{font-size:14px;color:var(--how-faint);margin:8px 0 0}.card .src a{color:var(--how-ink)}.card .src{font-size:12.5px;color:var(--how-faint);margin:14px 0 0;padding-top:12px;border-top:1px solid var(--how-rule)}.card .live{font-size:15px;color:var(--how-ink);background:#f1e8d60f;border-radius:8px;padding:10px 12px}.card .live b{font-family:Space Mono,ui-monospace,monospace;font-weight:400;color:#e9b23c}.card .muted{color:var(--how-faint);font-size:13px}.card .scroll-cue{font-size:14px;color:var(--how-faint);margin-top:22px}.card .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:18px 0 4px}.card .ui-btn{background:transparent;color:var(--how-ink);border-color:var(--how-rule)}.card .ui-btn:hover{border-color:var(--how-ink);color:var(--how-ink)}.card .ui-btn.primary{background:#e9b23c;border-color:#e9b23c;color:#1a140a}.card .ui-btn.primary:hover{background:#f2c45a}.card a:focus-visible{outline:2px solid var(--how-ink);outline-offset:2px}html:has(.how),body:has(.how){background:#17140f}body:has(.how) footer.site{background:var(--how-bg, #17140F);color:#8c826f;border-top:1px solid rgba(241,232,214,.12)}body:has(.how) footer.site a{color:#f1e8d6}@media (max-width: 760px){.step{align-items:flex-end;padding-bottom:6vh}.step.tall .card{top:auto;bottom:4vh}.card{width:100%;padding:20px;background:#1b1812;backdrop-filter:none}.card p{font-size:15.5px}.how-hud{display:none}}@media (prefers-reduced-motion: reduce){.card{transition:none;opacity:1;transform:none}}.how .card{position:relative;z-index:auto;box-shadow:none}