@layer components{.keys-stage{padding:clamp(12px,2vw,28px)}.keys-frame{fill:var(--primary-soft);stroke:var(--primary);stroke-width:1.5;stroke-dasharray:7 7;transition:transform 1s var(--ease)}.keys-holder{color:var(--soft);transition:color .8s var(--ease),opacity .8s var(--ease);opacity:.6}.keys-holder.is-active{color:var(--ink);opacity:1}.k-stroke{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}.k-fill{fill:var(--paper)}.k-detail{stroke:currentColor;stroke-width:1;opacity:.35}.k-detail-rect{fill:none;stroke:currentColor;opacity:.35}.k-dot{fill:currentColor}.k-label{fill:currentColor;font-family:var(--font-display);font-size:22px}.k-travel{transition:transform 1s var(--ease)}.k-coin{fill:var(--brass);stroke:color-mix(in oklab,var(--brass) 70%,var(--ink));stroke-width:1}.k-coin-side{fill:color-mix(in oklab,var(--brass) 80%,var(--ink));stroke:color-mix(in oklab,var(--brass) 70%,var(--ink));stroke-width:1}.k-key{fill:var(--primary)}.k-key-hole{fill:var(--paper)}.k-key-line{fill:none;stroke:var(--primary);stroke-width:5;stroke-linecap:round}.keys-copy{animation:keys-in .8s var(--ease)}@keyframes keys-in{0%{opacity:0;transform:translateY(8px)}}}@layer components{.path-sticky{position:sticky;top:96px}.path-svg{width:100%;max-height:calc(100vh - 140px);display:block;margin-inline:auto}.road-base{fill:none;stroke:var(--bg-2);stroke-width:34;stroke-linecap:round}.road-center{fill:none;stroke:color-mix(in oklab,var(--ink) 18%,transparent);stroke-width:1.5;stroke-dasharray:6 10}.road-trail{fill:none;stroke:var(--primary);stroke-width:5;stroke-linecap:round}.stop-ring{fill:var(--bg);stroke:color-mix(in oklab,var(--ink) 25%,transparent);stroke-width:1.5;transition:stroke .6s var(--ease)}.stop-fill{fill:var(--bg);transition:fill .6s var(--ease)}.stop-n{font-family:var(--font-display);font-size:14px;fill:var(--soft);transition:fill .6s var(--ease)}.stop.is-on .stop-ring{stroke:var(--brass)}.stop.is-on .stop-fill{fill:var(--primary)}.stop.is-on .stop-n{fill:var(--primary-ink)}.path-step{display:flex;gap:22px;padding:32px 0;border-top:1px solid var(--line)}@media(min-width:1024px){.path-step{min-height:30vh;align-items:center}.path-step:last-child{border-bottom:1px solid var(--line)}}.path-dot{width:36px;height:36px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);color:var(--soft);border:1px solid color-mix(in oklab,var(--ink) 25%,transparent);transition:background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}.path-step.is-on .path-dot{background:var(--primary);color:var(--primary-ink);border-color:var(--brass)}@media(min-width:1024px){.path-dot{display:none}}}@layer components{.tx-track-wrap{position:relative;height:500vh}.tx-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}.tx-grid{display:grid;gap:40px;align-items:center;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.tx-scene{width:100%;max-width:640px;justify-self:end}.tx-svg{width:100%;height:auto;display:block;max-height:calc(100svh - 120px)}.tx-ticks{list-style:none;padding:0;margin:0 0 48px;display:grid;gap:14px}.tx-ticks li{display:flex;align-items:center;gap:14px;color:var(--vault-soft);font-size:.9375rem;transition:color .6s var(--ease)}.tx-tick-mark{width:22px;height:1px;background:var(--vault-line);transition:width .6s var(--ease),background-color .6s var(--ease)}.tx-ticks li.is-done .tx-tick-mark{background:var(--vault-soft)}.tx-ticks li.is-active{color:var(--vault-ink)}.tx-ticks li.is-active .tx-tick-mark{width:44px;background:var(--brass)}.tx-beats{display:grid}.tx-beat{grid-area:1 / 1;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .8s var(--ease);max-width:32rem}.tx-beat.is-active{opacity:1;transform:none}@media(max-width:1023px){.tx-stage{align-items:flex-start;padding-top:88px;box-sizing:border-box}.tx-grid{grid-template-columns:1fr;gap:12px}.tx-ticks{display:flex;gap:6px;margin-bottom:18px}.tx-ticks li{flex:1}.tx-tick-mark,.tx-ticks li.is-active .tx-tick-mark{width:100%;height:2px}.tx-tick-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.tx-beat h3{font-size:1.5rem}.tx-beat p{font-size:1rem}.tx-beat p.t-small{font-size:.875rem}.tx-scene{justify-self:center;max-width:min(560px,calc(100svh - 360px))}}.tx-label{fill:var(--vault-soft);font-size:13px;font-family:var(--font-sans)}.tx-block{fill:var(--vault-2);stroke:#eeeaf538;stroke-width:1}.tx-block.is-ours{fill:#b794f429;stroke:var(--brass)}.tx-rule{stroke:#eeeaf52e;stroke-width:2;stroke-linecap:round}.tx-link{stroke:var(--brass);stroke-width:1.5;opacity:.8}.tx-mini{fill:#eeeaf540}.tx-mini.is-ours{fill:var(--vault-accent)}.tx-edge{stroke:#eeeaf559;stroke-width:1}.tx-node{fill:var(--vault);stroke:#eeeaf559;stroke-width:1.2}.tx-node-on{fill:var(--vault-accent)}.tx-halo{fill:#b794f424}.tx-pool{fill:#eeeaf508;stroke:#eeeaf540;stroke-dasharray:4 5}.tx-arrow{fill:none;stroke:var(--vault-soft);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.tx-pill{fill:var(--vault-2);stroke:#eeeaf547}.tx-me{fill:var(--vault-accent);stroke:#eeeaf5;stroke-width:1}.tx-phone{fill:#0b0712;stroke:#eeeaf547}.tx-screen{fill:#f4f2f8}.tx-screen-text{fill:#1b1430;font-size:11px;font-family:var(--font-sans);font-weight:700}.tx-count{fill:#1b1430;font-size:16px;font-family:var(--font-display)}.tx-track{fill:#1b143026}.tx-fill{fill:#6b46c1}.tx-dot{fill:#6b46c1;opacity:.5}.tx-tick{fill:none;stroke:#6b46c1;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.tx-tick.is-ok{stroke:#1d7a46}}