/* =====================================================================
   Vatar app · step 6 · Onboarding, account, location, Vatar ID
   screens/onboarding/onboarding.css · 30 Oct 2026
   Load after ../../kit/kit.css. DS tokens + kit --app-* knobs only.
   Parts:
     0 · single-screen stage (one phone, full page; ?embed = phone only)
     1 · area components the kit doesn't have yet (logged in KIT-REQUESTS.md)
     2 · per-screen layout glue
   ===================================================================== */

/* ---------------------------------------------------------------------
   0 · STAGE
   --------------------------------------------------------------------- */
html { background: var(--color-brand-black); }
body.ob { margin: 0; min-height: 100vh; background: var(--color-brand-black); color: var(--color-text-primary); display: grid; place-items: center; overflow: hidden; -webkit-font-smoothing: antialiased; }
.ob-holder { position: relative; width: calc(412px * var(--s, 1)); height: calc(866px * var(--s, 1)); }
.ob-scale { position: absolute; left: 0; top: 0; box-sizing: border-box; width: 412px; height: 866px; padding: 11px; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.is-embed, .is-embed body.ob { background: transparent; }
.is-embed body.ob { display: block; min-height: 0; }
[hidden] { display: none !important; }

/* screen = column; content sits between the status bar and the home indicator */
.ob-col { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ob-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--app-gutter); position: relative; }
.ob-foot { flex: none; padding: var(--space-3) var(--app-gutter) calc(var(--app-safe-bottom) + var(--space-2)); display: grid; gap: var(--space-2); position: relative; z-index: 2; }
.ob-foot .ob-legal { margin-top: var(--space-1); }
.ob-legal { margin: 0; font-size: var(--app-meta); line-height: 1.4; color: var(--color-text-tertiary); text-align: center; }
.ob-legal a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.ob-bar { height: var(--app-topbar-h); flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-2); position: relative; z-index: var(--z-sticky); }
.ob-bar__mid { flex: 1; display: flex; justify-content: center; }
.ob-bar .va-iconbtn { color: var(--color-text-primary); }
.ob-txtbtn { min-height: var(--app-tap); min-width: var(--app-tap); padding: 0 var(--space-3); border: 0; background: none; color: var(--color-text-secondary); font: var(--font-weight-semibold) var(--app-sm)/1 var(--font-family-body); cursor: pointer; border-radius: var(--radius-sm); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ob-txtbtn:hover { color: var(--color-text-primary); }
.ob-txtbtn--acc { color: var(--app-accent); }
.ob-h { font: var(--font-weight-extrabold) var(--app-h1)/1.04 var(--font-family-display); letter-spacing: var(--type-h2-letter-spacing); margin: 0; text-wrap: balance; }
.ob-lede { margin: var(--space-2) 0 0; font-size: var(--app-body); line-height: 1.45; color: var(--color-text-secondary); }
.ob-lede b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.ob-wm { display: block; height: auto; }

/* full-width secondary with a brand glyph (Apple / Google): DS secondary button, glyph at the start */
.ob-sso .btn__face { gap: var(--space-2); }
.ob-sso .ob-glyph { width: 20px; height: 20px; flex: none; }
.ob-or { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-1) 0; font-size: var(--app-meta); color: var(--color-text-tertiary); }
.ob-or::before, .ob-or::after { content: ""; flex: 1; height: 1px; background: var(--app-line); }

/* ---------------------------------------------------------------------
   1 · AREA COMPONENTS (KIT-REQUESTS.md)
   --------------------------------------------------------------------- */

/* KR-1 · step meter: 3–5 chamfered segments, the done ones lit. Says "how far to the world". */
.ob-steps { display: flex; gap: 4px; align-items: center; }
.ob-steps i { width: 22px; height: 4px; background: var(--color-alpha-white-16); clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 0px), calc(100% - 2px) 100%, 0 100%, 0 0); }
.ob-steps i.on { background: var(--app-accent); }
.ob-steps i.now { background: var(--color-text-primary); }

/* KR-2 · pager for swipe cards: segments that fill as the card is read */
/* KR-2 superseded by the kit 12.9 seated track (.va-track); kept for reference only */
.ob-pager { display: flex; gap: 0; margin-left: -8px; }
.ob-wel__pager > .va-track { transform: translateY(-1px); } /* the groove centre on the cap-height centre of "Next" */
.ob-pager button { position: relative; width: var(--app-tap); height: var(--app-tap); border: 0; padding: 0; background: none; cursor: pointer; }
.ob-pager button::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 4px; margin-top: -2px; background: var(--color-alpha-white-24); clip-path: polygon(2px 0, 100% 0, 100% 100%, 0 100%, 0 2px); }
.ob-pager button[aria-current="true"]::before { background: var(--color-text-primary); }
.ob-pager button[aria-current="true"] { width: 60px; }

/* KR-3 · iOS numeric keypad + "From Messages" code suggestion (system UI, drawn for the prototype) */
.ob-kb { flex: none; background: var(--color-neutral-900); padding: 6px 6px calc(var(--app-safe-bottom) + 4px); border-top: var(--border-width-hairline) solid var(--app-line); }
.ob-kb__sug { display: flex; justify-content: center; min-height: 44px; margin-bottom: 4px; }
.ob-kb__sug button { min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-primary); font: var(--font-weight-medium) 15px/1.15 var(--font-family-body); cursor: pointer; text-align: center; }
.ob-kb__sug button small { display: block; font-size: 12px; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
.ob-kb__sug button:active { background: var(--color-alpha-white-8); }
.ob-kb__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ob-kb__keys button { height: 46px; border: 0; border-radius: 6px; background: var(--color-neutral-700); color: var(--color-text-primary); font: var(--font-weight-regular) 25px/1 var(--font-family-body); display: grid; align-content: center; justify-items: center; cursor: pointer; box-shadow: 0 1px 0 var(--color-alpha-black-45); }
.ob-kb__keys button small { font-size: 9px; letter-spacing: 0.16em; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin-top: 1px; }
.ob-kb__keys button:active { background: var(--color-neutral-500); }
.ob-kb__keys .is-blank { background: none; box-shadow: none; cursor: default; }
.ob-kb__keys .is-del { background: none; box-shadow: none; }

/* KR-4 · system permission alert (iOS), for location / contacts / notifications prompts */
.ob-alert-wrap { position: absolute; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: var(--color-overlay-backdrop); padding: 0 var(--space-12); }
.ob-alert { width: 270px; border-radius: var(--radius-md); background: var(--color-neutral-800); text-align: center; overflow: hidden; box-shadow: var(--elevation-dialog); }
.ob-alert__txt { padding: var(--space-5) var(--space-4) var(--space-4); }
.ob-alert__txt b { display: block; font: var(--font-weight-semibold) 17px/1.3 var(--font-family-body); }
.ob-alert__txt p { margin: var(--space-1) 0 0; font-size: 13px; line-height: 1.35; color: var(--color-text-secondary); }
.ob-alert__map { height: 110px; margin: var(--space-3) var(--space-4) 0; border-radius: var(--radius-sm); overflow: hidden; position: relative; }
.ob-alert__map img { width: 100%; height: 100%; object-fit: cover; }
.ob-alert button { display: block; width: 100%; min-height: 44px; border: 0; border-top: var(--border-width-hairline) solid var(--color-alpha-white-16); background: none; color: var(--color-status-info-fg); font: var(--font-weight-regular) 17px/1 var(--font-family-body); cursor: pointer; }
.ob-alert button.is-def { font-weight: var(--font-weight-semibold); }
.ob-alert button:active { background: var(--color-alpha-white-8); }

/* KR-5 · lit stage for the avatar: dot grid, a floor disc, a key light from above (no glow, no gradient wash) */
.ob-lit { position: relative; overflow: hidden; background: var(--color-brand-black); }
.ob-lit > .va-dots { z-index: 0; }
.ob-lit__beam { position: absolute; left: 50%; top: 0; width: 240px; margin-left: -120px; height: 100%; background: linear-gradient(180deg, var(--color-alpha-white-8), var(--color-alpha-black-0) 78%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); pointer-events: none; z-index: 0; }
.ob-lit__floor { position: absolute; left: 50%; bottom: 28px; width: 200px; height: 40px; margin-left: -100px; border-radius: 50%; background: var(--color-lilac-950); box-shadow: inset 0 0 0 1px var(--color-lilac-800); z-index: 0; }
.ob-lit__floor::after { content: ""; position: absolute; inset: 9px 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--color-lilac-900); }
.ob-lit__av { position: absolute; left: 50%; bottom: 46px; height: 330px; width: auto; transform: translateX(-50%); z-index: 1; transform-origin: 50% 100%; }

/* KR-6 · option grid for the avatar editor: every thumb previews on YOUR avatar (Memoji rule) */
.ob-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.ob-opt { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: var(--app-surface); cursor: pointer; overflow: hidden; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.ob-opt img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.ob-opt--body img { object-fit: cover; object-position: 50% 30%; transform: scale(1.5); transform-origin: 50% 30%; }
/* fix 11: the rim follows the chamfer (an inset box-shadow lost it on the cut corners): a chamfered band of width --rb */
.ob-opt::after { content: ""; position: absolute; inset: 0; --rb: 1px; background: var(--app-line-2); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px, 8px 0, calc(8px + var(--rb) * 0.414) var(--rb), var(--rb) calc(8px + var(--rb) * 0.414), var(--rb) calc(100% - var(--rb)), calc(100% - 8px - var(--rb) * 0.414) calc(100% - var(--rb)), calc(100% - var(--rb)) calc(100% - 8px - var(--rb) * 0.414), calc(100% - var(--rb)) var(--rb), calc(8px + var(--rb) * 0.414) var(--rb), 8px 0); pointer-events: none; }
.ob-opt[aria-pressed="true"]::after { --rb: 2px; background: var(--app-accent); }
.ob-opt[aria-pressed="true"] .ob-opt__tick { display: grid; }
.ob-opt__tick { display: none; position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; place-items: center; background: var(--app-accent); color: var(--color-brand-black); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.ob-opt__tick .va-i { width: 14px; height: 14px; }
.ob-opt:focus-visible { outline: none; }
.ob-opt:focus-visible::after { --rb: 3px; background: var(--focus-ring-color); }
.ob-swatches { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ob-swatch { width: 52px; height: 52px; border: 0; padding: 0; cursor: pointer; position: relative; background: none; }
.ob-swatch i { position: absolute; inset: 6px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
/* fix 11: the selected ring is three concentric octagons (30% cuts stay parallel at any size): a 48px lilac ring, a 2px black gap, the 40px swatch */
.ob-swatch::before, .ob-swatch::after { content: ""; position: absolute; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); opacity: 0; }
.ob-swatch::before { inset: 2px; background: var(--app-accent); }
.ob-swatch::after { inset: 4px; background: var(--color-brand-black); }
.ob-swatch i { z-index: 1; }
.ob-swatch[aria-pressed="true"]::before, .ob-swatch[aria-pressed="true"]::after { opacity: 1; }
.ob-swatch:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }

/* KR-7 · location pin: an octagon (the icon set's round shape) with a ring that pings once a beat */
.ob-pin { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.ob-pin__core { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; background: var(--color-brand-lilac); color: var(--color-brand-black); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.ob-pin__core .va-i { width: 28px; height: 28px; }
.ob-pin__ring { position: absolute; inset: -6px; opacity: 0; }
.ob-pin__ring::before, .ob-pin__ring::after { content: ""; position: absolute; inset: 0; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.ob-pin__ring::before { background: var(--color-lilac-300); }
.ob-pin__ring::after { inset: 1.5px; background: var(--color-brand-black); }
.ob-pin.is-seek .ob-pin__ring { animation: ob-ping 1400ms var(--motion-easing-standard) infinite; }
.ob-pin.is-seek .ob-pin__ring + .ob-pin__ring { animation-delay: 700ms; }
@keyframes ob-ping { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }

/* KR-8 · city board row (extends kit 12.4 .va-board): a city in the departures-board style, tappable */
.va-board__row.ob-city { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.va-board__row.ob-city:hover { background: var(--color-alpha-white-4); }
.va-board__row.ob-city:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: -3px; }
.ob-city__thumb { width: 44px; height: 44px; overflow: hidden; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.ob-city__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ob-group { margin: var(--space-5) 0 var(--space-2); display: flex; justify-content: space-between; align-items: baseline; }
.ob-group b { font: var(--font-weight-bold) var(--app-body)/1.2 var(--font-family-display); }

/* ---------------------------------------------------------------------
   2 · SCREENS
   --------------------------------------------------------------------- */

/* ===== ON-01 · splash: the logo sting (B · Night portal) lands on Lagos ===== */
.ob-sting { position: absolute; inset: 0; background: var(--color-brand-black); overflow: hidden; }
.ob-sting__portal { position: absolute; left: 39.7px; top: 254px; width: 310.6px; height: 173.3px; }
.ob-sting__portal > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-vmask { -webkit-mask: url(../../../../brand/guide/logo-colourways/svg/vatar-v--c04-lilac-on-black.svg) 0 0 / 100% 100% no-repeat; mask: url(../../../../brand/guide/logo-colourways/svg/vatar-v--c04-lilac-on-black.svg) 0 0 / 100% 100% no-repeat; overflow: hidden; }
.ob-vmask img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ob-sting__echo { background: var(--color-brand-lilac-deep); visibility: hidden; }
.ob-sting__leaf { visibility: hidden; }
.ob-sting__leaf--l { clip-path: polygon(-5% -2%, 56% -2%, 44% 102%, -5% 102%); }
.ob-sting__leaf--r { clip-path: polygon(56% -2%, 105% -2%, 105% 102%, 44% 102%); }
.ob-sting__frame { visibility: hidden; }
.ob-sting__wm { position: absolute; left: 68.6px; top: 323.9px; width: 252.8px; height: 33.8px; visibility: hidden; }
.ob-sting__wm img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-sting__wm-v { clip-path: polygon(-2% -2%, 26.685% -2%, 17.318% 102%, -2% 102%); }
.ob-sting__wm-rest { clip-path: polygon(26.685% -2%, 26.685% -2%, 17.318% 102%, 17.318% 102%); }
.ob-sting__wm-full { visibility: hidden; }
/* the land: Lagos through the V, opening out to full bleed */
.ob-land { position: absolute; inset: 0; visibility: hidden; }
.ob-land__media { position: absolute; inset: 0; -webkit-mask: url(../../../../brand/guide/logo-colourways/svg/vatar-v--c04-lilac-on-black.svg) no-repeat; mask: url(../../../../brand/guide/logo-colourways/svg/vatar-v--c04-lilac-on-black.svg) no-repeat; -webkit-mask-size: 310.6px 173.3px; mask-size: 310.6px 173.3px; -webkit-mask-position: 39.7px 254px; mask-position: 39.7px 254px; }
.ob-land__media.is-open { -webkit-mask: none; mask: none; }
.ob-land__media video, .ob-land__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-land .va-fade--cap { z-index: 1; }
.ob-land__low { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, var(--color-brand-black) 0%, var(--color-brand-black) 18%, var(--color-scrim-solid) 30%, var(--color-scrim-soft) 46%, var(--color-alpha-black-0) 60%); }
.ob-land__wm { position: absolute; left: var(--app-gutter); top: calc(var(--app-safe-top) + 14px); width: 112px; z-index: 2; }
.ob-land__copy { position: absolute; left: var(--app-gutter); right: var(--app-gutter); bottom: calc(var(--app-safe-bottom) + 112px); z-index: 2; }
.ob-tag { font: var(--font-weight-extrabold) 52px/0.98 var(--font-family-display); letter-spacing: var(--type-h1-letter-spacing); margin: 0; }
.ob-tag .highlight-chip { margin-left: -0.02em; }
.ob-land__sub { margin: var(--space-3) 0 0; color: var(--color-text-secondary); font-size: var(--app-body); }
.ob-skip { position: absolute; top: calc(var(--app-safe-top) + 6px); right: var(--space-2); z-index: 5; }
.ob-skip[disabled] { opacity: 0; pointer-events: none; }
.ob-still { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--space-6); background: var(--color-brand-black); }
.ob-still img.v { width: 120px; }
.ob-still img.wm { width: 160px; }
.ob-replay { position: absolute; left: 50%; bottom: calc(var(--app-safe-bottom) + 28px); transform: translateX(-50%); z-index: 4; }

/* ===== ON-02 · welcome cards ===== */
.ob-wel { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ob-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ob-track::-webkit-scrollbar { display: none; }
.ob-card { position: relative; flex: none; width: 100%; height: 100%; scroll-snap-align: start; overflow: hidden; }
.ob-card__media { position: absolute; left: 0; right: 0; top: 0; height: 600px; overflow: hidden; }
.ob-card__media > img, .ob-card__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-card__media .va-fade--cap { z-index: 1; }
.ob-card__low { position: absolute; inset: 0 0 -2px; z-index: 1; background: linear-gradient(0deg, var(--color-brand-black) 0%, var(--color-brand-black) 6%, var(--color-scrim-solid) 18%, var(--color-scrim-soft) 34%, var(--color-alpha-black-0) 52%); }
.ob-card__copy { position: absolute; left: var(--app-gutter); right: var(--app-gutter); bottom: var(--space-4); z-index: 2; }
.ob-card__copy .va-display { font-size: 44px; line-height: 0.98; }
.ob-card__copy p { margin: var(--space-3) 0 0; color: var(--color-text-secondary); max-width: 320px; }
.ob-card__hud { position: absolute; z-index: 2; }
.ob-wel__top { position: absolute; left: 0; right: 0; top: var(--app-safe-top); height: var(--app-topbar-h); display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-2) 0 var(--app-gutter); z-index: 3; }
.ob-wel__top img { width: 96px; }
.ob-wel__foot { flex: none; margin-top: -1px; position: relative; z-index: 2; padding: 0 var(--app-gutter) calc(var(--app-safe-bottom) + var(--space-2)); display: grid; gap: var(--space-1); background: var(--color-brand-black); }
.ob-wel__pager { display: flex; justify-content: space-between; align-items: center; padding: 0 0 var(--space-2); }
/* card 2: the avatar + an ID chip over the world */
.ob-c2__av { position: absolute; left: 50%; bottom: 214px; height: 300px; transform: translateX(-50%); z-index: 1; }
.ob-c2__floor { position: absolute; left: 50%; bottom: 202px; width: 180px; height: 34px; margin-left: -90px; border-radius: 50%; background: var(--color-scrim-strong); box-shadow: inset 0 0 0 1px var(--color-lilac-800); z-index: 1; }
.ob-c2__id { position: absolute; right: var(--space-4); top: 236px; z-index: 2; }
.ob-c2__cities { position: absolute; left: var(--space-4); top: 150px; z-index: 2; display: grid; gap: 6px; }
.ob-c2__city { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3) 6px 6px; background: var(--color-scrim-solid); border: var(--border-width-hairline) solid var(--color-alpha-white-16); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); font-size: var(--app-meta); font-weight: var(--font-weight-semibold); }
.ob-c2__city img { width: 28px; height: 28px; object-fit: cover; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.ob-c2__city small { display: block; font-size: 11px; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.ob-c2__city .va-led { --led-size: 9px; }
.ob-idchip { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); background: var(--color-brand-black); border: var(--border-width-hairline) solid var(--color-lilac-800); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.ob-idchip img { width: 36px; height: 36px; object-fit: cover; object-position: 50% 0; background: var(--color-lilac-950); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.ob-idchip b { display: block; font: var(--font-weight-bold) var(--app-sm)/1.2 var(--font-family-display); }
.ob-idchip span { font-size: var(--app-meta); color: var(--app-accent); font-weight: var(--font-weight-semibold); }
/* card 3: real people, a reward, a ticket */
.ob-c3__ticket { position: absolute; left: var(--space-4); top: 132px; z-index: 2; width: 220px; transform: rotate(-3deg); }
.ob-c3__pts { position: absolute; right: var(--space-4); top: 268px; z-index: 2; transform: rotate(2deg); }
.ob-pts { display: grid; gap: 6px; padding: var(--space-3) var(--space-4); background: var(--color-brand-black); border: var(--border-width-hairline) solid var(--color-lilac-800); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); --led-size: 28px; }
.ob-c3__crew { position: absolute; left: var(--space-4); top: 360px; z-index: 2; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); background: var(--color-scrim-solid); border-radius: var(--radius-pill); }
.ob-c3__crew .va-crew__stack { --_ring: var(--color-neutral-1000); }
/* loading */
.ob-card--sk .ob-card__media { background: var(--app-surface); }
.ob-card--sk .va-sk { background: var(--app-raised); }

/* ===== AC-01 · sign up ===== */
.ob-key { position: relative; height: 356px; flex: none; overflow: hidden; }
.ob-key > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ob-key__fade { position: absolute; inset: 0 0 -2px; background: linear-gradient(0deg, var(--color-brand-black) 0%, var(--color-scrim-solid) 18%, var(--color-scrim-soft) 48%, var(--color-alpha-black-0) 70%), linear-gradient(180deg, var(--color-scrim-strong), var(--color-alpha-black-0) 34%); }
.ob-key__copy { position: absolute; left: var(--app-gutter); right: var(--app-gutter); bottom: var(--space-4); }
.ob-key__top { position: absolute; left: 0; right: 0; top: var(--app-safe-top); }
.ob-key__ll { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); padding: 4px var(--space-2) 4px 4px; background: var(--color-scrim-solid); border: var(--border-width-hairline) solid var(--color-alpha-white-16); border-radius: 4px; font-size: var(--app-meta); font-weight: var(--font-weight-semibold); }
.ob-key__ll img { width: 24px; height: 24px; object-fit: cover; object-position: 50% 0; background: var(--color-lilac-950); border-radius: 3px; }
/* AC-01 · illustrated key art (direction A, picked 30 Oct): library iso city + giant pin on one lilac field.
   The field-coloured top band keeps the status bar readable over the towers; Send code sits on black below the rounded panel. */
.ob-key--illo { height: 484px; background: var(--color-brand-lilac); border-radius: 0 0 32px 32px; isolation: isolate; color: var(--color-brand-ink); }
.ob-key__art { position: absolute; inset: 0; pointer-events: none; }
.ob-key--illo .ob-key__art > * { position: absolute; display: block; max-width: none; }
.ob-key--illo .ob-key__city { width: 600px; left: -92px; top: -150px; transform: rotate(-10deg); }
.ob-key--illo .ob-key__scrim { left: 0; right: 0; top: 0; height: 84px; background: linear-gradient(180deg, var(--color-brand-lilac) 0%, var(--color-brand-lilac) 50%, rgb(from var(--color-brand-lilac) r g b / 0) 100%); }
.ob-key--illo .ob-key__pin { width: 236px; right: -46px; top: 30px; transform: rotate(14deg); }
.ob-key--illo .ob-key__top { z-index: 3; }
.ob-key--illo .ob-key__copy { bottom: 20px; z-index: 2; }
.ob-key--illo .va-iconbtn--scrim { background: var(--color-alpha-white-75); color: var(--color-brand-ink); }
.ob-key--illo .ob-key__ll { background: var(--color-alpha-white-75); border-color: var(--color-alpha-black-0); color: var(--color-brand-ink); }
.ob-key__h { margin: 0; font-family: var(--font-family-display); font-weight: 900; font-size: 58px; line-height: 0.84; letter-spacing: -0.045em; text-transform: uppercase; color: var(--color-brand-ink); }
.ob-key__h > span { display: block; }
.ob-key__h--sc { max-width: 330px; font-size: 34px; line-height: 1; letter-spacing: -0.035em; text-transform: none; }
.ob-key--illo .ob-lede { max-width: 270px; margin-top: var(--space-3); color: var(--color-lilac-800); font-size: var(--app-sm); font-weight: var(--font-weight-medium); line-height: 1.4; }
.va-device[data-screen="AC-01"] > .va-screen > .va-status { color: var(--color-brand-ink); }
.ob-form { display: grid; gap: var(--space-3); padding-top: var(--space-4); }

/* ===== AC-02 · code ===== */
.ob-code { padding-top: var(--space-2); }
/* KR-14 · split OTP with odometer digits (AC-02). Inspired by "Animated OTP", Gabriel Foulon (credited in README). */
.ob-otp { --otp-roll: 250ms; --otp-w: 144px; position: relative; margin-top: var(--space-6); }
.ob-otp__row { position: relative; display: flex; align-items: center; gap: var(--space-3); }
.ob-otp__in { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: transparent; caret-color: transparent; opacity: 0; cursor: pointer; font-size: 16px; }
.ob-otp__grp { position: relative; flex: none; display: flex; justify-content: center; width: var(--otp-w); height: 76px; padding: 0 var(--space-3); overflow: hidden; border: var(--border-width-hairline) solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); transition: border-color var(--motion-duration-fast) var(--motion-easing-standard), background-color var(--motion-duration-base) var(--motion-easing-standard); }
.ob-otp__grp.is-filled { border-color: var(--color-border-strong); background: var(--app-raised); }
/* one lilac ring that slides to the active group */
.ob-otp__ring { position: absolute; left: 0; top: 0; z-index: 1; width: var(--otp-w); height: 76px; border: 2px solid var(--input-border-focus); border-radius: var(--radius-sm); pointer-events: none; transform: translateX(calc(var(--g, 0) * (var(--otp-w) + var(--space-3)))); transition: transform var(--otp-roll) var(--motion-easing-spring), opacity var(--motion-duration-fast) var(--motion-easing-standard); }
.ob-otp[data-active="none"] .ob-otp__ring { opacity: 0; }
.ob-otp__d { position: relative; display: grid; place-items: center; width: 0.62em; height: 100%; font: var(--font-weight-bold) 42px/1 var(--font-family-display); font-feature-settings: var(--font-feature-tabular); letter-spacing: -0.01em; }
.ob-otp__d > i, .ob-otp__d > b { grid-area: 1 / 1; font-style: normal; font-weight: inherit; transition: transform var(--otp-roll) var(--motion-easing-spring), opacity calc(var(--otp-roll) * 0.8) var(--motion-easing-standard), color var(--motion-duration-fast) var(--motion-easing-standard); transition-delay: var(--dl, 0ms); }
.ob-otp__d > i { color: var(--color-text-disabled); opacity: 0.55; }
.ob-otp__d.is-next > i { color: var(--color-text-tertiary); opacity: 1; }
.ob-otp__d > b { color: var(--color-text-primary); opacity: 0; transform: translateY(70%) scale(0.6); }
/* the roll: the digit rises into place, the placeholder zero slides up and out */
.ob-otp__d.is-on > i { opacity: 0; transform: translateY(-70%) scale(0.8); }
.ob-otp__d.is-on > b { opacity: 1; transform: none; }
.ob-otp__ok { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--app-accent); opacity: 0; transform: scale(0.4) rotate(-22.5deg); transition: transform var(--otp-roll) var(--motion-easing-spring), opacity var(--motion-duration-fast) var(--motion-easing-standard); }
.ob-otp__ok svg { width: 40px; height: 40px; }
.ob-otp__msg { display: flex; min-height: 40px; align-items: center; margin: var(--space-3) 0 0; }
.ob-otp__msg:empty { min-height: 0; }
.ob-otp__msg .va-status-b { height: 32px; font-size: var(--app-sm); }
.ob-otp__msg .va-status-b--neutral { background: var(--app-raised); color: var(--color-text-secondary); border: var(--border-width-hairline) solid var(--app-line-2); }
.ob-otp__msg .va-status-b { animation: ob-otp-pill var(--motion-duration-base) var(--motion-easing-spring) both; }
@keyframes ob-otp-pill { from { opacity: 0; transform: translateY(-6px) scale(0.92); } }
/* wrong: a short horizontal shake */
.ob-otp.is-shake .ob-otp__row { animation: ob-otp-shake 320ms var(--motion-easing-standard); }
@keyframes ob-otp-shake { 15% { transform: translateX(-8px); } 35% { transform: translateX(7px); } 55% { transform: translateX(-5px); } 75% { transform: translateX(3px); } 100% { transform: none; } }
.ob-otp.is-wrong .ob-otp__grp { border-color: var(--input-border-error); }
.ob-otp.is-wrong .ob-otp__ring { border-color: var(--input-border-error); }
/* expired: the code dims, the pill and Resend take over */
.ob-otp.is-expired .ob-otp__d > b { color: var(--color-text-disabled); }
.ob-otp.is-expired .ob-otp__grp { border-color: var(--app-line-2); background: var(--input-bg); }
/* success: both groups flash lilac, the check lands beside them */
.ob-otp.is-ok .ob-otp__grp { border-color: var(--color-brand-lilac); background: var(--color-lilac-950); animation: ob-otp-flash 520ms var(--motion-easing-standard); }
.ob-otp.is-ok .ob-otp__grp--b { animation-delay: 60ms; }
.ob-otp.is-ok .ob-otp__d > b { color: var(--app-accent); }
.ob-otp.is-ok .ob-otp__ok { opacity: 1; transform: none; }
@keyframes ob-otp-flash { 0% { background: var(--input-bg); } 30% { background: var(--color-lilac-800); border-color: var(--color-brand-lilac); } 100% { background: var(--color-lilac-950); } }
.ob-otp:focus-within .ob-otp__row { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 6px; border-radius: var(--radius-sm); }
.ob-otp:focus-within .ob-otp__row:not(:has(.ob-otp__in:focus-visible)) { outline: 0; }
.ob-rm .ob-otp, .ob-rm .ob-otp * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ob-otp, .ob-otp * { transition: none !important; animation: none !important; } }
.ob-code .va-otp-foot { margin-top: var(--space-1); flex-direction: column; align-items: flex-start; gap: 0; }
.ob-code .va-resend.is-lit { display: inline-flex; align-items: center; gap: 6px; color: var(--app-accent); font-weight: var(--font-weight-semibold); }
.ob-code .va-resend.is-lit .va-i { width: 18px; height: 18px; }
.ob-resend { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-tertiary); font-size: var(--app-sm); --led-size: 13px; --led-on: var(--color-text-secondary); white-space: nowrap; min-height: var(--app-tap); }
.ob-sent { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--app-body); }
.ob-sent b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); font-feature-settings: var(--font-feature-tabular); white-space: nowrap; }
.ob-sent a { color: var(--app-accent); font-weight: var(--font-weight-semibold); text-decoration: none; min-height: var(--app-tap); min-width: var(--app-tap); display: inline-flex; align-items: center; justify-content: center; }

/* ===== LO · location (ask, answer in place) ===== */
.ob-loc { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.ob-loc__field { position: absolute; inset: 0; background: var(--color-brand-black); }
.ob-loc__field .va-dots { z-index: 0; }
.ob-loc__hero { position: absolute; left: 0; right: 0; top: 0; height: 600px; overflow: hidden; z-index: 0; }
.ob-loc__hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-loc__hero .ob-card__low { background: linear-gradient(0deg, var(--color-brand-black) 0%, var(--color-brand-black) 12%, var(--color-scrim-solid) 26%, var(--color-scrim-soft) 44%, var(--color-alpha-black-0) 62%); }
.ob-loc__ask { position: relative; flex: 1; display: grid; place-items: center; align-content: center; text-align: center; padding: calc(var(--app-safe-top) + var(--space-4)) var(--space-8) var(--space-4); gap: var(--space-6); }
/* LO-01 globe (globe.js): the hero of the ask, grouped tight with the headline */
.ob-globe { width: 370px; height: 330px; margin: 0 -22px; } /* 300 px sphere; the extra room is for the HUD labels */
.ob-globe > canvas { display: block; }
.ob-loc.is-ask .ob-loc__field .va-dots { display: none; }
.ob-loc__ask .ob-h { font-size: var(--app-display); }
.ob-loc__ask .ob-lede { max-width: 300px; margin: 0 auto; }
.ob-coord { font: var(--font-weight-semibold) var(--app-hud)/1.2 var(--font-family-body); letter-spacing: var(--type-hud-letter-spacing); text-transform: uppercase; color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); --led-size: 11px; }
.ob-loc__ans { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--app-gutter) var(--space-2); }
.ob-loc__ans .ob-kick { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-text-secondary); font-size: var(--app-sm); }
.ob-loc__ans .ob-kick .va-i { width: 18px; height: 18px; color: var(--app-accent); }
.ob-city { font: var(--font-weight-extrabold) 56px/0.95 var(--font-family-display); letter-spacing: var(--type-h1-letter-spacing); margin: 0; }
.ob-world { margin: var(--space-3) 0 0; font: var(--font-weight-bold) var(--app-h2)/1.15 var(--font-family-display); letter-spacing: var(--type-h3-letter-spacing); color: var(--color-text-secondary); }
.ob-world b { color: var(--color-text-primary); }
.ob-loc__meta { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.ob-areas { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--space-5); border: var(--border-width-hairline) solid var(--app-line-2); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.ob-areas > div { padding: var(--space-3); display: grid; gap: 6px; --led-size: 14px; }
.ob-areas > div + div { border-left: var(--border-width-hairline) solid var(--app-line); }
.ob-areas b { font: var(--font-weight-bold) var(--app-sm)/1.2 var(--font-family-display); }
.ob-areas .is-here b { color: var(--app-accent); }
.ob-areas small { font-size: 11px; color: var(--color-text-tertiary); }
/* LO-03 · Accra is next */
.ob-next { position: relative; flex: 1; display: flex; flex-direction: column; padding: var(--space-4) var(--app-gutter) 0; }
.ob-next .va-next__title { margin: var(--space-2) 0 var(--space-2); font-size: 52px; line-height: 0.98; }
.ob-wait { position: relative; margin-top: var(--space-5); }
.ob-wait .va-board__in { padding: var(--space-4) var(--space-4) var(--space-4); }
.ob-wait__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.ob-wait__n { --led-size: 52px; }
.ob-race .va-board__n { --led-size: 14px; }
.ob-wait__you { display: grid; justify-items: end; gap: 6px; text-align: right; }
.ob-wait__you { --led-size: 20px; }
.ob-wait__bar { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; height: 8px; margin: var(--space-4) 0 var(--space-2); }
.ob-wait__bar i { background: var(--color-alpha-white-16); }
.ob-wait__bar i.on { background: var(--color-brand-lilac); }
.ob-wait__cap { display: flex; justify-content: space-between; font-size: var(--app-meta); color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.ob-wait__cap b { color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
.ob-done-line { display: flex; align-items: center; gap: 6px; color: var(--color-status-success-fg); font-size: var(--app-sm); font-weight: var(--font-weight-semibold); min-height: 24px; }
.ob-done-line .va-i { width: 18px; height: 18px; }
.ob-acts2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; }
.ob-acts2 .btn .btn__face { flex: 1; }
.ob-visit { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-2); padding-right: var(--space-3); border: var(--border-width-hairline) solid var(--app-line-2); border-radius: var(--radius-md); text-decoration: none; color: inherit; min-height: 64px; }
.ob-visit img { width: 56px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }
.ob-visit span { flex: 1; font-size: var(--app-sm); color: var(--color-text-secondary); line-height: 1.35; }
.ob-visit b { display: block; color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.ob-visit .va-i { color: var(--app-accent); }
.ob-visit:hover { border-color: var(--color-border-strong); }

/* LO-04 · pick your city */
.ob-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0 var(--app-gutter) var(--space-6); }
.ob-scroll::-webkit-scrollbar { display: none; }
.ob-banner { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); margin: var(--space-3) 0 0; border-radius: var(--radius-md); background: var(--app-surface); font-size: var(--app-sm); line-height: 1.4; color: var(--color-text-secondary); }
.ob-banner .va-i { width: 18px; height: 18px; color: var(--color-text-secondary); margin-top: 1px; flex: none; }
.ob-banner b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.ob-banner a, .ob-banner button { color: var(--app-accent); font-weight: var(--font-weight-semibold); text-decoration: none; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.ob-nomatch { padding: var(--space-5) var(--space-4); text-align: left; }

/* ===== LO-05 · change home world (sheet over Settings) ===== */
.ob-set { padding: 0 var(--app-gutter); }
.ob-set__row { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; border-bottom: var(--border-width-hairline) solid var(--app-line); font-size: var(--app-body); }
.ob-set__row .va-i { color: var(--color-text-secondary); }
.ob-set__row span { flex: 1; }
.ob-set__row em { font-style: normal; color: var(--color-text-tertiary); font-size: var(--app-sm); }
.ob-moves { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.ob-moves > div { padding: var(--space-3); border: var(--border-width-hairline) solid var(--app-line-2); border-radius: var(--radius-md); }
.ob-moves h4 { margin: 0 0 var(--space-2); display: flex; align-items: center; gap: 6px; font: var(--font-weight-semibold) var(--app-sm)/1.2 var(--font-family-body); }
.ob-moves h4 .va-i { width: 16px; height: 16px; color: var(--app-accent); }
.ob-moves ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--app-meta); color: var(--color-text-secondary); line-height: 1.35; }
.ob-swap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }
.ob-swap__w { position: relative; height: 92px; border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-2) var(--space-3); }
.ob-swap__w > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-swap__w > .va-fade { z-index: 0; }
.ob-swap__w > :not(img):not(.va-fade):not(.va-dots) { position: relative; z-index: 1; }
.ob-swap__w b { font: var(--font-weight-bold) var(--app-sm)/1.2 var(--font-family-display); }
.ob-swap__w small { font-size: 11px; color: var(--color-text-secondary); }
.ob-swap__w--soon { background: var(--app-bg); border: var(--border-width-hairline) solid var(--color-lilac-900); }
.ob-swap > .va-i { color: var(--app-accent); }

/* ===== AC-03 · we found your character ===== */
.ob-found { position: relative; margin-top: var(--space-5); }
.ob-found .va-pcard__face { background: var(--color-lilac-800); }
.ob-found__grid { display: grid; grid-template-columns: 132px 1fr; }
.ob-found__stage { position: relative; height: 236px; overflow: hidden; }
.ob-found__stage > img.cap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.ob-found__stage > .va-fade { z-index: 0; }
.ob-found__stage > img.av { position: absolute; left: 50%; bottom: -6px; height: 236px; transform: translateX(-50%); z-index: 1; }
.ob-found__txt { padding: var(--space-4) var(--space-4) var(--space-3); display: grid; align-content: start; gap: var(--space-1); }
.ob-found__txt h3 { font: var(--font-weight-extrabold) var(--app-h3)/1.1 var(--font-family-display); margin: var(--space-1) 0 0; }
.ob-found__kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); align-items: center; }
.ob-found__kv .va-hud { color: var(--color-text-tertiary); }
.ob-found__kv .led { --led-size: 16px; }
.ob-found__kv .va-led-row { --led-size: 16px; }
.ob-found__kv .va-led-cur { font-size: 14px; }
.ob-found__scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--color-brand-lilac); opacity: 0; z-index: 3; pointer-events: none; }
.ob-found.is-linked .va-pcard__face { background: var(--color-brand-lilac); }
.ob-gets { margin: var(--space-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.ob-gets li { display: flex; gap: var(--space-3); align-items: center; font-size: var(--app-sm); color: var(--color-text-secondary); line-height: 1.35; }
.ob-gets li b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.ob-gets .ob-gi { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: var(--app-ink); color: var(--app-accent); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.ob-gets .ob-gi .va-i { width: 18px; height: 18px; }

/* state layout with an LED board as the object (AC-03 not found, AC-04, ID-04 none) */
.ob-statebox { flex: 1; display: grid; align-content: center; justify-items: center; text-align: center; padding: 0 var(--space-6); gap: var(--space-2); }
.ob-statebox .va-board { width: 220px; margin-bottom: var(--space-5); }
.ob-statebox .va-board__in { display: grid; place-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4) var(--space-5); }
.ob-statebox .va-board__in .led.big { --led-size: 56px; }
.ob-statebox .va-board__in .led.cap { --led-size: 13px; --led-on: var(--color-text-secondary); white-space: nowrap; min-height: var(--app-tap); }
.ob-statebox h2 { margin: 0; }
.ob-statebox p { margin: 0; max-width: 300px; color: var(--color-text-secondary); font-size: var(--app-body); line-height: 1.45; }

/* ===== ID-01 · make your Vatar ===== */
.ob-id { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--color-brand-black); }
.ob-id__stage { position: relative; flex: none; height: 424px; transition: height var(--motion-duration-entrance) var(--motion-easing-in-out); }
.ob-id[data-step="name"] .ob-id__stage { height: 236px; }
.ob-id[data-step="card"] .ob-id__stage { height: 0; transition: none; }
.ob-id__stage .ob-lit__av { top: 112px; bottom: auto; height: 272px; transform-origin: 50% 0; transition: transform var(--motion-duration-entrance) var(--motion-easing-in-out); }
.ob-id[data-step="name"] .ob-lit__av { transform: translateX(-50%) translate(92px, -46px) scale(2); }
.ob-id[data-step="name"] .ob-lit__floor, .ob-id[data-step="name"] .ob-lit__beam { opacity: 0; }
.ob-id .ob-lit__floor, .ob-id .ob-lit__beam { transition: opacity var(--motion-duration-slow) var(--motion-easing-standard); }
.ob-id__hud { position: absolute; left: var(--app-gutter); right: var(--app-gutter); bottom: var(--space-3); z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.ob-id__hud > * { pointer-events: auto; }
.ob-id__who { display: grid; gap: 2px; }
.ob-id__who b { font: var(--font-weight-bold) var(--app-h3)/1.1 var(--font-family-display); }
.ob-id__who span { font-size: var(--app-sm); color: var(--app-accent); font-weight: var(--font-weight-semibold); }
.ob-id__panel { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--color-brand-black); border-top: var(--border-width-hairline) solid var(--app-line); }
.ob-id__pane { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: var(--space-4) var(--app-gutter) var(--space-4); }
.ob-id__pane::-webkit-scrollbar { display: none; }
.ob-id__pane .va-seg:not(.va-seg--seated) { padding: 0; margin: calc(var(--space-4) * -1) 0 var(--space-4); }
/* fix 10: the seated segmented control (kit 1.8b) on the look editor; the options row swipes between tabs */
.ob-id__pane .va-seg.va-seg--seated { margin: calc(var(--space-2) * -1) 0 var(--space-3); }
#paneLook { overflow-x: hidden; }
.ob-id__opts { touch-action: pan-y; }
.ob-id__title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); }
.ob-id__title h1 { font: var(--font-weight-extrabold) var(--app-h2)/1.1 var(--font-family-display); letter-spacing: var(--type-h3-letter-spacing); margin: 0; }
.ob-id__form { display: grid; gap: var(--space-5); }
.ob-id__form .va-wheel { height: 176px; }
.ob-id__form .va-wheel::before { top: 66px; }
.ob-id__form .va-wheel__col { padding: 66px 0; }
.ob-id__linked { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-4); border-radius: var(--radius-md); background: var(--app-surface); font-size: var(--app-sm); color: var(--color-text-secondary); line-height: 1.35; }
.ob-id__linked img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); }
.ob-id__linked b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); display: block; }
.ob-id__foot { flex: none; padding: var(--space-3) var(--app-gutter) calc(var(--app-safe-bottom) + var(--space-2)); display: grid; gap: var(--space-1); border-top: var(--border-width-hairline) solid var(--app-line); background: var(--color-brand-black); }
.ob-id__opt-sk { aspect-ratio: 1; }
/* the card state */
.ob-cardstep { position: absolute; inset: 0; display: flex; flex-direction: column; visibility: hidden; }
.ob-id[data-step="card"] .ob-cardstep { visibility: visible; }
.ob-cardstep__scene { flex: 1; min-height: 0; display: grid; place-items: center; padding: calc(var(--app-safe-top) + var(--space-2)) var(--app-gutter) 0; perspective: 1100px; }
.ob-cardstep__foot { flex: none; padding: var(--space-3) var(--app-gutter) calc(var(--app-safe-bottom) + var(--space-2)); display: grid; gap: var(--space-1); }
.ob-pc { width: 100%; max-width: 344px; transform-style: preserve-3d; will-change: transform; transition: none !important; }
.ob-pc .va-pcard__stage { height: 292px; }
.ob-pc .va-pcard__stage img { height: 282px; }
.ob-pc .va-pcard__top { padding-top: var(--space-3); }
.ob-pc .va-pcard__id { padding-top: var(--space-2); }
.ob-pc .va-pcard__since { padding: var(--space-3) 0 var(--space-3); }
.ob-pc .va-pcard__since .yr { --led-size: 36px; }
.ob-pc__sheen { position: absolute; inset: 0; z-index: 4 !important; pointer-events: none; background: linear-gradient(105deg, var(--color-alpha-black-0) 30%, var(--color-alpha-white-16) 48%, var(--color-alpha-white-24) 50%, var(--color-alpha-white-16) 52%, var(--color-alpha-black-0) 70%); transform: translateX(-120%); mix-blend-mode: screen; }
.ob-pc__rows { display: grid; grid-template-columns: 1fr 1fr; margin: var(--space-3) var(--space-4) 0; border-top: var(--border-width-hairline) solid var(--app-line-2); }
.ob-pc__rows > div { padding: var(--space-3) 0 0; display: grid; gap: 6px; }
.ob-pc__rows > div + div { padding-left: var(--space-3); border-left: var(--border-width-hairline) solid var(--app-line); }
.ob-pc__rows b { font: var(--font-weight-bold) var(--app-sm)/1.2 var(--font-family-display); }
.ob-pc__rows .va-led-row { --led-size: 16px; }
.ob-pc__rows .va-led-cur { font-size: 14px; }
.ob-pc .va-pcard__back { z-index: 5; }

/* ===== ID-04 · find friends ===== */
.ob-ff__peek { position: relative; height: 210px; margin: var(--space-5) 0 0; }
.ob-ff__peek .va-av { position: absolute; }
.ob-ff__peek .va-av > img:first-child { box-shadow: 0 0 0 3px var(--app-bg); }
.ob-friends { margin: 0 calc(var(--app-gutter) * -1); }
.ob-friends .va-friend { padding-right: var(--app-gutter); }
.ob-friends .btn { flex: none; }
.ob-added { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 var(--space-2); color: var(--color-status-success-fg); font: var(--font-weight-semibold) var(--app-sm)/1 var(--font-family-body); }
.ob-added .va-i { width: 16px; height: 16px; }

/* reduced motion: every move is a cross-fade */
@media (prefers-reduced-motion: reduce) {
  .ob-id__stage, .ob-id__stage .ob-lit__av { transition-duration: var(--motion-duration-fast) !important; }
  .ob-pin.is-seek .ob-pin__ring { animation: none; opacity: 0.6; }
}
.ob-rm .ob-id__stage, .ob-rm .ob-id__stage .ob-lit__av { transition-duration: var(--motion-duration-fast) !important; }
.ob-rm .ob-pin.is-seek .ob-pin__ring { animation: none; opacity: 0.6; }

/* =====================================================================
   KR-15 · Birthday row + floating "Date of birth" sheet card (ID-01 state 2)
   Ported from explore/birthday.* variation A (owner pick, fix 3). Runtime: dob.js (OB.dob).
   ===================================================================== */
.ob-dob-row {
  width: 100%; height: var(--input-height); display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-3) 0 var(--input-padding-x); background: var(--input-bg); border: var(--border-width-hairline) solid var(--input-border); border-radius: var(--input-radius);
  color: var(--input-text); font: var(--font-weight-medium) var(--app-body)/1 var(--font-family-body); font-feature-settings: var(--font-feature-tabular); text-align: left; cursor: pointer;
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.ob-dob-row:hover { border-color: var(--color-text-secondary); }
.ob-dob-row > .va-i { flex: none; color: var(--color-text-tertiary); }
.ob-dob-row__v { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-dob-row__v.is-empty { color: var(--input-placeholder); font-weight: var(--font-weight-regular); }
.ob-dob-row.is-error { border-color: var(--input-border-error); box-shadow: inset 0 0 0 1px var(--input-border-error); }
.ob-dob-row.is-pop .ob-dob-row__v { animation: ob-dob-pop var(--motion-duration-slow) var(--motion-easing-standard); }
@keyframes ob-dob-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the wheel: kit 3.6 .va-wheel with a --rows knob and a soft raised band */
.va-wheel.ob-wheel { --row: 44px; --rows: 5; --pad: calc((var(--rows) - 1) / 2 * var(--row)); height: calc(var(--row) * var(--rows)); background: transparent; border-radius: 0; }
.va-wheel.ob-wheel::before { left: 0; right: 0; top: var(--pad); height: var(--row); z-index: 0; background: var(--app-raised); border-radius: var(--radius-md); }
.va-wheel.ob-wheel .va-wheel__col {
  z-index: 1; padding: var(--pad) 0; overscroll-behavior: contain; scroll-behavior: auto; outline-offset: -2px; border-radius: var(--radius-sm); cursor: grab;
  --fade-0: transparent; --fade-in: 34%;
  -webkit-mask: linear-gradient(var(--fade-0), var(--color-brand-black) var(--fade-in), var(--color-brand-black) calc(100% - var(--fade-in)), var(--fade-0));
  mask: linear-gradient(var(--fade-0), var(--color-brand-black) var(--fade-in), var(--color-brand-black) calc(100% - var(--fade-in)), var(--fade-0));
}
.ob-wheel .va-wheel__col div { height: var(--row); color: var(--color-text-secondary); cursor: pointer; transition: color var(--motion-duration-fast) var(--motion-easing-standard); user-select: none; -webkit-user-select: none; }
.ob-wheel .va-wheel__col div.is-sel { color: var(--color-text-primary); }
.ob-wheel .va-wheel__col div.is-off { color: var(--color-text-disabled); }
.ob-wheel .va-wheel__col:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); }

/* the sheet: a floating card 8px off the device edge, bottom corners concentric with the device radius */
.ob-dob { position: absolute; inset: 0; z-index: var(--z-modal); }
.ob-dob__scrim { position: absolute; inset: 0; background: var(--color-overlay-backdrop); opacity: 0; transition: opacity var(--motion-duration-slow) var(--motion-easing-standard); }
.ob-dob__sheet.va-sheet {
  position: absolute; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); width: auto;
  padding: var(--space-2) var(--space-4) calc(var(--app-safe-bottom) - var(--space-2));
  border: var(--border-width-hairline) solid var(--app-line-2); border-radius: var(--radius-lg) var(--radius-lg) 44px 44px;
  transform: translateY(calc(100% + var(--space-4))); transition: transform 460ms var(--motion-easing-standard);
}
.ob-dob__sheet .va-sheet__grab { margin-bottom: var(--space-3); }
.ob-dob__title { margin: 0 0 var(--space-3); text-align: center; font: var(--font-weight-bold) var(--app-h3)/1.2 var(--font-family-display); letter-spacing: var(--type-h4-letter-spacing); }
.ob-dob__sheet .ob-wheel { margin: 0 0 var(--space-3); }
.ob-dob__note { justify-content: center; text-align: left; margin: 0 0 var(--space-4); min-height: 20px; }
.ob-dob.is-in .ob-dob__scrim { opacity: 1; }
.ob-dob.is-in .ob-dob__sheet { transform: none; }
.ob-dob.is-out .ob-dob__sheet { transition-timing-function: var(--motion-easing-exit); transition-duration: 280ms; }
/* reduced motion: the slide becomes a fade */
@media (prefers-reduced-motion: reduce) {
  .ob-dob__sheet.va-sheet { transform: none; opacity: 0; transition: opacity var(--motion-duration-base) var(--motion-easing-standard); }
  .ob-dob.is-in .ob-dob__sheet { opacity: 1; }
  .ob-wheel .va-wheel__col div { transition: none; }
  .ob-dob-row.is-pop .ob-dob-row__v { animation: none; }
}
.ob-rm .ob-dob__sheet.va-sheet { transform: none; opacity: 0; transition: opacity var(--motion-duration-base) var(--motion-easing-standard); }
.ob-rm .ob-dob.is-in .ob-dob__sheet { opacity: 1; }
.ob-rm .ob-wheel .va-wheel__col div { transition: none; }
.ob-rm .ob-dob-row.is-pop .ob-dob-row__v { animation: none; }
/* linked players carry the "From Lagos Life" banner on state 2: a 16px rhythm keeps it from scrolling at 844 */
#paneName:has(.ob-id__linked:not([hidden])) .ob-id__form { gap: var(--space-4); }

/* =====================================================================
   ON-02 · Illustrated welcome (approved 30 Oct; built by welcome.js). Was explore/illo.css.
   ===================================================================== */
/* Illustrated welcome (explore): one lilac field family (200 → 700 → 950), three scenes from the brand illustration library.
   DS tokens and --app-* vars only. Loaded after ../onboarding.css. */
.w-scr { position: absolute; inset: 0; background: var(--color-brand-black); }
.w-panel { position: absolute; left: 0; right: 0; top: 0; height: 620px; overflow: hidden; border-radius: 0 0 32px 32px; background: var(--color-brand-black); isolation: isolate; touch-action: pan-y; cursor: grab; }
/* each card carries its own field, so the slide moves field and art together */
.w-s1 { background: var(--color-brand-lilac); }
.w-s2 { background: var(--color-brand-lilac-deep); }
.w-s3 { background: var(--color-brand-ink); }
.va-screen > .va-status { transition: color 300ms var(--motion-easing-standard); }
.va-screen.w-light > .va-status { color: var(--color-brand-ink); }
.w-panel:active { cursor: grabbing; }
.w-slide { position: absolute; inset: 0; visibility: hidden; }
.w-slide.is-on { visibility: visible; }
.w-art { position: absolute; inset: 0; pointer-events: none; }
.va-app .w-art > * { position: absolute; display: block; max-width: none; inset: auto; height: auto; object-fit: fill; } /* beats .ob-land__media img (cover) in the splash */
.va-app .w-art > .w-tag { display: grid; justify-items: start; }
.w-copy { position: absolute; left: var(--app-gutter); right: var(--app-gutter); bottom: 24px; z-index: 2; color: var(--color-brand-paper); }
.w-h { margin: 0; font-family: var(--font-family-display); font-weight: 900; font-size: 56px; line-height: 0.86; letter-spacing: -0.045em; text-transform: uppercase; }
.w-ln { display: block; overflow: hidden; padding-top: 0.06em; margin-top: -0.06em; }
.w-ln > span { display: block; will-change: transform; }
.w-h em { font-style: normal; color: var(--color-brand-lilac); }
.w-sub { margin: 14px 0 0; max-width: 310px; font-size: var(--app-body); line-height: 1.4; font-weight: var(--font-weight-medium); color: var(--color-lilac-200); }
.w-s1 .w-copy { color: var(--color-brand-ink); }
.w-s1 .w-sub { color: var(--color-lilac-800); }
.w-s2 .w-sub { color: var(--color-lilac-100); }

.w-foot { position: absolute; left: 0; right: 0; top: 620px; bottom: 0; padding: var(--space-3) var(--app-gutter) calc(var(--app-safe-bottom) + 4px); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); }
.w-row { display: flex; align-items: center; justify-content: space-between; min-height: var(--app-tap); }
.w-row .ob-txtbtn[data-off] { visibility: hidden; }
.w-ll { width: 100%; }

/* small tags that sit on the art */
.w-tag { display: grid; gap: 6px; padding: 10px 12px; background: var(--color-brand-black); border: var(--border-width-hairline) solid var(--color-lilac-700); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); color: var(--color-brand-paper); }
.w-tag b { font: var(--font-weight-bold) 15px/1.1 var(--font-family-display); }
.w-tag small { font-size: var(--app-meta); color: var(--color-lilac-200); font-weight: var(--font-weight-semibold); }
.w-tag .led { --led-size: 9px; }
.w-tag .led.big { --led-size: 34px; }

/* scene 1 · real cities: the iso block, the giant pin */
.w-s1 .s1-city { width: 660px; left: -128px; top: -46px; transform: rotate(-10deg); }
.w-s1 .s1-scrim { left: 0; right: 0; top: 0; height: 88px; background: linear-gradient(180deg, var(--color-brand-lilac) 0%, var(--color-brand-lilac) 50%, rgb(from var(--color-brand-lilac) r g b / 0) 100%); }
.w-s1 .s1-pin { width: 250px; right: -54px; top: 104px; transform: rotate(14deg); }

/* scene 2 · one you: a peach sun, the city behind, two players on a rooftop, your @handle */
.w-s2 .s2-sun { width: 250px; height: 250px; left: 170px; top: 40px; }
.w-s2 .s2-tw { width: 150px; left: 214px; top: -46px; }
.w-s2 .s2-rd { width: 74px; left: 134px; top: 96px; }
.w-s2 .s2-lounge { width: 340px; left: -60px; top: 136px; }
.w-s2 .s2-hand { width: 280px; right: -66px; top: 64px; }
.w-s2 .s2-wall { left: 0; top: 384px; width: 100%; height: 236px; }
.w-s2 .s2-id { left: 18px; top: 66px; transform: rotate(-4deg); }

/* scene 3 · crew, rewards, events: oversized objects */
.w-s3 .s3-tix { width: 300px; left: 26px; top: 40px; transform: rotate(-12deg); }
.w-s3 .s3-ctl { width: 330px; left: -118px; top: 214px; transform: rotate(-22deg); }
.w-s3 .s3-key { width: 180px; left: 120px; top: 262px; transform: rotate(-36deg); }
.w-s3 .s3-hand { width: 350px; right: -132px; top: 56px; transform: rotate(18deg); }
.w-s3 .s3-led { left: 150px; top: 196px; transform: rotate(-8deg); }

/* seated track pager (kit 12.9) on the Next row: groove centre on the cap-height centre of "Next" */
.w-row > .va-track { transform: translateY(-1px); }
/* the track on black: groove rim and key face one step lighter than the kit default, so it reads at a glance */
.w-row .va-track__groove { box-shadow: inset 0 1px 1px var(--color-alpha-black-88), inset 0 -1px 0 var(--color-alpha-white-4), 0 0 0 1px var(--color-alpha-white-16); }
.w-row .va-track__key { background: var(--color-neutral-600); }
/* ON-02 loading: the card's shape in skeleton until the illustrations arrive */
.w-sk { position: absolute; left: 0; right: 0; top: 0; height: 620px; z-index: 3; overflow: hidden; border-radius: 0 0 32px 32px; background: var(--color-brand-ink); }
.w-sk__art { position: absolute; left: var(--app-gutter); right: var(--app-gutter); top: calc(var(--app-safe-top) + 24px); height: 300px; border-radius: var(--radius-lg, 16px); }
.w-sk__copy { position: absolute; left: var(--app-gutter); right: var(--app-gutter); bottom: 32px; display: grid; gap: 12px; }
.w-scr:not(.is-loading) .w-sk { display: none; }

/* =====================================================================
   LO-03 · the next city race (owner pick C, 30 Oct · explore/lo03.html)
   Scoped .ob-race. One lilac fill per view (the foot button). Accra isn't live: no amber.
   No dot field behind it (.is-race hides the field). Real city photos (img/CREDITS.md), never game captures.
   ===================================================================== */
.ob-loc.is-race .ob-loc__field .va-dots { display: none; }
.ob-race { --race-cols: 56; }
.ob-race .ob-race__kick { display: flex; align-items: center; gap: 6px; color: var(--color-text-secondary); font-size: var(--app-sm); line-height: 1; }
.ob-race .ob-race__kick .va-i { width: 16px; height: 16px; color: var(--app-accent); }
.ob-race .ob-race__h { margin: 10px 0 0; font: var(--font-weight-extrabold) var(--app-h1)/1.05 var(--font-family-display); letter-spacing: var(--type-h2-letter-spacing); }
.ob-race .ob-race__sub { margin: 8px 0 0; font-size: var(--app-sm); line-height: 1.45; color: var(--color-text-secondary); max-width: 340px; }

/* chamfered board: hairline frame + black face */
.ob-race__board, .ob-race__ticket { position: relative; isolation: isolate; --c: 14px; }
.ob-race__board::before, .ob-race__board::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.ob-race__board::before { inset: 0; background: var(--color-alpha-white-16); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.ob-race__board::after { inset: 1px; background: var(--color-brand-black); clip-path: polygon(calc(var(--c) - 0.6px) 0, 100% 0, 100% calc(100% - var(--c) + 0.6px), calc(100% - var(--c) + 0.6px) 100%, 0 100%, 0 calc(var(--c) - 0.6px)); }
.ob-race__board { margin-top: 20px; padding: 2px 14px 12px; }
.ob-race__bh { display: flex; align-items: center; justify-content: space-between; margin-right: -8px; }
.ob-race__bh .va-hud i { font-style: normal; color: var(--app-accent); padding: 0 2px; }
.ob-race__share { color: var(--color-text-primary); }

/* lanes */
.ob-race__lane { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: start; padding: 13px 0; --led-size: 16px; --led-on: var(--color-lilac-300); --led-off: var(--color-alpha-white-8); }
.ob-race__lane.has-thumb { grid-template-columns: 22px 44px minmax(0, 1fr); column-gap: 10px; }
.ob-race__rk { font: var(--font-weight-extrabold) 20px/1 var(--font-family-display); color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); padding-top: 2px; }
.ob-race__thumb { width: 44px; height: 44px; object-fit: cover; display: block; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.ob-race__thumb--code { display: grid; place-items: center; background: var(--color-neutral-900); box-shadow: inset 0 0 0 1px var(--color-alpha-white-10); --led-size: 10px; --led-on: var(--color-lilac-300); }
.ob-race__l { min-width: 0; display: grid; gap: 9px; }
.ob-race__lt { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.ob-race__lt b { font: var(--font-weight-semibold) var(--app-body)/1.2 var(--font-family-body); white-space: nowrap; }
.ob-race__n { margin-left: auto; display: inline-flex; }
.ob-race__tag { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--app-accent); white-space: nowrap; background: var(--color-alpha-black-88, #000000E0); box-shadow: inset 0 0 0 1px var(--color-lilac-600);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%); }
.ob-race__tag .va-i { width: 13px; height: 13px; color: var(--color-status-success-fg); }
.ob-race__tag.is-vote { color: var(--color-text-primary); }
.ob-race__lane.is-you .ob-race__rk { color: var(--app-accent); }

/* the leader: a wide photo lane. The photo sits on the right ~60%, fades to black under the name,
   and carries a dark scrim so the LED count and the bar keep 4.5:1. */
.ob-race__lane.is-lead { isolation: isolate; margin: 4px -13px 0; padding: 16px 13px 30px; overflow: hidden; --led-size: 28px; --led-on: var(--color-brand-lilac); }
.ob-race__lane.is-lead .ob-race__rk { font-size: 28px; color: var(--app-accent); }
.ob-race__lane.is-lead .ob-race__lt { min-height: 30px; }
.ob-race__lane.is-lead .ob-race__lt b { font: var(--font-weight-bold) var(--app-h3)/1.1 var(--font-family-display); }
.ob-race__bg { position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; width: 62%; height: 100%; object-fit: cover; object-position: 60% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, transparent 0%, #000 28%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, transparent 0%, #000 28%); mask-composite: intersect; }
.ob-race__lane.is-lead::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--color-alpha-black-88) 0%, var(--color-alpha-black-45) 55%, var(--color-alpha-black-45) 100%); }
.ob-race__lane.is-lead > :not(.ob-race__bg) { position: relative; }

/* LED dot bars (lo03.js dotBar): lit = votes against the leader, "gap" = how far behind the leader */
.ob-race__bar { position: relative; }
.ob-race__bar svg { display: block; width: 100%; height: auto; overflow: visible; }
.ob-race__bar .off { fill: var(--color-alpha-white-8); }
.ob-race__bar .on { fill: var(--color-lilac-500); }
.ob-race__lane.is-lead .ob-race__bar .on { fill: var(--color-brand-lilac); }
.ob-race__lane.is-lead .ob-race__bar .off { fill: var(--color-alpha-white-16); }
.ob-race__bar .me { fill: var(--color-neutral-0); }
.ob-race__bar .gap { fill: var(--color-lilac-900); }
.ob-race__flag { position: absolute; top: calc(100% + 6px); transform: translateX(-50%); font: var(--font-weight-bold) 9px/1 var(--font-family-body); letter-spacing: 0.08em; color: var(--color-text-on-accent); background: var(--color-neutral-0); padding: 3px 4px 2px; }
.ob-race__flag::after { content: ""; position: absolute; left: 50%; top: -3px; margin-left: -3px; border: 3px solid transparent; border-bottom-color: var(--color-neutral-0); border-top: 0; }
.ob-race__gap { display: flex; align-items: center; gap: 6px; margin: 0 0 0 30px; padding: 7px 0; border-bottom: 1px dashed var(--color-alpha-white-16); font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); --led-size: 13px; --led-on: var(--color-brand-lilac); --led-off: var(--color-alpha-white-8); }
.ob-race__gap .va-i { width: 16px; height: 16px; color: var(--app-accent); transform: rotate(-90deg); }
.ob-race__gap.is-behind .va-i { transform: rotate(90deg); }

/* the ticket: stub, perforation, main */
.ob-race__ticket { display: grid; grid-template-columns: 84px minmax(0, 1fr); margin-top: 16px; min-height: 112px; --c: 12px; }
.ob-race__ticket::before, .ob-race__ticket::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.ob-race__ticket::before { inset: 0; background: var(--color-alpha-white-16);
  clip-path: polygon(var(--c) 0, 78px 0, 84px 7px, 90px 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 90px 100%, 84px calc(100% - 7px), 78px 100%, 0 100%, 0 var(--c)); }
.ob-race__ticket::after { inset: 1px; background: var(--color-neutral-900);
  clip-path: polygon(calc(var(--c) - 0.6px) 0, 77.4px 0, 83px 6.6px, 88.6px 0, 100% 0, 100% calc(100% - var(--c) + 0.6px), calc(100% - var(--c) + 0.6px) 100%, 88.6px 100%, 83px calc(100% - 6.6px), 77.4px 100%, 0 100%, 0 calc(var(--c) - 0.6px)); }
.ob-race__ticket.is-unissued::before { background: var(--color-alpha-white-10); }
.ob-race__ticket.is-unissued::after { background: var(--color-brand-black); }
.ob-race__stub { display: grid; align-content: center; justify-items: center; gap: 8px; margin: 10px 0; border-right: 1px dashed var(--color-alpha-white-16); --led-size: 20px; --led-on: var(--color-brand-lilac); --led-off: var(--color-alpha-white-8); }
.ob-race__main { padding: 12px 14px 12px 16px; display: grid; align-content: center; gap: 4px; }
.ob-race__main > b { font: var(--font-weight-bold) var(--app-h3)/1.15 var(--font-family-display); color: var(--color-text-secondary); }
.ob-race__main small { font-size: var(--app-meta); line-height: 1.35; color: var(--color-text-secondary); }
.ob-race__main small b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.ob-race__big { display: flex; align-items: flex-start; height: var(--led-size); --led-size: 38px; --led-on: var(--color-brand-lilac); --led-off: var(--color-alpha-white-8); margin: 2px 0; }
.ob-race__hash { font: var(--font-weight-extrabold) calc(var(--led-size) * 0.86)/var(--led-size) var(--font-family-display); color: var(--app-accent); margin-right: 0.08em; }
.ob-race__ok { display: inline-flex; align-items: center; gap: 3px; color: var(--color-text-primary); }
.ob-race__ok .va-i { width: 14px; height: 14px; color: var(--color-status-success-fg); }
/* the foot's quiet line under the lit button */
.ob-race__visit { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; width: 100%; color: var(--color-text-secondary); font-size: var(--app-sm); font-weight: var(--font-weight-semibold); text-decoration: none; }
.ob-race__visit .va-i { width: 16px; height: 16px; color: var(--color-text-tertiary); }
.ob-race__visit:hover { color: var(--color-text-primary); }
@media (forced-colors: active) { .ob-race__board::before, .ob-race__ticket::before { background: CanvasText; } }

/* ---------- Light theme (kit 1.9) · the forms (AC-01 lower half, AC-02, ID-01 panel, AC-03, AC-04, ID-04, LO-04, LO-05)
   follow the theme; the avatar stage, the system keyboard and the illustrated key art stay as drawn.
   ON-01, ON-02 and LO-01…03 are all media and carry html[data-theme-lock] (always dark). ---------- */
[data-theme="light"] .ob-id, [data-theme="light"] .ob-id__panel { background: var(--color-bg-canvas); }
[data-theme="light"] .ob-key:not(.ob-key--illo) .ob-key__ll { color: var(--color-neutral-50); }
[data-theme="light"] .ob-id__foot { background: var(--color-bg-canvas); }
[data-theme="light"] .ob-key__ll:not(.ob-key--illo *) { color: var(--color-neutral-50); }