/* Provider/layout compatibility and states absent from the static mockup.
   All design tokens and reference CSS remain in design.css unchanged. */
html[data-v3] { overflow: visible; background: var(--bg); color: var(--text); }
html[data-v3], html[data-v3] body { width: auto; max-width: none; position: static; }
html[data-v3] body { background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--font); }
html[data-v3] .v3-root { color: var(--text); font: 400 15px/1.5 var(--font); }
html[data-v3] .btn { text-transform: none; }
/* The legacy global .toast (min-width: fit-content, nowrap) would stretch a toast past its stack on phones */
html[data-v3] .toast { position: absolute; min-width: 0; white-space: normal; }
/* Preserve the complete seller's slab/card when genuine catalog cutouts are
   unavailable. The image and its Seller photo attribution remain unchanged. */
.v3-root .cl-art.cl-seller-photo { padding: 16px 16px 40px; }
.v3-root .cl-seller-photo > .cl-ph { object-fit: contain; min-height: 0; }
.v3-root .cl-card:hover .cl-seller-photo > .cl-ph { transform: none; }
@media (max-width: 760px) { .v3-root .cl-art.cl-seller-photo { padding: 12px 12px 40px; } }
.v3-root .stage { scroll-behavior: auto; }
.v3-root .sheet { max-height: 85dvh; overflow: auto; }
@media (min-width: 761px) { .v3-root .sheet.sheet-wallet { max-width: 380px; } }
.v3-root .wallet-list { display: grid; gap: 6px; padding: 8px 0 0; }
.v3-root .wallet-list .ob-wr { width: 100%; text-align: left; }
.v3-root .wallet-list .ob-wr:hover { background: var(--s2); }
.v3-root .wallet-list .wlt { width: 32px; height: 32px; min-width: 32px; flex: none; border-radius: 9px; }
.v3-root .wallet-list .wlt img { width: 32px; height: 32px; max-height: 32px; object-fit: contain; }
.v3-root .v3-locker-search { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 8px; }
.v3-root .v3-locker-search .fld { flex: 1; min-width: 0; }
.v3-root .v3-locker-search .btn { height: 44px; flex: none; }
.v3-root .v3-travel-access { width: min(680px, 100%); margin: 28px auto 0; padding: 32px; }
.v3-root .v3-travel-access h3 { margin: 18px 0 8px; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.035em; }
.v3-root .v3-travel-access p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.v3-root .v3-travel-access .ck-form { opacity: 1; filter: none; padding-top: 24px; }
.v3-root .v3-travel-access .full { grid-column: 1 / -1; }
.v3-root .v3-travel-wallet { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--s2); color: var(--text-2); font-size: 13px; }
.v3-root .v3-travel-status { display: grid; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.v3-root .v3-travel-status h4 { font-size: 19px; font-weight: 550; line-height: 1.3; }
.v3-root .v3-travel-status small { color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 760px) { .v3-root .v3-travel-access { margin-top: 20px; padding: 24px 20px; } .v3-root .v3-travel-access h3 { font-size: 25px; } }
/* Store titles run long; two lines in the cart, the full one on hover */
.v3-root .dr-name { overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.v3-root .v3-cart-note { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.v3-root .sheet-drag { touch-action: pan-x; }
@media (max-width: 760px) { html[data-v3] .drawer { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .v3-root * { scroll-behavior: auto !important; } }

/* The established airport combobox retains its IO/accessibility behavior. Its
   legacy fixed colors inherit V3 tokens inside the new picker presentation. */
.v3-airport-sheet input[role="combobox"] { background: var(--s2); color: var(--text); border-color: var(--line); }
.v3-airport-sheet input[role="combobox"]:focus-visible { outline: 0; box-shadow: none; }
.v3-airport-sheet .relative > .absolute { position: relative; background: var(--s1); border-color: var(--line); color: var(--text); }
.v3-airport-sheet [role="option"] { color: var(--text); }
.v3-airport-sheet [role="option"]:hover, .v3-airport-sheet [role="option"][aria-selected="true"] { background: var(--s2); color: var(--text); }
.v3-airport-sheet [role="option"][aria-disabled="true"] { color: var(--text-3); }
.v3-airport-combobox { display: flex; flex-direction: column; min-height: 0; width: 100%; }
.v3-airport-combobox .tr-q { display: flex; align-items: center; gap: 4px; padding-bottom: 6px; }
.v3-airport-combobox .tr-q > .icon-btn { width: 44px; height: 44px; flex: none; }
.v3-airport-combobox .tr-q label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 48px; padding: 0 6px 0 16px; border-radius: 99px; background: var(--s2); }
.v3-airport-combobox .tr-q label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.v3-airport-combobox .tr-ql { font-size: 13px; font-weight: 600; color: var(--text-3); }
.v3-airport-combobox .tr-q input { flex: 1; min-width: 0; height: 100%; padding: 0; font-size: 16px; background: none; border: 0; outline: 0; }
.v3-airport-combobox .tr-clear { display: grid; place-items: center; width: 36px; height: 36px; flex: none; color: var(--text-3); }
.v3-airport-combobox .tr-clear .icon { width: 15px; height: 15px; }
.v3-airport-combobox .tr-q input:placeholder-shown + .tr-clear { visibility: hidden; }
.v3-airport-combobox .tr-list { min-height: 0; overflow-y: auto; }
.v3-airport-combobox .tr-list [role="status"]:empty { display: none; }
@media (max-width: 760px) { .v3-airport-combobox { flex: 1; } }
/* Reserve the scrollbar's space so opening "New address" doesn't shift the column sideways */
.v3-root .ck-main { scrollbar-gutter: stable; }
/* Search only needs room for a page name per row */
@media (min-width: 761px) { .v3-root .palette.palette-search { max-width: 420px; } }
/* The link field's one button morphs between Paste, Clear and Cancel. The labels share one grid cell,
   so the button keeps its width; a label leaving moves away from the one arriving */
.v3-root .lb-paste { display: inline-grid; place-items: center; transition: color .2s, background-color .2s; }
.v3-root .lb-paste > .lb-pm { grid-area: 1 / 1; opacity: 0; filter: blur(4px); transform: translateY(6px); pointer-events: none; transition: opacity .2s, filter .2s, transform .3s var(--spring); }
.v3-root .lb-paste > .lb-pm:has(~ .on) { transform: translateY(-6px); }
.v3-root .lb-paste > .lb-pm.on { opacity: 1; filter: none; transform: none; }
.v3-root .lb-paste[data-mode="cancel"] { color: var(--text); }
@media (max-width: 760px) { .v3-root .lb-paste[data-mode="paste"] { display: none; } .v3-root .lb-paste:not([data-mode="paste"]) { animation: fade .25s var(--ease) both; } }
@media (prefers-reduced-motion: reduce) { .v3-root .lb-paste > .lb-pm { transition: opacity .2s; transform: none !important; filter: none !important; } }
/* Header pills hold one line; "Connect wallet" is longer than the mockup's handles */
.v3-root .top :is(.hbtn, .nav a) { white-space: nowrap; }
/* Earned labels hold one line */
.v3-root .ck-earn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Phones wrap the order line; a dot left at a line's end reads as a stray mark, so the spacing alone separates items */
@media (max-width: 760px) { .v3-root .ck-meta > i { display: none; } .v3-root .ck-meta { gap: 4px 16px; } }
/* The referral title holds one line; the smallest phones get the short form */
.v3-root .ck-share .tx b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-root .ck-share-short { display: none; }
@media (max-width: 380px) { .v3-root .ck-share-long { display: none; } .v3-root .ck-share-short { display: inline; } }
/* Settled rolling numbers are plain text; the digit columns show only while a value changes (Roll, runtime roll) */
.v3-root .roll:not(.rolling) .dg > i { visibility: visible; }
.v3-root .roll:not(.rolling) .dg > b { visibility: hidden; }
/* "Sort by" is hidden above phone width (the sort menu sits beside Filters), so the section after it is the first one shown */
@media (min-width: 761px) { .v3-root .cl-fp .cl-fp-sort + section { border-top: 0; } }
/* The label is centred on its capitals, so lowercase "Connect wallet" read low beside the centred avatar; lift it to the optical middle */
.v3-root .hbtn.wallet-btn .handle { translate: 0 -1px; }
/* Phones: toasts sit above the tab bar, but whenever something holds the bottom of the screen
   (the same cases that hide the tab bar: a sheet, menu, drawer or the keyboard) they drop in from the top,
   stacking downwards, so they never cover what is being tapped */
@media (max-width: 760px) {
  html:has(.dd.open, .tr-pop.open, .drawer.open, .overlay.open, :is(input:not([type="range"], [type="checkbox"], [type="radio"]), textarea):focus) .toasts { top: calc(env(safe-area-inset-top) + 12px); bottom: auto; }
  html:has(.dd.open, .tr-pop.open, .drawer.open, .overlay.open, :is(input:not([type="range"], [type="checkbox"], [type="radio"]), textarea):focus) .toast { top: 0; bottom: auto; transform-origin: 50% 100%; transform: translateY(calc(var(--y, 0px) * -1)) scale(var(--s, 1)); }
}
/* Phones use one 16px side gutter. The hidden wallet button still left its empty #wallet slot in the header row,
   adding a second 8px gap after the points pill; the tab bar was 12px in from the edges */
@media (max-width: 760px) {
  .v3-root .top-right > #wallet { margin-left: -8px; }
  .v3-root .tabbar { width: min(440px, calc(100% - 32px)); }
}
/* Phones: Collect's floating filter bar keeps the 16px gutter too. It no longer reaches outwards, so its contents
   ease 6px inwards as the pill appears */
@media (max-width: 760px) {
  .v3-root .cl-bar-in { margin: 0; padding: 6px 0; transition: background-color .35s var(--ease), box-shadow .35s var(--ease), transform .5s var(--spring), padding .35s var(--ease); }
  .v3-root .cl-bar.stuck .cl-bar-in { padding: 6px; }
}
/* Phones: the page fades out towards the tab bar. It is a mask, not a colour, so the animated background shows
   through in both themes: fully shown until a little above the bar, partly through it, nearly gone below it.
   The mask sits on the page's content blocks rather than the stage: a mask on an ancestor would blind the sticky
   glass bars' backdrop blur. AppShell marks those blocks [data-fade] and gives each its --fade-end, the screen's
   bottom edge inside it; until that is known there is no fade.
   A light blur sits behind the bar on top of that. Both step aside whenever the tab bar does */
@media (max-width: 760px) {
  .v3-root .stage { padding-bottom: 64px; }
  .v3-root .stage [data-fade] {
    --fade: linear-gradient(to bottom, #000 calc(var(--fade-end) - var(--tb-room) - 40px), rgba(0, 0, 0, .7) calc(var(--fade-end) - var(--tb-gap) - var(--tb-h)), rgba(0, 0, 0, .3) calc(var(--fade-end) - var(--tb-gap) - var(--tb-h) / 2), rgba(0, 0, 0, .06) calc(var(--fade-end) - var(--tb-gap)), transparent var(--fade-end));
    -webkit-mask-image: var(--fade); mask-image: var(--fade);
  }
  .v3-root .app::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; height: calc(var(--tb-room) + 24px); pointer-events: none;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to top, #000 calc(var(--tb-gap) + var(--tb-h) / 2), transparent); mask-image: linear-gradient(to top, #000 calc(var(--tb-gap) + var(--tb-h) / 2), transparent);
    transition: opacity .3s;
  }
  html:has(.dd.open, .tr-pop.open, .drawer.open, .overlay.open, :is(input:not([type="range"], [type="checkbox"], [type="radio"]), textarea):focus) .v3-root .stage [data-fade],
  .v3-root .app[data-view="checkout"] .stage [data-fade] { -webkit-mask-image: none; mask-image: none; }
  html:has(.dd.open, .tr-pop.open, .drawer.open, .overlay.open, :is(input:not([type="range"], [type="checkbox"], [type="radio"]), textarea):focus) .v3-root .app::after,
  .v3-root .app[data-view="checkout"]::after { opacity: 0; }
}
/* Phones: the store chip wraps under "Buy anything on" and nearly touched its descenders; a little air between them */
@media (max-width: 760px) { .v3-root h1 .m-br + .hchip { margin-top: .1em; } }
/* Phones: the tab bar is a full pill like the other floating controls; the active highlight stays concentric with it
   (both are fully round: half their height) */
@media (max-width: 760px) { .v3-root .tabbar { border-radius: 999px; } .v3-root .tabbar > .glide { border-radius: 999px; } }
/* The active tab's highlight is a plain fill with no outline, a shade brighter to make up for the lost edge */
@media (max-width: 760px) { .v3-root .tabbar > .glide { box-shadow: none; background: rgba(255, 255, 255, .1); } html[data-theme="light"] .v3-root .tabbar > .glide { background: rgba(20, 22, 22, .06); } }
/* Overview: the Cashback card flips to Stockback with a switch in its header, in place of the card's label. The
   switch sits a little left so its first label lines up with the card text; the rows are a hairline list */
.v3-root .ac-purse { margin-left: -3px; }
.v3-root .ac-purse button { height: 28px; padding: 0 12px; font-size: 13px; }
.v3-root .ac-sb-rows { margin-top: 20px; border-top: 1px solid var(--line); }
.v3-root .ac-sb-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.v3-root .ac-sb-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.v3-root .ac-sb-top b { font-weight: 600; }
.v3-root .ac-sb-row .ac-sub { margin-top: 3px; font-size: 12.5px; white-space: normal; }
.v3-root .ac-sb-row .ac-d-act { flex-wrap: wrap; align-items: center; margin-top: 10px; }
.v3-root .ac-sb-rows + .ac-more { margin-top: 12px; }
/* Account cashback: no disabled button. Until claims open, a quiet "Soon" tag sits on the Claimable label; the card
   closes on a footer row (all-time use, and the claim button only when there is something to claim), pinned to the
   card's bottom, level with "View leaderboard", which is pinned to the bottom of the points card beside it */
.v3-root .ac-split small .ck-tag { height: 17px; margin-left: 6px; padding: 0 6px; font-size: 10.5px; vertical-align: 1px; }
.v3-root .ac-grid2 > .ac-card { display: flex; flex-direction: column; }
.v3-root .ac-grid2 > .ac-card > .ac-perks { margin-top: auto; }
.v3-root .ac-cb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; font-size: 13px; line-height: 20px; color: var(--text-3); }
.v3-root .ac-cb-foot b { margin-left: 4px; font-weight: 600; color: var(--text-2); }
.v3-root .ac-cb-foot .btn { flex: none; }
.v3-root .ac-cb-foot + .ac-note { margin-top: 8px; }
/* Order rows are separate grids, so a column sized to its content ("auto") lands differently in each row: a longer
   total pushed that row's status left. The total gets a fixed column, wide enough for "$10,000.00 USD", so status
   bars and prices line up down the list */
@container orders (max-width: 760px) and (min-width: 621px) {
  .v3-root .ac-order { grid-template-columns: 62px minmax(0, 1fr) 150px 124px 32px; }
}
/* Phones: the stuck Collect bar is glass again. design.css made it solid because a backdrop filter on the bar would
   trap its bottom-sheet menus inside it; the glass now lives on a layer behind the bar instead, as the account
   rail's does, so the sheets still reach the whole screen */
@media (max-width: 760px) {
  .v3-root .cl-bar-in { position: relative; isolation: isolate; }
  .v3-root .cl-bar.stuck .cl-bar-in { background: transparent !important; }
  .v3-root .cl-bar-in::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
    background: rgba(18, 18, 18, .72); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  }
  .v3-root .cl-bar.stuck .cl-bar-in::before { opacity: 1; }
  html[data-theme="light"] .v3-root .cl-bar-in::before { background: rgba(255, 255, 255, .72); }
}

/* Stageshow demos: each host sizes itself to its stage, whose wide and compact designs live in src/components/v3/demos */
.v3-root .mc-chat { width: 100%; max-width: 560px; height: auto; min-height: 400px; justify-self: center; }
.v3-root .ab-demo { min-height: 300px; margin-top: 48px; }
.v3-root .ab-demo + .ab-stats { margin-top: 24px; }
@media (max-width: 760px) {
  .v3-root .ex-bento { grid-template-rows: auto; }
  .v3-root .ex-show { min-height: 400px; }
  .v3-root .ab-demo { margin-top: 36px; }
}

/* The product demos. The kit's tokens take the app's, so a stage follows the app's theme. */
.sd .ss-stage {
  --ss-canvas: var(--s2);
  --ss-surface: var(--s1);
  --ss-chrome: var(--s2);
  --ss-well: var(--s2);
  --ss-line: var(--line);
  --ss-ink-1: var(--s2);
  --ss-ink-2: var(--s3);
  --ss-text: var(--text-2);
  --ss-text-strong: var(--text);
  --ss-text-faint: var(--text-3);
  --ss-icon: var(--text-3);
  --ss-accent: var(--text);
  --ss-font: var(--font);
  --ss-mono: var(--mono);
  --ss-radius-window: 16px;
  overflow: hidden;
  background: transparent;
  color: var(--text);
  font: 400 15px/1.5 var(--font);
}
.sd .ss-stage *, .sd .ss-stage *::before, .sd .ss-stage *::after { box-sizing: border-box; }
.sd img { display: block; max-width: 100%; }
.sd [data-pressed].btn, .sd .ex-me[data-pressed], .sd .sd-new[data-pressed] { transform: scale(.96); }
.sd .btn { transition: transform .2s var(--spring), background-color .15s, color .15s, opacity .25s; }
.sd [data-cursor] { cursor: default; }

/* Extension: the window fills the tile and runs off its foot */
.sd-ext .ex-win { top: 32px; left: 32px; width: 596px; height: 560px; scale: 1; }
.sd-ext .ex-page { grid-template-columns: 236px minmax(0, 1fr); gap: 48px; }
.sd-ext .ex-win.out .ex-page .ex-swap { opacity: 0; filter: blur(6px); transform: translateY(6px); }
.sd-ext .ex-me { transition: transform .2s var(--spring), background-color .15s; }
.sd-ext .ex-me[data-open] { background: var(--tint-2); }
.sd-ext .ex-pop { transform-origin: calc(100% - 24px) -8px; transition: opacity .18s, transform .32s var(--spring), visibility 0s .18s; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.96); }
.sd-ext .ex-pop[data-open] { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .32s var(--spring), visibility 0s; }
.sd-ext .ss-stage[data-layout="compact"] .ex-win { top: 20px; left: 16px; width: 326px; height: 520px; }
.sd-ext .ss-stage[data-layout="compact"] .ex-tool { gap: 8px; padding: 0 8px 0 10px; }
.sd-ext .ss-stage[data-layout="compact"] .ex-tool > .icon:not(:first-child) { display: none; }
.sd-ext .ss-stage[data-layout="compact"] .ex-tab { flex: 1; width: auto; min-width: 0; }
.sd-ext .ss-stage[data-layout="compact"] .ex-url { min-width: 0; overflow: hidden; white-space: nowrap; }
.sd-ext .ss-stage[data-layout="compact"] .ex-page { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 18px; }
.sd-ext .ss-stage[data-layout="compact"] .ex-photo { height: 150px; aspect-ratio: auto; }
.sd-ext .ss-stage[data-layout="compact"] .ex-photo img { height: 150px; width: auto; }
.sd-ext .ss-stage[data-layout="compact"] .ex-copy { gap: 8px; padding: 0; }
.sd-ext .ss-stage[data-layout="compact"] .ex-copy .t { font-size: 15px; }
.sd-ext .ss-stage[data-layout="compact"] .ex-copy .p { font-size: 20px; }
.sd-ext .ss-stage[data-layout="compact"] .ex-pop { top: 88px; right: 8px; width: 310px; }

/* MCP chat */
.sd-chat-in { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sd-chat .mc-chat-h { gap: 8px; }
.sd-new { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--s2); color: var(--text-2); transition: transform .2s var(--spring); }
.sd-new .icon { width: 14px; height: 14px; }
.sd-chat .mc-log { display: block; flex: 1; padding: 0 20px; margin-top: 20px; margin-bottom: 14px; -webkit-mask: none; mask: none; }
.sd-chat .mc-log[data-over] { -webkit-mask: linear-gradient(transparent, #000 64px); mask: linear-gradient(transparent, #000 64px); }
.sd-chat .mc-log > * { animation: none; }
.sd-thread { display: flex; flex-direction: column; gap: 14px; }
.sd-line { padding-top: 14px; }
.sd-end { display: flex; justify-content: flex-end; }
.sd-chat .mc-a p { margin: 0; }

/* About: one quiet checkout, whose skeleton resolves in place */
.sd-order .ss-stage { -webkit-mask: linear-gradient(#000 calc(100% - 24px), transparent); mask: linear-gradient(#000 calc(100% - 24px), transparent); }
.sd-order-win { position: absolute; top: 12px; left: 40px; width: 560px; height: 420px; box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -20px rgba(0, 0, 0, .5); }
.sd-order-in { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 20px 24px; background: var(--s1); }
.sd-link { flex: none; width: 100%; }
.sd-link .ss-field__box { background: var(--s2); }
.sd-item { display: flex; align-items: center; gap: 14px; }
.sd-th { width: 64px; height: 64px; flex: none; padding: 6px; border-radius: 14px; background: var(--s2); display: grid; place-items: center; transition: background-color .3s; }
.sd-th img { max-height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s; }
.sd-th[data-on] { background: #fff; }
.sd-th[data-on] img { opacity: 1; }
.sd-name { flex: 1; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.sd-name .ss-states__item { min-width: 0; }
.sd-bars { display: grid; gap: 8px; }
.sd-named { display: block; min-width: 0; }
.sd-named b { display: block; font-size: 15px; font-weight: 550; line-height: 1.3; white-space: normal; text-wrap: balance; }
.sd-named small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; color: var(--text-3); }
.sd-fav { width: 14px; height: 14px; flex: none; border-radius: 4px; display: grid; place-items: center; }
.sd-fav svg { width: 74%; height: 74%; }
.sd-lines { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 13.5px; }
.sd-lines dt { color: var(--text-3); }
.sd-lines dd { margin: 0; display: flex; justify-content: flex-end; align-items: center; color: var(--text); }
.sd-pay { flex: none; width: 100%; height: 46px; border-radius: 14px; font-size: 14.5px; font-weight: 600; pointer-events: none; }
.sd-pay.off { opacity: .4; }
.sd-track { position: absolute; left: 12px; right: 12px; bottom: 76px; padding: 18px; border-radius: 18px; background: var(--s2); box-shadow: 0 0 0 1px var(--line-2), 0 -16px 40px -12px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .2s, transform .4s var(--ease), visibility 0s .2s; }
.sd-track[data-on] { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .4s var(--ease), visibility 0s; }
.sd-track-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-track-h > div { min-width: 0; }
.sd-track-h b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.sd-track-h small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-track-h .btn { flex: none; pointer-events: none; }
.sd-track ol { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; padding: 0; list-style: none; }
.sd-track ol::before, .sd-track ol::after { content: ""; position: absolute; left: 12px; top: 11px; height: 2px; border-radius: 2px; background: var(--line-2); width: 66.66%; }
.sd-track ol::after { background: var(--up); width: calc(33.33% * var(--p)); transition: width .55s var(--ease); }
.sd-track li { position: relative; z-index: 1; display: grid; gap: 7px; justify-items: start; font-size: 12.5px; color: var(--text-3); transition: color .25s; }
.sd-track li[data-on] { color: var(--text); }
.sd-track li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); color: transparent; transition: background-color .25s, color .25s; }
.sd-track li[data-on] i { background: var(--up); color: #062b16; }
.sd-track li .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.sd-wallet { top: auto; right: 12px; left: auto; bottom: 76px; width: 330px; }
.sd-wallet .mc-sheet-h img { width: 22px; height: 22px; border-radius: 6px; }
.sd-order .ss-stage[data-layout="compact"] .sd-order-win { top: 14px; left: 16px; width: 326px; height: 440px; }
.sd-order .ss-stage[data-layout="compact"] .sd-order-in { padding: 16px; gap: 14px; }
.sd-order .ss-stage[data-layout="compact"] .sd-wallet { left: 8px; right: 8px; width: auto; bottom: 88px; }
.sd-order .ss-stage[data-layout="compact"] .sd-track { left: 8px; right: 8px; bottom: 102px; }
.sd-wallet:not(.on) { opacity: 0; visibility: hidden; }
.sd-wallet { transition: transform .4s var(--ease), opacity .2s, visibility 0s .2s; }
.sd-wallet.on { transition: transform .4s var(--ease), opacity .2s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .sd .on > .draw path, .sd .draw.on path { stroke-dashoffset: 0; animation: none; } }
.sd-order .ss-stage[data-layout="compact"] .sd-wallet p { display: none; }
.sd-order .ss-stage[data-layout="compact"] .sd-wallet .amt { margin-top: 8px; }
html[data-theme="light"] .sd-order-win { box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -24px rgba(20, 22, 22, .25); }
html[data-theme="light"] .sd-track { box-shadow: 0 0 0 1px var(--line-2), 0 -12px 32px -16px rgba(20, 22, 22, .25); }

/* While a demo's code loads: a quiet tile at the demo's own size, which the stage then fades over */
.sd-wait { display: block; width: 100%; border-radius: 20px; background: linear-gradient(100deg, var(--s2) 40%, var(--s3) 50%, var(--s2) 60%) 0 0 / 300% 100%; animation: shimmer 1.8s linear infinite; }
.sd-wait-ext { aspect-ratio: 660 / 520; }
.sd-wait-chat { aspect-ratio: 1; }
.sd-wait-order { aspect-ratio: 640 / 384; }
.sd.ss-fit { animation: sd-in .35s var(--ease) both; }
@keyframes sd-in { from { opacity: 0; } }
@media (max-width: 560px) {
  .sd-wait-ext { aspect-ratio: 358 / 470; }
  .sd-wait-order { aspect-ratio: 358 / 400; }
}
@media (max-width: 480px) {
  .sd-wait-chat { aspect-ratio: 358 / 540; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-wait, .sd.ss-fit { animation: none; }
}