.mission-demo{border-radius:var(--radius-l);box-shadow:0 0 0 1px var(--hairline), 0 40px 90px -50px #2a122280;grid-template-columns:minmax(0,1fr) minmax(0,1fr);scroll-margin-block-start:24px;display:grid;overflow:hidden}.mission-demo:focus{outline:none}.mission-demo:focus-visible{outline:3px solid var(--plum);outline-offset:4px}.demo-compose{flex-direction:column;padding:clamp(28px,4vw,52px);display:flex}.demo-label{color:var(--fg-soft);flex-wrap:wrap;gap:4px 10px;display:flex}.demo-label span{font-family:var(--font-display);color:var(--bougainvillea);font-weight:600}.demo-step{font-family:var(--font-display);color:var(--fg-soft);margin-top:28px;font-weight:600}.demo-compose h3{font-size:var(--step-2);margin-top:8px}.demo-description{min-height:3.2em;color:var(--fg-soft);margin-top:10px}.demo-stops{gap:10px;margin:24px 0 28px;padding:0;list-style:none;display:grid}.demo-stops li{background:#2a12220d;border-radius:14px;align-items:center;gap:14px;padding:12px 14px;transition:background-color .25s,box-shadow .25s;display:flex}.stop-number{background:var(--bougainvillea);width:34px;height:34px;color:var(--cream);font-family:var(--font-display);border-radius:10px;flex:none;place-items:center;font-weight:600;display:grid}.stop-place{font-family:var(--font-display);font-weight:600}.demo-stops p{font-size:var(--step--1);color:var(--fg-soft);line-height:1.45}.demo-stops .pending{box-shadow:inset 0 0 0 1.5px var(--hairline);background:0 0}.demo-stops .pending .stop-number{color:var(--plum);box-shadow:inset 0 0 0 1.5px var(--plum);background:0 0}.stop-check{background:var(--plum);opacity:0;width:22px;height:22px;transition:opacity .25s, transform .3s var(--ease-out);clip-path:circle(50%);border-radius:50%;flex:none;margin-inline-start:auto;transform:scale(.6)}.stop-check:after{content:"";border:solid var(--cream);border-width:0 2.5px 2.5px 0;width:6px;height:11px;margin:4px auto 0;display:block;transform:rotate(45deg)}.collected .stop-check{opacity:1;transform:none}.demo-actions{flex-wrap:wrap;align-items:center;gap:16px;margin-top:auto;display:none}.is-ready .demo-actions{display:flex}.demo-back{min-height:44px;font-family:var(--font-display);text-underline-offset:4px;cursor:pointer;background:0 0;border:0;padding:10px 6px;font-weight:600;text-decoration:underline}.demo-status{min-height:3em;color:var(--fg-soft);margin-top:16px}.demo-journey{place-items:center;padding:clamp(24px,4vw,48px);display:grid;position:relative}.demo-route{width:100%;max-width:440px;overflow:visible}.demo-route-track{stroke:#fbf3ea47;stroke-width:3px;stroke-linecap:round;stroke-dasharray:2 9}.demo-route-progress{stroke:var(--cream);stroke-width:4px;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100px;transition:stroke-dashoffset .7s var(--ease-swing)}.demo-pin{fill:var(--plum);stroke:#fbf3ea99;stroke-width:2.5px}.demo-plaque rect{fill:#0000;stroke:#fbf3ea66;stroke-width:1.5px;stroke-dasharray:4 4;transition:fill .3s,stroke .3s}.demo-plaque text{fill:#fbf3eabf;font-family:var(--font-display);text-anchor:middle;font-size:17px;font-weight:600;transition:fill .3s}.demo-plaque.is-added rect{fill:var(--bougainvillea);stroke:#fbf3eabf;stroke-dasharray:none}.demo-plaque.is-added text,.demo-home text{fill:var(--cream)}.demo-home rect{fill:#0000;stroke:var(--cream);stroke-dasharray:none}.dude-traveller{fill:var(--saffron);stroke:var(--plum);stroke-width:4px;opacity:0;transition:opacity .25s, transform .7s var(--ease-swing)}.has-dude .dude-traveller{opacity:1}@supports (offset-path:path('M0 0H1')){.dude-traveller{offset-path:path("M40 30C40 70 70 66 70 96C70 150 370 130 370 182C370 240 70 210 70 268C70 320 370 300 370 346");offset-rotate:0deg;offset-distance:0%;transition:opacity .25s, offset-distance .7s var(--ease-swing)}}.demo-arrival{background:var(--plum);opacity:0;pointer-events:none;place-content:center;justify-items:center;gap:18px;transition:opacity .3s .6s;display:grid;position:absolute;inset:0}.demo-arrival img{width:clamp(96px,12vw,140px);height:auto;transition:transform .6s var(--ease-out) .7s;transform:scale(.7)}.demo-arrival span{font-family:var(--font-display);font-size:var(--step-2);letter-spacing:-.03em;font-weight:650}[data-stage="7"] .demo-arrival{opacity:1}[data-stage="7"] .demo-arrival img{transform:none}.demo-disclaimer,.no-js-note{background:var(--cream);color:var(--plum-soft);border-top:1px solid var(--hairline);grid-column:1/-1;padding:16px clamp(28px,4vw,52px)}@media (width<=760px){.mission-demo{grid-template-columns:minmax(0,1fr)}.demo-journey{min-height:300px}.demo-route{max-width:340px}}@media (prefers-reduced-motion:reduce){.dude-traveller,.demo-route-progress{transition:none}}