button, input[type="button"], input[type="submit"], [role="button"] { cursor: pointer; user-select: none; -webkit-user-select: none; }
  button[disabled], input[type="button"][disabled], input[type="submit"][disabled], [role="button"][disabled] { cursor: default; }
  body { --maxw: 68rem; --half-maxw: 34rem; --coach-safe-top: env(safe-area-inset-top, 0px); --coach-safe-right: env(safe-area-inset-right, 0px); --coach-safe-bottom: env(safe-area-inset-bottom, 0px); --coach-safe-left: env(safe-area-inset-left, 0px); }
  .run-hero { max-width: 66rem; }
  .run-note { font-family: var(--sans); color: var(--muted); font-size: .94rem; line-height: 1.55; }

  .run-game { display: grid; gap: 1rem; min-width: 0; margin: 2rem 0; }
  .run-control-panel { display: grid; gap: .58rem; min-width: 0; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface) 96%, #fff); box-shadow: 0 10px 24px rgba(31, 36, 48, .055); padding: .62rem; }
  .run-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .72rem; min-width: 0; }
  .run-controls.is-next-docked::after { content: ""; width: 7.5rem; }
  .run-controls .btn { display: inline-flex; align-items: center; justify-content: center; gap: .34rem; min-width: 0; min-height: 2.08rem; border-radius: 999px; padding: .42rem .72rem; font-size: .82rem; line-height: 1; box-shadow: 0 5px 12px rgba(31, 36, 48, .055); cursor: pointer; }
  .run-controls .btn.primary { padding-inline: .9rem; }
  .run-controls .btn.alt { background: var(--surface); color: var(--muted); border: 1px solid var(--line-strong); }
  .run-controls .btn.alt::before { content: "<"; font-weight: 950; }
  .run-controls .btn.run-next::before { content: none; }
  .run-controls .btn.run-next::after { content: ">"; font-weight: 950; }
  .run-controls .btn.primary::after { content: ">"; font-weight: 950; }
  .run-controls .btn.primary.is-action-cue { background: color-mix(in srgb, var(--accent-soft) 72%, #fff); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); box-shadow: none; }
  .run-controls .btn.primary.is-action-cue::after { content: ""; }
  .run-controls .btn.primary.is-action-cue[disabled] { opacity: 1; cursor: default; }
  .run-progress-summary { display: flex; align-items: center; justify-content: center; gap: .38rem; min-width: 0; color: var(--ink-soft); font-family: var(--sans); line-height: 1.05; white-space: nowrap; text-align: center; overflow: hidden; }
  .run-progress-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-family: var(--sans); font-size: .96rem; font-weight: 950; line-height: 1.05; }
  .run-progress-meta { display: contents; }
  .run-progress-count { color: var(--accent-ink); font-family: var(--mono); font-size: .78rem; font-weight: 950; letter-spacing: 0; line-height: 1; }
  .run-progress-stage { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-family: var(--sans); font-size: .78rem; font-weight: 850; line-height: 1.05; white-space: nowrap; }
  .run-progress-sep { color: var(--faint); font-weight: 800; }
  .run-progress-count,
  .run-progress-sep,
  .run-progress-utilities { flex: 0 0 auto; }
  .run-progress-utilities { display: inline-flex; align-items: center; gap: .32rem; min-width: 0; }
  .event-navigator-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .34rem; width: fit-content; border: 1px solid color-mix(in srgb, var(--line-strong) 74%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--muted); padding: .18rem .48rem .18rem .54rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62); cursor: pointer; transition: color .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease; }
  .event-navigator-toggle::after { content: ""; width: .4rem; height: .4rem; border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: translateY(-.08rem) rotate(45deg); transform-origin: center; transition: transform .16s ease; }
  .event-navigator-toggle:hover { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface)); transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 10px color-mix(in srgb, var(--accent) 6%, transparent); }
  .event-navigator-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 26%, transparent); outline-offset: 2px; }
  .event-navigator-toggle.is-open { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface)); }
  .event-navigator-toggle.is-open::after { transform: translateY(.08rem) rotate(-135deg); }
  .event-nav-label { min-width: 0; color: inherit; font-size: .72rem; line-height: 1.05; font-weight: 850; letter-spacing: 0; white-space: nowrap; }
  .simulator-fullscreen-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .36rem;
    width: fit-content;
    min-width: 2.75rem;
    min-height: 2.75rem;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--line-strong) 76%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    color: var(--muted);
    padding: .34rem .64rem;
    font: 850 .72rem/1 var(--sans);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
    cursor: pointer;
    transition: color .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
  }
  .simulator-fullscreen-toggle:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
    color: var(--accent-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 5px 12px color-mix(in srgb, var(--accent) 10%, transparent);
    transform: translateY(-1px);
  }
  .simulator-fullscreen-toggle:focus-visible {
    border-color: var(--accent);
    outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
    outline-offset: 2px;
    color: var(--accent-ink);
  }
  .simulator-fullscreen-toggle[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
    color: var(--accent-ink);
  }
  .simulator-fullscreen-icon {
    position: relative;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    background:
      linear-gradient(currentColor, currentColor) left top / .38rem 2px no-repeat,
      linear-gradient(currentColor, currentColor) left top / 2px .38rem no-repeat,
      linear-gradient(currentColor, currentColor) right top / .38rem 2px no-repeat,
      linear-gradient(currentColor, currentColor) right top / 2px .38rem no-repeat,
      linear-gradient(currentColor, currentColor) left bottom / .38rem 2px no-repeat,
      linear-gradient(currentColor, currentColor) left bottom / 2px .38rem no-repeat,
      linear-gradient(currentColor, currentColor) right bottom / .38rem 2px no-repeat,
      linear-gradient(currentColor, currentColor) right bottom / 2px .38rem no-repeat;
    transition: transform .16s ease;
  }
  .simulator-fullscreen-toggle[aria-pressed="true"] .simulator-fullscreen-icon {
    transform: scale(.72);
  }
  .simulator-fullscreen-label { white-space: nowrap; }
  .btn.alt { background: var(--ink-soft); cursor: pointer; }
  .btn.soft { background: var(--surface); color: var(--accent-ink); border: 1px solid var(--line-strong); cursor: pointer; }
  .btn[disabled] { opacity: .45; cursor: default; transform: none; filter: none; }

  .stage-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: start; gap: .42rem; min-width: 0; margin-top: .5rem; font-family: var(--sans); }
  .stage-rail[hidden] { display: none; }
  .stage-group { display: grid; align-content: start; min-width: 0; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--bg) 88%, #fff); padding: .16rem; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
  .stage-group.open { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); background: color-mix(in srgb, var(--surface) 88%, #fff); }
  .stage-group.active { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 52%, var(--surface)), color-mix(in srgb, var(--surface) 94%, #fff)); box-shadow: 0 7px 16px color-mix(in srgb, var(--accent) 8%, transparent); }
  .stage-group.complete { border-color: color-mix(in srgb, var(--good) 34%, var(--line)); }
  .stage-group[data-stage-mode="omen"],
  .stage-group-steps[data-stage-mode="omen"] {
    --bg: #f3e2c8;
    --surface: #fcefd9;
    --ink: #2b241d;
    --ink-soft: #4b4036;
    --muted: #6b5b4d;
    --faint: #725f50;
    --line: #e1c59f;
    --line-strong: #c99c66;
    --accent: #ae510f;
    --accent-soft: #f2c48e;
    --accent-ink: #725000;
    --good: #0d7b73;
    --good-soft: #def2ed;
    color-scheme: light;
  }
  .stage-group[data-stage-mode="themis"],
  .stage-group-steps[data-stage-mode="themis"] {
    --bg: #171c1f;
    --surface: #20272b;
    --ink: #f2efe5;
    --ink-soft: #d2d7d5;
    --muted: #aeb7b8;
    --faint: #899599;
    --line: #354047;
    --line-strong: #52606a;
    --accent: #326c91;
    --accent-soft: #263f52;
    --accent-ink: #a9d5f2;
    --good: #9caf78;
    --good-soft: #293527;
    color-scheme: dark;
  }
  .stage-group[data-stage-mode] .stage-group-toggle,
  .stage-group-steps[data-stage-mode] .stage-step {
    font-family: inherit;
    font-synthesis: none;
  }
  .stage-rail .stage-group-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name affordance" "range affordance"; align-items: center; column-gap: .46rem; row-gap: .12rem; min-height: 2.6rem; width: 100%; min-width: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--faint); padding: .32rem .42rem; text-align: left; cursor: pointer; transition: background .14s ease, color .14s ease; }
  .stage-rail .stage-group-toggle:hover { transform: none; border-color: transparent; background: color-mix(in srgb, var(--accent-soft) 36%, transparent); }
  .stage-rail .stage-group-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 26%, transparent); outline-offset: 2px; }
  .stage-group.active .stage-group-toggle { cursor: default; }
  .stage-group.active .stage-group-toggle:hover { background: transparent; }
  .stage-group-name { grid-area: name; min-width: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.02; font-weight: 950; letter-spacing: 0; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stage-group-range { grid-area: range; justify-self: start; color: var(--faint); font-family: var(--mono); font-size: .7rem; line-height: 1.05; font-weight: 950; letter-spacing: 0; }
  .stage-group-caret { grid-area: affordance; display: grid; place-items: center; width: 1.7rem; height: 1.44rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent-ink); }
  .stage-group-caret::before { content: ""; width: .38rem; height: .38rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.1rem) rotate(45deg); transition: transform .16s ease; }
  .stage-group.open:not(.active) .stage-group-caret::before { transform: translateY(.1rem) rotate(225deg); }
  .stage-group.active .stage-group-caret { background: var(--accent); border-color: var(--accent); color: #fff; }
  .stage-group.active .stage-group-caret::before { width: .4rem; height: .4rem; border: 0; border-radius: 50%; background: currentColor; transform: none; }
  .stage-group.complete .stage-group-caret { color: var(--good); border-color: color-mix(in srgb, var(--good) 36%, var(--line)); background: var(--good-soft); }
  .stage-group.collapsed .stage-group-steps { display: none; }
  .stage-group-steps { display: grid; grid-column: 1 / -1; gap: .36rem; min-width: 0; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff), color-mix(in srgb, var(--bg) 96%, #fff)); padding: .42rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
  .stage-step-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.8rem, 1fr)); gap: .32rem; min-width: 0; }
  .stage-rail .stage-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .36rem; min-height: 2.36rem; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); color: var(--muted); padding: .28rem .36rem; text-align: left; cursor: pointer; transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
  .stage-rail .stage-step:hover { transform: translateY(-1px); border-color: var(--accent); }
  .stage-rail .stage-step:disabled { opacity: .46; cursor: not-allowed; transform: none; }
  .stage-rail .stage-step .n { display: grid; place-items: center; width: 1.42rem; height: 1.42rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--faint); font-family: var(--mono); font-size: .69rem; font-weight: 850; }
  .stage-rail .step-name { min-width: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.04; font-weight: 950; overflow-wrap: anywhere; }
  .stage-rail .stage-step.done { color: var(--ink-soft); border-color: color-mix(in srgb, var(--good) 32%, var(--line)); }
  .stage-rail .stage-step.done .n { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
  .stage-rail .stage-step.active { color: var(--accent-ink); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); }
  .stage-rail .stage-step.active .n { background: var(--accent); color: #fff; border-color: var(--accent); }
  .stage-rail .stage-step.active .step-name { color: var(--accent-ink); }
  @media (max-width: 520px) {
    .stage-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stage-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stage-rail .stage-step { gap: .34rem; padding: .3rem .34rem; }
    .stage-rail .step-name { font-size: .78rem; }
  }

  .simulator-island { display: grid; gap: .72rem; min-width: 0; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff), color-mix(in srgb, var(--bg) 96%, #fff)); box-shadow: 0 14px 30px rgba(31, 36, 48, .08); padding: .72rem; }
  .step-svg { display: block; width: 100%; height: 100%; min-width: 0; }
  .step-svg text { font-family: var(--sans); fill: var(--ink); letter-spacing: 0; }
  .step-svg .small { fill: var(--muted); font-size: 12px; font-weight: 750; }
  .step-svg .tiny { fill: var(--faint); font-size: 10px; font-weight: 850; text-transform: uppercase; }
  .step-svg .label { fill: var(--ink); font-size: 17px; font-weight: 900; }
  .step-svg .body { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.4; }
  .step-svg .soft { fill: var(--surface); }
  .step-svg .accent { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 50%, var(--line)); }
  .step-svg .good { fill: var(--good-soft); stroke: color-mix(in srgb, var(--good) 50%, var(--line)); }
  .step-svg .bad { fill: var(--bad-soft); stroke: color-mix(in srgb, var(--bad) 50%, var(--line)); }
  .step-svg .ink { fill: var(--ink-soft); }
  .step-svg .yes-fill { fill: var(--good); }
  .step-svg .no-fill { fill: var(--bad); }
  .step-svg .accent-fill { fill: var(--accent); }
  .step-svg .line { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .step-svg .line.good { stroke: var(--good); }
  .step-svg .line.bad { stroke: var(--bad); }
  .step-svg .line.accent { stroke: var(--accent); }
  .step-svg .line.hot { stroke-dasharray: 10 10; animation: dash-flow 1.15s linear infinite; }
  .step-svg .pulse { transform-box: fill-box; transform-origin: center; animation: art-pulse 1.2s ease-in-out infinite; }
  .step-svg .pop { transform-box: fill-box; transform-origin: center; animation: art-pop .42s ease-out both; }
  .step-svg .bob { animation: art-bob 2.2s ease-in-out infinite; }
  .step-svg .fade { opacity: .38; }
  .step-svg .seat { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
  .step-svg .seat.on { fill: var(--accent-soft); stroke: var(--accent); }
  .step-svg .scene-card { fill: color-mix(in srgb, var(--bg) 88%, #fff); stroke: var(--line-strong); stroke-width: 1.2; filter: drop-shadow(0 12px 18px rgba(31, 36, 48, .10)); }
  .step-svg .scene-card.hot { stroke: var(--accent); stroke-width: 2.4; }
  .step-svg .hero-card { fill: color-mix(in srgb, var(--bg) 92%, #fff); stroke: color-mix(in srgb, var(--accent) 42%, var(--line)); stroke-width: 1.8; filter: drop-shadow(0 16px 24px rgba(69, 48, 154, .16)); }
  .step-svg .hero-card.hot { stroke: var(--accent); stroke-width: 3; }
  .step-svg .halo { fill: color-mix(in srgb, var(--accent-soft) 72%, transparent); opacity: .72; }
  .step-svg .halo.good { fill: color-mix(in srgb, var(--good-soft) 75%, transparent); }
  .step-svg .halo.bad { fill: color-mix(in srgb, var(--bad-soft) 75%, transparent); }
  .step-svg .sigil { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
  .step-svg .sigil.accent { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 48%, var(--line)); }
  .step-svg .sigil.good { fill: var(--good-soft); stroke: color-mix(in srgb, var(--good) 48%, var(--line)); }
  .step-svg .sigil.bad { fill: var(--bad-soft); stroke: color-mix(in srgb, var(--bad) 48%, var(--line)); }
  .step-svg .icon-line { fill: none; stroke: var(--ink-soft); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
  .step-svg .icon-line.light { stroke-width: 2.5; }
  .step-svg .symbol { fill: var(--ink-soft); font-size: 19px; font-weight: 900; }
  .step-svg .lucide-pack-icon { color: var(--ink-soft); }
  .step-svg .lucide-pack-icon * { vector-effect: non-scaling-stroke; }
  .step-svg .flow-track { fill: none; stroke: color-mix(in srgb, var(--line-strong) 78%, transparent); stroke-width: 8; stroke-linecap: round; }
  .step-svg .flow-track.hot { stroke: color-mix(in srgb, var(--accent) 68%, var(--line)); stroke-dasharray: 14 12; animation: dash-flow 1.1s linear infinite; }
  .step-svg .chip-card { fill: color-mix(in srgb, var(--surface) 92%, #fff); stroke: var(--line); stroke-width: 1; }
  .step-svg .chip-card.hot { fill: var(--accent-soft); stroke: var(--accent); }
  /* The simulator must fit in what the reader can actually see. Two things
     come out of the viewport before the frame gets its share: the sticky site
     nav, which covers the top for as long as the simulator is on screen, and
     this island's own chrome, the step guide above the frame plus the padding
     around it. Take both off, or the app stands taller than the screen and has
     to be scrolled to be read. The script measures the two into these
     variables; the fallbacks are what they measure at the default type scale,
     so the cap holds before any script runs. Full-window mode overrides
     --sim-frame-height below and is deliberately exempt: there is no nav
     over it. */
  .product-demo { --sitenav-h: 4.75rem; --sim-island-chrome-h: 7.7rem;
    --sim-frame-width: min(100%, 66rem);
    --sim-frame-height: min(clamp(30rem, 82dvh, 52rem), calc(100dvh - var(--sitenav-h) - var(--sim-island-chrome-h))); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .72rem; width: 100%; max-width: 100%; min-width: 0; padding: 0; box-sizing: border-box; container: run-stage / inline-size; font-family: var(--sans); color: var(--ink); overflow: visible; overflow-wrap: anywhere; }
  .sim-surface-frame { box-sizing: border-box; width: var(--sim-frame-width); height: var(--sim-frame-height); min-height: var(--sim-frame-height); max-height: var(--sim-frame-height); justify-self: center; }
  .sim-step-guide { display: grid; grid-template-columns: auto minmax(0, .92fr) minmax(21rem, .78fr); gap: .62rem; align-items: stretch; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, #fff); padding: .62rem; min-width: 0; }
  .sim-step-guide.has-floating-action-label { grid-template-columns: auto minmax(0, 1fr); }
  .sim-guide-content { display: contents; }
  .sim-guide-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface));
    color: var(--accent-ink);
    padding: .4rem .68rem;
    font: 900 .7rem/1 var(--sans);
    cursor: pointer;
  }
  .sim-guide-toggle::after {
    width: .4rem;
    height: .4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: translateY(-.08rem) rotate(45deg);
    transition: transform .16s ease;
  }
  .sim-guide-toggle[aria-expanded="true"]::after { transform: translateY(.08rem) rotate(225deg); }
  .sim-guide-toggle:hover,
  .sim-guide-toggle:focus-visible {
    border-color: var(--accent);
    outline: 0;
    background: color-mix(in srgb, var(--accent-soft) 78%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .sim-guide-toggle[hidden] { display: none; }
  .simulator-fullscreen-hint {
    position: fixed;
    z-index: 140;
    right: calc(env(safe-area-inset-right, 0px) + .85rem);
    bottom: calc(env(safe-area-inset-bottom, 0px) + .85rem);
    display: grid;
    gap: .08rem;
    max-width: min(19rem, calc(100vw - 1.7rem));
    border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--ink) 94%, #111);
    color: #fff;
    padding: .58rem .7rem;
    font-family: var(--sans);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
    pointer-events: none;
    animation: simulator-fullscreen-hint-in .18s ease-out both;
  }
  .simulator-fullscreen-hint[hidden] { display: none; }
  .simulator-fullscreen-hint strong { color: #fff; font-size: .75rem; line-height: 1.15; }
  .simulator-fullscreen-hint span { color: rgba(255, 255, 255, .76); font-size: .68rem; line-height: 1.24; }
  @keyframes simulator-fullscreen-hint-in {
    from { opacity: 0; transform: translateY(.35rem); }
    to { opacity: 1; transform: translateY(0); }
  }
  .sim-step-badge { display: grid; align-content: center; justify-items: center; width: 3.35rem; min-height: 3.35rem; border-radius: 11px; background: color-mix(in srgb, var(--accent) 12%, var(--accent-soft)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); font-weight: 950; }
  .sim-step-badge span { font-size: .56rem; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
  .sim-step-badge b { font-size: 1.12rem; line-height: 1; }
  .sim-step-copy { display: grid; align-content: center; gap: .18rem; min-width: 0; }
  .sim-step-copy strong { color: var(--accent); font-size: .66rem; line-height: 1.1; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
  .sim-step-copy b { color: var(--ink); font-size: .98rem; line-height: 1.16; }
  .sim-step-copy span { color: var(--muted); font-size: .72rem; line-height: 1.3; }
  .sim-step-copy .sim-step-summary { color: var(--ink-soft); }
  .sim-step-controls { display: grid; gap: .42rem; align-content: stretch; min-width: 0; justify-items: stretch; }
  .sim-live-preview {
    --browser-chrome-bg: #e8edf1;
    --browser-chrome-surface: #f9fbfc;
    --browser-chrome-ink: #27333d;
    --browser-chrome-muted: #687681;
    --browser-chrome-faint: #89959e;
    --browser-chrome-line: #c5ced5;
    --browser-chrome-line-strong: #aab6bf;
    --browser-chrome-accent: #526b7a;
    --browser-chrome-accent-soft: #dbe4e9;
    --browser-chrome-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --browser-chrome-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    height: var(--sim-frame-height);
    max-height: var(--sim-frame-height);
    border: 1px solid var(--browser-chrome-line-strong);
    border-radius: 14px;
    background: var(--browser-chrome-bg);
    color: var(--browser-chrome-ink);
    font-family: var(--browser-chrome-font);
    color-scheme: light;
    box-shadow: 0 18px 34px rgba(29, 40, 49, .14);
    overflow: hidden;
  }
  .sim-live-preview.has-inline-coachmark,
  .protocol-sequence.has-inline-coachmark { grid-template-rows: auto auto minmax(0, 1fr); }
  .sim-live-preview.has-inline-coachmark > .coachmark-inline-slot,
  .protocol-sequence.has-inline-coachmark > .coachmark-inline-slot { grid-row: 2; order: 0; }
  .sim-live-preview.has-inline-coachmark > .sim-app-viewport,
  .protocol-sequence.has-inline-coachmark > .protocol-sequence-scroll { grid-row: 3; }
  .sim-demand-frame {
    position: relative;
    display: grid;
    gap: .42rem;
    width: var(--sim-frame-width);
    min-width: 0;
    justify-self: center;
    margin-top: .72rem;
    border: 0;
    border-radius: 18px;
    background: transparent;
    padding: .72rem 0 0;
    box-shadow: none;
  }
  .sim-demand-frame::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 2px solid color-mix(in srgb, var(--accent) 78%, var(--line-strong));
    border-radius: inherit;
    background: color-mix(in srgb, var(--surface) 88%, var(--bg));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--bg) 68%, transparent);
    content: "";
    pointer-events: none;
  }
  .sim-demand-frame > * {
    position: relative;
    z-index: 1;
  }
  .sim-demand-frame-tab {
    position: absolute;
    top: 0;
    left: .72rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .46rem;
    justify-self: start;
    width: fit-content;
    max-width: calc(100% - 1rem);
    margin: 0;
    border: 2px solid color-mix(in srgb, var(--accent) 78%, var(--line-strong));
    border-radius: 10px 10px 5px 5px;
    background: var(--dt-emission-ink);
    color: #fff;
    padding: .38rem .66rem;
    font-family: var(--product-ui-font);
    font-size: .76rem;
    line-height: 1.22;
    font-weight: var(--product-weight-control);
    box-shadow: 0 0 0 4px var(--bg), 0 0 12px rgba(var(--dt-emission-rgb), .24);
  }
  .sim-demand-frame-tab::before {
    content: "";
    width: .58rem;
    height: .58rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .sim-browser-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .48rem; align-items: center; border-bottom: 1px solid var(--browser-chrome-line); background: var(--browser-chrome-bg); color: var(--browser-chrome-ink); padding: .38rem .55rem; font-family: var(--browser-chrome-font); color-scheme: light; }
  .sim-browser-back { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .36rem; min-width: 5.85rem; min-height: 2.16rem; border: 1px solid var(--browser-chrome-line); border-radius: 999px; background: linear-gradient(180deg, #fff, var(--browser-chrome-surface)); color: var(--browser-chrome-ink); padding: .22rem .62rem .22rem .22rem; font-family: var(--browser-chrome-font); font-size: .74rem; line-height: 1; font-weight: 800; box-shadow: 0 5px 12px rgba(29, 40, 49, .1), inset 0 1px 0 rgba(255, 255, 255, .9); cursor: pointer; transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease; }
  .sim-browser-back::before { content: none; }
  .sim-browser-back-icon { position: relative; display: grid; place-items: center; width: 1.58rem; height: 1.58rem; border-radius: 50%; background: var(--browser-chrome-accent); color: #fff; box-shadow: 0 6px 12px rgba(50, 73, 87, .2), inset 0 0 0 1px rgba(255, 255, 255, .24); flex: 0 0 auto; transform: translateX(0); }
  .sim-browser-back-icon::before { content: ""; width: .58rem; height: .58rem; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateX(.12rem) rotate(45deg); }
  .sim-browser-back-icon::after { content: ""; position: absolute; left: .49rem; top: 50%; width: .64rem; height: 3px; border-radius: 999px; background: currentColor; transform: translateY(-50%); }
  .sim-browser-back-label { color: currentColor; font-size: .82rem; letter-spacing: 0; text-transform: none; white-space: nowrap; }
  .sim-browser-back:hover,
  .sim-browser-back:focus-visible { background: #fff; border-color: var(--browser-chrome-accent); color: var(--browser-chrome-accent); transform: translateY(-1px); box-shadow: 0 9px 18px rgba(50, 73, 87, .16), 0 0 0 3px var(--browser-chrome-accent-soft); outline: 0; }
  .sim-browser-back:not([disabled]) .sim-browser-back-icon { animation: browser-back-icon-nudge 3.2s ease-in-out infinite; }
  .sim-browser-back:hover .sim-browser-back-icon,
  .sim-browser-back:focus-visible .sim-browser-back-icon { animation: none; background: var(--browser-chrome-accent); box-shadow: 0 8px 16px rgba(50, 73, 87, .24), inset 0 0 0 1px rgba(255, 255, 255, .28); transform: translateX(-1px); }
  .sim-live-preview .sim-browser-back[data-sim-tip]:not([disabled]) { cursor: pointer; }
  .sim-browser-back[disabled] { background: var(--browser-chrome-surface); border-color: var(--browser-chrome-line); color: var(--browser-chrome-faint); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); cursor: default; transform: none; animation: none; }
  .sim-browser-back[disabled] .sim-browser-back-icon { background: var(--browser-chrome-line); color: var(--browser-chrome-faint); box-shadow: none; animation: none; }
  .sim-url { min-width: 0; border: 1px solid var(--browser-chrome-line); border-radius: 999px; background: var(--browser-chrome-surface); color: var(--browser-chrome-muted); padding: .25rem .52rem; font-family: var(--browser-chrome-mono); font-size: .66rem; line-height: 1.05; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 1px 2px rgba(29, 40, 49, .05); }
  .sim-browser-next { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; width: min(13.5rem, 28vw); min-width: 8.6rem; min-height: 2.16rem; border: 1px solid var(--browser-chrome-accent); border-radius: 999px; background: linear-gradient(135deg, var(--browser-chrome-accent), #354f5e); color: #fff; padding: .3rem .34rem .3rem .68rem; font-family: var(--browser-chrome-font); box-shadow: 0 7px 16px rgba(29, 40, 49, .2), inset 0 1px 0 rgba(255, 255, 255, .2); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, filter .14s ease; }
  .sim-browser-next:hover,
  .sim-browser-next:focus-visible { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 20px rgba(29, 40, 49, .24), 0 0 0 3px var(--browser-chrome-accent-soft); outline: 0; }
  .sim-browser-next-copy { display: grid; gap: .06rem; min-width: 0; text-align: left; }
  .sim-browser-next-copy small { color: rgba(255, 255, 255, .7); font-size: .54rem; line-height: 1; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
  .sim-browser-next-copy strong { min-width: 0; color: #fff; font-size: .72rem; line-height: 1.12; font-weight: 850; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sim-next-arrow { position: relative; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, .16); }
  .sim-next-arrow::before { content: ""; width: .48rem; height: .48rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-.08rem) rotate(45deg); }
  .sim-browser-next[disabled] { opacity: .58; filter: saturate(.35); cursor: default; transform: none; box-shadow: none; }
  .sim-app-viewport { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-gutter: stable; background: color-mix(in srgb, var(--surface) 92%, #fff); }
  .protocol-sequence {
    --protocol-bg: #111a1f;
    --protocol-surface: #19252b;
    --protocol-surface-strong: #213139;
    --protocol-line: #415760;
    --protocol-ink: #f2f6f3;
    --protocol-muted: #afc0c2;
    --protocol-accent: #76b8d8;
    --protocol-accent-soft: rgba(87, 158, 194, .18);
    --protocol-good: #bdd39a;
    --protocol-pending: #e5bb76;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    height: var(--sim-frame-height);
    max-height: var(--sim-frame-height);
    border: 1px solid #52666f;
    border-radius: 10px;
    background:
      radial-gradient(circle at 88% 8%, rgba(76, 143, 174, .16), transparent 28%),
      linear-gradient(rgba(118, 184, 216, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(118, 184, 216, .035) 1px, transparent 1px),
      var(--protocol-bg);
    background-size: auto, 24px 24px, 24px 24px, auto;
    color: var(--protocol-ink);
    font-family: var(--simulator-ui-font);
    color-scheme: dark;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
    overflow: hidden;
  }
  .protocol-sequence::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--protocol-accent), var(--protocol-good)); z-index: 2; pointer-events: none; }
  .protocol-sequence[data-sequence-profile="omen"] {
    --protocol-line: #6c574b;
    --protocol-accent: #f0a064;
    --protocol-accent-soft: rgba(240, 160, 100, .17);
    --protocol-good: #9bd3ae;
    --protocol-pending: #f2c57c;
    border-color: #756052;
    background:
      radial-gradient(circle at 88% 8%, rgba(196, 103, 38, .2), transparent 30%),
      linear-gradient(rgba(240, 160, 100, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(240, 160, 100, .035) 1px, transparent 1px),
      var(--protocol-bg);
    background-size: auto, 24px 24px, 24px 24px, auto;
  }
  .protocol-sequence[data-sequence-profile="omen"] .protocol-sequence-mark,
  .protocol-sequence[data-sequence-profile="omen"] .protocol-sequence-badge { border-color: color-mix(in srgb, var(--protocol-accent) 48%, transparent); }
  .protocol-sequence[data-sequence-profile="omen"] .protocol-sequence-badge { background: var(--protocol-accent-soft); color: #ffd9bc; }
  .protocol-sequence[data-sequence-profile="omen"] .protocol-sequence-badge.receipts { border-color: color-mix(in srgb, var(--protocol-good) 44%, transparent); background: color-mix(in srgb, var(--protocol-good) 10%, transparent); color: var(--protocol-good); }
  .protocol-sequence-header { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .72rem; min-width: 0; border-bottom: 1px solid var(--protocol-line); background: rgba(14, 23, 28, .88); padding: .72rem .82rem .72rem .94rem; backdrop-filter: blur(10px); }
  .protocol-sequence-mark { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; flex: 0 0 auto; border: 1px solid rgba(118, 184, 216, .48); border-radius: 7px; background: var(--protocol-accent-soft); color: var(--protocol-accent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035); }
  .protocol-sequence-mark svg { width: 1.35rem; height: 1.35rem; }
  .protocol-sequence-identity { display: grid; gap: .08rem; min-width: 0; }
  .protocol-sequence-kicker { color: var(--protocol-accent); font-size: .7rem; line-height: 1.1; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
  .protocol-sequence-identity strong { color: var(--protocol-ink); font-size: 1rem; line-height: 1.15; font-weight: 800; }
  .protocol-sequence-badges { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .34rem; min-width: 0; }
  .protocol-sequence-badge { display: inline-flex; align-items: center; gap: .32rem; min-height: 1.8rem; border: 1px solid rgba(118, 184, 216, .34); border-radius: 999px; background: rgba(118, 184, 216, .1); color: #cdeafa; padding: .28rem .54rem; font-size: .72rem; line-height: 1; font-weight: 800; white-space: nowrap; }
  .protocol-sequence-badge::before { content: ""; width: .42rem; height: .42rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(118, 184, 216, .1); }
  .protocol-sequence-badge.receipts { border-color: rgba(189, 211, 154, .35); background: rgba(189, 211, 154, .09); color: var(--protocol-good); }
  .protocol-sequence-scroll { position: relative; z-index: 1; display: grid; align-content: start; gap: .74rem; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-gutter: stable; padding: .8rem .82rem .86rem .94rem; }
  .protocol-sequence-current { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .72rem; min-width: 0; border-bottom: 1px solid rgba(118, 184, 216, .22); padding: .08rem 0 .72rem; }
  .protocol-sequence-current-copy { display: grid; gap: .2rem; min-width: 0; }
  .protocol-sequence-current-copy span { color: var(--protocol-muted); font-size: .72rem; line-height: 1.1; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .protocol-sequence-current h4 { margin: 0; color: var(--protocol-ink); font-size: clamp(1.08rem, 2vw, 1.38rem); line-height: 1.12; letter-spacing: -.01em; }
  .protocol-sequence-current p { margin: 0; max-width: 66ch; color: var(--protocol-muted); font-size: .82rem; line-height: 1.42; }
  .protocol-sequence-status { display: inline-flex; align-items: center; gap: .38rem; border: 1px solid rgba(229, 187, 118, .42); border-radius: 5px; background: rgba(229, 187, 118, .09); color: #f2d4a3; padding: .38rem .54rem; font-size: .74rem; line-height: 1.1; font-weight: 800; white-space: nowrap; }
  .protocol-sequence-status::before { content: ""; width: .46rem; height: .46rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
  .protocol-sequence-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); gap: 1px; min-width: 0; border: 1px solid var(--protocol-line); border-radius: 6px; background: var(--protocol-line); overflow: hidden; }
  .protocol-sequence-fact { display: grid; gap: .12rem; min-width: 0; background: rgba(25, 37, 43, .96); padding: .52rem .62rem; }
  .protocol-sequence-fact span { color: var(--protocol-muted); font-size: .7rem; line-height: 1.1; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
  .protocol-sequence-fact b { color: var(--protocol-ink); font-size: .94rem; line-height: 1.15; overflow-wrap: anywhere; }
  .protocol-trace { display: grid; grid-template-columns: repeat(var(--protocol-step-count, 2), minmax(0, 1fr)); gap: .56rem; min-width: 0; }
  .protocol-trace-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem; min-width: 0; border: 1px solid var(--protocol-line); border-radius: 6px; background: rgba(25, 37, 43, .9); padding: .5rem .56rem; }
  .protocol-trace-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -.58rem; width: .58rem; height: 1px; background: var(--protocol-line); transform: translateY(-50%); z-index: 2; }
  .protocol-trace-number { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--protocol-line); border-radius: 50%; background: #111a1f; color: var(--protocol-muted); font: 800 .7rem/1 var(--simulator-ui-font); }
  .protocol-trace-copy { display: grid; gap: .08rem; min-width: 0; }
  .protocol-trace-copy strong { color: var(--protocol-ink); font-size: .76rem; line-height: 1.18; overflow-wrap: anywhere; }
  .protocol-trace-copy small { color: var(--protocol-muted); font-size: .7rem; line-height: 1.15; }
  .protocol-trace-step.is-current { border: 2px solid rgba(118, 184, 216, .7); background: var(--protocol-accent-soft); }
  .protocol-trace-step.is-current .protocol-trace-number { border-color: var(--protocol-accent); background: var(--protocol-accent); color: #10202a; }
  .protocol-trace-step.is-done { border-color: rgba(189, 211, 154, .45); }
  .protocol-trace-step.is-done .protocol-trace-number { border-color: var(--protocol-good); background: rgba(189, 211, 154, .14); color: var(--protocol-good); }
  .protocol-sequence-records { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .58rem; min-width: 0; }
  .product-mode-panel[data-product-mode] .product-demo .protocol-sequence .protocol-record.live-card { position: relative; grid-column: span var(--protocol-record-span, 6); gap: .48rem; min-width: 0; border: 1px solid var(--protocol-line); border-radius: 6px; background: linear-gradient(180deg, rgba(33, 49, 57, .96), rgba(25, 37, 43, .96)); color: var(--protocol-ink); padding: .72rem .68rem .64rem; box-shadow: none; }
  .product-mode-panel[data-product-mode] .product-demo .protocol-sequence .protocol-record.live-card:first-of-type { border-color: color-mix(in srgb, var(--protocol-accent) 58%, var(--protocol-line)); }
  .protocol-record-index { position: absolute; top: 0; right: 0; display: grid; place-items: center; min-width: 2.05rem; height: 1.42rem; border-left: 1px solid var(--protocol-line); border-bottom: 1px solid var(--protocol-line); border-radius: 0 5px 0 5px; background: #111a1f; color: var(--protocol-accent); font: 800 .7rem/1 var(--simulator-ui-font); }
  .product-mode-panel[data-product-mode] .product-demo .protocol-sequence .protocol-record .live-card-title { padding-right: 1.8rem; color: var(--protocol-ink); }
  .product-mode-panel[data-product-mode] .product-demo .protocol-sequence .protocol-record .block-icon { border-color: rgba(118, 184, 216, .36); background: #111a1f; color: var(--protocol-accent); }
  .protocol-sequence .protocol-record :where(.app-note, .app-row, .live-field, .face-check, .app-route-step) { color: var(--protocol-muted); }
  .protocol-sequence .protocol-record :where(.app-value, .closed-stamp, code, b) { color: var(--protocol-ink); }
  .protocol-sequence .protocol-record .beacon-readout code { white-space: normal; overflow-wrap: anywhere; }
  .protocol-record-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .48rem; min-width: 0; border-top: 1px solid rgba(118, 184, 216, .16); padding-top: .42rem; color: var(--protocol-muted); font-size: .74rem; line-height: 1.25; }
  .protocol-record-row b { text-align: right; }
  .protocol-record-row small { color: var(--protocol-muted); font-size: .7rem; line-height: 1.2; text-align: right; }
  .protocol-sequence-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .42rem .8rem; min-width: 0; border-top: 1px solid rgba(118, 184, 216, .18); padding-top: .64rem; color: var(--protocol-muted); font-size: .72rem; line-height: 1.2; }
  .protocol-sequence-legend strong { color: var(--protocol-ink); font-weight: 800; }
  .protocol-legend-item { display: inline-flex; align-items: center; gap: .34rem; }
  .protocol-legend-dot { width: .48rem; height: .48rem; flex: 0 0 auto; border-radius: 50%; background: var(--protocol-accent); }
  .protocol-legend-item.receipt .protocol-legend-dot { background: var(--protocol-good); }
  .protocol-legend-item.pending .protocol-legend-dot { background: var(--protocol-pending); }
  .fake-topbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-width: 0; border-bottom: 1px solid var(--line); padding: .68rem .82rem; background: color-mix(in srgb, var(--bg) 82%, #fff); }
  .fake-brand { display: flex; align-items: center; gap: .55rem; min-width: 0; font-weight: 850; }
  .fake-brand .dot { width: .72rem; height: .72rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex: 0 0 auto; }
  .fake-brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fake-screen-name { color: var(--faint); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .fake-app { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(14rem, .82fr); gap: .82rem; width: 100%; max-width: 100%; padding: .88rem; min-width: 0; }
  .fake-main, .fake-side { display: grid; align-content: start; gap: .7rem; min-width: 0; }
  .fake-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); padding: .8rem; min-width: 0; max-width: 100%; }
  .fake-card.accent { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: var(--accent-soft); }
  .fake-card.good { border-color: color-mix(in srgb, var(--good) 38%, var(--line)); background: var(--good-soft); }
  .fake-card.bad { border-color: color-mix(in srgb, var(--bad) 34%, var(--line)); background: var(--bad-soft); }
  .fake-mini { color: var(--faint); font-size: .66rem; font-weight: 850; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
  .fake-question { margin-top: .26rem; font-size: clamp(1.05rem, 2.4vw, 1.45rem); line-height: 1.12; font-weight: 850; letter-spacing: -.01em; }
  .fake-sub { color: var(--muted); font-size: .82rem; line-height: 1.42; margin-top: .28rem; }
  .fake-status { display: inline-flex; align-items: center; gap: .34rem; width: fit-content; margin-top: .55rem; border: 1px solid color-mix(in srgb, var(--good) 32%, var(--line)); border-radius: 999px; background: var(--good-soft); color: var(--good); padding: .24rem .55rem; font-size: .7rem; font-weight: 850; }
  .fake-status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
  .fake-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .52rem; }
  .fake-flow-step { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .64rem; min-width: 0; }
  .fake-flow-step b { display: block; color: var(--ink); font-size: .82rem; line-height: 1.25; }
  .fake-flow-step span { display: block; color: var(--muted); font-size: .72rem; line-height: 1.3; margin-top: .22rem; }
  .fake-flow > .fake-flow-step:nth-child(1) { border-color: var(--triad-mint-border); background: var(--triad-mint); }
  .fake-flow > .fake-flow-step:nth-child(2) { border-color: var(--triad-lavender-border); background: var(--triad-lavender); }
  .fake-flow > .fake-flow-step:nth-child(3) { border-color: var(--triad-amber-border); background: var(--triad-amber); }
  .fake-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .52rem; }
  .fake-field { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .62rem; min-width: 0; }
  .fake-field .k { color: var(--faint); font-size: .64rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
  .fake-field .v { display: block; color: var(--ink); font-size: .94rem; font-weight: 850; line-height: 1.22; margin-top: .22rem; overflow-wrap: anywhere; }
  .fake-field .h { display: block; color: var(--muted); font-size: .7rem; line-height: 1.28; margin-top: .18rem; }
  .fake-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
  .fake-actions button { min-width: 0; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-soft); border-radius: 999px; padding: .44rem .72rem; font-family: var(--sans); font-size: .74rem; font-weight: 850; cursor: pointer; }
  .fake-actions button:hover, .fake-actions button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .fake-explain { display: grid; gap: .48rem; }
  .fake-explain-row { display: grid; grid-template-columns: 1.45rem 1fr; gap: .48rem; align-items: start; color: var(--muted); font-size: .76rem; line-height: 1.34; }
  .fake-explain-row b { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: .72rem; }
  .fake-ticket { border: 1px dashed var(--line-strong); border-radius: 10px; background: color-mix(in srgb, var(--bg) 70%, #fff); padding: .65rem; }
  .fake-ticket b { display: block; font-size: .9rem; line-height: 1.25; }
  .fake-ticket span { display: block; color: var(--muted); font-size: .74rem; line-height: 1.35; margin-top: .2rem; }
  .app-window { position: relative; display: grid; grid-template-rows: auto 1fr; width: 100%; max-width: 100%; min-width: 0; min-height: 100%; background: color-mix(in srgb, var(--surface) 92%, #fff); overflow: hidden; }
  .app-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem .8rem; min-width: 0; max-width: 100%; border-bottom: 1px solid var(--line); padding: .64rem .78rem; background: color-mix(in srgb, var(--bg) 88%, #fff); }
  .app-brand { display: flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; font-weight: 900; }
  .app-brand span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-tabs { display: flex; gap: .34rem; min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .app-tabs span { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); padding: .24rem .54rem; font-size: .68rem; line-height: 1; font-weight: 850; white-space: nowrap; }
  .app-tabs span.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .app-nav-tools { display: flex; align-items: center; justify-content: flex-end; gap: .36rem; min-width: 0; flex: 0 1 auto; flex-wrap: wrap; }
  .app-nav-tools:has(.sim-app-next) { flex: 1 1 auto; }
  .app-nav-chip { display: inline-flex; align-items: center; min-width: 0; max-width: 12rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); padding: .25rem .54rem; font-size: .66rem; line-height: 1.05; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sim-app-next { display: inline-flex; align-items: center; justify-content: space-between; gap: .42rem; min-width: 0; max-width: 13rem; min-height: 2rem; border: 1px solid var(--action-fill); border-radius: 8px; background: var(--action-fill); color: var(--action-ink); padding: .34rem .36rem .34rem .58rem; font-family: inherit; box-shadow: 0 7px 15px color-mix(in srgb, var(--action-fill) 20%, transparent); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, filter .14s ease; }
  .sim-app-next:hover,
  .sim-app-next:focus-visible { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 20px color-mix(in srgb, var(--action-fill) 27%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent-soft) 76%, transparent); outline: 0; }
  .sim-app-next-label { min-width: 0; color: inherit; font-size: .72rem; line-height: 1.12; font-weight: var(--product-weight-control); text-align: left; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sim-app-next .sim-next-arrow { width: 1.34rem; height: 1.34rem; background: color-mix(in srgb, currentColor 14%, transparent); }
  .app-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12.5rem, .46fr); gap: .74rem; padding: .78rem; min-width: 0; }
  .app-main, .app-aside { display: grid; align-content: start; gap: .62rem; min-width: 0; }
  .app-hero { border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 12px; background: linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--surface) 82%, #fff)); padding: .74rem; min-width: 0; }
  .app-eyebrow { color: var(--accent); font-size: .64rem; font-weight: 900; letter-spacing: .08em; line-height: 1.1; text-transform: uppercase; }
  .app-hero h4 { margin: .24rem 0 0; font-size: clamp(1.03rem, 1.9vw, 1.34rem); line-height: 1.08; letter-spacing: 0; }
  .app-hero p { margin: .28rem 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.34; }
  .app-status { display: inline-flex; align-items: center; gap: .33rem; width: fit-content; max-width: 100%; margin-top: .52rem; border: 1px solid color-mix(in srgb, var(--good) 34%, var(--line)); border-radius: 999px; background: var(--good-soft); color: var(--good); padding: .23rem .52rem; font-size: .68rem; line-height: 1.05; font-weight: 900; }
  .app-status::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
  .app-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .46rem; }
  .app-metric { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .55rem; min-width: 0; }
  .app-metric span { display: block; color: var(--faint); font-size: .6rem; font-weight: 900; letter-spacing: .07em; line-height: 1.1; text-transform: uppercase; }
  .app-metric b { display: block; color: var(--ink); font-size: .9rem; line-height: 1.14; margin-top: .2rem; overflow-wrap: anywhere; }
  .app-metrics > .app-metric:nth-child(1) { border-color: var(--triad-mint-border); background: var(--triad-mint); }
  .app-metrics > .app-metric:nth-child(2) { border-color: var(--triad-lavender-border); background: var(--triad-lavender); }
  .app-metrics > .app-metric:nth-child(3) { border-color: var(--triad-amber-border); background: var(--triad-amber); }
  .app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .56rem; min-width: 0; }
  .app-panel { position: relative; display: grid; gap: .5rem; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); padding: .66rem; overflow: hidden; transition: border-color .16s ease, transform .16s ease, background .16s ease; }
  .app-panel.wide { grid-column: 1 / -1; }
  .app-panel.is-hot { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface)); transform: translateY(-1px); }
  .sim-surface-frame, .sim-app-action.guided-target, .live-card.hot, .app-panel.is-hot { scroll-margin-top: 5.5rem; }
  .app-panel.good { border-color: color-mix(in srgb, var(--good) 36%, var(--line)); }
  .app-panel.bad { border-color: color-mix(in srgb, var(--bad) 32%, var(--line)); }
  .app-panel h5 { margin: 0; color: var(--ink); font-size: .86rem; line-height: 1.16; }
  .app-panel .mini { color: var(--faint); font-size: .6rem; font-weight: 900; letter-spacing: .07em; line-height: 1.1; text-transform: uppercase; }
  .sim-live-preview [data-sim-tip] { outline: 0 solid transparent; outline-offset: 2px; transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, outline-color .14s ease, transform .14s ease; }
  .sim-live-preview [data-sim-tip]:not(button):not(a):not([role="button"]) { cursor: help; }
  .sim-live-preview button[data-sim-tip]:not([disabled]),
  .sim-live-preview a[data-sim-tip],
  .sim-live-preview [role="button"][data-sim-tip]:not([aria-disabled="true"]) { cursor: pointer; }
  .sim-app-viewport [data-sim-tip]:hover,
  .sim-app-viewport [data-sim-tip]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent); border-color: color-mix(in srgb, var(--accent) 54%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 72%, transparent), 0 10px 22px rgba(69, 48, 154, .12); }
  .sim-app-viewport .app-seat[data-sim-tip]:hover,
  .sim-app-viewport .app-seat[data-sim-tip]:focus-visible { transform: scale(1.12); }
  .guided-target { position: relative; z-index: 2; isolation: isolate; overflow: hidden; cursor: pointer; outline: 0; border-color: color-mix(in srgb, var(--good) 74%, var(--line)) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--good-soft) 64%, transparent), 0 12px 24px rgba(11, 153, 107, .13) !important; }
  .guided-target::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 0%, transparent 32%, rgba(255, 255, 255, .28) 44%, color-mix(in srgb, var(--good-soft) 54%, transparent) 50%, rgba(255, 255, 255, .2) 56%, transparent 70%, transparent 100%); opacity: .78; pointer-events: none; transform: translateX(-135%); animation: tutorial-target-sheen 2.35s ease-in-out infinite; }
  .guided-target > * { position: relative; z-index: 1; }
  .guided-target:hover,
  .guided-target:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good-soft) 82%, transparent), 0 18px 32px rgba(11, 153, 107, .2) !important; }
  .guided-target:hover::before,
  .guided-target:focus-visible::before { animation-duration: 1.7s; opacity: .9; }
  .target-callout { box-sizing: border-box; position: fixed; left: var(--coach-left, 1rem); top: var(--coach-top, 1rem); bottom: auto; z-index: 9998; display: grid; gap: .15rem; width: var(--coach-width, min(18rem, calc(100vw - 2rem))); min-width: 0; max-width: calc(100vw - 1rem); max-height: none; overflow: visible; border: 1px solid color-mix(in srgb, var(--good) 42%, var(--line)); border-radius: 14px; background: #20231f; color: #fff; padding: .58rem .68rem; font-family: var(--sans); font-size: .72rem; line-height: 1.24; font-weight: 800; text-align: left; white-space: normal; box-shadow: 0 18px 36px rgba(31, 36, 48, .24); pointer-events: none; transform: none; isolation: isolate; contain: layout style; animation: none; transition: opacity 0.15s ease, visibility 0.15s ease; }
  .is-coachmark-scrolling .target-callout,
  .is-coachmark-scrolling .coachmark-connector { opacity: 0 !important; visibility: hidden !important; transition: none !important; }
  .target-callout-step { color: rgba(255, 255, 255, .58); font-size: .58rem; line-height: 1.1; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .target-callout b { display: flex; align-items: center; gap: .34rem; color: #fff; font-size: .68rem; line-height: 1.12; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
  .target-callout b::before { content: ""; width: .46rem; height: .46rem; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 22%, transparent); flex: 0 0 auto; }
  .target-callout span { color: rgba(255, 255, 255, .78); font-size: .72rem; line-height: 1.28; font-weight: 750; overflow-wrap: anywhere; }
  .target-callout.is-measuring { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; animation: none !important; transition: none !important; }
  .coachmark-inline-slot { box-sizing: border-box; display: block; flex: 1 0 100%; grid-column: 1 / -1; order: 99; width: 100%; min-width: 0; padding-top: .34rem; }
  .target-callout.is-inline { position: static; inset: auto; z-index: 2; width: 100%; max-width: none; max-height: none; margin: 0; overflow: visible; contain: layout style; box-shadow: 0 10px 22px rgba(31, 36, 48, .16); animation: none; }
  .coachmark-connector { position: fixed; inset: 0; z-index: 9997; width: 100vw; height: 100vh; overflow: visible; pointer-events: none; color: color-mix(in srgb, var(--good) 84%, #fff); }
  .coachmark-connector path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 3px rgba(31, 36, 48, .2)); }
  .coachmark-connector circle { fill: var(--good); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .coachmark-connector[hidden] { display: none; }
  /* The callout sets display:grid, which outranks the user-agent [hidden]
     rule, so hiding it in script left it painted at its fallback corner. */
  .target-callout[hidden] { display: none; }
  .tutorial-dock { display: grid; gap: .46rem; min-width: 0; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), color-mix(in srgb, var(--accent-soft) 54%, var(--surface))); padding: .58rem .62rem; box-shadow: 0 12px 22px color-mix(in srgb, var(--accent) 11%, transparent); }
  .tutorial-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
  .tutorial-step { color: var(--faint); font-size: .62rem; line-height: 1.1; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .tutorial-cue { color: var(--ink); font-size: .86rem; line-height: 1.22; font-weight: 950; }
  .tutorial-result { color: var(--muted); font-size: .72rem; line-height: 1.32; }
  .tutorial-advance { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; width: 100%; min-width: 0; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: #fff; padding: .46rem .58rem; font-family: var(--sans); text-align: left; cursor: pointer; }
  .tutorial-advance span { flex: 0 0 auto; border-radius: 999px; background: rgba(255, 255, 255, .17); padding: .16rem .38rem; font-size: .58rem; line-height: 1; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
  .tutorial-advance b { min-width: 0; color: inherit; font-size: .76rem; line-height: 1.15; overflow-wrap: anywhere; }
  .tutorial-rewind { display: inline-flex; align-items: center; gap: .32rem; flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); padding: .18rem .08rem; font-family: var(--sans); font-size: .7rem; line-height: 1; font-weight: 800; cursor: pointer; }
  .tutorial-rewind::before { content: ""; width: .42rem; height: .42rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateX(.08rem) rotate(45deg); }
  .tutorial-rewind:hover,
  .tutorial-rewind:focus-visible { color: var(--accent-ink); outline: 0; text-decoration: underline; text-underline-offset: .18rem; }
  .sim-explainer-next { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-width: 0; min-height: 2.2rem; border: 1px solid var(--continue-fill); border-radius: 9px; background: var(--continue-fill); color: var(--continue-ink); padding: .38rem .4rem .38rem .6rem; font-family: var(--sans); box-shadow: 0 8px 16px color-mix(in srgb, var(--continue-fill) 22%, transparent); cursor: pointer; }
  .sim-explainer-next:hover,
  .sim-explainer-next:focus-visible { transform: translateY(-1px); filter: brightness(1.06); outline: 2px solid color-mix(in srgb, var(--continue-fill) 38%, transparent); outline-offset: 2px; }
  .sim-explainer-next-copy { display: grid; gap: .08rem; min-width: 0; text-align: left; }
  .sim-explainer-next-copy small { color: color-mix(in srgb, currentColor 76%, transparent); font-size: .7rem; line-height: 1; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
  .sim-explainer-next-copy strong { min-width: 0; color: inherit; font-size: .78rem; line-height: 1.14; font-weight: 850; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sim-explainer-next .sim-next-arrow { width: 1.42rem; height: 1.42rem; background: color-mix(in srgb, currentColor 14%, transparent); }
  .tutorial-dots { display: flex; gap: .24rem; align-items: center; }
  .tutorial-dots span { width: .46rem; height: .46rem; border-radius: 50%; background: var(--line-strong); }
  .tutorial-dots span.done { background: var(--good); }
  .tutorial-dots span.active { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
  .sim-toast-layer { position: absolute; z-index: 48; top: var(--sim-toast-safe-top, 3.35rem); right: .62rem; display: grid; justify-items: end; width: min(27rem, calc(100% - 1.24rem)); pointer-events: none; }
  .sim-result-toast { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .66rem; width: min(24rem, 100%); border: 1px solid color-mix(in srgb, var(--good) 44%, var(--line-strong)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 96%, var(--good-soft)); color: var(--ink); padding: .62rem .68rem .68rem; box-shadow: 0 18px 38px color-mix(in srgb, var(--ink) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--surface) 72%, transparent); overflow: hidden; animation: toast-rise .34s cubic-bezier(.2, .8, .2, 1) both; pointer-events: none; }
  .sim-result-toast.is-leaving { animation: toast-away .24s ease-in both; }
  .sim-toast-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--good); color: #fff; box-shadow: 0 7px 16px color-mix(in srgb, var(--good) 28%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .3); }
  .sim-toast-icon svg { width: 1.18rem; height: 1.18rem; }
  .sim-toast-content { display: grid; gap: .12rem; min-width: 0; text-align: left; }
  .sim-toast-header { color: var(--good); font-family: var(--sans); font-size: .62rem; font-weight: 950; letter-spacing: .09em; line-height: 1.1; text-transform: uppercase; }
  .sim-toast-body { color: var(--ink); font-family: var(--sans); font-size: .84rem; line-height: 1.22; font-weight: 900; overflow-wrap: anywhere; }
  .sim-toast-detail { color: var(--muted); font-family: var(--sans); font-size: .68rem; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
  .sim-toast-saved { align-self: start; border: 1px solid color-mix(in srgb, var(--good) 30%, var(--line)); border-radius: 999px; background: var(--good-soft); color: var(--good); padding: .24rem .42rem; font-size: .58rem; line-height: 1; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
  .sim-toast-progress { position: absolute; z-index: 2; inset: auto 0 0; height: 3px; background: color-mix(in srgb, var(--good) 54%, transparent); transform-origin: left center; animation: toast-progress var(--toast-duration, 4.2s) linear both; }
  .sim-tooltip {
    --sim-tooltip-bg: #2b2724;
    --sim-tooltip-ink: #fffaf5;
    --sim-tooltip-border: rgba(120, 106, 94, .68);
    --sim-tooltip-glow: rgba(31, 36, 48, .22);
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    max-width: min(19rem, calc(100vw - 1.25rem));
    border: 1px solid var(--sim-tooltip-border);
    border-radius: 11px;
    background: var(--sim-tooltip-bg);
    color: var(--sim-tooltip-ink);
    box-shadow: 0 18px 36px var(--sim-tooltip-glow), 0 0 0 1px color-mix(in srgb, var(--sim-tooltip-border) 16%, transparent);
    padding: .58rem .66rem;
    font-family: var(--sans);
    font-size: .72rem;
    line-height: 1.34;
    font-weight: 700;
    text-shadow: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
  }
  .sim-tooltip[data-sim-theme="omen"] {
    --sim-tooltip-bg: #07150d;
    --sim-tooltip-ink: #f4fff8;
    --sim-tooltip-border: rgba(4, 226, 109, .72);
    --sim-tooltip-glow: rgba(4, 226, 109, .18);
  }
  .sim-tooltip[data-sim-theme="themis"] {
    --sim-tooltip-bg: #302a26;
    --sim-tooltip-ink: #fffaf4;
    --sim-tooltip-border: rgba(0, 229, 255, .68);
    --sim-tooltip-glow: rgba(0, 229, 255, .15);
  }
  .sim-tooltip.is-visible { opacity: 1; transform: translateY(0); }
  .sim-help { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; min-width: 1.5rem; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); color: var(--accent-ink); padding: 0; font-family: var(--sans); font-size: .72rem; line-height: 1; font-weight: 950; letter-spacing: 0; text-transform: none; cursor: help; box-shadow: none; flex: 0 0 auto; transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease; }
  .sim-help:hover,
  .sim-help:focus-visible,
  .sim-help[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: 0; }
  .app-row { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; border-top: 1px solid color-mix(in srgb, var(--line) 74%, transparent); padding-top: .42rem; color: var(--muted); font-size: .72rem; line-height: 1.25; }
  .app-row:first-of-type { border-top: 0; padding-top: 0; }
  .app-row b { color: var(--ink); font-size: .78rem; text-align: right; overflow-wrap: anywhere; }
  .app-choice-row, .app-token-row { display: flex; flex-wrap: wrap; gap: .38rem; }
  .app-choice, .app-token { display: inline-flex; align-items: center; justify-content: center; min-width: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-soft); padding: .3rem .58rem; font-size: .72rem; font-weight: 900; line-height: 1.1; }
  .app-choice.good, .app-token.good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 34%, var(--line)); color: var(--good); }
  .app-choice.bad, .app-token.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 34%, var(--line)); color: var(--bad); }
  .app-bar { display: grid; gap: .25rem; }
  .app-bar-label { display: flex; justify-content: space-between; gap: .6rem; color: var(--muted); font-size: .7rem; font-weight: 800; }
  .app-track { height: .62rem; border-radius: 999px; background: var(--line); overflow: hidden; }
  .app-fill { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--accent); }
  .app-fill.good { background: var(--good); }
  .app-fill.bad { background: var(--bad); }
  .app-list { display: grid; gap: .36rem; }
  .app-list-item { display: flex; align-items: center; justify-content: space-between; gap: .55rem; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); padding: .46rem .52rem; font-size: .72rem; color: var(--muted); }
  .app-list-item b { color: var(--ink); font-size: .78rem; }
  .app-route { display: grid; gap: .38rem; }
  .app-route-step { display: grid; grid-template-columns: 1.3rem 1fr auto; gap: .42rem; align-items: center; color: var(--ink-soft); font-size: .72rem; }
  .app-route-step i { display: grid; place-items: center; width: 1.28rem; height: 1.28rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-style: normal; font-size: .62rem; font-weight: 900; }
  .app-route-step span:last-child { color: var(--faint); font-size: .66rem; font-weight: 850; }
  .app-seat-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .28rem; }
  .app-seat { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); }
  .app-seat.on { background: var(--good-soft); border-color: var(--good); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--good) 16%, transparent); }
  .app-ballot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .42rem; }
  .app-ballot button { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--ink); padding: .62rem .5rem; font-family: var(--sans); font-weight: 900; }
  .app-ballot button.yes { color: var(--good); background: var(--good-soft); }
  .app-ballot button.no { color: var(--bad); background: var(--bad-soft); }
  .app-ballot button.insufficient { color: #556692; background: #eef1f8; font-size: .68rem; line-height: 1.12; }
  .app-ballot button[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 2px currentColor, 0 0 0 3px var(--accent-soft); }
  .ballot-explanation { grid-column: 1 / -1; display: grid; gap: .42rem; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 11px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 58%, var(--surface)), var(--surface)); padding: .62rem .68rem .66rem; }
  .ballot-explanation-heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
  .ballot-explanation-label { display: flex; align-items: center; flex-wrap: wrap; gap: .42rem; color: var(--ink); font-family: var(--sans); font-size: .76rem; line-height: 1.2; font-weight: 900; }
  .ballot-optional { color: var(--faint); font-family: var(--sans); font-size: .68rem; line-height: 1; font-weight: 700; }
  .ballot-explanation-input { box-sizing: border-box; width: 100%; min-height: 4.35rem; max-height: 8.5rem; resize: vertical; border: 1px solid var(--line-strong); border-radius: 9px; background: color-mix(in srgb, var(--bg) 68%, #fff); color: var(--ink); padding: .58rem .62rem; font-family: var(--sans); font-size: .76rem; line-height: 1.4; box-shadow: inset 0 1px 2px rgba(48, 42, 38, .04); }
  .ballot-explanation-input::placeholder { color: var(--faint); }
  .ballot-explanation-input:hover { border-color: color-mix(in srgb, var(--accent) 44%, var(--line-strong)); }
  .ballot-explanation-input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px 2px rgba(48, 42, 38, .04); }
  .ballot-explanation-note { color: var(--muted); font-family: var(--sans); font-size: .65rem; line-height: 1.3; }
  .app-ballot .ballot-confirm-action { grid-column: 1 / -1; width: 100%; }
  .app-ballot .ballot-confirm-action[disabled] { border-color: var(--line); background: var(--bg); color: var(--faint); box-shadow: none; cursor: not-allowed; opacity: .72; }
  .app-receipt { border: 1px dashed var(--line-strong); border-radius: 11px; background: color-mix(in srgb, var(--bg) 72%, #fff); padding: .62rem; }
  .app-receipt strong { display: block; color: var(--faint); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
  .app-receipt b { display: block; color: var(--ink); font-size: .92rem; line-height: 1.2; margin-top: .22rem; }
  .app-receipt span { display: block; color: var(--muted); font-size: .72rem; line-height: 1.32; margin-top: .2rem; }
  .app-value { color: var(--ink); font-size: 1.06rem; line-height: 1.15; font-weight: 900; }
  .app-note { color: var(--muted); font-size: .74rem; line-height: 1.32; }
  .receipt-details { display: grid; gap: .34rem; min-width: 0; margin: 0; }
  .receipt-detail { display: grid; grid-template-columns: minmax(6.4rem, .7fr) minmax(0, 1.3fr); align-items: baseline; gap: .45rem .75rem; border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent); padding-top: .34rem; }
  .receipt-detail dt { color: var(--muted); font-size: .68rem; font-weight: 750; line-height: 1.25; }
  .receipt-detail dd { min-width: 0; margin: 0; color: var(--ink); font-size: .74rem; font-weight: 850; line-height: 1.25; overflow-wrap: anywhere; }
  .live-card.block-record { display: block; padding: 0; overflow: hidden; }
  .activity-record { display: block; min-width: 0; }
  .activity-record > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .58rem; min-width: 0; padding: .62rem; cursor: pointer; list-style: none; }
  .activity-record > summary::-webkit-details-marker { display: none; }
  .activity-record > summary::marker { content: ""; }
  .activity-record > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
  .record-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: var(--good-soft); color: var(--good); }
  .record-mark svg { width: 1.02rem; height: 1.02rem; }
  .record-copy { display: grid; gap: .1rem; min-width: 0; }
  .record-copy strong { color: var(--ink); font-size: .78rem; line-height: 1.15; font-weight: 900; }
  .record-copy span { color: var(--muted); font-size: .64rem; line-height: 1.2; font-weight: 700; }
  .record-value { max-width: 11rem; color: var(--ink); font-size: .76rem; line-height: 1.18; font-weight: 900; text-align: right; overflow-wrap: anywhere; }
  .record-panel { display: grid; gap: .48rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 74%, var(--surface)); padding: .58rem .64rem .64rem; }
  .record-panel .app-note { margin: 0; }
  .live-card.block-settlement { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--good) 42%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--good-soft) 60%, var(--surface)), var(--surface) 58%); }
  .live-card.block-settlement::after { content: ""; position: absolute; right: -2rem; bottom: -3.8rem; width: 9rem; height: 9rem; border-radius: 50%; background: color-mix(in srgb, var(--good) 10%, transparent); pointer-events: none; }
  .settlement-hero { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; }
  .settlement-mark { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--good); color: #fff; box-shadow: 0 9px 20px color-mix(in srgb, var(--good) 26%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .28); }
  .settlement-mark svg { width: 1.36rem; height: 1.36rem; }
  .settlement-copy { display: grid; gap: .06rem; min-width: 0; }
  .settlement-copy span { color: var(--muted); font-size: .64rem; line-height: 1.1; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
  .settlement-copy b { color: var(--ink); font-size: 1.5rem; line-height: 1.05; font-weight: 950; letter-spacing: -.02em; }
  .settlement-copy small { color: var(--good); font-size: .7rem; line-height: 1.2; font-weight: 900; }
  .settlement-status { border: 1px solid color-mix(in srgb, var(--good) 35%, var(--line)); border-radius: 999px; background: var(--good-soft); color: var(--good); padding: .28rem .5rem; font-size: .62rem; line-height: 1; font-weight: 900; white-space: nowrap; }
  .settlement-details { position: relative; z-index: 1; margin-top: .56rem; border-top: 1px solid color-mix(in srgb, var(--good) 22%, var(--line)); padding-top: .5rem; }
  .settlement-details summary { color: var(--accent-ink); font-size: .7rem; line-height: 1.2; font-weight: 850; cursor: pointer; }
  .settlement-details .receipt-details { margin-top: .46rem; }
  .automatic-progress { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .56rem; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 68%, var(--surface)), color-mix(in srgb, var(--surface) 96%, transparent)); padding: .56rem .58rem .5rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 8%, transparent); }
  .automatic-progress::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 48%); pointer-events: none; }
  .automatic-progress-mark { position: relative; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line)); border-radius: 50%; background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--surface) 72%, transparent), 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent); }
  .automatic-progress-mark::before { content: ""; width: .52rem; height: .52rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 11%, transparent), 0 0 9px color-mix(in srgb, var(--accent) 42%, transparent); }
  .automatic-progress-copy { display: grid; gap: .06rem; min-width: 0; }
  .automatic-progress-eyebrow { color: var(--accent-ink); font-size: .5rem; line-height: 1; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
  .automatic-progress-copy strong { color: var(--ink); font-size: .74rem; line-height: 1.15; font-weight: 950; }
  .automatic-progress-status { color: var(--muted); font-size: .61rem; line-height: 1.24; font-weight: 750; }
  .automatic-pause-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .34rem; min-width: 5.25rem; min-height: 2.75rem; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft)); color: var(--accent-ink); padding: .48rem .62rem; font: 900 .63rem/1 var(--sans); cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 5%, transparent); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; }
  .automatic-pause-toggle:hover, .automatic-pause-toggle:focus-visible { border-color: var(--accent); outline: none; background: color-mix(in srgb, var(--accent-soft) 82%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 52%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 24%, transparent); transform: translateY(-1px); }
  .automatic-pause-toggle:active { transform: translateY(0) scale(.985); }
  .automatic-toggle-mark { position: relative; width: .78rem; height: .78rem; flex: 0 0 auto; }
  .automatic-toggle-mark::before, .automatic-toggle-mark::after { content: ""; position: absolute; top: .08rem; bottom: .08rem; width: .18rem; border-radius: 2px; background: currentColor; transition: clip-path .16s ease, inset .16s ease, transform .16s ease; }
  .automatic-toggle-mark::before { left: .14rem; }
  .automatic-toggle-mark::after { right: .14rem; }
  .automatic-progress[data-paused="true"] .automatic-toggle-mark::before { inset: .04rem .04rem .04rem .08rem; width: auto; clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .automatic-progress[data-paused="true"] .automatic-toggle-mark::after { display: none; }
  .automatic-progress[data-paused="true"] { border-color: color-mix(in srgb, var(--accent) 68%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 13%, transparent); }
  .automatic-progress-rail { position: relative; grid-column: 1 / -1; display: block; height: 4px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, var(--line)); }
  .automatic-progress-fill { position: absolute; inset: 0; display: block; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 58%, #fff), var(--accent)); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 46%, transparent); transform: scaleX(0); transform-origin: left center; transition: transform .12s linear; }

  /* ===== mobile autoplay: an automatic step has to read as watch-only =====
     On a phone the guide stacks above the screen instead of sitting beside it,
     so the reader scrolls into an app surface that looks exactly like the
     interactive ones. Say there is nothing to tap, make the countdown legible
     at a glance, and let the playing surface carry the signal itself. */
  .automatic-progress-hint { display: none; }
  .product-demo.sim-tight .automatic-progress-hint { display: block; margin-top: .18rem; color: var(--accent-ink); font-size: .66rem; line-height: 1.24; font-weight: 950; }
  .product-demo.sim-tight .automatic-progress-eyebrow { font-size: .6rem; }
  .product-demo.sim-tight .automatic-progress-status { font-size: .66rem; }
  .product-demo.sim-tight .automatic-progress-rail { height: 6px; }
  /* Outline rather than box-shadow: the app stylesheet resets the shadow on
     these surfaces with a heavier selector, and an outline costs no layout. */
  .product-demo.sim-tight[data-auto-run="true"] .sim-surface-frame { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -2px; }

  .auto-attention-target { position: relative; transition: border-color .2s ease, box-shadow .2s ease, outline-color .2s ease; }
  .auto-attention-target.is-auto-attention-active { z-index: 2; border-color: var(--accent) !important; outline: 1px solid color-mix(in srgb, var(--accent) 74%, transparent); outline-offset: -2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 26%, transparent) !important; animation: auto-attention-arrive .46s cubic-bezier(.2, .76, .24, 1) both; }
  .auto-attention-chip { position: absolute; z-index: 5; top: .36rem; right: .4rem; display: inline-flex; align-items: center; min-height: 1.15rem; border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft)); color: var(--accent-ink); padding: .2rem .38rem; font-size: .75rem; line-height: 1; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .18s ease, transform .18s ease; }
  .auto-attention-target.is-auto-attention-active .auto-attention-chip { opacity: 1; transform: translateY(0); }
  .product-demo[data-auto-paused="true"] .auto-attention-target.is-auto-attention-active { animation: none; outline-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 54%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 31%, transparent) !important; }
  .product-demo[data-auto-paused="true"] .sim-surface-frame * { animation-play-state: paused !important; }
  .app-action-card { display: grid; gap: .52rem; min-width: 0; border: 2px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 15px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 62%, var(--surface)), color-mix(in srgb, var(--surface) 94%, #fff)); box-shadow: 0 14px 26px color-mix(in srgb, var(--accent) 13%, transparent); padding: .62rem; }
  .action-dock-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
  .app-action-card .mini { display: inline-flex; align-items: center; gap: .32rem; color: var(--accent-ink); font-size: .68rem; line-height: 1.1; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
  .app-action-card .mini::before { content: ""; width: .48rem; height: .48rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 76%, transparent); }
  .action-title { gap: .2rem; transform-origin: left center; }
  .app-action-card .action-title::before { content: none; }
  .action-word { display: inline-block; transform-origin: center bottom; backface-visibility: hidden; }
  .action-status { justify-self: end; min-width: 0; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 90%, #fff); color: var(--muted); padding: .26rem .52rem; font-size: .62rem; line-height: 1.05; font-weight: 900; letter-spacing: .02em; white-space: nowrap; }
  .app-action-card.has-active .action-status { border-color: color-mix(in srgb, var(--good) 34%, var(--line)); background: var(--good-soft); color: var(--good); }
  .app-action-card.is-idle .action-word { animation: action-word-pop 2.8s ease-in-out infinite; will-change: transform, color; }
  .app-action-card.is-idle .action-word:nth-child(2) { animation-delay: .42s; }
  .app-action-card.is-idle .action-word:nth-child(3) { animation-delay: .84s; }
  .app-action-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.4rem, 1fr)); gap: .46rem; min-width: 0; }
  .app-action-bar button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: .46rem; min-width: 0; min-height: 3.45rem; border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), color-mix(in srgb, var(--accent-soft) 68%, var(--surface))); color: var(--accent-ink); border-radius: 14px; padding: .58rem 1.34rem .58rem .54rem; font-family: var(--sans); font-size: .82rem; line-height: 1.05; font-weight: 950; cursor: pointer; user-select: none; -webkit-user-select: none; text-align: left; box-shadow: 0 10px 18px rgba(31, 36, 48, .1); transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease; }
  .app-action-bar button > * { position: relative; z-index: 1; }
  .app-action-bar.is-idle button { transform-origin: center; animation: action-idle-nudge 4.8s cubic-bezier(.2, .7, .18, 1) infinite; will-change: transform, border-color, color, box-shadow; }
  .app-action-bar.is-idle button:nth-child(2) { animation-delay: 1.2s; }
  .app-action-bar.is-idle button:nth-child(3) { animation-delay: 2.4s; }
  .app-action-bar.is-idle button:nth-child(4) { animation-delay: 3.6s; }
  .app-action-bar.is-idle button::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 0%, transparent 28%, color-mix(in srgb, var(--good-soft) 56%, transparent) 43%, rgba(255, 255, 255, .7) 50%, color-mix(in srgb, var(--good-soft) 42%, transparent) 58%, transparent 73%, transparent 100%); opacity: 0; pointer-events: none; transform: translateX(-140%); animation: action-button-sheen 4.8s ease-in-out infinite; }
  .app-action-bar.is-idle button:nth-child(2)::before { animation-delay: 1.2s; }
  .app-action-bar.is-idle button:nth-child(3)::before { animation-delay: 2.4s; }
  .app-action-bar.is-idle button:nth-child(4)::before { animation-delay: 3.6s; }
  .app-action-bar button::after { content: ""; position: absolute; right: .58rem; top: 50%; z-index: 1; width: .44rem; height: .44rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); opacity: .72; }
  .app-action-bar.is-idle button::after { animation: action-arrow-poke 4.8s cubic-bezier(.2, .7, .18, 1) infinite; }
  .app-action-bar.is-idle button:nth-child(2)::after { animation-delay: 1.2s; }
  .app-action-bar.is-idle button:nth-child(3)::after { animation-delay: 2.4s; }
  .app-action-bar.is-idle button:nth-child(4)::after { animation-delay: 3.6s; }
  .app-action-bar button:hover { animation: none; transform: translateY(-2px); border-color: var(--accent); background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 82%, var(--ink))); color: #fff; box-shadow: 0 16px 30px color-mix(in srgb, var(--accent) 26%, transparent); cursor: pointer; }
  .app-action-bar button:hover::before,
  .app-action-bar button.active::before,
  .app-action-bar button:focus-visible::before { animation: none; opacity: 0; }
  .app-action-bar button:hover::after,
  .app-action-bar button.active::after,
  .app-action-bar button:focus-visible::after { animation: none; }
  .app-action-bar button.active { animation: none; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 82%, var(--ink))); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 18px 34px color-mix(in srgb, var(--accent) 28%, transparent); cursor: pointer; }
  .app-action-bar button:active { transform: translateY(0); box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 18%, transparent); }
  .app-action-bar button:focus-visible { animation: none; outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent); outline-offset: 3px; }
  .action-index { display: grid; place-items: center; width: 1.56rem; height: 1.56rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: .72rem; line-height: 1; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
  .app-action-bar.is-idle button .action-index { animation: action-index-pop 4.8s cubic-bezier(.2, .7, .18, 1) infinite; }
  .app-action-bar.is-idle button:nth-child(2) .action-index { animation-delay: 1.2s; }
  .app-action-bar.is-idle button:nth-child(3) .action-index { animation-delay: 2.4s; }
  .app-action-bar.is-idle button:nth-child(4) .action-index { animation-delay: 3.6s; }
  .app-action-bar button:hover .action-index,
  .app-action-bar button.active .action-index,
  .app-action-bar button:focus-visible .action-index { animation: none; }
  .app-action-bar button:hover .action-index, .app-action-bar button.active .action-index { background: rgba(255, 255, 255, .22); color: #fff; }
  .action-text { display: grid; gap: .16rem; min-width: 0; }
  .action-label { min-width: 0; overflow-wrap: anywhere; }
  .action-target { color: color-mix(in srgb, var(--accent-ink) 64%, var(--muted)); font-size: .64rem; line-height: 1.16; font-weight: 850; }
  .action-target::before { content: "changes "; color: var(--accent); font-weight: 950; }
  .app-action-bar button:hover .action-target,
  .app-action-bar button.active .action-target { color: rgba(255, 255, 255, .78); }
  .app-action-bar button:hover .action-target::before,
  .app-action-bar button.active .action-target::before { color: rgba(255, 255, 255, .92); }
  .live-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: .72rem; width: 100%; max-width: 100%; min-height: 100%; padding: .78rem; min-width: 0; box-sizing: border-box; }
  .live-main, .live-side { display: grid; align-content: start; gap: .62rem; min-width: 0; }
  .live-main { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .live-main > .live-head,
  .live-main > .live-intent,
  .live-main > .live-kpis { grid-column: 1 / -1; }
  .live-main > .live-card { grid-column: span var(--live-span, 4); }
  .live-card.live-span-3 { --live-span: 3; }
  .live-card.live-span-4 { --live-span: 4; }
  .live-card.live-span-5 { --live-span: 5; }
  .live-card.live-span-6 { --live-span: 6; }
  .live-card.live-span-7 { --live-span: 7; }
  .live-card.live-span-12 { --live-span: 12; }
  .live-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .7rem; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 13px; background: linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--surface) 84%, #fff)); padding: .72rem; min-width: 0; }
  .live-head h4 { margin: .16rem 0 0; font-size: clamp(1.05rem, 1.8vw, 1.42rem); line-height: 1.08; letter-spacing: 0; }
  .live-head p { margin: .24rem 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.34; }
  .live-head-main { min-width: 0; }
  .live-head-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
  .live-status { display: inline-flex; align-items: center; gap: .32rem; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent-soft) 46%, var(--surface)); color: var(--accent-ink); padding: .24rem .52rem; font-size: .68rem; line-height: 1.05; font-weight: 900; white-space: nowrap; }
  .live-status::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
  .live-status.good { color: var(--good); background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 34%, var(--line)); }
  .live-status.warn { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 34%, var(--line)); }
  .live-card { position: relative; display: grid; align-content: start; gap: .52rem; min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); padding: .68rem; }
  .live-card.awaiting-action { border-color: color-mix(in srgb, var(--good) 42%, var(--line)); background: color-mix(in srgb, var(--good-soft) 34%, var(--surface)); }
  .live-card.is-continuation-target { border-color: color-mix(in srgb, var(--good) 54%, var(--line)); background: color-mix(in srgb, var(--good-soft) 42%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 16%, transparent), 0 16px 30px rgba(11, 153, 107, .14); }
  .live-card.hot { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 76%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent), 0 16px 30px color-mix(in srgb, var(--accent) 18%, transparent); animation: app-target-pop .42s ease-out both; }
  .live-card.good { border-color: color-mix(in srgb, var(--good) 38%, var(--line)); background: color-mix(in srgb, var(--good-soft) 48%, var(--surface)); }
  .live-card.bad { border-color: color-mix(in srgb, var(--bad) 38%, var(--line)); background: color-mix(in srgb, var(--bad-soft) 48%, var(--surface)); }
  .action-effect { border: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--accent-soft) 48%, transparent); color: var(--accent-ink); padding: .4rem .52rem; font-size: .72rem; line-height: 1.32; font-weight: 850; }
  .action-effect strong { display: block; margin-bottom: .1rem; color: var(--accent); font-size: .58rem; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; }
  .live-card-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .36rem .6rem; color: var(--ink); font-size: .86rem; line-height: 1.15; font-weight: 900; }
  .block-title-main { display: inline-flex; align-items: center; gap: .38rem; min-width: 0; }
  .block-title-main b { min-width: 0; overflow-wrap: anywhere; }
  .block-title-main .sim-help { margin-left: .06rem; }
  .block-icon { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); flex: 0 0 auto; }
  .block-icon svg { display: block; width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
  .live-card-title span { color: var(--faint); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
  .live-card-title .step-link-badge { max-width: 100%; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 999px; background: var(--accent); color: #fff; padding: .2rem .48rem; font-size: .62rem; line-height: 1.08; letter-spacing: 0; text-transform: none; text-align: center; overflow-wrap: anywhere; box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 16%, transparent); }
  .live-action-row { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .34rem .52rem; min-width: 0; padding-top: .08rem; }
  .live-continuation-row { margin-top: .08rem; border-top: 1px solid var(--line); padding-top: .58rem; }
  .live-page-continuation { display: flex; flex-wrap: wrap; justify-content: flex-end; grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--line); padding-top: .58rem; }
  .sim-app-continuation { width: fit-content; }
  .sim-app-action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .42rem; width: fit-content; max-width: 100%; min-height: 2.35rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #fff; padding: .52rem .86rem; font-family: var(--sans); font-size: .76rem; line-height: 1.05; font-weight: 950; text-align: center; white-space: normal; box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 20%, transparent); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease; }
  .sim-live-preview .sim-app-action,
  .sim-live-preview .sim-app-action *,
  .sim-live-preview .sim-app-action::after { cursor: pointer; }
  .sim-app-action::after { content: ">"; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; flex: 0 0 auto; font-size: .68rem; line-height: 1; }
  .sim-app-action.guided-target::after { background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good-soft) 0%, transparent); animation: guided-arrow-tap 2.35s ease-in-out infinite; }
  .sim-app-action:hover,
  .sim-app-action:focus-visible { background: var(--good); border-color: var(--good); color: #fff; cursor: pointer; }
  .sim-app-action:disabled,
  .sim-app-action:disabled:hover { border-color: var(--line-strong); background: var(--bg); color: var(--faint); box-shadow: none; cursor: not-allowed; transform: none; }
  .sim-app-action:disabled::after { background: var(--line); color: var(--faint); animation: none; }
  .action-validation { flex: 1 0 100%; color: var(--bad); font-size: .68rem; font-weight: 800; line-height: 1.25; }
  .action-validation[hidden] { display: none; }
  .sim-app-action.app-continue-action { width: 100%; justify-content: space-between; background: var(--good); border-color: var(--good); box-shadow: 0 12px 24px rgba(11, 153, 107, .24), 0 0 0 4px color-mix(in srgb, var(--good-soft) 72%, transparent); }
  .sim-app-action.app-continue-action:hover,
  .sim-app-action.app-continue-action:focus-visible { background: color-mix(in srgb, var(--good) 86%, #053f32); border-color: color-mix(in srgb, var(--good) 86%, #053f32); transform: translateY(-2px); box-shadow: 0 18px 34px rgba(11, 153, 107, .28), 0 0 0 5px var(--good-soft); cursor: pointer; }
  .sim-app-action-label { min-width: 0; overflow-wrap: anywhere; }
  .live-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .live-kpi { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .54rem; min-width: 0; }
  .live-kpi span { display: block; color: var(--faint); font-size: .6rem; font-weight: 900; letter-spacing: .07em; line-height: 1.1; text-transform: uppercase; }
  .live-kpi b { display: block; margin-top: .18rem; color: var(--ink); font-size: .92rem; line-height: 1.14; overflow-wrap: anywhere; }
  .live-intent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .intent-item { border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent-soft) 34%, var(--bg)); padding: .52rem .56rem; min-width: 0; }
  .intent-item span { display: block; color: var(--faint); font-size: .58rem; font-weight: 950; letter-spacing: .08em; line-height: 1.1; text-transform: uppercase; }
  .intent-item b { display: block; margin-top: .18rem; color: var(--ink); font-size: .78rem; line-height: 1.22; overflow-wrap: anywhere; }
  .intent-item.money { border-color: color-mix(in srgb, var(--good) 28%, var(--line)); background: color-mix(in srgb, var(--good-soft) 36%, var(--bg)); }
  .intent-item.money b { color: var(--good); }
  .live-kpis > .live-kpi:nth-child(1),
  .live-intent > .intent-item:nth-child(1) { border-color: var(--triad-mint-border); background: var(--triad-mint); }
  .live-kpis > .live-kpi:nth-child(2),
  .live-intent > .intent-item:nth-child(2) { border-color: var(--triad-lavender-border); background: var(--triad-lavender); }
  .live-kpis > .live-kpi:nth-child(3),
  .live-intent > .intent-item:nth-child(3) { border-color: var(--triad-amber-border); background: var(--triad-amber); }
  .live-field { display: grid; gap: .22rem; }
  .live-field-label { display: flex; align-items: center; justify-content: flex-start; gap: .28rem; min-width: 0; }
  .live-field label { color: var(--faint); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; }
  .live-field-label .sim-help { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; font-size: .64rem; }
  .live-input { border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg); color: var(--ink); padding: .58rem .64rem; font-size: .88rem; font-weight: 850; line-height: 1.2; min-width: 0; }
  .live-static-value { min-width: 0; border: 2px solid var(--line-strong); border-radius: 8px; background: color-mix(in srgb, var(--surface) 64%, var(--bg)); color: var(--ink); padding: .46rem .56rem; font-size: .88rem; font-weight: 850; line-height: 1.24; overflow-wrap: anywhere; }
  .live-control { display: block; width: 100%; box-sizing: border-box; font-family: inherit; }
  .live-textarea { min-height: 4.5rem; resize: vertical; }
  .live-field.is-long { grid-column: 1 / -1; }
  .side-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .42rem; }
  .side-button { display: grid; place-items: center; min-height: 2.7rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); color: var(--ink); font-weight: 950; }
  .side-button.yes { color: var(--good); background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 38%, var(--line)); }
  .side-button.no { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 38%, var(--line)); }
  .liquidity-grid { display: grid; grid-template-columns: 1fr; gap: .46rem; }
  .liquidity-offer { display: grid; grid-template-columns: minmax(4rem, auto) minmax(7rem, 1fr); gap: .38rem; min-width: 0; }
  .liquidity-side { min-height: 3.2rem; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg); color: var(--ink); padding: .48rem .66rem; font-family: inherit; font-weight: 950; cursor: pointer; }
  .liquidity-side.good { color: var(--good); background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 42%, var(--line)); }
  .liquidity-side.bad { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 42%, var(--line)); }
  .liquidity-side[aria-pressed="false"] { opacity: .62; background: var(--bg); }
  .liquidity-amount { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; column-gap: .28rem; min-width: 0; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg); color: var(--ink); padding: .32rem .5rem; }
  .liquidity-amount:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .liquidity-caption-row { grid-column: 1 / -1; display: flex; align-items: center; gap: .26rem; min-width: 0; }
  .liquidity-caption { color: var(--faint); font-size: .56rem; line-height: 1; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
  .liquidity-caption-row .sim-help,
  .liquidity-preview-label .sim-help { width: 1.18rem; height: 1.18rem; min-width: 1.18rem; font-size: .6rem; }
  .liquidity-currency { color: var(--muted); font-weight: 900; }
  .liquidity-input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); padding: .08rem 0 0; font-family: inherit; font-size: .9rem; line-height: 1.1; font-weight: 900; }
  .liquidity-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; border-top: 1px solid var(--line); padding-top: .48rem; }
  .liquidity-preview > * { min-width: 0; }
  .liquidity-preview-label { display: flex; align-items: center; gap: .26rem; min-width: 0; }
  .liquidity-preview small { display: block; color: var(--faint); font-size: .6rem; line-height: 1; font-weight: 900; text-transform: uppercase; }
  .liquidity-preview b { display: block; margin-top: .18rem; color: var(--ink); font-size: .78rem; line-height: 1.15; overflow-wrap: anywhere; }
  .big-odds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
  .odds-side { display: grid; gap: .16rem; padding: .72rem; background: var(--bg); min-width: 0; }
  .odds-side.yes { background: var(--good-soft); color: var(--good); }
  .odds-side.no { background: var(--bad-soft); color: var(--bad); }
  .odds-side span { color: var(--muted); font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .odds-side b { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1; }
  .mini-table { display: grid; gap: .28rem; container: mini-table / inline-size; }
  .mini-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .46rem .52rem; color: var(--muted); font-size: .72rem; line-height: 1.18; }
  .mini-row b { color: var(--ink); }
  .mini-row.hot { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
  .mini-row.good { border-color: color-mix(in srgb, var(--good) 34%, var(--line)); background: var(--good-soft); }
  .mini-row.bad { border-color: color-mix(in srgb, var(--bad) 34%, var(--line)); background: var(--bad-soft); }
  .trade-ticket { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); padding: .64rem; }
  .trade-ticket > .live-field.span-full { grid-column: 1 / -1; }
  .ticket-summary { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .48rem; color: var(--muted); font-size: .72rem; }
  .ticket-summary b { color: var(--ink); font-size: .88rem; }
  .block-market-trade { overflow: hidden; border-color: color-mix(in srgb, var(--good) 46%, var(--line)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--good) 10%, transparent), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--good-soft) 24%, var(--surface)), var(--surface) 64%); }
  .market-trade { display: grid; gap: .6rem; min-width: 0; }
  .market-trade-position { display: flex; align-items: center; justify-content: space-between; gap: .7rem; border: 1px solid color-mix(in srgb, var(--good) 44%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--good-soft) 58%, var(--surface)); padding: .58rem .64rem; }
  .market-trade-position span { color: var(--muted); font-size: .66rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
  .market-trade-position b { color: var(--good); font-size: .9rem; text-align: right; }
  .market-outcome-label { color: var(--muted); font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .market-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .market-outcome { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: .08rem .5rem; min-width: 0; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--bg); color: var(--ink); padding: .62rem .68rem; font-family: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
  .market-outcome:hover,
  .market-outcome:focus-visible { transform: translateY(-1px); outline: none; }
  .market-outcome:disabled { opacity: 1; cursor: default; transform: none; }
  .market-outcome-name { grid-row: 1 / -1; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface); font-size: .72rem; font-weight: 950; }
  .market-outcome b { font-size: 1.22rem; line-height: 1; }
  .market-outcome small { color: var(--muted); font-size: .6rem; line-height: 1.12; font-weight: 800; }
  .market-outcome.yes:hover,
  .market-outcome.yes:focus-visible,
  .market-outcome.yes.is-selected { border-color: var(--good); background: var(--good-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 14%, transparent); }
  .market-outcome.yes .market-outcome-name,
  .market-outcome.yes b { color: var(--good); }
  .market-outcome.no:hover,
  .market-outcome.no:focus-visible,
  .market-outcome.no.is-selected { border-color: var(--bad); background: var(--bad-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 12%, transparent); }
  .market-outcome.no .market-outcome-name,
  .market-outcome.no b { color: var(--bad); }
  .market-order { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: .45rem; }
  .market-order-item { min-width: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); padding: .5rem .58rem; }
  .market-order-item span { display: block; color: var(--faint); font-size: .58rem; line-height: 1.05; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .market-order-item b { display: block; margin-top: .2rem; color: var(--ink); font-size: .92rem; line-height: 1.1; }
  .market-order-item.is-amount { border-color: color-mix(in srgb, var(--good) 34%, var(--line)); }
  .market-early-reward { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .22rem .65rem; align-items: start; border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--good-soft) 56%, var(--bg)); padding: .58rem .64rem; }
  .market-early-reward[data-sim-tip] { cursor: help; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
  .market-early-reward[data-sim-tip]:hover,
  .market-early-reward[data-sim-tip]:focus-within { border-color: var(--good); background: color-mix(in srgb, var(--good-soft) 72%, var(--bg)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 12%, transparent), 0 0 18px color-mix(in srgb, var(--good) 12%, transparent); }
  .market-early-reward-title { display: flex; align-items: center; gap: .34rem; min-width: 0; }
  .market-early-reward-title strong { color: var(--ink); font-size: .76rem; line-height: 1.15; }
  .market-early-reward-title .sim-help { width: 1.2rem; height: 1.2rem; min-width: 1.2rem; border-color: color-mix(in srgb, var(--good) 48%, var(--line)); background: color-mix(in srgb, var(--good-soft) 74%, var(--surface)); color: var(--good); font-size: .62rem; }
  .market-early-reward-title .sim-help:hover,
  .market-early-reward-title .sim-help:focus-visible,
  .market-early-reward-title .sim-help[aria-expanded="true"] {
    border-color: var(--good);
    background: color-mix(in srgb, var(--good-soft) 82%, var(--surface));
    color: var(--good);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 18%, transparent), 0 0 13px color-mix(in srgb, var(--good) 30%, transparent);
  }
  .market-early-reward b { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--good); font-size: 1.05rem; line-height: 1; }
  .market-early-reward p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.32; }
  .market-disclosure { border-top: 1px solid var(--line); padding-top: .44rem; }
  .market-disclosure p { margin: .42rem 0 0; color: var(--muted); font-size: .66rem; line-height: 1.38; }
  .market-disclosure .mini-table { margin-top: .42rem; }
  .block-fields .app-row { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .48rem .54rem; }
  .block-fields .app-row + .app-row { margin-top: .36rem; }
  .block-fields .app-row:first-of-type { border-top: 1px solid var(--line); padding-top: .48rem; }
  .block-ticket .trade-ticket { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 24%, var(--bg)); }
  .block-ticket .ticket-summary { align-items: center; }
  .block-odds { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
  .block-closed .live-card-title span,
  .block-proof .live-card-title span { color: var(--good); }
  .block-fill { overflow: hidden; border-color: color-mix(in srgb, var(--good) 34%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--good-soft) 30%, var(--surface)), var(--surface) 64%); }
  .best-fill { display: grid; gap: .56rem; min-width: 0; }
  .fill-request { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 12px; background: var(--accent-soft); padding: .58rem .64rem; }
  .fill-request span { color: var(--muted); font-size: .66rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
  .fill-request b { color: var(--accent-ink); font-size: 1rem; line-height: 1.05; text-align: right; }
  .fill-source-list { display: grid; gap: .34rem; }
  .fill-source { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .52rem; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); padding: .48rem .54rem; min-width: 0; }
  .fill-source.is-order { border-color: color-mix(in srgb, var(--good) 48%, var(--line)); background: color-mix(in srgb, var(--good-soft) 58%, var(--bg)); }
  .fill-source.is-pool { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 56%, var(--bg)); }
  .fill-source.is-unused { opacity: .6; }
  .fill-rank { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: .68rem; font-weight: 950; box-shadow: inset 0 0 0 1px var(--line); }
  .fill-source.is-order .fill-rank { background: var(--good); color: #00170b; box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 14%, transparent); }
  .fill-source-copy { display: grid; gap: .08rem; min-width: 0; }
  .fill-source-copy b { color: var(--ink); font-size: .76rem; line-height: 1.12; }
  .fill-source-copy span { color: var(--muted); font-size: .64rem; line-height: 1.2; }
  .fill-source-price { display: grid; justify-items: end; gap: .06rem; color: var(--ink); text-align: right; }
  .fill-source-price b { font-size: .9rem; }
  .fill-source-price span { color: var(--muted); font-size: .6rem; font-weight: 800; }
  .fill-route { display: flex; min-height: 3.35rem; gap: 2px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--good) 52%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--good) 16%, var(--bg)); padding: 2px; box-shadow: 0 0 15px color-mix(in srgb, var(--good) 10%, transparent); }
  .fill-segment { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); align-items: center; gap: .44rem; min-width: 0; padding: .46rem .58rem; color: #fff; font-size: .7rem; font-weight: 950; white-space: normal; }
  .fill-segment:first-child { border-radius: 8px 3px 3px 8px; }
  .fill-segment:last-child { border-radius: 3px 8px 8px 3px; }
  .fill-segment.is-order { background: var(--good); }
  .fill-segment.is-pool { background: var(--accent); }
  .fill-segment.is-best { background: linear-gradient(135deg, color-mix(in srgb, var(--good) 86%, #fff), var(--good)); color: #00170b; }
  .fill-segment.is-next { background: linear-gradient(135deg, color-mix(in srgb, var(--good) 26%, #00190d), color-mix(in srgb, var(--good) 42%, #00190d)); color: #edfff5; }
  .fill-segment-step { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .62rem; line-height: 1; opacity: .92; }
  .fill-segment-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: baseline; column-gap: .42rem; min-width: 0; }
  .fill-segment-label { grid-column: 1 / -1; overflow: hidden; font-size: .54rem; line-height: 1; letter-spacing: .075em; opacity: .76; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
  /* Both stay on one line, so without clipping the quantity overruns its track
     and paints straight through the price in a narrow segment. */
  .fill-segment-quantity { margin-top: .16rem; overflow: hidden; font-size: .82rem; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
  .fill-segment-price { overflow: hidden; font-size: .64rem; font-weight: 900; line-height: 1; opacity: .86; text-overflow: ellipsis; white-space: nowrap; }
  .fill-math { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .34rem; }
  .fill-math-item { display: flex; align-items: baseline; justify-content: space-between; gap: .45rem; border-top: 1px solid var(--line); padding-top: .34rem; color: var(--muted); font-size: .65rem; }
  .fill-math-item b { color: var(--ink); font-size: .72rem; text-align: right; }
  .fill-total { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; border-top: 1px solid color-mix(in srgb, var(--good) 42%, var(--line)); padding-top: .48rem; color: var(--muted); font-size: .72rem; font-weight: 800; }
  .fill-total b { color: var(--ink); font-size: 1rem; }
  .block-utilities { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 25%, var(--surface)), var(--surface)); }
  .block-yield { overflow: hidden; border-color: color-mix(in srgb, var(--good) 48%, var(--line)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--good) 14%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--good-soft) 24%, var(--surface)), var(--surface) 62%); }
  .defi-vault { display: grid; gap: .62rem; min-width: 0; }
  .defi-vault-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .7rem; border: 1px solid color-mix(in srgb, var(--good) 26%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--bg) 82%, transparent); padding: .62rem; }
  .defi-vault-asset { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center; gap: .55rem; min-width: 0; }
  .defi-vault-token { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid color-mix(in srgb, var(--good) 55%, var(--line)); border-radius: 50%; background: var(--good-soft); color: var(--good); box-shadow: 0 0 16px color-mix(in srgb, var(--good) 24%, transparent); font-size: .72rem; font-weight: 950; }
  .defi-vault-name { min-width: 0; }
  .defi-vault-name strong { display: block; color: var(--ink); font-size: .85rem; line-height: 1.2; overflow-wrap: anywhere; }
  .defi-vault-badges { display: flex; flex-wrap: wrap; gap: .24rem; margin-top: .28rem; }
  .defi-vault-badge { border: 1px solid color-mix(in srgb, var(--good) 28%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--good-soft) 58%, var(--surface)); color: var(--good); padding: .16rem .38rem; font-size: .54rem; line-height: 1; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
  .defi-vault-rate { text-align: right; }
  .defi-vault-rate span { display: block; color: var(--faint); font-size: .56rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
  .defi-vault-rate b { display: block; margin-top: .12rem; color: var(--good); font-size: 1.3rem; line-height: 1; }
  .defi-vault-rate small { display: block; margin-top: .16rem; color: var(--muted); font-size: .55rem; }
  .defi-vault-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .38rem; }
  .defi-vault-stat { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg) 86%, transparent); padding: .48rem .52rem; }
  .defi-vault-stat span { display: block; color: var(--faint); font-size: .55rem; font-weight: 900; letter-spacing: .065em; text-transform: uppercase; }
  .defi-vault-stat b { display: block; margin-top: .18rem; color: var(--ink); font-size: .78rem; line-height: 1.15; overflow-wrap: anywhere; }
  .defi-vault-stat.is-yield b { color: var(--good); }
  .defi-position-live { display: flex; align-items: center; justify-content: space-between; gap: .6rem; border: 1px solid color-mix(in srgb, var(--good) 42%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--good-soft) 58%, var(--surface)); padding: .5rem .58rem; color: var(--good); }
  .defi-position-live span { display: inline-flex; align-items: center; gap: .34rem; font-size: .66rem; font-weight: 900; }
  .defi-position-live span::before { content: ""; width: .46rem; height: .46rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 16%, transparent); }
  .defi-position-live b { color: var(--ink); font-size: .78rem; }
  .defi-deposit-card { overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--surface) 92%, transparent); }
  .defi-deposit-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 72%, var(--surface)); }
  .defi-deposit-tab { position: relative; padding: .52rem; color: var(--faint); font-size: .68rem; font-weight: 900; text-align: center; }
  .defi-deposit-tab.is-active { color: var(--ink); }
  .defi-deposit-tab.is-active::after { content: ""; position: absolute; right: 16%; bottom: -1px; left: 16%; height: 2px; border-radius: 999px; background: var(--good); box-shadow: 0 0 9px color-mix(in srgb, var(--good) 58%, transparent); }
  .defi-deposit-body { display: grid; gap: .5rem; padding: .62rem; }
  .defi-balance-row { display: flex; align-items: center; justify-content: space-between; gap: .55rem; color: var(--muted); font-size: .62rem; }
  .defi-balance-row b { color: var(--ink); font-size: .66rem; }
  .defi-amount-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; border: 2px solid color-mix(in srgb, var(--good) 54%, var(--line)); border-radius: 11px; background: var(--bg); padding: .58rem .62rem; }
  .defi-amount-copy span { display: block; color: var(--faint); font-size: .54rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
  .defi-amount-copy b { display: block; margin-top: .1rem; color: var(--ink); font-size: 1.18rem; line-height: 1; }
  .defi-token-select { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid color-mix(in srgb, var(--good) 36%, var(--line)); border-radius: 999px; background: var(--good-soft); color: var(--good); padding: .34rem .5rem; font-size: .67rem; font-weight: 950; white-space: nowrap; }
  .defi-token-select::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
  .defi-yield-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .38rem; }
  .defi-yield-estimate { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--good-soft) 36%, var(--bg)); padding: .48rem .52rem; }
  .defi-yield-estimate span { display: block; color: var(--faint); font-size: .54rem; font-weight: 900; letter-spacing: .065em; text-transform: uppercase; }
  .defi-yield-estimate b { display: block; margin-top: .18rem; color: var(--good); font-size: .8rem; line-height: 1.15; }
  .defi-vault-terms { display: grid; gap: .3rem; border-top: 1px solid var(--line); padding-top: .46rem; }
  .defi-vault-term { display: flex; align-items: baseline; justify-content: space-between; gap: .65rem; color: var(--muted); font-size: .61rem; }
  .defi-vault-term b { color: var(--ink); font-size: .64rem; text-align: right; }
  .defi-vault-note { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.35; }
  @media (max-width: 640px) {
    .defi-vault-head { grid-template-columns: 1fr; }
    .defi-vault-rate { border-top: 1px solid var(--line); padding-top: .46rem; text-align: left; }
    .defi-vault-stats { grid-template-columns: 1fr 1fr; }
    .defi-vault-stats .defi-vault-stat:last-child { grid-column: 1 / -1; }
    .defi-yield-preview { grid-template-columns: 1fr; }
  }
  .token-utility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .token-utility { display: grid; align-content: start; gap: .18rem; min-width: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); padding: .52rem; }
  .token-utility.is-interest { border-color: color-mix(in srgb, var(--good) 42%, var(--line)); background: color-mix(in srgb, var(--good-soft) 46%, var(--bg)); }
  .token-utility strong { color: var(--ink); font-size: .73rem; line-height: 1.15; }
  .token-utility span { color: var(--muted); font-size: .64rem; line-height: 1.28; }
  .utility-eyebrow { color: var(--faint); font-size: .56rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
  .capital-layer-grid { display: grid; gap: .38rem; }
  .capital-layer { display: grid; grid-template-columns: minmax(7.5rem, .78fr) minmax(0, 1.22fr); gap: .52rem; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); padding: .5rem .54rem; }
  .capital-layer.is-protected { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); background: color-mix(in srgb, var(--good-soft) 44%, var(--bg)); }
  .capital-layer.is-risk { border-color: color-mix(in srgb, var(--bad) 28%, var(--line)); background: color-mix(in srgb, var(--bad-soft) 32%, var(--bg)); }
  .capital-role { display: grid; align-content: start; gap: .12rem; }
  .capital-role span { color: var(--faint); font-size: .56rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
  .capital-role b { color: var(--ink); font-size: .72rem; line-height: 1.16; }
  .capital-detail { color: var(--muted); font-size: .64rem; line-height: 1.3; }
  .token-wallet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .46rem; }
  .wallet-token { border: 1px solid var(--line); border-radius: 13px; background: var(--bg); padding: .64rem; min-width: 0; }
  .wallet-token.good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 36%, var(--line)); }
  .wallet-token.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 36%, var(--line)); }
  .wallet-token span { display: block; color: var(--faint); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; }
  .wallet-token b { display: block; margin-top: .22rem; font-size: 1.08rem; line-height: 1.1; }
  .check-list { display: grid; gap: .36rem; }
  .check-item { display: flex; justify-content: space-between; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .48rem .56rem; color: var(--muted); font-size: .72rem; }
  .check-item > span { min-width: 0; }
  .check-item b { color: var(--good); flex: 0 0 auto; overflow-wrap: normal; word-break: normal; white-space: nowrap; }
  .participant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .46rem; }
  .participant { border: 1px solid var(--line); border-radius: 13px; background: var(--bg); padding: .62rem; }
  .participant b { display: block; font-size: .92rem; }
  .participant span { display: block; margin-top: .18rem; color: var(--muted); font-size: .72rem; }
  .message-feed { display: grid; gap: .36rem; }
  .message { width: fit-content; max-width: 92%; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); color: var(--ink-soft); padding: .46rem .56rem; font-size: .72rem; line-height: 1.28; }
  .message.me { margin-left: auto; background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }
  .bet-slip { display: grid; gap: .44rem; }
  .leg-card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: .56rem; }
  .leg-card b { display: block; font-size: .88rem; }
  .leg-card span { color: var(--muted); font-size: .72rem; }
  .scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .42rem; align-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); padding: .66rem; }
  .team-score { display: grid; gap: .16rem; text-align: center; }
  .team-score span { color: var(--faint); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; }
  .team-score b { font-size: 1.45rem; line-height: 1; }
  .score-sep { color: var(--muted); font-weight: 900; }
  .countdown { display: grid; place-items: center; min-height: 4.8rem; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); text-align: center; }
  .countdown b { font-size: 1.5rem; line-height: 1; }
  .countdown span { color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .handoff { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .46rem; align-items: center; }
  .handoff-box { border: 1px solid var(--line); border-radius: 13px; background: var(--bg); padding: .62rem; min-width: 0; }
  .handoff-arrow { color: var(--accent); font-weight: 950; }
  .beacon-readout { display: grid; gap: .35rem; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 13px; background: var(--accent-soft); padding: .62rem; }
  .beacon-readout code { font-family: var(--mono); color: var(--accent-ink); font-size: .74rem; overflow-wrap: anywhere; }
  .face-checks { display: grid; gap: .32rem; }
  .face-check { display: flex; justify-content: space-between; gap: .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .42rem .5rem; color: var(--muted); font-size: .72rem; }
  .face-check > span { min-width: 0; }
  .face-check b { color: var(--good); flex: 0 0 auto; overflow-wrap: normal; word-break: normal; white-space: nowrap; }
  .app-route-step span:last-child,
  .checkout-row b,
  .ticket-summary b,
  .proof-stamp,
  .wallet-token b { overflow-wrap: normal; word-break: normal; white-space: nowrap; }
  .mini-row span:last-child,
  .app-row b,
  .liquidity-preview b { overflow-wrap: normal; word-break: normal; }
  .evidence-brief { display: grid; gap: .34rem; }
  .evidence-item { display: grid; grid-template-columns: minmax(4.8rem, .34fr) minmax(0, 1fr); gap: .5rem; align-items: baseline; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .46rem .52rem; }
  .evidence-item span { color: var(--faint); font-size: .62rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
  .evidence-item b { color: var(--ink); font-size: .76rem; line-height: 1.24; }
  .proof-stamp { display: inline-flex; align-items: center; width: fit-content; border: 1px solid color-mix(in srgb, var(--good) 34%, var(--line)); border-radius: 999px; background: var(--good-soft); color: var(--good); padding: .24rem .52rem; font-size: .68rem; font-weight: 900; }
  .checkout-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .48rem .56rem; color: var(--muted); font-size: .72rem; }
  .checkout-row b { color: var(--ink); }
  .checkout-row.winner { border: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line)); background: var(--accent-soft); color: var(--accent-ink); }
  .closed-stamp { display: grid; place-items: center; min-height: 4.2rem; border: 2px solid color-mix(in srgb, var(--good) 45%, var(--line)); border-radius: 14px; background: var(--good-soft); color: var(--good); font-size: 1.22rem; font-weight: 950; text-transform: uppercase; letter-spacing: .06em; }
  .live-card.block-appeal-crowdfund { position: relative; isolation: isolate; overflow: hidden; border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 58%, var(--surface)), var(--surface) 48%, color-mix(in srgb, var(--accent) 6%, var(--surface))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent), 0 16px 34px color-mix(in srgb, var(--accent) 9%, transparent); }
  .live-card.block-appeal-crowdfund::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 28%), linear-gradient(90deg, transparent 0 49%, color-mix(in srgb, var(--accent) 3%, transparent) 50%, transparent 51%); background-size: auto, 26px 26px; }
  .appeal-crowdfund { display: grid; gap: .72rem; min-width: 0; }
  .appeal-funding-summary { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
  .appeal-funding-numbers, .appeal-deadline { display: grid; gap: .12rem; min-width: 0; }
  .appeal-funding-numbers > span, .appeal-deadline > span { color: var(--faint); font-size: .58rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
  .appeal-funding-numbers > b { color: var(--ink); font-size: clamp(1.2rem, 3.2cqi, 1.78rem); line-height: 1; }
  .appeal-funding-numbers > b small { color: var(--muted); font-size: .68em; font-weight: 800; }
  .appeal-deadline { text-align: right; }
  .appeal-deadline > b { color: var(--ink-soft); font-size: .7rem; line-height: 1.2; }
  .appeal-progress { display: flex; width: 100%; height: .72rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 72%, var(--ink)); box-shadow: inset 0 1px 5px color-mix(in srgb, #000 34%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 13%, transparent); }
  .appeal-progress-segment { width: var(--appeal-share); flex: 0 0 var(--appeal-share); border-right: 1px solid color-mix(in srgb, var(--surface) 50%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 66%, #fff), var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 36%, transparent); transform-origin: left center; animation: appeal-funding-fill .55s cubic-bezier(.2, .74, .24, 1) both; }
  .appeal-progress-segment.is-you { background: linear-gradient(90deg, #00e5ff, color-mix(in srgb, #00e5ff 66%, var(--accent))); box-shadow: 0 0 12px color-mix(in srgb, #00e5ff 54%, transparent); }
  .appeal-progress-segment.is-crowd { filter: brightness(1.12); }
  .appeal-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: -.4rem; color: var(--muted); font-size: .61rem; }
  .appeal-progress-meta b { color: var(--accent-ink); }
  .appeal-crowdfund-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: .62rem; min-width: 0; }
  .appeal-contributors, .appeal-contribution-panel { display: grid; align-content: start; gap: .52rem; min-width: 0; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--surface) 91%, transparent); padding: .68rem; }
  .appeal-contribution-panel.is-editable { border: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line)); }
  .appeal-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0; }
  .appeal-panel-heading b { color: var(--ink); font-size: .7rem; }
  .appeal-panel-heading span { color: var(--faint); font-size: .54rem; font-weight: 800; text-align: right; }
  .appeal-contributor-list { display: grid; gap: .3rem; }
  .appeal-contributor-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--surface) 95%, transparent); padding: .42rem .48rem; }
  .appeal-contributor-row.is-you { border-color: color-mix(in srgb, #00e5ff 46%, var(--line)); background: color-mix(in srgb, #00e5ff 7%, var(--surface)); }
  .appeal-contributor-row > div { display: grid; gap: .06rem; min-width: 0; }
  .appeal-contributor-row b { overflow: hidden; color: var(--ink-soft); font-family: var(--app-mono, monospace); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
  .appeal-contributor-row span { color: var(--faint); font-size: .53rem; }
  .appeal-contributor-row strong { color: var(--accent-ink); font-size: .66rem; }
  .appeal-empty-state { display: grid; gap: .2rem; border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 10px; padding: .72rem; text-align: center; }
  .appeal-empty-state b { color: var(--ink); font-size: .7rem; }
  .appeal-empty-state span { color: var(--muted); font-size: .59rem; line-height: 1.35; }
  .appeal-contribution-field { display: grid; gap: .28rem; }
  .appeal-contribution-field > span { color: var(--muted); font-size: .57rem; font-weight: 800; }
  .appeal-contribution-input { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--surface) 82%, var(--ink)); overflow: hidden; }
  .appeal-contribution-input > span { padding-left: .65rem; color: var(--accent); font-size: 1rem; font-weight: 900; }
  .appeal-contribution-input input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; padding: .62rem; color: var(--ink); font: 800 .9rem/1 var(--app-sans, sans-serif); }
  .appeal-contribution-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 17%, transparent); }
  .appeal-contribution-presets { display: flex; flex-wrap: wrap; gap: .28rem; }
  .appeal-contribution-presets button { border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface)); padding: .32rem .48rem; color: var(--ink-soft); font: 800 .53rem/1 var(--app-sans, sans-serif); cursor: pointer; }
  .appeal-contribution-presets button:hover, .appeal-contribution-presets button:focus-visible { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent); }
  .appeal-contribution-impact, .appeal-funding-rule { display: grid; gap: .14rem; border-radius: 10px; background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface)); padding: .54rem; }
  .appeal-contribution-impact b, .appeal-funding-rule b { color: var(--accent-ink); font-size: .68rem; }
  .appeal-contribution-impact span, .appeal-funding-rule span { color: var(--muted); font-size: .57rem; line-height: 1.34; }
  .appeal-outcome-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .appeal-outcome-rules > div { display: grid; gap: .12rem; border: 1px solid color-mix(in srgb, var(--accent) 19%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--surface) 92%, transparent); padding: .52rem .58rem; }
  .appeal-outcome-rules span { color: var(--faint); font-size: .54rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
  .appeal-outcome-rules b { color: var(--ink-soft); font-size: .64rem; }
  .appeal-outcome-rules .is-success { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
  .appeal-outcome-rules .is-failure { border-color: color-mix(in srgb, #ff836e 28%, var(--line)); }
  .appeal-quote-details { border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); padding-top: .5rem; }
  .appeal-quote-details summary { color: var(--accent-ink); font-size: .61rem; font-weight: 900; cursor: pointer; }
  .appeal-quote-details .mini-table { margin-top: .48rem; }
  .appeal-quote-details p { margin: .42rem 0 0; color: var(--muted); font-size: .57rem; }
  .appeal-custody-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: start; border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); padding-top: .52rem; }
  .appeal-custody-note b { color: var(--accent-ink); font-size: .6rem; white-space: nowrap; }
  .appeal-custody-note span { color: var(--muted); font-size: .57rem; line-height: 1.34; }
  @keyframes appeal-funding-fill { from { transform: scaleX(0); opacity: .35; } to { transform: scaleX(1); opacity: 1; } }
  @container run-stage (max-width: 620px) {
    .appeal-crowdfund-body { grid-template-columns: minmax(0, 1fr); }
    .appeal-funding-summary { align-items: start; }
    .appeal-custody-note { grid-template-columns: minmax(0, 1fr); gap: .14rem; }
  }
  @container run-stage (max-width: 420px) {
    .appeal-funding-summary { display: grid; }
    .appeal-deadline { text-align: left; }
    .appeal-outcome-rules { grid-template-columns: minmax(0, 1fr); }
  }

  .live-card.block-juror-settlement { position: relative; isolation: isolate; overflow: hidden; border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 54%, var(--surface)), var(--surface) 46%, color-mix(in srgb, var(--accent) 5%, var(--surface))); box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 8%, transparent); }
  .live-card.block-juror-settlement::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 32%), radial-gradient(circle at 88% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 30%); }
  .juror-settlement { display: grid; gap: .72rem; min-width: 0; }
  .juror-settlement-route { display: grid; grid-template-columns: minmax(7.4rem, 1fr) minmax(3.6rem, .55fr) minmax(7.4rem, 1fr); align-items: center; gap: .55rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--surface) 88%, transparent); padding: .56rem; }
  .juror-route-node { display: grid; gap: .12rem; min-width: 0; }
  .juror-route-node:last-child { text-align: right; }
  .juror-route-node span { color: var(--faint); font-size: .56rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
  .juror-route-node b { min-width: 0; color: var(--ink); font-size: .74rem; line-height: 1.18; overflow-wrap: anywhere; }
  .juror-route-track { position: relative; height: 3px; overflow: visible; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, var(--line)); }
  .juror-route-track::before { content: ""; position: absolute; inset: -4px 0; border-radius: inherit; background: color-mix(in srgb, var(--accent) 10%, transparent); filter: blur(5px); }
  .juror-route-track::after { content: ""; position: absolute; top: 50%; left: 0; width: .62rem; height: .62rem; border: 2px solid color-mix(in srgb, var(--surface) 84%, #fff); border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 68%, transparent); transform: translate(-10%, -50%); animation: juror-funding-travel 1.1s .2s cubic-bezier(.2, .78, .28, 1) both; }
  .juror-settlement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; min-width: 0; }
  .juror-account-panel { position: relative; display: grid; align-content: start; gap: .52rem; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); padding: .72rem; }
  .juror-account-panel.is-wallet { animation: juror-panel-arrive .42s .52s ease-out both; }
  .juror-account-panel.is-rating { animation: juror-panel-arrive .42s 1.18s ease-out both; }
  .juror-account-heading { display: flex; align-items: center; justify-content: space-between; gap: .55rem; min-width: 0; }
  .juror-account-heading span:first-child { color: var(--faint); font-size: .58rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
  .juror-private-badge { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface)); color: var(--accent-ink); padding: .2rem .42rem; font-size: .55rem; font-weight: 900; white-space: nowrap; }
  .juror-wallet-balance { display: grid; gap: .16rem; }
  .juror-wallet-balance span { color: var(--muted); font-size: .62rem; font-weight: 800; }
  .juror-wallet-balance b { color: var(--ink); font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: .98; letter-spacing: -.04em; }
  .juror-credit-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .55rem; border-top: 1px solid var(--line); padding-top: .48rem; color: var(--muted); font-size: .65rem; line-height: 1.25; }
  .juror-credit-line b { color: var(--good); font-size: .72rem; white-space: nowrap; }
  .juror-credit-line.is-debit b { color: var(--bad); }
  .juror-credit-total { display: flex; align-items: center; justify-content: space-between; gap: .55rem; border: 1px solid color-mix(in srgb, var(--good) 30%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--good-soft) 62%, var(--surface)); padding: .44rem .5rem; color: var(--good); font-size: .66rem; font-weight: 900; }
  .juror-credit-total b { font-size: .82rem; }
  .juror-rating-readout { display: flex; align-items: baseline; flex-wrap: wrap; gap: .36rem; }
  .juror-rating-readout b { color: var(--ink); font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: .98; letter-spacing: -.04em; }
  .juror-rating-delta { border: 1px solid color-mix(in srgb, var(--good) 32%, var(--line)); border-radius: 999px; background: var(--good-soft); color: var(--good); padding: .2rem .42rem; font-size: .66rem; font-weight: 950; }
  .juror-rating-delta.is-down { border-color: color-mix(in srgb, var(--bad) 32%, var(--line)); background: var(--bad-soft); color: var(--bad); }
  .juror-rating-meter { height: .42rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--line) 72%, transparent); }
  .juror-rating-meter i { display: block; width: var(--rating-progress, 74%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 42%, #fff), var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 48%, transparent); transform-origin: left center; animation: juror-rating-fill .82s 1.2s ease-out both; }
  .juror-rating-factors { display: grid; gap: .28rem; }
  .juror-rating-factor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; color: var(--muted); font-size: .61rem; line-height: 1.22; }
  .juror-rating-factor b { color: var(--ink-soft); text-align: right; }
  .juror-settlement-note { display: flex; align-items: flex-start; gap: .42rem; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface)); padding: .48rem .54rem; color: var(--muted); font-size: .62rem; line-height: 1.32; }
  .juror-settlement-note::before { content: ""; width: .48rem; height: .48rem; flex: 0 0 auto; margin-top: .12rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 56%, transparent); }
  @keyframes juror-funding-travel { from { left: 0; opacity: .35; } 70% { opacity: 1; } to { left: 100%; opacity: 1; } }
  @keyframes juror-panel-arrive { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes juror-rating-fill { from { transform: scaleX(.82); filter: saturate(.7); } to { transform: scaleX(1); filter: saturate(1); } }
  .product-demo.sim-tight .juror-settlement-grid,
  .product-demo.sim-ultra .juror-settlement-grid { grid-template-columns: minmax(0, 1fr); }
  .product-demo.sim-ultra .juror-settlement-route { grid-template-columns: minmax(0, 1fr) 2.4rem minmax(0, 1fr); padding: .4rem; }
  .product-demo.sim-ultra .juror-account-panel { padding: .5rem; }
  @container run-stage (max-width: 620px) {
    .juror-settlement-grid { grid-template-columns: minmax(0, 1fr); }
    .juror-settlement-route { grid-template-columns: minmax(0, 1fr) 2.4rem minmax(0, 1fr); padding: .46rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .appeal-progress-segment,
    .juror-route-track::after,
    .juror-account-panel.is-wallet,
    .juror-account-panel.is-rating,
    .juror-rating-meter i { animation: none; }
    .juror-route-track::after { left: 100%; }
  }
  .product-demo:not(.sim-compact) .live-card.block-fields:is(.live-span-6, .live-span-7, .live-span-12) { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
  .product-demo:not(.sim-compact) .page-create-market .live-card.block-fields { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
  .product-demo:not(.sim-compact) .live-card.block-fields:is(.live-span-6, .live-span-7, .live-span-12) > :is(.live-card-title, .live-action-row, .action-effect) { grid-column: 1 / -1; }
  .product-demo:not(.sim-compact) .live-card.block-receipt:is(.live-span-6, .live-span-7, .live-span-12) { grid-template-columns: minmax(7.5rem, .7fr) minmax(0, 1.3fr); align-items: center; }
  .product-demo:not(.sim-compact) .live-card.block-receipt:is(.live-span-6, .live-span-7, .live-span-12) > :is(.live-card-title, .live-action-row, .action-effect) { grid-column: 1 / -1; }
  .product-demo:not(.sim-compact) .live-card.block-checklist.live-span-7 .check-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-demo:not(.sim-compact) .live-main.live-layout-1 > .live-card.block-proof { grid-template-columns: minmax(8rem, .7fr) minmax(0, 1.3fr); align-items: center; }
  .product-demo:not(.sim-compact) .live-main.live-layout-1 > .live-card.block-proof > .live-card-title { grid-column: 1 / -1; }
  .product-demo:not(.sim-compact) .live-main.live-layout-1 > .live-card.block-proof > .proof-stamp { grid-column: 1; grid-row: 2; }
  .product-demo:not(.sim-compact) .live-main.live-layout-1 > .live-card.block-proof > .app-value { grid-column: 1; grid-row: 3; }
  .product-demo:not(.sim-compact) .live-main.live-layout-1 > .live-card.block-proof > .app-note { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .product-demo:not(.sim-compact) .live-main.live-layout-1 > .live-card.block-proof > :is(.live-action-row, .action-effect) { grid-column: 1 / -1; }
  .product-demo.sim-compact { grid-template-columns: 1fr; min-height: 0; padding: 0; }
  .product-demo.sim-compact .sim-step-guide { grid-template-columns: auto minmax(0, 1fr); }
  .product-demo.sim-compact .sim-step-controls { grid-column: 1 / -1; justify-items: start; border-top: 1px solid var(--line); padding-top: .48rem; }
  .product-demo.sim-compact .app-action-bar { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); width: 100%; }
  .product-demo.sim-compact .app-nav { flex-direction: column; align-items: flex-start; gap: .38rem; padding: .58rem .62rem; }
  .product-demo.sim-compact .app-tabs { flex-wrap: wrap; overflow: visible; }
  .product-demo.sim-compact .app-nav-tools { justify-content: flex-start; }
  .product-demo.sim-compact .app-nav-chip { max-width: 100%; }
  .product-demo.sim-compact .live-page { grid-template-columns: 1fr; gap: .54rem; padding: .56rem; }
  .product-demo.sim-compact .live-main { grid-template-columns: 1fr; }
  .product-demo.sim-compact .live-main > * { grid-column: 1 / -1; }
  .product-demo.sim-compact .live-head { flex-direction: column; gap: .5rem; padding: .6rem; }
  .product-demo.sim-compact .live-head-actions { justify-content: flex-start; }
  .product-demo.sim-compact .live-status { white-space: normal; }
  .product-demo.sim-compact .handoff { grid-template-columns: 1fr; }
  .product-demo.sim-compact .handoff-arrow { text-align: center; transform: rotate(90deg); }
  .product-demo.sim-compact .scoreboard { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .product-demo.sim-compact .score-sep { text-align: center; }
  .product-demo.sim-compact .mini-row { grid-template-columns: minmax(0, 1fr) auto; }
  .product-demo.sim-compact .mini-row span:last-child { grid-column: 1 / -1; }
  .product-demo.sim-compact .protocol-sequence-header { grid-template-columns: auto minmax(0, 1fr); }
  .product-demo.sim-compact .protocol-sequence-badges { grid-column: 1 / -1; justify-content: flex-start; padding-left: 3.36rem; }
  .product-demo.sim-compact .protocol-sequence-current { grid-template-columns: 1fr; align-items: start; }
  .product-demo.sim-compact .protocol-sequence-status { justify-self: start; }
  .product-demo.sim-compact .protocol-trace { grid-template-columns: 1fr; }
  .product-demo.sim-compact .protocol-trace-step:not(:last-child)::after { top: auto; right: auto; bottom: -.58rem; left: 1.42rem; width: 1px; height: .58rem; transform: none; }
  .product-demo.sim-compact .protocol-sequence .protocol-record.live-card { grid-column: 1 / -1; }
  .product-demo.sim-tight .live-page { padding: .42rem; }
  .product-demo.sim-tight .live-main { grid-template-columns: 1fr; gap: .38rem; }
  .product-demo.sim-tight .live-main > .live-head,
  .product-demo.sim-tight .live-main > .live-intent,
  .product-demo.sim-tight .live-main > .live-kpis { grid-column: 1 / -1; }
  .product-demo.sim-tight .live-main > .live-card { grid-column: 1 / -1; }
  .product-demo.sim-tight .live-main > .live-card.long-ticket { grid-column: 1 / -1; }
  .product-demo.sim-tight .live-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .32rem; }
  .product-demo.sim-tight .live-intent { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .32rem; }
  .product-demo.sim-tight .token-wallet,
  .product-demo.sim-tight .participant-grid,
  .product-demo.sim-tight .big-odds,
  .product-demo.sim-tight .side-picker,
  .product-demo.sim-tight .app-ballot { grid-template-columns: 1fr; }
  .product-demo.sim-tight .ballot-explanation { padding: .5rem .54rem; }
  .product-demo.sim-tight .ballot-explanation-input { min-height: 3.65rem; }
  .product-demo.sim-tight .capital-layer { grid-template-columns: 1fr; gap: .18rem; }
  .product-demo.sim-tight .live-card,
  .product-demo.sim-tight .live-head,
  .product-demo.sim-tight .trade-ticket,
  .product-demo.sim-tight .app-receipt { padding: .5rem; border-radius: 10px; }
  .product-demo.sim-tight .live-head { gap: .4rem; }
  .product-demo.sim-tight .live-head p { display: none; }
  .product-demo.sim-tight .live-kpi,
  .product-demo.sim-tight .intent-item { padding: .42rem; }
  .product-demo.sim-tight .trade-ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-demo.sim-tight .long-ticket .trade-ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-demo.sim-tight .sim-browser-bar { gap: .32rem; padding: .24rem .38rem; }
  .product-demo.sim-tight .sim-browser-next { width: auto; max-width: min(13rem, 46vw); min-width: 7.6rem; min-height: 2.75rem; padding-left: .52rem; }
  .product-demo.sim-tight .sim-browser-next-copy small { display: none; }
  .product-demo.sim-tight .sim-app-next { max-width: 11.5rem; min-height: 2.75rem; }
  .product-demo.sim-tight .app-nav-tools:has(.sim-app-next) { flex-wrap: wrap; }
  .product-demo.sim-tight .sim-demand-frame { gap: .32rem; margin-top: .62rem; padding: .6rem 0 0; }
  .product-demo.sim-tight .sim-demand-frame-tab { max-width: calc(100% - .5rem); margin: -1.28rem 0 .02rem .28rem; padding: .3rem .5rem; font-size: .68rem; }
  .product-demo.sim-tight .sim-browser-back { min-width: 5.2rem; min-height: 2.3rem; padding: .16rem .48rem .16rem .18rem; }
  .product-demo.sim-tight .sim-browser-back-icon { width: 1.36rem; height: 1.36rem; }
  .product-demo.sim-tight .sim-browser-back-label { font-size: .76rem; }
  .product-demo.sim-tight .app-nav { flex-direction: row; align-items: center; gap: .3rem .42rem; padding: .38rem .5rem; }
  .product-demo.sim-tight .app-tabs { display: flex; flex: 0 1 auto; }
  .product-demo.sim-tight .app-tabs span:not(.on) { display: none; }
  .product-demo.sim-tight .app-nav-tools { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; }
  .product-demo.sim-tight .app-nav-tools .app-nav-chip:first-child { display: none; }
  .product-demo.sim-tight .app-nav-tools .app-nav-chip:last-child { display: inline-flex; }
  .product-demo.sim-tight .app-nav-chip { max-width: 9rem; padding: .22rem .42rem; font-size: .6rem; }
  .product-demo.sim-tight .live-field { gap: .16rem; }
  .product-demo.sim-tight .live-field label { font-size: .56rem; }
  .product-demo.sim-tight :is(.live-input, .live-static-value) { padding: .44rem .46rem; font-size: .76rem; }
  .product-demo.sim-tight .live-card { gap: .38rem; }
  .product-demo.sim-tight .long-ticket .trade-ticket { gap: .3rem; padding: .42rem; }
  .product-demo.sim-tight .long-ticket .ticket-summary { padding-top: .3rem; }
  .product-demo.sim-tight .app-action-bar { grid-template-columns: 1fr; }
  .product-demo.sim-tight .app-action-bar button { width: 100%; white-space: normal; text-align: left; }
  .product-demo.sim-tight .ticket-summary,
  .product-demo.sim-tight .check-item,
  .product-demo.sim-tight .face-check { flex-wrap: wrap; }
  .product-demo.sim-tight .closed-stamp { min-height: 3.4rem; font-size: 1rem; letter-spacing: .04em; }
  .product-demo.sim-ultra { padding: 0; gap: .42rem; }
  .product-demo.sim-ultra .sim-step-guide { grid-template-columns: 1fr; padding: .42rem; }
  .product-demo.sim-ultra .sim-step-badge { width: 100%; min-height: 0; grid-template-columns: auto auto; justify-content: start; gap: .4rem; padding: .42rem .5rem; box-sizing: border-box; }
  .product-demo.sim-ultra .sim-step-controls { grid-column: auto; border-top: 1px solid var(--line); padding-top: .48rem; }
  .product-demo.sim-ultra .sim-browser-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: .24rem; padding: .2rem .32rem; }
  .product-demo.sim-ultra .sim-url { display: none; }
  .product-demo.sim-ultra .sim-browser-next { grid-column: 3; width: auto; max-width: min(12rem, 58vw); min-width: 7.8rem; min-height: 2.75rem; padding: .2rem .24rem .2rem .46rem; }
  .product-demo.sim-ultra .sim-browser-next-copy small { display: none; }
  .product-demo.sim-ultra .sim-browser-next-copy strong { font-size: .7rem; }
  .product-demo.sim-ultra .sim-next-arrow { width: 1.22rem; height: 1.22rem; }
  .product-demo.sim-ultra .sim-app-next { max-width: 10rem; min-height: 2.75rem; padding: .24rem .28rem .24rem .44rem; }
  .product-demo.sim-ultra .sim-app-next-label { font-size: .7rem; }
  .product-demo.sim-tight :is(.sim-explainer-next, .tutorial-advance), .product-demo.sim-ultra :is(.sim-explainer-next, .tutorial-advance) { min-height: 2.75rem; }
  .product-demo.sim-ultra .app-nav-tools:has(.sim-app-next) .app-nav-chip { display: none; }
  .product-demo.sim-ultra .protocol-sequence-header { gap: .5rem; padding: .58rem .52rem .58rem .68rem; }
  .product-demo.sim-ultra .protocol-sequence-mark { width: 2.25rem; height: 2.25rem; }
  .product-demo.sim-ultra .protocol-sequence-badges { padding-left: 2.75rem; }
  .product-demo.sim-ultra .protocol-sequence-scroll { gap: .58rem; padding: .58rem .5rem .62rem .68rem; }
  .product-demo.sim-ultra .protocol-sequence-facts { grid-template-columns: 1fr; }
  .product-demo.sim-ultra .protocol-sequence-legend { align-items: flex-start; flex-direction: column; }
  .product-demo.sim-ultra .sim-browser-back { min-width: 4.7rem; min-height: 2.2rem; padding: .14rem .4rem .14rem .16rem; }
  .product-demo.sim-ultra .sim-browser-back-icon { width: 1.22rem; height: 1.22rem; }
  .product-demo.sim-ultra .sim-browser-back-label { font-size: .7rem; }
  .product-demo.sim-ultra .live-page { padding: .3rem; }
  .product-demo.sim-ultra .live-main { grid-template-columns: 1fr; gap: .26rem; }
  .product-demo.sim-ultra .live-main > .live-head,
  .product-demo.sim-ultra .live-main > .live-intent,
  .product-demo.sim-ultra .live-main > .live-kpis { grid-column: 1 / -1; }
  .product-demo.sim-ultra .live-main > .live-card { grid-column: 1 / -1; }
  .product-demo.sim-ultra .live-main > .live-card.long-ticket { grid-column: 1 / -1; }
  .product-demo.sim-ultra .live-kpis,
  .product-demo.sim-ultra .live-intent { grid-template-columns: 1fr; gap: .22rem; }
  .product-demo.sim-ultra .live-kpi,
  .product-demo.sim-ultra .intent-item { padding: .28rem; }
  .product-demo.sim-ultra .live-kpi span,
  .product-demo.sim-ultra .intent-item span { font-size: .48rem; letter-spacing: .04em; }
  .product-demo.sim-ultra .live-kpi b { font-size: .72rem; }
  .product-demo.sim-ultra .intent-item b { font-size: .64rem; }
  .product-demo.sim-ultra .app-nav { padding: .5rem; }
  .product-demo.sim-ultra .app-brand span:last-child { white-space: normal; }
  .product-demo.sim-ultra .live-head { padding: .34rem; gap: .32rem; }
  .product-demo.sim-ultra .live-head h4 { font-size: .86rem; }
  .product-demo.sim-ultra .live-card { padding: .34rem; gap: .24rem; border-radius: 9px; }
  .product-demo.sim-ultra .live-card-title { display: flex; gap: .22rem; font-size: .72rem; }
  .product-demo.sim-ultra .live-card-title > .step-link-badge { display: none; }
  .product-demo.sim-ultra .block-icon { width: 1.05rem; height: 1.05rem; }
  .product-demo.sim-ultra .block-icon svg { width: .68rem; height: .68rem; }
  .product-demo.sim-ultra .big-odds,
  .product-demo.sim-ultra .side-picker,
  .product-demo.sim-ultra .app-ballot,
  .product-demo.sim-ultra .token-wallet,
  .product-demo.sim-ultra .participant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-demo.sim-ultra .odds-side { padding: .38rem; }
  .product-demo.sim-ultra .odds-side span { font-size: .52rem; letter-spacing: .04em; }
  .product-demo.sim-ultra .odds-side b { font-size: 1.1rem; }
  .product-demo.sim-ultra .app-row,
  .product-demo.sim-ultra .checkout-row { grid-template-columns: minmax(0, 1fr) auto; }
  .product-demo.sim-ultra .mini-row { grid-template-columns: minmax(0, 1fr) auto; }
  .product-demo.sim-ultra .trade-ticket,
  .product-demo.sim-ultra .long-ticket .trade-ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .24rem; padding: .34rem; border-radius: 9px; }
  .product-demo.sim-ultra .live-field { gap: .1rem; }
  .product-demo.sim-ultra .live-field label { font-size: .48rem; letter-spacing: .04em; }
  .product-demo.sim-ultra :is(.live-input, .live-static-value) { padding: .28rem .3rem; border-radius: 8px; font-size: .66rem; line-height: 1.12; }
  .product-demo.sim-ultra .ticket-summary { grid-column: 1 / -1; padding-top: .22rem; font-size: .62rem; }
  .product-demo.sim-ultra .ticket-summary b { font-size: .7rem; }
  .product-demo.sim-ultra .mini-table,
  .product-demo.sim-ultra .check-list,
  .product-demo.sim-ultra .face-checks,
  .product-demo.sim-ultra .message-feed,
  .product-demo.sim-ultra .bet-slip,
  .product-demo.sim-ultra .app-route { gap: .2rem; }
  .product-demo.sim-ultra .mini-row,
  .product-demo.sim-ultra .checkout-row { gap: .24rem; padding: .3rem .34rem; border-radius: 8px; font-size: .62rem; line-height: 1.12; }
  .product-demo.sim-ultra .mini-row span:last-child { grid-column: 1 / -1; }
  .product-demo.sim-ultra .checkout-row { grid-template-columns: minmax(0, 1fr) auto; }
  .product-demo.sim-ultra .app-row { display: flex; gap: .28rem; padding-top: .24rem; font-size: .62rem; }
  .product-demo.sim-ultra .app-row b { text-align: right; font-size: .66rem; }
  .product-demo.sim-ultra .app-note { font-size: .64rem; line-height: 1.2; }
  .product-demo.sim-ultra .fill-source { grid-template-columns: auto minmax(0, 1fr); }
  .product-demo.sim-ultra .fill-source-price { grid-column: 2; justify-items: start; text-align: left; }
  /* The route keeps its proportional widths, because the split is the point of
     the graphic. The narrow segment cannot hold the quantity and the price
     side by side, so stack them and let the segment grow taller instead. */
  .product-demo.sim-tight .fill-segment { padding: .5rem .52rem; }
  .product-demo.sim-tight .fill-segment-copy { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: .1rem; }
  .product-demo.sim-tight .fill-segment-price { opacity: .92; }
  /* Smallest phones: reclaim the step badge's width for the text it crowds. */
  .product-demo.sim-ultra .fill-segment { grid-template-columns: 1.05rem minmax(0, 1fr); gap: .32rem; padding: .46rem .42rem; }
  .product-demo.sim-ultra .fill-segment-step { width: 1.05rem; height: 1.05rem; font-size: .54rem; }
  .product-demo.sim-ultra .fill-segment-quantity { font-size: .76rem; }
  .product-demo.sim-ultra .fill-segment-price { font-size: .6rem; }
  .product-demo.sim-ultra .fill-math,
  .product-demo.sim-ultra .token-utility-grid { grid-template-columns: 1fr; }
  .product-demo.sim-ultra .capital-layer { grid-template-columns: 1fr; gap: .16rem; }
  .product-demo.sim-ultra .app-value { font-size: .82rem; }
  .product-demo.sim-ultra .app-route-step { grid-template-columns: 1.05rem minmax(0, 1fr) auto; gap: .24rem; font-size: .62rem; }
  .product-demo.sim-ultra .app-route-step i { width: 1.05rem; height: 1.05rem; font-size: .54rem; }
  .product-demo.sim-ultra .app-route-step span:last-child { font-size: .56rem; }
  .product-demo.sim-ultra .wallet-token,
  .product-demo.sim-ultra .participant,
  .product-demo.sim-ultra .leg-card,
  .product-demo.sim-ultra .handoff-box,
  .product-demo.sim-ultra .beacon-readout { padding: .36rem; border-radius: 9px; }
  .product-demo.sim-ultra .message { padding: .32rem .38rem; font-size: .64rem; }
  .product-demo.sim-ultra .app-seat-grid { gap: .16rem; }
  .product-demo.sim-ultra .closed-stamp { min-height: 2.6rem; font-size: .78rem; }
  .product-demo.sim-ultra .sim-toast-layer { top: var(--sim-toast-safe-top, 2.85rem); right: .34rem; width: calc(100% - .68rem); }
  .product-demo.sim-ultra .sim-result-toast { grid-template-columns: auto minmax(0, 1fr); gap: .48rem; width: 100%; padding: .5rem .54rem .56rem; border-radius: 11px; }
  .product-demo.sim-ultra .sim-toast-icon { width: 1.9rem; height: 1.9rem; }
  .product-demo.sim-ultra .sim-toast-saved { display: none; }
  .product-demo.sim-ultra .sim-toast-body { font-size: .72rem; }
  .product-demo.sim-ultra .sim-toast-detail { font-size: .6rem; }
  .product-demo.sim-ultra .live-card.block-record { padding: 0; }
  .product-demo.sim-ultra .activity-record > summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: .42rem; padding: .46rem; }
  .product-demo.sim-ultra .record-mark { width: 1.72rem; height: 1.72rem; }
  .product-demo.sim-ultra .record-value { grid-column: 2; max-width: none; text-align: left; }
  .product-demo.sim-ultra .activity-record > summary .disclosure-action { grid-column: 3; grid-row: 1 / span 2; }
  .product-demo.sim-ultra .settlement-hero { grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
  .product-demo.sim-ultra .settlement-status { grid-column: 2; justify-self: start; }
  .product-demo.sim-ultra .settlement-mark { width: 2.2rem; height: 2.2rem; }
  .product-demo.sim-ultra .settlement-copy b { font-size: 1.1rem; }
  @container run-stage (max-width: 620px) {
    .product-demo { grid-template-columns: 1fr; min-height: 0; padding: 0; }
    .sim-step-guide { grid-template-columns: auto minmax(0, 1fr); }
    .sim-step-controls { grid-column: 1 / -1; justify-items: start; border-top: 1px solid var(--line); padding-top: .48rem; }
    .app-action-bar { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); width: 100%; }
    .app-nav { flex-direction: column; align-items: flex-start; gap: .38rem; padding: .58rem .62rem; }
    .app-tabs { flex-wrap: wrap; overflow: visible; }
    .app-nav-tools { justify-content: flex-start; }
    .app-nav-chip { max-width: 100%; }
    .live-page { grid-template-columns: 1fr; gap: .54rem; padding: .56rem; }
    .live-main { grid-template-columns: 1fr; }
    .live-main > * { grid-column: 1 / -1; }
    .live-head { flex-direction: column; gap: .5rem; padding: .6rem; }
    .live-head-actions { justify-content: flex-start; }
    .live-status { white-space: normal; }
    .handoff { grid-template-columns: 1fr; }
    .handoff-arrow { text-align: center; transform: rotate(90deg); }
    .scoreboard { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .score-sep { text-align: center; }
    .mini-row { grid-template-columns: minmax(0, 1fr) auto; }
    .mini-row span:last-child { grid-column: 1 / -1; }
  }
  @container run-stage (max-width: 540px) {
    .live-page { padding: .42rem; }
    .live-main { grid-template-columns: 1fr; gap: .38rem; }
    .live-main > .live-head,
    .live-main > .live-intent,
    .live-main > .live-kpis { grid-column: 1 / -1; }
    .live-main > .live-card { grid-column: 1 / -1; }
    .live-main > .live-card.long-ticket { grid-column: 1 / -1; }
    .live-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .32rem; }
    .live-intent { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .32rem; }
    .token-wallet,
    .participant-grid,
    .big-odds,
    .side-picker,
    .app-ballot { grid-template-columns: 1fr; }
    .live-card,
    .live-head,
    .trade-ticket,
    .app-receipt { padding: .5rem; border-radius: 10px; }
    .live-head { gap: .4rem; }
    .live-head p { display: none; }
    .live-kpi,
    .intent-item { padding: .42rem; }
    .trade-ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .long-ticket .trade-ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sim-browser-bar { gap: .32rem; padding: .24rem .38rem; }
    .sim-browser-next { width: min(10.5rem, 31vw); min-width: 7.6rem; min-height: 2rem; padding-left: .52rem; }
    .sim-browser-next-copy small { display: none; }
    .sim-app-next { max-width: 10.5rem; min-height: 2rem; }
    .app-nav-tools:has(.sim-app-next) { flex-wrap: wrap; }
    .sim-browser-back { min-width: 5.2rem; min-height: 1.94rem; padding: .16rem .48rem .16rem .18rem; }
    .sim-browser-back-icon { width: 1.36rem; height: 1.36rem; }
    .sim-browser-back-label { font-size: .76rem; }
    .app-nav { flex-direction: row; align-items: center; gap: .3rem .42rem; padding: .38rem .5rem; }
    .app-tabs { display: flex; flex: 0 1 auto; }
    .app-tabs span:not(.on) { display: none; }
    .app-nav-tools { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; }
    .app-nav-tools .app-nav-chip:first-child { display: none; }
    .app-nav-tools .app-nav-chip:last-child { display: inline-flex; }
    .app-nav-chip { max-width: 9rem; padding: .22rem .42rem; font-size: .6rem; }
    .live-field { gap: .16rem; }
    .live-field label { font-size: .56rem; }
    :is(.live-input, .live-static-value) { padding: .44rem .46rem; font-size: .76rem; }
    .live-card { gap: .38rem; }
    .long-ticket .trade-ticket { gap: .3rem; padding: .42rem; }
    .long-ticket .ticket-summary { padding-top: .3rem; }
    .app-action-bar { grid-template-columns: 1fr; }
    .app-action-bar button { width: 100%; white-space: normal; text-align: left; }
    .ticket-summary,
    .check-item,
    .face-check { flex-wrap: wrap; }
    .closed-stamp { min-height: 3.4rem; font-size: 1rem; letter-spacing: .04em; }
  }
  @container run-stage (max-width: 380px) {
    .product-demo { padding: 0; gap: .42rem; }
    .sim-step-guide { grid-template-columns: 1fr; padding: .42rem; }
    .sim-step-badge { width: 100%; min-height: 0; grid-template-columns: auto auto; justify-content: start; gap: .4rem; padding: .42rem .5rem; box-sizing: border-box; }
    .sim-step-controls { grid-column: auto; border-top: 1px solid var(--line); padding-top: .48rem; }
    .sim-browser-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: .24rem; padding: .2rem .32rem; }
    .sim-url { display: none; }
    .sim-browser-next { grid-column: 3; width: 7.8rem; min-width: 0; min-height: 2rem; padding: .2rem .24rem .2rem .46rem; }
    .sim-browser-next-copy small { display: none; }
    .sim-browser-next-copy strong { font-size: .64rem; }
    .sim-next-arrow { width: 1.22rem; height: 1.22rem; }
    .sim-app-next { max-width: 8.4rem; min-height: 2rem; padding: .24rem .28rem .24rem .44rem; }
    .sim-app-next-label { font-size: .64rem; }
    .app-nav-tools:has(.sim-app-next) .app-nav-chip { display: none; }
    .sim-browser-back { min-width: 4.7rem; min-height: 1.78rem; padding: .14rem .4rem .14rem .16rem; }
    .sim-browser-back-icon { width: 1.22rem; height: 1.22rem; }
    .sim-browser-back-label { font-size: .7rem; }
    .live-page { padding: .3rem; }
    .live-main { grid-template-columns: 1fr; gap: .26rem; }
    .live-main > .live-head,
    .live-main > .live-intent,
    .live-main > .live-kpis { grid-column: 1 / -1; }
    .live-main > .live-card { grid-column: 1 / -1; }
    .live-main > .live-card.long-ticket { grid-column: 1 / -1; }
    .live-kpis,
    .live-intent { grid-template-columns: 1fr; gap: .22rem; }
    .live-kpi,
    .intent-item { padding: .28rem; }
    .live-kpi span,
    .intent-item span { font-size: .48rem; letter-spacing: .04em; }
    .live-kpi b { font-size: .72rem; }
    .intent-item b { font-size: .64rem; }
    .app-nav { padding: .5rem; }
    .app-brand span:last-child { white-space: normal; }
    .live-head { padding: .34rem; gap: .32rem; }
    .live-head h4 { font-size: .86rem; }
    .live-card { padding: .34rem; gap: .24rem; border-radius: 9px; }
    .live-card-title { display: flex; gap: .22rem; font-size: .72rem; }
    .live-card-title > .step-link-badge { display: none; }
    .block-icon { width: 1.05rem; height: 1.05rem; }
    .block-icon svg { width: .68rem; height: .68rem; }
    .big-odds,
    .side-picker,
    .app-ballot,
    .token-wallet,
    .participant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .odds-side { padding: .38rem; }
    .odds-side span { font-size: .52rem; letter-spacing: .04em; }
    .odds-side b { font-size: 1.1rem; }
    .app-row,
    .checkout-row { grid-template-columns: minmax(0, 1fr) auto; }
    .mini-row { grid-template-columns: minmax(0, 1fr) auto; }
    .trade-ticket,
    .long-ticket .trade-ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .24rem; padding: .34rem; border-radius: 9px; }
    .live-field { gap: .1rem; }
    .live-field label { font-size: .48rem; letter-spacing: .04em; }
    :is(.live-input, .live-static-value) { padding: .28rem .3rem; border-radius: 8px; font-size: .66rem; line-height: 1.12; }
    .ticket-summary { grid-column: 1 / -1; padding-top: .22rem; font-size: .62rem; }
    .ticket-summary b { font-size: .7rem; }
    .mini-table,
    .check-list,
    .face-checks,
    .message-feed,
    .bet-slip,
    .app-route { gap: .2rem; }
    .mini-row,
    .checkout-row { gap: .24rem; padding: .3rem .34rem; border-radius: 8px; font-size: .62rem; line-height: 1.12; }
    .mini-row span:last-child { grid-column: 1 / -1; }
    .checkout-row { grid-template-columns: minmax(0, 1fr) auto; }
    .app-row { display: flex; gap: .28rem; padding-top: .24rem; font-size: .62rem; }
    .app-row b { text-align: right; font-size: .66rem; }
    .app-note { font-size: .64rem; line-height: 1.2; }
    .app-value { font-size: .82rem; }
    .app-route-step { grid-template-columns: 1.05rem minmax(0, 1fr) auto; gap: .24rem; font-size: .62rem; }
    .app-route-step i { width: 1.05rem; height: 1.05rem; font-size: .54rem; }
    .app-route-step span:last-child { font-size: .56rem; }
    .wallet-token,
    .participant,
    .leg-card,
    .handoff-box,
    .beacon-readout { padding: .36rem; border-radius: 9px; }
    .message { padding: .32rem .38rem; font-size: .64rem; }
    .app-seat-grid { gap: .16rem; }
    .closed-stamp { min-height: 2.6rem; font-size: .78rem; }
    .sim-toast-layer { top: var(--sim-toast-safe-top, 2.85rem); right: .34rem; width: calc(100% - .68rem); }
    .sim-result-toast { grid-template-columns: auto minmax(0, 1fr); gap: .48rem; width: 100%; padding: .5rem .54rem .56rem; border-radius: 11px; }
    .sim-toast-icon { width: 1.9rem; height: 1.9rem; }
    .sim-toast-saved { display: none; }
    .sim-toast-body { font-size: .72rem; }
    .sim-toast-detail { font-size: .6rem; }
    .live-card.block-record { padding: 0; }
    .activity-record > summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: .42rem; padding: .46rem; }
    .record-mark { width: 1.72rem; height: 1.72rem; }
    .record-value { grid-column: 2; max-width: none; text-align: left; }
    .activity-record > summary .disclosure-action { grid-column: 3; grid-row: 1 / span 2; }
    .settlement-hero { grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
    .settlement-status { grid-column: 2; justify-self: start; }
    .settlement-mark { width: 2.2rem; height: 2.2rem; }
    .settlement-copy b { font-size: 1.1rem; }
  }
  .mobile-art { display: none; }
  .mobile-art-tile { display: grid; grid-template-columns: 2.25rem 1fr; gap: .62rem; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: .64rem .7rem; min-width: 0; font-family: var(--sans); }
  .mobile-art-mark { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-strong); color: var(--accent-ink); }
  .mobile-art-mark svg { display: block; width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-art-tile b { display: block; color: var(--ink); font-size: .9rem; line-height: 1.18; overflow-wrap: anywhere; }
  .mobile-art-tile small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.28; margin-top: .18rem; }
  .mobile-art-tile.accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
  .mobile-art-tile.good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 42%, var(--line)); }
  .mobile-art-tile.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 42%, var(--line)); }
  .mobile-art-tile.hot { box-shadow: var(--shadow); animation: art-pop .42s ease-out both; }
  .mobile-art-arrow { width: 2px; min-height: 1rem; margin-left: 1.8rem; background: color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 999px; }
  .run-details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: .78rem .85rem; font-family: var(--sans); }
  .run-details summary { cursor: pointer; color: var(--accent-ink); font-weight: 850; }
  .run-details summary::marker { color: var(--accent); }
  .unlock-panels { display: grid; gap: 1rem; margin-top: 1rem; }
  .unlock-panels h3 { margin-top: 0; }

  .unlock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
  .unlock { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: .7rem; font-family: var(--sans); min-height: 5rem; transition: background .16s ease, border-color .16s ease, opacity .16s ease; opacity: .55; }
  .unlock b { display: flex; justify-content: space-between; gap: .5rem; color: var(--ink); font-size: .82rem; line-height: 1.25; }
  .unlock small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.35; margin-top: .28rem; }
  .unlock .tag { color: var(--faint); font-family: var(--mono); font-size: .68rem; font-weight: 800; }
  .unlock.on { opacity: 1; background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
  .unlock.on .tag { color: var(--good); }

  /* Complete lifecycle map: a calm reference layer beneath the guided run. */
  .state-machine { margin-top: clamp(5rem, 9vw, 7.5rem) !important; padding-top: clamp(2.8rem, 5vw, 4rem); border-top: 1px solid var(--line); }
  /* The demo hand-off closes the guided run instead of opening a new part of
     the page, so it sits tighter than a full section break on both sides. */
  .content > .run-demo-cta { margin: 1.5rem 0; }
  .content > section:has(+ .run-demo-cta) { margin-bottom: 1.5rem; }
  .run-demo-cta + .state-machine { margin-top: clamp(2.6rem, 4.5vw, 3.6rem) !important; }
  .state-machine-intro { color: var(--ink-soft); }
  .machine-primer { display: flex; align-items: flex-start; gap: .62rem; max-width: 48rem; margin: 1.2rem 0 0; color: var(--muted); font-family: var(--sans); font-size: .86rem; line-height: 1.5; }
  .machine-primer-mark { display: grid; flex: 0 0 auto; place-items: center; width: 1.65rem; height: 1.65rem; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 950; }
  .machine-shell { --machine-market: #0d8273; --machine-market-soft: #e3f3ef; --machine-court: #5a4bd6; --machine-court-soft: #ece9fc; --machine-final: #0f8a65; --machine-final-soft: #e2f5ed; margin: 2rem 0 0; overflow: clip; border: 1px solid color-mix(in srgb, var(--line-strong) 88%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--surface) 95%, #fff); box-shadow: 0 24px 56px -34px rgba(31, 36, 48, .28); font-family: var(--sans); }
  .machine-toolbar { display: grid; grid-template-columns: minmax(0, auto) minmax(14rem, 1fr); gap: .78rem 1rem; align-items: center; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, #fff), color-mix(in srgb, var(--bg) 52%, var(--surface))); padding: .85rem; }
  .machine-route-controls { display: flex; flex-wrap: wrap; gap: .38rem; }
  .machine-route-button { min-height: 2.75rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-soft); padding: .5rem .78rem; font: 850 .76rem/1 var(--sans); box-shadow: none; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
  .machine-route-button:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); color: var(--accent-ink); box-shadow: 0 7px 16px rgba(54, 46, 116, .08); }
  .machine-route-button[aria-checked="true"] { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 7px 16px rgba(74, 60, 178, .18); }
  .machine-route-summary { min-width: 0; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.42; }
  .machine-route-summary strong { color: var(--ink); }
  .machine-legend { display: flex; flex-wrap: wrap; gap: .55rem 1rem; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent); padding: .62rem .9rem; color: var(--muted); font-size: .7rem; line-height: 1.3; }
  .machine-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
  .machine-legend-swatch { width: 1.22rem; height: .66rem; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); }
  .machine-legend-swatch.is-terminal { border-color: color-mix(in srgb, var(--machine-final) 44%, var(--line)); background: var(--machine-final-soft); }
  .machine-legend-swatch.is-current { width: .68rem; height: .68rem; border: 2px solid var(--machine-court); border-radius: 999px; background: var(--surface); }
  .machine-trade-rail { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .62rem; align-items: center; margin: .85rem .85rem 0; border: 1px solid color-mix(in srgb, var(--machine-market) 28%, var(--line)); border-radius: 13px; background: linear-gradient(90deg, color-mix(in srgb, var(--machine-market-soft) 70%, var(--surface)), color-mix(in srgb, var(--machine-court-soft) 52%, var(--surface))); padding: .58rem .72rem; color: var(--ink-soft); font-size: .76rem; line-height: 1.4; transition: opacity .18s ease, filter .18s ease; }
  .machine-trade-rail strong { color: var(--machine-market); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .machine-phase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: .85rem; }
  .machine-phase { --phase-color: var(--machine-court); --phase-soft: var(--machine-court-soft); position: relative; min-width: 0; border: 1px solid color-mix(in srgb, var(--phase-color) 18%, var(--line)); border-radius: 17px; background: linear-gradient(180deg, color-mix(in srgb, var(--phase-soft) 36%, var(--surface)) 0, color-mix(in srgb, var(--surface) 96%, #fff) 7.5rem); padding: .66rem; transition: opacity .18s ease, filter .18s ease; }
  .machine-phase[data-phase="build"] { --phase-color: var(--machine-market); --phase-soft: var(--machine-market-soft); }
  .machine-phase[data-phase="check"] { --phase-color: #237f83; --phase-soft: #e2f1f1; }
  .machine-phase[data-phase="judge"] { --phase-color: var(--machine-court); --phase-soft: var(--machine-court-soft); }
  .machine-phase[data-phase="finish"] { --phase-color: var(--machine-final); --phase-soft: var(--machine-final-soft); }
  .machine-phase:not(:last-child)::after { content: ""; position: absolute; z-index: 3; top: 2.28rem; right: -.88rem; width: 1rem; border-top: 2px solid color-mix(in srgb, var(--phase-color) 44%, var(--line)); }
  .machine-phase:not(:last-child)::before { content: ""; position: absolute; z-index: 4; top: 2.02rem; right: -.88rem; border-top: .27rem solid transparent; border-bottom: .27rem solid transparent; border-left: .38rem solid color-mix(in srgb, var(--phase-color) 56%, var(--line-strong)); }
  .machine-phase:nth-child(3) { grid-column: 2; grid-row: 2; }
  .machine-phase:nth-child(4) { grid-column: 1; grid-row: 2; }
  .machine-phase:nth-child(2)::after { top: auto; right: auto; bottom: -.88rem; left: 50%; width: 0; height: 1rem; border-top: 0; border-left: 2px solid color-mix(in srgb, var(--phase-color) 44%, var(--line)); }
  .machine-phase:nth-child(2)::before { top: auto; right: auto; bottom: -.88rem; left: calc(50% - .27rem); border-top: .38rem solid color-mix(in srgb, var(--phase-color) 56%, var(--line-strong)); border-right: .27rem solid transparent; border-bottom: 0; border-left: .27rem solid transparent; }
  .machine-phase:nth-child(3)::after { right: auto; left: -.88rem; }
  .machine-phase:nth-child(3)::before { right: auto; left: -.88rem; border-right: .38rem solid color-mix(in srgb, var(--phase-color) 56%, var(--line-strong)); border-left: 0; }
  .machine-phase-head { min-height: 5.55rem; border-bottom: 1px solid color-mix(in srgb, var(--phase-color) 18%, var(--line)); padding: .18rem .16rem .62rem; }
  .machine-phase-kicker { display: block; color: var(--phase-color); font-family: var(--mono); font-size: .65rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
  .machine-phase-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .32rem .6rem; margin: .2rem 0 .18rem; }
  .machine-phase-head h3 { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.12; }
  .machine-phase-head p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
  .machine-phase-transition { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; margin-top: .34rem; border-radius: 999px; background: color-mix(in srgb, var(--phase-soft) 72%, var(--surface)); color: color-mix(in srgb, var(--phase-color) 88%, var(--ink)); padding: .18rem .4rem; font-size: .68rem; font-weight: 950; line-height: 1.15; letter-spacing: .02em; overflow-wrap: anywhere; text-transform: uppercase; }
  .machine-phase-flow { display: grid; gap: .9rem; margin: 0; padding: .72rem 0 0; list-style: none; }
  .machine-step { position: relative; min-width: 0; }
  .machine-step:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -.9rem; width: 2px; height: .9rem; transform: translateX(-50%); border-radius: 999px; background: color-mix(in srgb, var(--line-strong) 90%, transparent); transition: background .18s ease, box-shadow .18s ease; }
  .machine-step:not(:last-child)::before { content: ""; position: absolute; z-index: 2; left: calc(50% - .2rem); bottom: -.9rem; border-left: .2rem solid transparent; border-right: .2rem solid transparent; border-top: .28rem solid var(--line-strong); }
  .machine-step.is-route-active:not(:last-child)::after { background: color-mix(in srgb, var(--phase-color) 66%, var(--line)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--phase-soft) 52%, transparent); }
  .machine-step.is-route-active:not(:last-child)::before { border-top-color: color-mix(in srgb, var(--phase-color) 74%, var(--line)); }
  .machine-step.has-split-exit::after,
  .machine-step.has-split-exit::before { display: none; }
  .machine-flow-note { margin: .42rem .08rem 0; border-top: 1px dashed color-mix(in srgb, var(--phase-color) 30%, var(--line)); padding-top: .34rem; color: color-mix(in srgb, var(--phase-color) 82%, var(--ink)); font-size: .72rem; font-weight: 850; line-height: 1.4; text-align: center; }
  .machine-state-row { display: grid; gap: .34rem; min-width: 0; }
  .machine-state-row.is-branch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .machine-state { position: relative; display: grid; align-content: start; gap: .22rem; width: 100%; min-width: 0; min-height: 4.65rem; overflow: hidden; border: 2px solid color-mix(in srgb, var(--phase-color) 54%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--surface) 96%, #fff); color: var(--ink); padding: .52rem .5rem; box-shadow: 0 5px 13px rgba(31, 36, 48, .035); text-align: left; transition: opacity .2s ease, filter .2s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
  .machine-state:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--phase-color) 48%, var(--line)); box-shadow: 0 9px 18px rgba(31, 36, 48, .08); }
  .machine-state:focus-visible { outline: 3px solid color-mix(in srgb, var(--phase-color) 30%, transparent); outline-offset: 2px; }
  .machine-state-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .24rem; min-width: 0; }
  .machine-state-kind, .machine-state-branch, .machine-sim-chip { display: inline-flex; align-items: center; width: fit-content; min-height: 1.12rem; border-radius: 999px; padding: .14rem .34rem; font-size: .68rem; font-weight: 950; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
  .machine-state-kind { background: color-mix(in srgb, var(--phase-soft) 78%, var(--surface)); color: color-mix(in srgb, var(--phase-color) 92%, var(--ink)); }
  .machine-state-branch { border: 1px solid var(--line); background: var(--bg); color: var(--muted); }
  .machine-state-title { display: block; color: var(--ink); font-size: .8rem; font-weight: 950; line-height: 1.2; overflow-wrap: anywhere; }
  .machine-state-short { display: block; color: var(--muted); font-size: .72rem; line-height: 1.34; overflow-wrap: anywhere; }
  .machine-state[data-kind="decision"] { border-color: color-mix(in srgb, var(--machine-court) 54%, var(--line)); background: color-mix(in srgb, var(--machine-court-soft) 30%, var(--surface)); }
  .machine-state[data-kind="terminal"] { border-color: color-mix(in srgb, var(--machine-final) 54%, var(--line)); background: color-mix(in srgb, var(--machine-final-soft) 50%, var(--surface)); }
  .machine-state[data-kind="optional"] { border-style: dashed; }
  .machine-state.is-selected { border-color: var(--phase-color); background: color-mix(in srgb, var(--phase-soft) 52%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--phase-color) 12%, transparent), 0 12px 24px rgba(31, 36, 48, .1); }
  .machine-state-detail { display: grid; gap: .34rem; margin-top: .26rem; border-top: 1px solid color-mix(in srgb, var(--phase-color) 18%, var(--line)); padding-top: .42rem; color: var(--ink-soft); font-size: .72rem; font-weight: 560; line-height: 1.44; }
  .machine-state-detail[hidden] { display: none; }
  .machine-state-detail b { color: var(--ink); font-weight: 950; }
  .machine-state-facts { display: grid; gap: .16rem; color: var(--muted); }
  .machine-state-next { color: color-mix(in srgb, var(--phase-color) 88%, var(--ink)); }
  .machine-state[hidden],
  .machine-step[hidden],
  .machine-phase[hidden],
  .machine-text-content section[hidden],
  .machine-text-content li[hidden],
  [data-machine-owner][hidden] { display: none !important; }
  .machine-state-row.is-single { grid-template-columns: 1fr; }
  .machine-step.is-last-visible::after,
  .machine-step.is-last-visible::before { display: none; }
  .machine-shell.is-product-filtered .machine-phase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .machine-shell.is-product-filtered .machine-phase:not([hidden]) { grid-column: auto; grid-row: auto; }
  .machine-shell.is-product-filtered .machine-phase:not([hidden])::after,
  .machine-shell.is-product-filtered .machine-phase:not([hidden])::before { display: none; }
  .machine-state.is-sim-current { box-shadow: 0 0 0 2px color-mix(in srgb, var(--machine-court) 24%, transparent), 0 9px 20px rgba(74, 60, 178, .12); }
  .machine-state.is-sim-current .machine-sim-chip { display: inline-flex; background: var(--machine-court); color: #fff; }
  .machine-sim-chip { display: none; }
  .machine-state.is-route-tracing { animation: machine-route-trace .48s cubic-bezier(.2,.8,.25,1) both; animation-delay: var(--machine-delay, 0ms); }
  @keyframes machine-route-trace {
    0% { transform: translateY(2px); box-shadow: 0 0 0 0 color-mix(in srgb, var(--phase-color) 0%, transparent); }
    55% { transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--phase-color) 17%, transparent), 0 10px 20px rgba(31, 36, 48, .08); }
    100% { transform: translateY(0); }
  }
  .machine-subhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem; align-items: baseline; margin: 0 0 .6rem; }
  .machine-subhead h3 { margin: 0; color: var(--ink); font-size: .9rem; }
  .machine-subhead p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
  .machine-foundation { margin: 0 .85rem .85rem; border-top: 1px solid var(--line); padding-top: .75rem; }
  .machine-foundation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .42rem; }
  .machine-foundation-item { min-width: 0; border: 2px solid color-mix(in srgb, var(--machine-court) 54%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--surface) 94%, var(--machine-court-soft)); padding: .5rem .58rem; color: var(--muted); font-size: .7rem; line-height: 1.42; }
  .machine-foundation-item b { display: block; margin-bottom: .08rem; color: var(--ink); font-size: .74rem; }
  .machine-text-outline { margin: 0 .85rem .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: .62rem .7rem; color: var(--ink-soft); font-size: .72rem; }
  .machine-text-outline summary { cursor: pointer; color: var(--accent-ink); font-weight: 900; }
  .machine-text-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; margin-top: .72rem; }
  .machine-text-content section { margin: 0; }
  .machine-text-content h4 { margin: 0 0 .26rem; color: var(--ink); font-size: .72rem; }
  .machine-text-content ol, .machine-text-content ul { margin: 0; padding-left: 1.05rem; color: var(--muted); }
  .machine-text-content li { margin: .16rem 0; line-height: 1.38; }
  .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

  @media (max-width: 920px) {
    .machine-phase-grid { grid-template-columns: 1fr; }
    .machine-shell.is-product-filtered .machine-phase-grid { grid-template-columns: 1fr; }
    .machine-phase:nth-child(3),
    .machine-phase:nth-child(4) { grid-column: auto; grid-row: auto; }
    .machine-phase:not(:last-child)::after { top: auto; right: auto; bottom: -.74rem; left: 50%; width: 0; height: .74rem; border-top: 0; border-left: 2px solid color-mix(in srgb, var(--phase-color) 44%, var(--line)); }
    .machine-phase:not(:last-child)::before { top: auto; right: auto; bottom: -.78rem; left: calc(50% - .27rem); border-top: .38rem solid color-mix(in srgb, var(--phase-color) 56%, var(--line-strong)); border-right: .27rem solid transparent; border-bottom: 0; border-left: .27rem solid transparent; }
    .machine-phase-head { min-height: 0; }
  }
  @media (max-width: 720px) {
    .machine-toolbar { grid-template-columns: 1fr; }
    .machine-route-summary { min-height: 2.2rem; }
    .machine-foundation-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .state-machine { padding-top: 2.4rem; }
    .machine-shell { border-radius: 18px; }
    .machine-route-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .machine-route-button { width: 100%; min-height: 2.8rem; padding-inline: .45rem; }
    .machine-legend { align-items: flex-start; }
    .machine-trade-rail { grid-template-columns: 1fr; }
    .machine-text-content { grid-template-columns: 1fr; }
  }
  @media (max-width: 430px) {
    .machine-state-row.is-branch { grid-template-columns: 1fr; }
  }
  @media (max-width: 380px) {
    .machine-route-controls { grid-template-columns: 1fr; }
    .machine-state { min-height: 4.35rem; }
  }



  #system-run, #system-run .run-game, #system-run .simulator-island, #system-run .product-demo { min-width: 0; }

  @keyframes dash-flow {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
  }
  @keyframes art-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: .82; }
  }
  @keyframes art-pop {
    0% { transform: scale(.82); opacity: .45; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes app-target-pop {
    0% { transform: translateY(3px); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent), var(--shadow); }
    62% { transform: translateY(-1px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 18px 34px color-mix(in srgb, var(--accent) 20%, transparent); }
    100% { transform: translateY(0); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent), 0 16px 30px color-mix(in srgb, var(--accent) 18%, transparent); }
  }
  @keyframes tutorial-target-sheen {
    0%, 28% { opacity: 0; transform: translateX(-135%); }
    42% { opacity: .8; }
    64% { opacity: .18; transform: translateX(135%); }
    100% { opacity: 0; transform: translateX(135%); }
  }
  @keyframes guided-arrow-tap {
    0%, 24%, 100% { transform: translateX(0) scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good-soft) 0%, transparent); background: rgba(255, 255, 255, .2); }
    34% { transform: translateX(2px) scale(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good-soft) 62%, transparent), 0 0 14px rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .3); }
    48% { transform: translateX(0) scale(1); box-shadow: 0 0 0 7px color-mix(in srgb, var(--good-soft) 0%, transparent), 0 0 18px rgba(255, 255, 255, 0); background: rgba(255, 255, 255, .22); }
  }
  @keyframes coachmark-pop {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes toast-rise {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes toast-away {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-6px) scale(.985); }
  }
  @keyframes toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
  }
  @keyframes auto-attention-arrive {
    from { outline-color: transparent; box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
    to { outline-color: color-mix(in srgb, var(--accent) 74%, transparent); }
  }
  @keyframes automatic-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes browser-back-icon-nudge {
    0%, 72%, 100% { transform: translateX(0); }
    78% { transform: translateX(-2px); }
    84% { transform: translateX(1px); }
    90% { transform: translateX(0); }
  }
  @keyframes action-idle-nudge {
    0%, 3%, 24%, 100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--accent-ink); box-shadow: 0 10px 18px rgba(31, 36, 48, .1); }
    7% { transform: translate3d(0, -1px, 0) scale(1.006); border-color: color-mix(in srgb, var(--good) 72%, var(--line)); color: var(--good); box-shadow: 0 14px 24px rgba(11, 153, 107, .13); }
    10% { transform: translate3d(-.9px, -1px, 0) scale(1.008); border-color: var(--good); color: var(--good); }
    13% { transform: translate3d(.9px, -1px, 0) scale(1.008); border-color: var(--good); }
    17% { transform: translate3d(0, -.5px, 0) scale(1.004); border-color: color-mix(in srgb, var(--good) 64%, var(--line)); color: var(--good); }
    23% { transform: translate3d(0, 0, 0) scale(1); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); color: var(--accent-ink); box-shadow: 0 11px 19px rgba(31, 36, 48, .11); }
  }
  @keyframes action-button-sheen {
    0%, 5%, 100% { opacity: 0; transform: translateX(-140%); }
    9% { opacity: .72; }
    22% { opacity: .12; transform: translateX(140%); }
    28% { opacity: 0; transform: translateX(140%); }
  }
  @keyframes action-arrow-poke {
    0%, 5%, 22%, 100% { transform: translateY(-50%) translateX(0) rotate(45deg); opacity: .72; }
    9% { transform: translateY(-50%) translateX(3px) rotate(45deg); opacity: 1; }
    13% { transform: translateY(-50%) translateX(1px) rotate(45deg); opacity: .9; }
    17% { transform: translateY(-50%) translateX(2px) rotate(45deg); opacity: 1; }
  }
  @keyframes action-word-pop {
    0%, 5%, 19%, 100% { transform: translate3d(0, 0, 0) scale(1); color: var(--accent-ink); text-shadow: none; }
    9% { transform: translate3d(0, -1px, 0) scale(1.11); color: var(--good); text-shadow: 0 6px 14px rgba(11, 153, 107, .22); }
    13% { transform: translate3d(0, -1px, 0) scale(1.08); color: var(--good); text-shadow: 0 5px 12px rgba(11, 153, 107, .18); }
    16% { transform: translate3d(0, 0, 0) scale(1.03); color: var(--good); text-shadow: 0 4px 10px rgba(11, 153, 107, .12); }
  }
  @keyframes action-index-pop {
    0%, 5%, 22%, 100% { transform: scale(1); background: var(--accent); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
    10% { transform: scale(1.12); background: var(--good); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 18%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .36); }
    16% { transform: scale(1.04); background: var(--good); }
  }
  @keyframes art-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  @media (prefers-reduced-motion: reduce) {
    /* .sim-toast-progress is deliberately absent: the drain is the only signal
       of when the toast will leave, so it is information, not decoration. */
    .app-action-bar.is-idle button,
    .app-action-bar.is-idle button::before,
    .app-action-bar.is-idle button::after,
    .app-action-bar.is-idle button .action-index,
    .sim-browser-back:not([disabled]) .sim-browser-back-icon,
    .guided-target,
    .guided-target::before,
    .sim-app-action.guided-target::after,
    .target-callout,
    .sim-result-toast,
    .automatic-progress-mark,
    .auto-attention-target.is-auto-attention-active,
    .app-action-card.is-idle .action-word { animation: none; }
    .automatic-progress-fill,
    .auto-attention-target,
    .auto-attention-chip,
    .automatic-toggle-mark::before,
    .automatic-toggle-mark::after { transition: none; }
  }

  @media (max-width: 980px) {
    body { --maxw: 54rem; --half-maxw: 27rem; }
    .unlock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stage-rail { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
  }
  @media (max-width: 620px) {
    .to-top { display: none; }
    .content.wrap { padding-left: .35rem; padding-right: .35rem; }
    #system-run { padding-bottom: 0; }
    .automatic-progress { grid-template-columns: auto minmax(0, 1fr); }
    .automatic-pause-toggle { grid-column: 1 / -1; width: 100%; }
    .unlock-grid { grid-template-columns: 1fr; }
    .run-control-panel { padding: .54rem; border-radius: 12px; gap: .54rem; }
    .simulator-island { padding: .35rem; border-radius: 12px; gap: .58rem; }
    .run-controls { grid-template-columns: auto auto; justify-content: space-between; }
    .run-controls .btn { min-height: 2.4rem; }
    .run-controls.is-next-docked::after { display: none; }
    .run-progress-summary { grid-column: 1 / -1; grid-row: 2; justify-items: start; align-items: start; border-top: 1px solid var(--line); padding-top: .5rem; text-align: left; }
    .run-progress-meta { justify-content: flex-start; }
    .event-navigator-toggle { padding: .14rem .4rem .14rem .46rem; }
    .event-nav-label { font-size: .7rem; }
    .stage-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .42rem; }
    .stage-group { border-radius: 10px; padding: .36rem; }
    .stage-group.last-product-group:nth-child(odd) { grid-column: 1 / -1; }
    .stage-group-steps { gap: .28rem; }
    .stage-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .28rem; }
    .stage-rail .stage-step { min-height: 2.5rem; border-radius: 8px; }
    .stage-rail .stage-step .n { width: 1.35rem; height: 1.35rem; font-size: .62rem; }
    .run-controls .btn, .run-controls .btn.primary { width: auto; min-width: 0; justify-self: auto; }
    .product-demo { min-height: 0; }
    .fake-topbar { flex-direction: column; align-items: flex-start; gap: .32rem; padding: .58rem .62rem; }
    .fake-screen-name { white-space: normal; }
    .fake-app { gap: .5rem; padding: .5rem; }
    .fake-card, .fake-field, .fake-flow-step, .fake-ticket { padding: .52rem; border-radius: 9px; }
    .fake-question { font-size: 1rem; line-height: 1.16; }
    .fake-status { max-width: 100%; white-space: normal; }
    .fake-actions button { width: 100%; white-space: normal; text-align: center; }
    .fake-app, .fake-flow, .fake-grid { grid-template-columns: 1fr; }
    .app-nav { flex-direction: column; align-items: flex-start; gap: .36rem; padding: .56rem .6rem; }
    .app-tabs { flex-wrap: wrap; overflow: visible; }
    .app-layout { grid-template-columns: 1fr; gap: .52rem; padding: .52rem; }
    .app-grid, .app-metrics { grid-template-columns: 1fr; }
    .app-panel, .app-hero, .app-action-card, .app-receipt { padding: .52rem; border-radius: 10px; }
    .app-seat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .app-action-bar { grid-template-columns: 1fr; }
    .app-action-bar button { width: 100%; white-space: normal; text-align: left; }
    .live-page { grid-template-columns: 1fr; gap: .52rem; padding: .52rem; }
    .live-head { flex-direction: column; gap: .48rem; padding: .56rem; }
    .live-head-actions { justify-content: flex-start; }
    .live-kpis, .live-intent, .token-wallet, .participant-grid { grid-template-columns: 1fr; }
    .big-odds, .side-picker, .app-ballot { grid-template-columns: 1fr; }
    .handoff { grid-template-columns: 1fr; }
    .handoff-arrow { text-align: center; transform: rotate(90deg); }
    .mini-row { grid-template-columns: minmax(0, 1fr) auto; }
    .mini-row span:last-child { grid-column: 1 / -1; }
    .scoreboard { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .score-sep { text-align: center; }
    .step-svg { display: none; }
    .mobile-art { display: grid; gap: .42rem; padding: .72rem; }
  }
  @media (max-width: 430px) {
    .content.wrap { padding-left: .35rem; padding-right: .35rem; }
    .fake-app { padding: .42rem; }
    .fake-card, .fake-field, .fake-flow-step, .fake-ticket { padding: .48rem; }
    .app-layout { padding: .42rem; }
    .app-panel, .app-hero, .app-action-card, .app-receipt { padding: .48rem; }
    .app-seat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .live-page { padding: .42rem; }
    .live-card, .live-head, .trade-ticket { padding: .5rem; }
    .run-control-panel { padding: .48rem; }
    .simulator-island { padding: .35rem; }
    .run-controls .btn { min-width: 0; }
    .run-progress-title { font-size: 1rem; }
    .run-progress-meta,
    .run-progress-count,
    .run-progress-stage { font-size: .74rem; }
    .event-navigator-toggle { gap: .36rem; }
    .stage-rail .stage-group-toggle { gap: .22rem; padding: .22rem .28rem; }
    .stage-group-name { font-size: .76rem; }
    .stage-group-range { font-size: .66rem; }
    .stage-rail .stage-step .n { font-size: .66rem; }
  }
  @media (max-width: 350px) {
    .stage-rail { grid-template-columns: 1fr; }
    .stage-step-list { grid-template-columns: 1fr; }
  }
  @media (min-width: 621px) and (max-height: 800px) {
    .sim-browser-bar { padding: .24rem .42rem; gap: .34rem; }
    .sim-browser-back { min-width: 5.2rem; min-height: 1.94rem; padding: .16rem .48rem .16rem .18rem; }
    .sim-browser-back-icon { width: 1.36rem; height: 1.36rem; }
    .sim-browser-back-label { font-size: .76rem; }
    .sim-app-viewport { min-height: 0; }
    .live-page { padding: .52rem; gap: .46rem; }
    .live-main { gap: .44rem; }
    .live-head { padding: .52rem; }
    .live-head p { display: none; }
    .live-card { padding: .54rem; gap: .4rem; }
    .live-kpis,
    .live-intent { gap: .35rem; }
    .live-kpi,
    .intent-item { padding: .42rem; }
    .trade-ticket { padding: .5rem; gap: .38rem; }
    :is(.live-input, .live-static-value) { padding: .46rem .52rem; }
    .mini-row,
    .checkout-row,
    .check-item,
    .face-check { padding: .38rem .44rem; }
    .app-route { gap: .3rem; }
  }

  /* The chooser stays structurally neutral; product color communicates choice and interaction. */
  .product-mode-nav {
    display: grid;
    grid-template-columns: minmax(9.5rem, .34fr) minmax(0, 1fr);
    align-items: stretch;
    gap: .72rem;
    min-width: 0;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 94%, var(--accent-soft));
    box-shadow: 0 14px 28px -22px rgba(46, 40, 30, .18);
    padding: .72rem;
    font-family: var(--sans);
  }
  .product-switch-label {
    display: grid;
    align-content: center;
    gap: .2rem;
    min-width: 0;
    border-right: 1px solid var(--line);
    padding: .2rem .72rem .2rem .18rem;
  }
  .product-switch-label span {
    color: var(--accent);
    font-size: .64rem;
    line-height: 1;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .product-switch-label strong {
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.18rem;
    line-height: 1.08;
    font-weight: 620;
  }
  .product-switch-label small {
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.25;
    font-weight: 700;
  }
  .product-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .5rem;
    min-width: 0;
  }
  .product-tab {
    --choice-accent: var(--accent);
    --choice-soft: var(--accent-soft);
    --choice-on-accent: #fff;
    appearance: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .54rem;
    min-width: 0;
    min-height: 4.15rem;
    border: 1px solid color-mix(in srgb, var(--choice-accent) 26%, var(--line));
    border-radius: 6px;
    background: color-mix(in srgb, var(--choice-soft) 28%, var(--surface));
    color: var(--muted);
    padding: .52rem .58rem;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 6px 14px -12px rgba(46, 40, 30, .32);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, color .14s ease;
  }
  .product-tab[data-product-mode="omen"] { --choice-accent: #ae510f; --choice-soft: #f2c48e; --choice-on-accent: #fff6e8; }
  .product-tab[data-product-mode="themis"] { --choice-accent: #225d8c; --choice-soft: #e1ecf4; --choice-on-accent: #fffefa; }
  @media (hover: hover) and (pointer: fine) {
    .product-tab:hover { transform: translateY(-2px); color: var(--ink); border-color: color-mix(in srgb, var(--choice-accent) 62%, var(--line)); background: color-mix(in srgb, var(--choice-soft) 44%, var(--surface)); box-shadow: 0 12px 22px -16px color-mix(in srgb, var(--choice-accent) 50%, transparent); }
  }
  .product-tab:active { transform: translateY(0); box-shadow: inset 0 1px 3px color-mix(in srgb, var(--choice-accent) 14%, transparent); }
  .product-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--choice-accent) 32%, transparent); outline-offset: 3px; }
  .product-tab[aria-pressed="true"] {
    color: var(--choice-on-accent);
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 72%, var(--ink)), 0 9px 18px -15px color-mix(in srgb, var(--accent) 54%, transparent);
  }
  .product-tab[data-product-mode="omen"][aria-pressed="true"] { --accent: #ae510f; --accent-soft: #f2c48e; --accent-ink: #725000; }
  .product-tab[data-product-mode="themis"][aria-pressed="true"] { --accent: #225d8c; --accent-soft: #e1ecf4; --accent-ink: #173f62; }
  .product-tab[data-product-mode] { font-family: var(--sans); font-synthesis: none; }
  .product-tab-icon {
    display: grid;
    place-items: center;
    width: 2.32rem;
    height: 2.32rem;
    border: 1px solid currentColor;
    border-radius: 5px;
    flex: 0 0 auto;
  }
  .product-tab-icon svg { display: block; width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .product-tab[data-product-mode="omen"] .product-tab-icon { color: #884009; background: #f7d8ae; }
  .product-tab[data-product-mode="themis"] .product-tab-icon { color: #1e527c; background: #e1ecf4; }
  .product-tab[aria-pressed="true"] .product-tab-icon { border-color: color-mix(in srgb, var(--choice-on-accent) 58%, transparent); background: color-mix(in srgb, var(--choice-on-accent) 13%, transparent); color: var(--choice-on-accent); }
  .product-tab-copy { display: grid; gap: .14rem; min-width: 0; }
  .product-tab-copy strong { color: color-mix(in srgb, var(--choice-accent) 38%, var(--ink)); font-size: .86rem; line-height: 1.06; font-weight: 900; overflow-wrap: anywhere; }
  .product-tab-copy small { color: var(--muted); font-size: .65rem; line-height: 1.1; font-weight: 750; }
  .product-tab[aria-pressed="true"] .product-tab-copy strong { color: var(--choice-on-accent); }
  .product-tab[aria-pressed="true"] .product-tab-copy small { color: color-mix(in srgb, var(--choice-on-accent) 92%, transparent); }
  .product-tab-event {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: .26rem;
    border: 1px solid color-mix(in srgb, var(--choice-accent) 30%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--choice-soft) 58%, var(--surface));
    color: color-mix(in srgb, var(--choice-accent) 72%, var(--ink));
    padding: .22rem .38rem;
    font-family: var(--mono);
    font-size: .62rem;
    line-height: 1;
    font-weight: 850;
    white-space: nowrap;
  }
  .product-tab-event::after { content: ">"; color: var(--choice-accent); font-family: var(--sans); font-size: .72rem; font-weight: 950; transition: transform .14s ease; }
  @media (hover: hover) and (pointer: fine) {
    .product-tab:hover .product-tab-event::after { transform: translateX(.12rem); }
  }
  .product-tab[aria-pressed="true"] .product-tab-event { border-color: color-mix(in srgb, var(--choice-on-accent) 52%, transparent); background: color-mix(in srgb, var(--choice-on-accent) 13%, transparent); color: var(--choice-on-accent); }
  .product-tab[aria-pressed="true"] .product-tab-event::after { color: var(--choice-on-accent); }
  .product-mode-nav.is-awaiting-selection {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.15rem;
    min-height: 16rem;
    padding: 1.4rem;
  }
  .product-mode-nav.is-awaiting-selection .product-switch-label {
    justify-items: center;
    border-right: 0;
    padding: 0;
    text-align: center;
  }
  .product-mode-nav.is-awaiting-selection .product-switch-label strong { font-size: 1.72rem; }
  .product-mode-nav.is-awaiting-selection .product-switch-label small { max-width: 34rem; font-size: .8rem; }
  .product-mode-nav.is-awaiting-selection .product-tabs { justify-self: center; width: 100%; max-width: 54rem; gap: .78rem; }
  .product-mode-nav.is-awaiting-selection .product-tab { min-height: 5.8rem; border-color: var(--choice-accent); background: var(--choice-accent); color: var(--choice-on-accent); padding: .82rem .9rem; box-shadow: 0 4px 0 color-mix(in srgb, var(--choice-accent) 70%, var(--ink)), 0 12px 22px -15px color-mix(in srgb, var(--choice-accent) 70%, transparent); }
  @media (hover: hover) and (pointer: fine) {
    .product-mode-nav.is-awaiting-selection .product-tab:hover { border-color: color-mix(in srgb, var(--choice-accent) 84%, var(--ink)); background: color-mix(in srgb, var(--choice-accent) 88%, var(--ink)); color: var(--choice-on-accent); box-shadow: 0 5px 0 color-mix(in srgb, var(--choice-accent) 66%, var(--ink)), 0 15px 24px -15px color-mix(in srgb, var(--choice-accent) 76%, transparent); }
  }
  .product-mode-nav.is-awaiting-selection .product-tab:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--choice-accent) 66%, var(--ink)); }
  .product-mode-nav.is-awaiting-selection .product-tab-icon { width: 3rem; height: 3rem; border-color: color-mix(in srgb, var(--choice-on-accent) 62%, transparent); background: color-mix(in srgb, var(--choice-on-accent) 13%, transparent); color: var(--choice-on-accent); }
  .product-mode-nav.is-awaiting-selection .product-tab-icon svg { width: 1.45rem; height: 1.45rem; }
  .product-mode-nav.is-awaiting-selection .product-tab-copy strong { color: var(--choice-on-accent); font-size: 1.08rem; }
  .product-mode-nav.is-awaiting-selection .product-tab-copy small { color: color-mix(in srgb, var(--choice-on-accent) 92%, transparent); font-size: .74rem; }
  .product-mode-nav.is-awaiting-selection .product-tab-event { border-color: color-mix(in srgb, var(--choice-on-accent) 52%, transparent); background: color-mix(in srgb, var(--choice-on-accent) 13%, transparent); color: var(--choice-on-accent); padding: .34rem .48rem; }
  .product-mode-nav.is-awaiting-selection .product-tab-event::after { color: var(--choice-on-accent); }
  .product-mode-panel { display: grid; gap: 1rem; min-width: 0; animation: product-mode-reveal .22s ease-out; }
  .product-mode-panel[hidden] { display: none; }
  @keyframes product-mode-reveal {
    from { opacity: 0; transform: translateY(.35rem); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .product-mode-panel { animation: none; }
  }

  /*
   * Full-window simulator mode.
   * The stable product panel covers the browser viewport without entering the
   * browser or operating system's native fullscreen layer.
   */
  body:has(.product-mode-panel.is-full-window) {
    overflow: hidden;
  }
  .product-mode-panel.is-full-window {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .5rem;
    width: 100vw;
    width: 100dvw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding:
      calc(env(safe-area-inset-top, 0px) + .48rem)
      calc(env(safe-area-inset-right, 0px) + .48rem)
      calc(env(safe-area-inset-bottom, 0px) + .48rem)
      calc(env(safe-area-inset-left, 0px) + .48rem);
    background:
      radial-gradient(circle at 92% 0, color-mix(in srgb, var(--accent) 9%, transparent), transparent 30rem),
      var(--bg);
    color: var(--ink);
    overscroll-behavior: none;
    overflow: hidden;
    animation: none;
  }
  #productModePanel.is-full-window {
    border: 0;
    border-radius: 0;
    padding:
      calc(env(safe-area-inset-top, 0px) + .48rem)
      calc(env(safe-area-inset-right, 0px) + .48rem)
      calc(env(safe-area-inset-bottom, 0px) + .48rem)
      calc(env(safe-area-inset-left, 0px) + .48rem);
  }
  .product-mode-panel.is-full-window > .run-control-panel {
    position: relative;
    z-index: 60;
    gap: .35rem;
    min-height: 0;
    border-radius: 12px;
    padding: .38rem;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 38%, transparent);
  }
  .product-mode-panel.is-full-window .run-controls {
    gap: .52rem;
  }
  .product-mode-panel.is-full-window .run-controls :is(.btn, .event-navigator-toggle, .simulator-fullscreen-toggle) {
    min-height: 2.75rem;
  }
  .product-mode-panel.is-full-window .event-navigator-toggle {
    padding-inline: .62rem;
  }
  .product-mode-panel.is-full-window .run-progress-summary {
    overflow: visible;
  }
  .product-mode-panel.is-full-window > .simulator-island {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 12px;
    padding: .44rem;
    overflow: hidden;
  }
  .product-mode-panel.is-full-window .run-learnings {
    display: none;
  }
  .product-mode-panel.is-full-window .product-demo {
    --sim-frame-width: 100%;
    --sim-frame-height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .44rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .product-mode-panel.is-full-window .sim-step-guide {
    grid-template-columns: auto minmax(12rem, .82fr) minmax(18rem, 1.18fr);
    gap: .46rem;
    border-radius: 11px;
    padding: .42rem;
  }
  .product-mode-panel.is-full-window .sim-step-guide.has-floating-action-label {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .product-mode-panel.is-full-window .sim-step-badge {
    width: 2.85rem;
    min-height: 2.85rem;
  }
  .product-mode-panel.is-full-window :is(.sim-surface-frame, .sim-live-preview, .protocol-sequence) {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    justify-self: stretch;
  }
  .product-mode-panel.is-full-window :is(.sim-live-preview, .protocol-sequence) {
    border-radius: 11px;
  }
  .product-mode-panel.is-full-window .sim-demand-frame {
    box-sizing: border-box;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    border-radius: 13px;
    padding: 2.2rem .44rem .44rem;
    justify-self: stretch;
    overflow: hidden;
  }
  .product-mode-panel.is-full-window .sim-demand-frame > .sim-live-preview {
    min-height: 0;
  }
  .product-mode-panel.is-full-window .sim-app-viewport {
    overscroll-behavior: contain;
  }
  .product-mode-panel.is-full-window .sim-app-viewport > .app-window {
    width: 100%;
    max-width: 92rem;
    margin-inline: auto;
  }

  /* The event map floats over the simulator instead of consuming its height. */
  .product-mode-panel.is-full-window .run-control-panel:has(.stage-rail:not([hidden]))::after {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: color-mix(in srgb, var(--bg) 34%, transparent);
    backdrop-filter: blur(2px);
    content: "";
    cursor: default;
    pointer-events: auto;
  }
  .product-mode-panel.is-full-window .run-control-panel:has(.stage-rail:not([hidden])) :is(.event-navigator-toggle, .simulator-fullscreen-toggle) {
    position: relative;
    z-index: 90;
  }
  .product-mode-panel.is-full-window .stage-rail {
    position: fixed;
    z-index: 80;
    top: calc(env(safe-area-inset-top, 0px) + 4.45rem);
    right: calc(env(safe-area-inset-right, 0px) + .62rem);
    left: calc(env(safe-area-inset-left, 0px) + .62rem);
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 5.1rem);
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg) 96%, var(--surface));
    padding: .58rem;
    box-shadow: 0 22px 60px color-mix(in srgb, var(--bg) 58%, transparent);
    overscroll-behavior: contain;
    overflow: auto;
  }

  @media (max-width: 760px) {
    .simulator-fullscreen-label { display: none; }
    .simulator-fullscreen-toggle { padding-inline: .52rem; }
  }

  @media (min-width: 0px) {
    .product-mode-panel.is-full-window {
      gap: .32rem;
      padding:
        calc(env(safe-area-inset-top, 0px) + .24rem)
        calc(env(safe-area-inset-right, 0px) + .24rem)
        calc(env(safe-area-inset-bottom, 0px) + .24rem)
        calc(env(safe-area-inset-left, 0px) + .24rem);
    }
    #productModePanel.is-full-window {
      padding:
        calc(env(safe-area-inset-top, 0px) + .24rem)
        calc(env(safe-area-inset-right, 0px) + .24rem)
        calc(env(safe-area-inset-bottom, 0px) + .24rem)
        calc(env(safe-area-inset-left, 0px) + .24rem);
    }
    .product-mode-panel.is-full-window > .simulator-island {
      border-radius: 9px;
      padding: .24rem;
    }
    .product-mode-panel.is-full-window .product-demo {
      gap: .3rem;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible {
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      gap: .42rem;
      align-items: center;
      min-height: 3.35rem;
      border-radius: 10px;
      padding: .28rem .34rem;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible .sim-step-badge {
      grid-column: 1;
      grid-row: 1;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-content: center;
      justify-content: stretch;
      justify-items: center;
      gap: 0;
      width: 2.75rem;
      min-height: 2.75rem;
      padding: .08rem .18rem;
      overflow: hidden;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible .sim-step-badge :is(span, b) {
      min-width: 0;
      white-space: nowrap;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible .sim-guide-toggle {
      grid-column: 4;
      grid-row: 1;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible .sim-guide-content {
      display: contents;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .sim-step-copy {
      display: block;
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .sim-step-copy :is(strong, span) {
      display: none;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .sim-step-copy b {
      display: -webkit-box;
      overflow: hidden;
      font-size: .82rem;
      line-height: 1.18;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .sim-step-controls {
      display: grid;
      grid-column: 3;
      grid-row: 1;
      min-width: 0;
      border: 0;
      padding: 0;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .tutorial-dock {
      display: block;
      min-width: 0;
      border: 0;
      background: transparent;
      padding: 0;
      box-shadow: none;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .tutorial-dock > :not(.tutorial-advance, .sim-explainer-next, .automatic-progress, .coachmark-inline-slot) {
      display: none;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .tutorial-dock > .coachmark-inline-slot {
      position: fixed;
      z-index: 125;
      right: max(env(safe-area-inset-right, 0px), .48rem);
      bottom: max(env(safe-area-inset-bottom, 0px), .48rem);
      left: max(env(safe-area-inset-left, 0px), .48rem);
      width: auto;
      max-width: 28rem;
      margin: 0 auto;
      pointer-events: none;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .tutorial-dock > .coachmark-inline-slot .target-callout.is-inline {
      width: 100%;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) :is(.tutorial-advance, .sim-explainer-next) {
      width: min(8.5rem, 26vw);
      min-width: 5.8rem;
      min-height: 2.75rem;
      padding: .36rem .48rem;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .tutorial-advance span,
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .sim-explainer-next-copy small {
      display: none;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) :is(.tutorial-advance b, .sim-explainer-next-copy strong) {
      display: -webkit-box;
      overflow: hidden;
      font-size: .7rem;
      line-height: 1.12;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      white-space: normal;
    }
    /* Collapsed strip during an automatic step. The old rule hid everything in
       the card except Pause, which removed the countdown entirely: the step
       played itself with no visible clock. Keep the strip minimal, but let the
       rail escape the card and drain across the strip's full bottom edge, so
       the strip itself becomes the timeout bar. */
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) {
      position: relative;
    }
    /* The extra bottom padding opens a shelf under the centred controls so the
       rail never touches the Pause button. */
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded):has([data-auto-observe]) {
      border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
      padding-bottom: .62rem;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .automatic-progress {
      display: grid;
      grid-template-columns: auto;
      position: static;
      isolation: auto;
      width: auto;
      min-width: 2.75rem;
      overflow: visible;
      border: 0;
      background: transparent;
      padding: 0;
      box-shadow: none;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .automatic-progress::before {
      display: none;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .automatic-progress > :not(.automatic-pause-toggle, .automatic-progress-rail) {
      display: none;
    }
    /* Insets resolve against the strip's padding box, whose padding differs
       between the full-window variants, so a flush edge-to-edge bar cannot be
       positioned reliably. A floating pill just above the bottom edge is
       stable across all of them. */
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .automatic-progress-rail {
      position: absolute;
      inset: auto .1rem .22rem;
      height: .28rem;
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent) 18%, var(--line));
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .automatic-progress[data-paused="true"] .automatic-progress-rail {
      opacity: .55;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) .automatic-pause-toggle {
      grid-column: 1;
      min-width: 4.7rem;
      min-height: 2.75rem;
      padding: .4rem .48rem;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible.is-guide-expanded {
      position: fixed;
      z-index: 120;
      right: max(env(safe-area-inset-right, 0px), .38rem);
      bottom: max(env(safe-area-inset-bottom, 0px), .38rem);
      left: max(env(safe-area-inset-left, 0px), .38rem);
      grid-template-columns: auto minmax(0, 1fr) auto;
      width: auto;
      max-width: 44rem;
      max-height: min(76dvh, 34rem);
      margin-inline: auto;
      border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
      border-radius: 18px;
      background: color-mix(in srgb, var(--surface) 98%, var(--bg));
      padding: .62rem;
      box-shadow: 0 26px 70px color-mix(in srgb, var(--bg) 72%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent);
      overflow: auto;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible.is-guide-expanded .sim-guide-content {
      display: grid;
      grid-column: 1 / -1;
      grid-row: 2;
      gap: .52rem;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible.is-guide-expanded .sim-guide-toggle {
      grid-column: 3;
      grid-row: 1;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible.is-guide-expanded .sim-step-copy {
      display: grid;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible.is-guide-expanded .sim-step-copy :is(strong, span) {
      display: block;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible.is-guide-expanded .sim-step-controls {
      display: grid;
    }
    .product-mode-panel.is-full-window .stage-rail {
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-height: min(76dvh, 38rem);
      border-width: 1px 1px 0;
      border-radius: 20px 20px 0 0;
      padding:
        .64rem
        calc(env(safe-area-inset-right, 0px) + .5rem)
        calc(env(safe-area-inset-bottom, 0px) + .64rem)
        calc(env(safe-area-inset-left, 0px) + .5rem);
    }
  }

  @media (min-width: 761px) and (min-height: 621px) {
    .product-mode-panel.is-full-window .stage-rail {
      top: calc(env(safe-area-inset-top, 0px) + 4.45rem);
      right: calc(env(safe-area-inset-right, 0px) + .62rem);
      bottom: auto;
      left: calc(env(safe-area-inset-left, 0px) + .62rem);
      grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
      max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 5.1rem);
      border-width: 1px;
      border-radius: 16px;
      padding: .58rem;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) > .coachmark-inline-slot {
      position: static;
      z-index: auto;
      grid-column: 3;
      grid-row: 1;
      width: clamp(18rem, 27vw, 30rem);
      max-width: 100%;
      min-width: 0;
      margin: 0;
      pointer-events: none;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) > .coachmark-inline-slot .target-callout.is-inline {
      gap: .08rem;
      width: 100%;
      border-radius: 9px;
      padding: .38rem .5rem;
      box-shadow: 0 5px 14px rgba(31, 36, 48, .16);
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) > .coachmark-inline-slot .target-callout-step {
      display: none;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) > .coachmark-inline-slot .target-callout b {
      font-size: .65rem;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) > .coachmark-inline-slot .target-callout span {
      display: -webkit-box;
      overflow: hidden;
      font-size: .68rem;
      line-height: 1.18;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }

  @media (max-width: 760px), (max-height: 620px) {
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) > .coachmark-inline-slot {
      position: fixed;
      z-index: 125;
      right: max(env(safe-area-inset-right, 0px), .48rem);
      bottom: max(env(safe-area-inset-bottom, 0px), .48rem);
      left: max(env(safe-area-inset-left, 0px), .48rem);
      grid-column: auto;
      grid-row: auto;
      width: auto;
      max-width: 28rem;
      margin: 0 auto;
      border: 0;
      background: transparent;
      padding: 0;
      box-shadow: none;
      pointer-events: none;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) > .coachmark-inline-slot .target-callout.is-inline {
      width: 100%;
    }
  }

  @media (max-width: 620px) {
    .run-progress-summary {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: .44rem;
      width: 100%;
      overflow: visible;
    }
    .run-progress-summary .run-progress-sep,
    .run-progress-summary .run-progress-stage {
      display: none;
    }
    .run-progress-summary .run-progress-title { text-align: left; }
    .run-progress-summary .simulator-fullscreen-toggle {
      justify-self: end;
    }
  }

  @media (max-width: 380px) {
    .product-mode-panel.is-full-window .sim-guide-toggle {
      width: 2.75rem;
      padding-inline: .45rem;
    }
    .product-mode-panel.is-full-window .sim-guide-toggle-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .product-mode-panel.is-full-window .sim-step-guide.is-guide-collapsible:not(.is-guide-expanded) :is(.tutorial-advance, .sim-explainer-next) {
      width: min(6.6rem, 28vw);
      min-width: 4.9rem;
    }
    .product-mode-panel.is-full-window .stage-rail {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .simulator-fullscreen-toggle,
    .simulator-fullscreen-icon,
    .sim-guide-toggle,
    .sim-guide-toggle::after,
    .simulator-fullscreen-hint {
      transition: none;
      animation: none;
    }
  }

  @media (forced-colors: active) {
    .simulator-fullscreen-toggle,
    .sim-guide-toggle,
    .product-mode-panel.is-full-window .stage-rail {
      border: 1px solid ButtonText;
      box-shadow: none;
    }
    .simulator-fullscreen-toggle:focus-visible,
    .sim-guide-toggle:focus-visible {
      outline: 2px solid Highlight;
    }
    .product-mode-panel.is-full-window .run-control-panel:has(.stage-rail:not([hidden]))::after {
      backdrop-filter: none;
    }
  }

  .product-mode-panel[data-product-mode="omen"] {
    --product-ui-font: "Alegreya Sans App", "Noto Serif Tibetan App", "Noto Sans Symbols 2 App", system-ui, sans-serif;
    --product-weight-body: 500;
    --product-weight-meta: 700;
    --product-weight-control: 800;
    --product-weight-title: 800;
    --product-weight-display: 900;
    --product-leading-tight: 1.16;
    --product-leading-ui: 1.26;
    --product-leading-copy: 1.4;
    --product-text-gap: .2rem;
  }
  .product-mode-panel[data-product-mode="themis"] {
    --product-ui-font: "Literata App", "Noto Sans Symbols 2 App", Georgia, serif;
    --product-weight-body: 450;
    --product-weight-meta: 600;
    --product-weight-control: 650;
    --product-weight-title: 700;
    --product-weight-display: 800;
    --product-leading-tight: 1.22;
    --product-leading-ui: 1.32;
    --product-leading-copy: 1.46;
    --product-text-gap: .24rem;
    color-scheme: dark;
  }
  .product-mode-panel[data-product-mode] {
    --simulator-ui-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --product-text-caption: .75rem;
    --product-text-meta: .8rem;
    --product-text-body: .875rem;
    --product-text-control: .875rem;
    --product-text-subtitle: .98rem;
    --product-text-title: 1.08rem;
    --product-text-display: 1.3rem;
    --product-text-figure: 1.62rem;
  }
  .product-mode-panel[data-product-mode] .run-control-panel,
  .product-mode-panel[data-product-mode] .sim-step-guide,
  .product-mode-panel[data-product-mode] .stage-rail,
  .product-mode-panel[data-product-mode] .event-navigator-toggle {
    --sans: var(--simulator-ui-font);
    --product-weight-body: 500;
    --product-weight-meta: 600;
    --product-weight-control: 700;
    --product-weight-title: 700;
    --product-weight-display: 700;
    --product-leading-tight: 1.2;
    --product-leading-ui: 1.3;
    --product-leading-copy: 1.42;
    --product-text-gap: .22rem;
    font-family: var(--simulator-ui-font);
    font-kerning: normal;
    font-synthesis: none;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .product-mode-panel[data-product-mode] .sim-app-viewport {
    --sans: var(--product-ui-font);
    font-family: var(--product-ui-font);
    font-kerning: normal;
    font-synthesis: none;
    font-variant-numeric: lining-nums tabular-nums;
  }

  .product-mode-panel[data-product-mode="omen"] .run-control-panel,
  .product-mode-panel[data-product-mode="omen"] .sim-step-guide {
    --bg: #f2e3cd;
    --surface: #fff7e8;
    --ink: #251f1a;
    --ink-soft: #43372e;
    --muted: #655244;
    --faint: #70513b;
    --line: #dcb98d;
    --line-strong: #b9824c;
    --accent: #ad520f;
    --accent-soft: #f4cf9d;
    --accent-ink: #6f4400;
    --good: #087068;
    --good-soft: #d9efea;
    --bad: #9d3f30;
    --bad-soft: #f3d9d1;
    --action-fill: #ad520f;
    --action-ink: #fff9ed;
    --continue-fill: #087068;
    --continue-ink: #ffffff;
    --shadow: 0 4px 12px rgba(91, 57, 24, .08);
  }
  .product-mode-panel[data-product-mode="omen"] .run-control-panel,
  .product-mode-panel[data-product-mode="omen"] .sim-step-guide {
    border-radius: 8px;
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  }
  .product-mode-panel[data-product-mode="omen"] .simulator-island {
    border-color: #d3aa77;
    background: #f2e3cd;
  }
  .product-mode-panel[data-product-mode="themis"] .run-control-panel,
  .product-mode-panel[data-product-mode="themis"] .sim-step-guide,
  .product-mode-panel[data-product-mode="themis"] .simulator-island {
    --bg: #151a1d;
    --surface: #232a2e;
    --ink: #f6f2e8;
    --ink-soft: #d9dfdc;
    --muted: #bdc6c6;
    --faint: #a0acae;
    --line: #3e4a50;
    --line-strong: #65737b;
    --accent: #3e7fa8;
    --accent-soft: #29475b;
    --accent-ink: #c3e7ff;
    --good: #b6c98f;
    --good-soft: #2c3929;
    --bad: #e49a7f;
    --bad-soft: #4b302b;
    --action-fill: #2f7199;
    --action-ink: #f7fcff;
    --continue-fill: #b6c98f;
    --continue-ink: #172017;
    --shadow: 0 4px 14px rgba(0, 0, 0, .22);
  }
  .product-mode-panel[data-product-mode="themis"] .run-control-panel,
  .product-mode-panel[data-product-mode="themis"] .sim-step-guide {
    border-radius: 8px;
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  }
  .product-mode-panel[data-product-mode="themis"] .simulator-island {
    border-color: #4b5960;
    background: #151a1d;
  }
  .product-mode-panel[data-product-mode="themis"] :where(
    .sim-step-badge, .sim-step-copy strong
  ) { color: var(--accent-ink); }
  .product-mode-panel[data-product-mode="themis"] .run-details summary::marker { color: var(--accent-ink); }
  .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] :where(
    .app-eyebrow, .action-effect strong, .handoff-arrow
  ) { color: var(--accent-ink); }
  .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] .action-target::before { color: var(--accent-ink); }

  /* The browser stays neutral while each embedded web app owns its own theme. */
  .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="omen"] {
    --product-ui-font: "Alegreya Sans App", "Noto Serif Tibetan App", "Noto Sans Symbols 2 App", system-ui, sans-serif;
    --product-weight-body: 500;
    --product-weight-meta: 700;
    --product-weight-control: 800;
    --product-weight-title: 800;
    --product-weight-display: 900;
    --product-leading-tight: 1.16;
    --product-leading-ui: 1.26;
    --product-leading-copy: 1.4;
    --product-text-gap: .2rem;
    --bg: #f2e3cd;
    --surface: #fff7e8;
    --ink: #251f1a;
    --ink-soft: #43372e;
    --muted: #655244;
    --faint: #70513b;
    --line: #dcb98d;
    --line-strong: #b9824c;
    --accent: #ad520f;
    --accent-soft: #f4cf9d;
    --accent-ink: #6f4400;
    --good: #087068;
    --good-soft: #d9efea;
    --bad: #9d3f30;
    --bad-soft: #f3d9d1;
    --action-fill: #ad520f;
    --action-ink: #fff9ed;
    --continue-fill: #087068;
    --continue-ink: #fff;
    --shadow: 0 4px 12px rgba(91, 57, 24, .08);
    color: var(--ink);
    color-scheme: light;
    font-family: var(--product-ui-font);
  }
  .product-mode-panel[data-product-mode] .sim-toast-layer[data-app-theme="omen"] {
    --product-ui-font: "Alegreya Sans App", "Noto Serif Tibetan App", "Noto Sans Symbols 2 App", system-ui, sans-serif;
    --sans: var(--product-ui-font);
    --surface: #fff7e8;
    --ink: #251f1a;
    --muted: #655244;
    --line: #dcb98d;
    --line-strong: #b9824c;
    --good: #087068;
    --good-soft: #d9efea;
    font-family: var(--product-ui-font);
    color-scheme: light;
  }
  .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] {
    --product-ui-font: "Literata App", "Noto Sans Symbols 2 App", Georgia, serif;
    --product-weight-body: 450;
    --product-weight-meta: 600;
    --product-weight-control: 650;
    --product-weight-title: 700;
    --product-weight-display: 800;
    --product-leading-tight: 1.22;
    --product-leading-ui: 1.32;
    --product-leading-copy: 1.46;
    --product-text-gap: .24rem;
    --bg: #151a1d;
    --surface: #232a2e;
    --ink: #f6f2e8;
    --ink-soft: #d9dfdc;
    --muted: #bdc6c6;
    --faint: #a0acae;
    --line: #3e4a50;
    --line-strong: #65737b;
    --accent: #3e7fa8;
    --accent-soft: #29475b;
    --accent-ink: #c3e7ff;
    --good: #b6c98f;
    --good-soft: #2c3929;
    --bad: #e49a7f;
    --bad-soft: #4b302b;
    --action-fill: #2f7199;
    --action-ink: #f7fcff;
    --continue-fill: #b6c98f;
    --continue-ink: #172017;
    --shadow: 0 4px 14px rgba(0, 0, 0, .22);
    color: var(--ink);
    color-scheme: dark;
    font-family: var(--product-ui-font);
    font-optical-sizing: auto;
  }
  .product-mode-panel[data-product-mode] .sim-toast-layer[data-app-theme="themis"] {
    --product-ui-font: "Literata App", "Noto Sans Symbols 2 App", Georgia, serif;
    --sans: var(--product-ui-font);
    --surface: #232a2e;
    --ink: #f6f2e8;
    --muted: #bdc6c6;
    --line: #3e4a50;
    --line-strong: #65737b;
    --good: #b6c98f;
    --good-soft: #2c3929;
    font-family: var(--product-ui-font);
    color-scheme: dark;
  }
  .product-mode-panel[data-product-mode] .sim-live-preview .app-tabs { gap: .58rem; }
  .product-mode-panel[data-product-mode] .sim-live-preview .app-tabs span { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: .28rem .08rem; }
  .product-mode-panel[data-product-mode] .sim-live-preview .app-tabs span.on { border-bottom-color: var(--accent); background: transparent; color: var(--accent-ink); }
  .product-mode-panel[data-product-mode] .sim-live-preview .app-nav-chip { border: 0; border-left: 1px solid var(--line-strong); border-radius: 0; background: transparent; padding: .2rem .18rem .2rem .5rem; }
  .product-mode-panel[data-product-mode] .sim-live-preview .app-brand { color: var(--accent-ink); }

  /* Optical type normalization keeps semantic roles aligned across both product fonts. */
  .product-tab[data-product-mode],
  .product-tab[data-product-mode] :where(*) {
    letter-spacing: 0;
  }
  .product-tab[data-product-mode] .product-tab-copy strong { font-size: .92rem; line-height: 1.18; }
  .product-tab[data-product-mode] .product-tab-copy small { font-size: .72rem; line-height: 1.3; }
  .product-tab[data-product-mode] .product-tab-copy { gap: .16rem; }
  .product-tab[data-product-mode] .product-tab-copy strong { font-weight: 700; }
  .product-tab[data-product-mode] .product-tab-copy small { font-weight: 500; }
  .product-mode-nav.is-awaiting-selection .product-tab[data-product-mode] .product-tab-copy strong { font-size: 1.08rem; }
  .product-mode-nav.is-awaiting-selection .product-tab[data-product-mode] .product-tab-copy small { font-size: .78rem; }

  .product-mode-panel[data-product-mode] .run-control-panel :where(*),
  .product-mode-panel[data-product-mode] .stage-rail :where(*),
  .product-mode-panel[data-product-mode] .product-demo .sim-step-guide :where(*),
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport :where(*) {
    letter-spacing: 0;
  }
  .product-mode-panel[data-product-mode] .run-control-panel :where(button),
  .product-mode-panel[data-product-mode] .product-demo .sim-step-guide :where(button),
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport :where(button, input) {
    font-family: inherit;
    font-synthesis: none;
  }

  .product-mode-panel[data-product-mode] .run-control-panel :where(.run-controls .btn) {
    min-height: 2.3rem;
    font-size: var(--product-text-control);
    line-height: var(--product-leading-tight);
    font-weight: var(--product-weight-control);
  }
  .product-mode-panel[data-product-mode] .run-control-panel :where(.run-progress-title) {
    font-size: var(--product-text-title);
    line-height: var(--product-leading-tight);
    font-weight: var(--product-weight-title);
  }
  .product-mode-panel[data-product-mode] .run-control-panel :where(.run-progress-stage, .event-nav-label) {
    font-size: var(--product-text-meta);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-meta);
  }
  .product-mode-panel[data-product-mode] .run-control-panel :where(.run-progress-count) {
    font-size: var(--product-text-meta);
    line-height: var(--product-leading-tight);
    font-weight: 800;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport :where(.juror-wallet-balance span) {
    font-size: var(--product-text-caption);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-meta);
  }
  .product-mode-panel[data-product-mode] .stage-rail :where(.stage-group-name, .step-name) {
    font-size: var(--product-text-body);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-title);
  }
  .product-mode-panel[data-product-mode] .stage-rail :where(.stage-group-range, .stage-step .n) {
    font-size: var(--product-text-caption);
    line-height: var(--product-leading-tight);
    font-weight: 800;
  }

  .product-mode-panel[data-product-mode] .product-demo .sim-step-guide :where(.sim-step-copy) { gap: var(--product-text-gap); }
  .product-mode-panel[data-product-mode] .product-demo .sim-step-guide :where(.sim-step-badge span, .sim-step-copy strong, .tutorial-step, .tutorial-advance span, .automatic-progress-copy span) {
    font-size: var(--product-text-caption);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-meta);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-step-guide :where(.sim-step-copy span, .tutorial-result) {
    font-size: var(--product-text-meta);
    line-height: var(--product-leading-copy);
    font-weight: var(--product-weight-body);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-step-guide :where(.sim-step-copy b) {
    font-size: var(--product-text-title);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-title);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-step-guide :where(.sim-step-badge b) {
    font-size: 1.12rem;
    line-height: var(--product-leading-tight);
    font-weight: var(--product-weight-display);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-step-guide :where(.tutorial-cue) {
    font-size: var(--product-text-subtitle);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-title);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-step-guide :where(.tutorial-advance b, .automatic-progress-copy strong) {
    font-size: var(--product-text-control);
    line-height: var(--product-leading-tight);
    font-weight: var(--product-weight-control);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-step-guide :where(.tutorial-dock) { gap: .5rem; }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview :where(
    .fake-screen-name, .fake-mini, .fake-field .k,
    .app-eyebrow, .app-metric span, .app-panel .mini, .app-receipt strong, .sim-help,
    .app-action-card .mini, .live-card-title span, .live-kpi span,
    .liquidity-caption, .liquidity-preview small,
    .intent-item span, .live-field label, .sim-toast-header, .sim-toast-saved,
    .record-copy span, .settlement-copy span, .settlement-status,
    .action-status, .action-target, .action-effect strong,
    .odds-side span, .wallet-token span, .team-score span, .countdown span,
    .evidence-item span, .proof-stamp
  ) {
    font-size: var(--product-text-caption);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-meta);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview :where(
    .fake-status, .fake-flow-step span, .fake-field .h, .fake-actions button,
    .fake-explain-row, .fake-ticket span, .app-tabs span, .app-nav-chip,
    .app-status, .live-status, .app-choice, .app-token,
    .app-bar-label, .app-list-item, .app-route-step, .app-route-step span:last-child,
    .app-note, .sim-tooltip, .app-row, .message, .mini-row, .checkout-row,
    .liquidity-preview b, .liquidity-currency,
    .action-index, .action-effect, .ticket-summary, .check-item,
    .participant span, .leg-card span, .face-check, .beacon-readout code,
    .record-value, .settlement-copy small, .settlement-details summary,
    .sim-app-next-label
  ) {
    font-size: var(--product-text-meta);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-meta);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview :where(
    .fake-sub, .app-hero p, .live-head p, .sim-toast-body, .sim-toast-detail,
    .app-receipt span, .app-note, .sim-tooltip
  ) {
    font-size: var(--product-text-body);
    line-height: var(--product-leading-copy);
    font-weight: var(--product-weight-body);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview :where(
    .app-brand, .app-panel h5, .live-card-title, .fake-ticket b, .record-copy strong
  ) {
    font-size: var(--product-text-subtitle);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-title);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview :where(
    .fake-question, .app-hero h4, .live-head h4
  ) {
    font-size: var(--product-text-display);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-display);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview :where(
    .fake-field .v, .app-metric b, .live-kpi b, .app-receipt b, .app-value, .settlement-copy b,
    .wallet-token b, .participant b, .leg-card b
  ) {
    font-size: var(--product-text-title);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-title);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview :where(
    .intent-item b, .app-row b, .app-list-item b, .ticket-summary b, .evidence-item b
  ) {
    font-size: var(--product-text-body);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-title);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview :where(
    .app-action-bar button, .sim-app-action,
    .app-ballot button, .fake-actions button,
    .liquidity-side, .liquidity-input
  ) {
    font-size: var(--product-text-control);
    line-height: var(--product-leading-tight);
    font-weight: var(--product-weight-control);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview :where(.live-input, .live-static-value) {
    font-size: var(--product-text-body);
    line-height: var(--product-leading-ui);
    font-weight: var(--product-weight-body);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview :where(
    .odds-side b, .team-score b, .countdown b
  ) {
    font-size: var(--product-text-figure);
    line-height: var(--product-leading-tight);
    font-weight: var(--product-weight-display);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview :where(.app-panel, .live-card) { gap: .5rem; }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview .live-kpis { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
  .product-demo.sim-tight .live-main.live-layout-1 > .live-card:last-child,
  .product-demo.sim-tight .live-main.live-layout-3 > .live-card:last-child { grid-column: 1 / -1; }
  .product-demo.sim-tight .live-page:is(.page-create-market, .page-private-room) .live-card { grid-column: 1 / -1; }
  .product-demo.sim-ultra .liquidity-grid { grid-template-columns: 1fr; }

  @media (max-width: 720px) {
    .product-mode-nav { grid-template-columns: 1fr; gap: .56rem; padding: .82rem .54rem .54rem; }
    .product-switch-label { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .22rem .5rem; border-right: 0; border-bottom: 1px solid var(--line); padding: .1rem .12rem .48rem; }
    .product-switch-label strong { font-size: 1rem; }
    .product-switch-label small { grid-column: 1 / -1; }
    .product-mode-nav.is-awaiting-selection { gap: .95rem; min-height: 0; padding: 1.05rem .72rem; }
    .product-mode-nav.is-awaiting-selection .product-switch-label { display: grid; grid-template-columns: 1fr; gap: .22rem; border-bottom: 0; padding: 0; }
    .product-mode-nav.is-awaiting-selection .product-switch-label strong { font-size: 1.45rem; }
    .product-mode-nav.is-awaiting-selection .product-switch-label small { grid-column: auto; }
    .product-mode-nav.is-awaiting-selection .product-tabs { grid-template-columns: 1fr; max-width: 32rem; }
  }
  @media (max-width: 470px) {
    .product-tab { grid-template-columns: auto minmax(0, 1fr); gap: .42rem; min-height: 3.75rem; padding: .44rem; }
    .product-tab-event { display: none; }
    .product-tab-copy strong { font-size: .76rem; }
    .product-tab-copy small { font-size: .61rem; }
    .product-tab-icon { width: 2rem; height: 2rem; }
    .product-tab-icon svg { width: 1.05rem; height: 1.05rem; }
    .product-mode-nav.is-awaiting-selection .product-tab { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 4.8rem; padding: .68rem; }
    .product-mode-nav.is-awaiting-selection .product-tab-icon { width: 2.5rem; height: 2.5rem; }
    .product-mode-nav.is-awaiting-selection .product-tab-copy strong { font-size: .9rem; }
    .product-mode-nav.is-awaiting-selection .product-tab-event { display: inline-flex; }
  }

  /* Scan-first app hierarchy: neutral structure, semantic color, readable type. */
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview {
    background: var(--browser-chrome-bg);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport,
  .product-mode-panel[data-product-mode] .product-demo .app-window,
  .product-mode-panel[data-product-mode] .product-demo .live-page {
    background: var(--bg);
  }
  .product-mode-panel[data-product-mode] .product-demo .app-nav {
    min-height: 3.6rem;
    border-bottom-color: var(--line-strong);
    background: var(--surface);
    padding: .7rem .82rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .app-brand {
    font-size: var(--product-text-subtitle);
    line-height: var(--product-leading-tight);
  }
  .product-mode-panel[data-product-mode] .product-demo .app-tabs span,
  .product-mode-panel[data-product-mode] .product-demo .app-nav-chip {
    font-size: var(--product-text-meta);
    line-height: var(--product-leading-ui);
  }
  .product-mode-panel[data-product-mode] .product-demo .app-tabs span {
    border-bottom-width: 3px;
    padding: .34rem .1rem .3rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .app-nav-chip {
    color: var(--muted);
    padding-block: .25rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-browser-back {
    min-height: 2.4rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .live-page {
    gap: .8rem;
    padding: .86rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .live-main {
    gap: .7rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .live-head {
    border: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
    padding: .78rem .82rem;
    box-shadow: none;
  }
  .product-mode-panel[data-product-mode] .product-demo .live-head h4 {
    margin-top: .12rem;
    color: var(--ink);
  }
  .product-mode-panel[data-product-mode] .product-demo .live-head p {
    max-width: 48rem;
    margin-top: .28rem;
    color: var(--ink-soft);
  }
  .product-mode-panel[data-product-mode] .product-demo .live-status {
    min-height: 1.8rem;
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    color: var(--accent-ink);
    padding: .3rem .62rem;
    font-size: var(--product-text-meta);
    line-height: var(--product-leading-tight);
  }
  .product-mode-panel[data-product-mode] .product-demo .live-status.good {
    border-color: color-mix(in srgb, var(--good) 50%, var(--line));
    color: var(--good);
  }
  .product-mode-panel[data-product-mode] .product-demo .live-status.warn {
    border-color: color-mix(in srgb, var(--bad) 52%, var(--line));
    color: var(--bad);
  }
  .product-mode-panel[data-product-mode] .product-demo .live-card {
    gap: .58rem;
    border-color: var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: .76rem;
    box-shadow: var(--shadow);
  }
  .product-mode-panel[data-product-mode] .product-demo .live-card.awaiting-action {
    border: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line));
    background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft));
    box-shadow: var(--shadow);
  }
  .product-mode-panel[data-product-mode] .product-demo .live-card.hot {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--surface) 72%, var(--accent-soft));
  }
  .product-mode-panel[data-product-mode] .product-demo .live-card.block-appeal-crowdfund {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 58%, var(--surface)), var(--surface) 48%, color-mix(in srgb, var(--accent) 6%, var(--surface)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent), 0 16px 34px color-mix(in srgb, var(--accent) 9%, transparent);
  }
  .product-mode-panel[data-product-mode] .product-demo .live-card.is-continuation-target,
  .product-mode-panel[data-product-mode] .product-demo .live-card.good {
    background: color-mix(in srgb, var(--surface) 78%, var(--good-soft));
  }
  .product-mode-panel[data-product-mode] .product-demo .live-card.bad {
    background: color-mix(in srgb, var(--surface) 78%, var(--bad-soft));
  }
  .product-mode-panel[data-product-mode] .product-demo .live-card-title {
    gap: .42rem .62rem;
    color: var(--ink);
  }
  .product-mode-panel[data-product-mode] .product-demo .block-title-main {
    gap: .46rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .block-icon {
    width: 1.65rem;
    height: 1.65rem;
    border-color: var(--line);
    border-radius: 6px;
    background: var(--bg);
    color: var(--muted);
  }
  .product-mode-panel[data-product-mode] .product-demo :is(
    .page-create-market .block-fields,
    .page-live-market .block-odds,
    .page-order-book .block-fill,
    .page-token-lending .block-yield,
    .page-wallet-unlock :is(.block-checklist, .block-tokens),
    .page-private-room .block-participants,
    .page-parlay-slip .block-legs,
    .page-resolution-request .block-record,
    .page-court-handoff .block-record,
    .page-jury-draw .block-beacon,
    .page-juror-workspace .block-evidence,
    .page-verdict-page .block-proof,
    .page-appeal-review .block-record,
    .page-appeal-checkout .block-checkout,
    .page-appeal-crowdfund .block-appeal-crowdfund,
    .page-appeal-result .block-proof,
    .page-final-receipt .block-closed
  ) {
    border: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  }
  .product-mode-panel[data-product-mode] .product-demo :is(
    .page-create-market .block-fields,
    .page-live-market .block-odds,
    .page-order-book .block-fill,
    .page-token-lending .block-yield,
    .page-wallet-unlock :is(.block-checklist, .block-tokens),
    .page-private-room .block-participants,
    .page-parlay-slip .block-legs,
    .page-resolution-request .block-record,
    .page-court-handoff .block-record,
    .page-jury-draw .block-beacon,
    .page-juror-workspace .block-evidence,
    .page-verdict-page .block-proof,
    .page-appeal-review .block-record,
    .page-appeal-checkout .block-checkout,
    .page-appeal-crowdfund .block-appeal-crowdfund,
    .page-appeal-result .block-proof,
    .page-final-receipt .block-closed
  ) .block-icon {
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    background: var(--accent-soft);
    color: var(--accent-ink);
  }
  .product-mode-panel[data-product-mode] .product-demo .page-token-lending .block-yield {
    border-color: color-mix(in srgb, var(--good) 48%, var(--line));
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--good) 14%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--good-soft) 24%, var(--surface)), var(--surface) 62%);
  }
  .product-mode-panel[data-product-mode] .product-demo :is(
    .block-proof,
    .block-closed,
    .live-card.is-continuation-target
  ) .block-icon {
    border-color: color-mix(in srgb, var(--good) 48%, var(--line));
    background: var(--good-soft);
    color: var(--good);
  }
  .product-mode-panel[data-product-mode] .product-demo .live-kpis {
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: .5rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .live-kpis:has(> .live-kpi:only-child) {
    grid-template-columns: minmax(10rem, 18rem);
    justify-content: start;
  }
  .product-mode-panel[data-product-mode] .product-demo .live-kpi,
  .product-mode-panel[data-product-mode] .product-demo .live-kpis > .live-kpi:nth-child(n) {
    min-height: 3.35rem;
    border-color: var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: .58rem .66rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .live-kpi span {
    color: var(--faint);
  }
  .product-mode-panel[data-product-mode] .product-demo .live-kpi b {
    margin-top: .12rem;
    color: var(--ink);
  }
  .product-mode-panel[data-product-mode] .product-demo :is(
    .live-input,
    .liquidity-side,
    .liquidity-amount,
    .side-button,
    .app-ballot button
  ) {
    min-height: 2.7rem;
    border-radius: 7px;
  }
  .product-mode-panel[data-product-mode] .product-demo .live-input {
    border-color: var(--line-strong);
    background: var(--bg);
    padding: .62rem .68rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .liquidity-input {
    min-height: 1.65rem;
  }
  .product-mode-panel[data-product-mode] .product-demo :is(
    .mini-row,
    .check-item,
    .face-check,
    .checkout-row,
    .app-route-step
  ) {
    min-height: 2.25rem;
  }
  .product-mode-panel[data-product-mode] .product-demo :is(
    .mini-row,
    .check-item,
    .face-check,
    .checkout-row,
    .app-row,
    .app-route-step
  ) {
    color: var(--muted);
  }
  .product-mode-panel[data-product-mode] .product-demo :is(
    .mini-row b,
    .check-item b,
    .face-check b,
    .checkout-row b,
    .app-row b,
    .app-route-step span:nth-child(2)
  ) {
    color: var(--ink);
  }
  .product-mode-panel[data-product-mode] .product-demo .app-route-step i {
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--product-text-caption);
    line-height: 1;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-live-preview .app-route-step span:last-child {
    font-size: var(--product-text-meta);
    line-height: var(--product-leading-ui);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-action {
    min-height: 2.7rem;
    border-color: var(--action-fill);
    border-radius: 7px;
    background: var(--action-fill);
    color: var(--action-ink);
    padding: .58rem .92rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-action::after {
    background: color-mix(in srgb, currentColor 18%, transparent);
    color: currentColor;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-action:hover,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-action:focus-visible {
    border-color: color-mix(in srgb, var(--action-fill) 84%, var(--ink));
    background: color-mix(in srgb, var(--action-fill) 84%, var(--ink));
    color: var(--action-ink);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-action.app-continue-action {
    border-color: var(--continue-fill);
    background: var(--continue-fill);
    color: var(--continue-ink);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-action.app-continue-action:hover,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-action.app-continue-action:focus-visible {
    border-color: color-mix(in srgb, var(--continue-fill) 84%, var(--ink));
    background: color-mix(in srgb, var(--continue-fill) 84%, var(--ink));
    color: var(--continue-ink);
  }
  .product-mode-panel[data-product-mode] .product-demo .page-appeal-checkout .app-seat-grid {
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: .3rem;
  }

  @container run-stage (max-width: 620px) {
    .product-mode-panel[data-product-mode] .product-demo .live-page { padding: .62rem; }
    .product-mode-panel[data-product-mode] .product-demo .live-main { grid-template-columns: 1fr; gap: .56rem; }
    .product-mode-panel[data-product-mode] .product-demo .live-main > .live-card { grid-column: 1 / -1; }
    .product-mode-panel[data-product-mode] .product-demo .live-kpis,
    .product-mode-panel[data-product-mode] .product-demo .live-intent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-mode-panel[data-product-mode] .product-demo .live-head,
    .product-mode-panel[data-product-mode] .product-demo .live-card { padding: .68rem; }
    .product-mode-panel[data-product-mode] .product-demo .live-kpis:has(> .live-kpi:only-child) { grid-template-columns: 1fr; }
    .product-mode-panel[data-product-mode] .product-demo .page-appeal-checkout .app-seat-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  }
  @container run-stage (max-width: 380px) {
    .product-mode-panel[data-product-mode] .product-demo .live-page { padding: .46rem; }
    .product-mode-panel[data-product-mode] .product-demo .live-kpis,
    .product-mode-panel[data-product-mode] .product-demo .live-intent { grid-template-columns: 1fr; }
    .product-mode-panel[data-product-mode] .product-demo .live-head,
    .product-mode-panel[data-product-mode] .product-demo .live-card { padding: .6rem; }
    .product-mode-panel[data-product-mode] .product-demo .page-appeal-checkout .app-seat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }

  /* Responsive hardening for the embedded product run-through. */
  .product-mode-nav,
  .product-tabs,
  .product-tab,
  .product-tab-copy,
  .product-tab-copy > *,
  .run-progress-summary,
  .sim-browser-bar > *,
  .protocol-sequence-header > *,
  .protocol-sequence-badges,
  .tutorial-top > *,
  .receipt-detail > *,
  .liquidity-offer > *,
  .mini-row > *,
  .app-route-step > *,
  .evidence-item > * { min-width: 0; }
  .product-tab-copy small { overflow-wrap: anywhere; }

  /* Receipt rows respond to the card they occupy, not only to the page width. */
  .live-card { container: live-card / inline-size; }
  @container live-card (max-width: 16rem) {
    .receipt-detail {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      gap: .12rem;
    }
    .receipt-detail dd {
      width: 100%;
      overflow-wrap: anywhere;
      word-break: normal;
    }
  }

  /* The 12-column card plan is a desktop layout. Tablet-sized app surfaces stack. */
  @container run-stage (max-width: 760px) {
    .product-mode-panel[data-product-mode] .product-demo .live-main,
    .product-mode-panel[data-product-mode] .product-demo .protocol-sequence-records,
    .product-mode-panel[data-product-mode] .product-demo .protocol-trace {
      grid-template-columns: minmax(0, 1fr);
    }
    .product-mode-panel[data-product-mode] .product-demo .live-main > .live-card,
    .product-mode-panel[data-product-mode] .product-demo .protocol-sequence .protocol-record.live-card {
      --protocol-record-span: 12;
      grid-column: 1 / -1;
    }
    .product-mode-panel[data-product-mode] .product-demo .protocol-trace-step:not(:last-child)::after {
      top: auto;
      right: auto;
      bottom: -.58rem;
      left: 1.42rem;
      width: 1px;
      height: .58rem;
      transform: none;
    }
  }

  /* Records with a compact grid span need their own two-line summary even
     when the surrounding app is desktop-wide. */
  .live-card.block-record:is(.live-span-3, .live-span-4, .live-span-5) > summary {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .42rem;
    padding: .52rem;
  }
  .live-card.block-record:is(.live-span-3, .live-span-4, .live-span-5) > summary .record-mark {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .live-card.block-record:is(.live-span-3, .live-span-4, .live-span-5) > summary .record-copy {
    grid-column: 2;
    grid-row: 1;
  }
  .live-card.block-record:is(.live-span-3, .live-span-4, .live-span-5) > summary .record-value {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    text-align: left;
  }
  .live-card.block-record:is(.live-span-3, .live-span-4, .live-span-5) > summary .disclosure-action {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    justify-content: flex-end;
    border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    padding-top: .34rem;
  }

  @media (max-width: 720px) {
    .product-switch-label {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }
    .product-switch-label small { grid-column: 1; }
  }

  @media (max-width: 420px) {
    .product-mode-nav { padding: .52rem; }
    .product-tabs,
    .product-mode-nav.is-awaiting-selection .product-tabs { grid-template-columns: minmax(0, 1fr); }
    .product-tab,
    .product-mode-nav.is-awaiting-selection .product-tab {
      grid-template-columns: auto minmax(0, 1fr);
      width: 100%;
    }
    .product-tab-event { display: none; }
    .product-mode-nav.is-awaiting-selection .product-tab-event {
      display: inline-flex;
      grid-column: 2;
      justify-self: start;
    }
    .run-progress-summary {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      justify-content: stretch;
      gap: .35rem;
      width: 100%;
      overflow: visible;
      white-space: normal;
    }
    .run-progress-sep,
    .run-progress-stage { display: none; }
    .run-progress-title {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
    }
    .event-navigator-toggle { justify-self: end; }
  }

  @container run-stage (max-width: 320px) {
    .product-mode-panel[data-product-mode] .product-demo .sim-browser-bar {
      grid-template-columns: minmax(0, 1fr);
      gap: .3rem;
    }
    .product-mode-panel[data-product-mode] .product-demo .sim-url { display: none; }
    .product-mode-panel[data-product-mode] .product-demo .sim-browser-back,
    .product-mode-panel[data-product-mode] .product-demo .sim-browser-next {
      grid-column: 1;
      width: 100%;
      max-width: none;
      min-width: 0;
      justify-content: space-between;
    }
    .product-mode-panel[data-product-mode] .product-demo :is(.sim-browser-back-label, .sim-browser-next-copy strong) {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .product-mode-panel[data-product-mode] .product-demo .tutorial-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }
    .product-mode-panel[data-product-mode] .product-demo :is(.tutorial-step, .tutorial-rewind) {
      justify-self: start;
      white-space: normal;
    }
    .product-mode-panel[data-product-mode] .product-demo :is(
      .liquidity-offer,
      .liquidity-preview,
      .trade-ticket,
      .long-ticket .trade-ticket,
      .big-odds,
      .side-picker,
      .app-ballot,
      .token-wallet,
      .participant-grid,
      .scoreboard,
      .protocol-sequence-facts
    ) { grid-template-columns: minmax(0, 1fr); }
    .product-mode-panel[data-product-mode] .product-demo :is(
      .mini-row,
      .app-row,
      .app-route-step,
      .checkout-row,
      .check-item,
      .face-check,
      .evidence-item,
      .protocol-record-row,
      .ticket-summary
    ) {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      justify-content: stretch;
    }
    .product-mode-panel[data-product-mode] .product-demo :is(
      .mini-row,
      .app-row,
      .app-route-step,
      .checkout-row,
      .check-item,
      .face-check,
      .evidence-item,
      .protocol-record-row,
      .ticket-summary
    ) :is(b, small, span) {
      grid-column: 1;
      max-width: 100%;
      text-align: left;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
    }
    .product-mode-panel[data-product-mode] .product-demo .protocol-sequence-header {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .product-mode-panel[data-product-mode] .product-demo .protocol-sequence-badges {
      grid-column: 1 / -1;
      justify-content: flex-start;
      padding-left: 0;
    }
    .product-mode-panel[data-product-mode] .product-demo .protocol-sequence-current {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }
    .product-mode-panel[data-product-mode] .product-demo :is(.protocol-sequence-badge, .protocol-sequence-status) {
      justify-self: start;
      max-width: 100%;
      white-space: normal;
    }
    .product-mode-panel[data-product-mode] .product-demo .protocol-sequence-status { justify-self: start; }
    .product-mode-panel[data-product-mode] .product-demo :is(
      .protocol-sequence-badge,
      .protocol-sequence-status,
      .protocol-record-row,
      .mini-row,
      .app-row,
      .app-route-step,
      .checkout-row,
      .check-item,
      .face-check,
      .evidence-item
    ) { font-size: max(.7rem, var(--product-text-caption)); }
  }

  /* A table card can be narrower than the simulator that contains it. Let the
     rows respond to their own usable width so product names never collapse
     into vertical letter stacks. */
  @container mini-table (max-width: 22rem) {
    .product-demo .mini-table .mini-row {
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: .6rem;
      row-gap: .28rem;
      align-items: baseline;
    }
    .product-demo .mini-table .mini-row > b {
      grid-column: 1 / -1;
      min-width: 0;
      overflow-wrap: normal;
      word-break: normal;
    }
    .product-demo .mini-table .mini-row > span:first-of-type {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .product-demo .mini-table .mini-row > span:last-child {
      grid-column: auto;
      justify-self: end;
      text-align: right;
      white-space: nowrap;
    }
  }

  @container mini-table (max-width: 12rem) {
    .product-demo .mini-table .mini-row {
      grid-template-columns: minmax(0, 1fr);
    }
    .product-demo .mini-table .mini-row > :is(b, span:first-of-type, span:last-child) {
      grid-column: 1;
      justify-self: start;
      max-width: 100%;
      text-align: left;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }

  @media (max-width: 320px) {
    .machine-shell :where(*) { min-width: 0; }
    .machine-toolbar,
    .machine-phase-grid { padding: .55rem; }
    .machine-route-button,
    .machine-trade-rail strong,
    .machine-phase-transition,
    .machine-state-kind,
    .machine-state-branch,
    .machine-sim-chip {
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }

  /* One disclosure language across the chapter: the takeaway stays visible,
     while records and calculations use the same explicit details control. */
  .info-disclosure > .disclosure-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    border-radius: 10px;
    padding: .48rem .52rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    transition: background .16s ease, box-shadow .16s ease;
  }
  .info-disclosure > .disclosure-summary::-webkit-details-marker { display: none; }
  .info-disclosure > .disclosure-summary::marker { content: ""; }
  .info-disclosure > .disclosure-summary:hover {
    background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
  }
  .info-disclosure > .disclosure-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .disclosure-copy {
    display: grid;
    gap: .12rem;
    min-width: 0;
  }
  .disclosure-copy strong {
    color: var(--ink);
    font-size: .72rem;
    line-height: 1.18;
    font-weight: 900;
  }
  .disclosure-copy small {
    color: var(--muted);
    font-size: .61rem;
    line-height: 1.3;
    font-weight: 700;
  }
  .disclosure-action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .38rem;
    min-width: 5.7rem;
    color: var(--accent-ink);
    font-size: .6rem;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
  }
  .disclosure-action-hide { display: none; }
  details[open] > summary .disclosure-action-show,
  .machine-state[aria-expanded="true"] > .disclosure-action .disclosure-action-show { display: none; }
  details[open] > summary .disclosure-action-hide,
  .machine-state[aria-expanded="true"] > .disclosure-action .disclosure-action-hide { display: inline; }
  .disclosure-chevron {
    position: relative;
    display: inline-block;
    width: 1.45rem;
    height: 1.45rem;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface));
    color: var(--accent-ink);
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .disclosure-chevron::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: .38rem;
    height: .38rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  details[open] > summary .disclosure-chevron,
  .machine-state[aria-expanded="true"] > .disclosure-action .disclosure-chevron {
    transform: rotate(180deg);
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 20%, transparent);
  }

  .run-learnings {
    display: grid;
    gap: .72rem;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 16px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, var(--accent-soft)), var(--surface));
    padding: .82rem;
    font-family: var(--sans);
    box-shadow: 0 12px 26px -24px color-mix(in srgb, var(--accent) 44%, transparent);
  }
  .run-learnings-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: .75rem;
  }
  .run-learnings-eyebrow {
    display: block;
    margin-bottom: .14rem;
    color: var(--accent-ink);
    font-family: var(--mono);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .run-learnings-head :is(h2, h3) {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.12;
  }
  .run-learnings-progress {
    display: grid;
    justify-items: end;
    gap: .06rem;
    color: var(--muted);
    font-size: .62rem;
  }
  .run-learnings-progress strong {
    color: var(--accent-ink);
    font-size: .86rem;
  }
  .unlock-recap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .52rem;
  }
  .unlock-recap-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .08rem .48rem;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--recap-color) 30%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--recap-color) 7%, var(--surface));
    padding: .58rem .64rem;
  }
  .unlock-recap-item.is-market { --recap-color: var(--good); }
  .unlock-recap-item.is-court { --recap-color: var(--accent); }
  .unlock-recap-kind {
    grid-row: 1 / span 2;
    align-self: start;
    border-radius: 999px;
    background: color-mix(in srgb, var(--recap-color) 13%, var(--surface));
    color: color-mix(in srgb, var(--recap-color) 88%, var(--ink));
    padding: .2rem .38rem;
    font-size: .54rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .unlock-recap-item b {
    min-width: 0;
    color: var(--ink);
    font-size: .76rem;
    line-height: 1.2;
  }
  .unlock-recap-item small {
    min-width: 0;
    color: var(--muted);
    font-size: .64rem;
    line-height: 1.32;
  }
  .run-details {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg) 62%, var(--surface));
    padding: .18rem;
  }
  .run-details > .unlock-panels { margin: .28rem .52rem .58rem; }
  .run-details .unlock:not(.on) { display: none; }
  .run-details .unlock.on .tag { display: none; }

  .activity-record > summary .disclosure-action {
    align-self: center;
  }
  .activity-record[open] > summary {
    background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
  }

  .market-price-explainer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .22rem .58rem;
    align-items: start;
    border: 1px solid color-mix(in srgb, var(--good) 26%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--good-soft) 48%, var(--surface));
    padding: .54rem .58rem;
  }
  .market-price-explainer-heading {
    display: grid;
    gap: .08rem;
    min-width: 6.5rem;
  }
  .market-price-explainer-heading span {
    color: var(--good);
    font-size: .52rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .market-price-explainer-heading strong {
    color: var(--ink);
    font-size: .7rem;
    line-height: 1.18;
  }
  .market-price-explainer p {
    margin: 0;
    color: var(--muted);
    font-size: .65rem;
    line-height: 1.38;
  }
  .market-disclosure {
    border-top: 1px solid var(--line);
    padding-top: .22rem;
  }
  .market-disclosure > .disclosure-summary { padding: .34rem .16rem; }
  .market-disclosure .mini-table { margin-top: .42rem; }

  .settlement-details > .disclosure-summary,
  .appeal-quote-details > .disclosure-summary {
    padding: .34rem .08rem;
  }
  .settlement-details .receipt-details,
  .appeal-quote-details .mini-table {
    margin-top: .46rem;
  }

  .appeal-goal-breakdown {
    display: grid;
    grid-template-columns: minmax(7.4rem, 1.25fr) repeat(3, minmax(5.2rem, .75fr));
    align-items: stretch;
    gap: .35rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface));
    padding: .42rem;
  }
  .appeal-goal-breakdown-intro,
  .appeal-goal-part {
    display: grid;
    align-content: center;
    gap: .12rem;
    min-width: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    padding: .42rem .48rem;
  }
  .appeal-goal-breakdown :is(span) {
    color: var(--faint);
    font-size: .52rem;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .appeal-goal-breakdown :is(b) {
    color: var(--ink);
    font-size: .65rem;
    line-height: 1.2;
  }
  .appeal-goal-part.is-total {
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 66%, var(--surface));
  }
  .appeal-goal-part.is-total b { color: var(--accent-ink); }

  .machine-state > .disclosure-action {
    justify-self: start;
    min-width: 0;
    margin-top: .12rem;
    color: color-mix(in srgb, var(--phase-color) 88%, var(--ink));
  }
  .machine-state > .disclosure-action .disclosure-chevron {
    border-color: color-mix(in srgb, var(--phase-color) 30%, var(--line));
    background: color-mix(in srgb, var(--phase-soft) 70%, var(--surface));
    color: color-mix(in srgb, var(--phase-color) 88%, var(--ink));
  }
  .machine-text-outline {
    padding: .18rem;
  }
  .machine-text-outline > .machine-text-content {
    margin: .3rem .52rem .58rem;
  }

  @container run-stage (max-width: 620px) {
    .appeal-goal-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .appeal-goal-breakdown-intro { grid-column: 1 / -1; }
    .appeal-goal-part.is-total { grid-column: 1 / -1; }
    .market-price-explainer { grid-template-columns: minmax(0, 1fr); }
  }

  .product-demo.sim-ultra .activity-record > summary {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .product-demo.sim-ultra .activity-record > summary .record-mark {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .product-demo.sim-ultra .activity-record > summary .record-copy {
    grid-column: 2;
    grid-row: 1;
  }
  .product-demo.sim-ultra .activity-record > summary .record-value {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    text-align: left;
  }
  .product-demo.sim-ultra .activity-record > summary .disclosure-action {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    justify-content: flex-end;
    border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    padding-top: .34rem;
  }

  @media (max-width: 620px) {
    .unlock-recap-grid { grid-template-columns: minmax(0, 1fr); }
    .run-learnings-head { align-items: start; }
    .info-disclosure > .disclosure-summary { gap: .45rem; }
    .activity-record > summary {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .activity-record > summary .record-value {
      grid-column: 2;
      text-align: left;
    }
    .activity-record > summary .disclosure-action {
      grid-column: 1 / -1;
      grid-row: 3;
      justify-self: stretch;
      justify-content: flex-end;
      border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
      padding-top: .34rem;
    }
  }

  /* Simulated product-page composition. These contracts never reach the
     surrounding tutorial, controls, browser chrome, or state map. */
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout] {
    align-content: safe center;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main:is(
    [data-layout="primary-aside"],
    [data-layout="equal-two"],
    [data-layout="equal-three"]
  ) {
    align-items: stretch;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="primary-aside"] > .live-card[data-layout-role="primary"] {
    grid-column: span 7;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="primary-aside"] > .live-card[data-layout-role="aside"] {
    grid-column: span 5;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="equal-two"] > .live-card {
    grid-column: span 6;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="equal-three"] > .live-card {
    grid-column: span 4;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="stack"] > .live-card {
    grid-column: 1 / -1;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="two-plus-record"] {
    align-items: stretch;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="two-plus-record"] > .live-card:not([data-layout-role="record"]) {
    grid-column: span 6;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="two-plus-record"] > .live-card[data-layout-role="record"] {
    grid-column: 1 / -1;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="primary-stack"] > .live-card[data-layout-role="primary"] {
    grid-column: span 7;
    grid-row: span 2;
    align-self: stretch;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="primary-stack"] > .live-card[data-layout-role="secondary"] {
    grid-column: span 5;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main:is(
    [data-layout="equal-two"],
    [data-layout="equal-three"]
  ) > .activity-record:not([open]) > summary {
    min-height: 100%;
    align-content: center;
  }

  /* The opening-liquidity rail now reads as a complete companion to the form
     instead of ending halfway down the row. */
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-create-market .live-main[data-layout="primary-aside"] > .block-liquidity {
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-create-market .live-main[data-layout="primary-aside"] > .block-liquidity > .app-note {
    align-self: end;
  }

  /* The market action stays primary while its two explanations become a
     balanced, quickly scannable pair. */
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-live-market .market-trade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-live-market .market-trade > :is(
    .market-trade-position,
    .market-outcome-label,
    .market-outcomes,
    .market-order,
    .market-disclosure
  ) {
    grid-column: 1 / -1;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-live-market .market-trade > :is(
    .market-early-reward,
    .market-price-explainer
  ) {
    height: 100%;
  }

  /* Four case facts form a compact evidence grid beside the ballot instead of
     one tall metadata column. */
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-juror-workspace .block-evidence .evidence-brief {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Appeal funding keeps the contribution work together, then pairs the
     outcome rules with the funding breakdown and the two supporting notes. */
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-crowdfund {
    grid-template-columns: minmax(0, 1.08fr) minmax(16rem, .92fr);
    gap: .6rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-crowdfund > :is(
    .appeal-funding-summary,
    .appeal-progress,
    .appeal-progress-meta,
    .appeal-crowdfund-body
  ) {
    grid-column: 1 / -1;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-crowdfund > .appeal-outcome-rules {
    grid-column: 1;
    align-content: start;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-crowdfund > .appeal-goal-breakdown {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-crowdfund > .appeal-goal-breakdown .appeal-goal-breakdown-intro,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-crowdfund > .appeal-goal-breakdown .appeal-goal-part.is-total {
    grid-column: 1 / -1;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-crowdfund > .appeal-quote-details {
    grid-column: 1;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-crowdfund > .appeal-custody-note {
    grid-column: 2;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-crowdfund:not(:has(> .appeal-quote-details)) > .appeal-custody-note {
    grid-column: 1 / -1;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-panel-heading b {
    font-size: .76rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-panel-heading span,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-contributor-row span,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-contribution-field > span,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-outcome-rules span,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-goal-breakdown span {
    font-size: .75rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-contributor-row b,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-contributor-row strong,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-contribution-impact b,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-contribution-impact span,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-funding-rule b,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-funding-rule span,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-outcome-rules b,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-goal-breakdown b,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-custody-note span {
    font-size: .75rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-custody-note b {
    font-size: .75rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport :is(.page-appeal-crowdfund, .page-appeal-result) :is(
    .appeal-funding-numbers > span,
    .appeal-deadline > span,
    .appeal-deadline > b,
    .appeal-progress-meta,
    .appeal-empty-state b,
    .appeal-empty-state span,
    .appeal-contribution-presets button,
    .appeal-quote-details summary,
    .appeal-quote-details p,
    .appeal-quote-details .mini-row
  ) {
    font-size: .75rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport :is(.page-appeal-crowdfund, .page-appeal-result) .appeal-quote-details :is(
    .disclosure-copy small,
    .disclosure-action-show,
    .disclosure-action-hide
  ) {
    font-size: .75rem;
  }

  /* Private juror settlement is a two-panel account update, with the scoring
     evidence arranged as compact factors rather than a long text ladder. */
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .juror-settlement {
    gap: .58rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .juror-settlement-route {
    padding: .5rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .juror-account-panel {
    gap: .46rem;
    padding: .64rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .juror-rating-factors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .36rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .juror-rating-factor {
    align-content: center;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 17%, var(--line));
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
    padding: .38rem .44rem;
    font-size: .66rem;
  }
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .juror-account-heading span:first-child,
  .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .juror-settlement-note {
    font-size: .66rem;
  }

  /* Keep the DeFi action above the fold on compact app pages without turning
     its three short statistics into three full-width cards. */
  @container run-stage (min-width: 320px) and (max-width: 620px) {
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-token-lending .defi-vault-head {
      grid-template-columns: minmax(0, 1fr) auto;
    }
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-token-lending .defi-vault-rate {
      border-top: 0;
      padding-top: 0;
      text-align: right;
    }
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-token-lending .defi-vault-stats,
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-parlay-slip .live-kpis {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-token-lending .defi-vault-stats .defi-vault-stat:last-child {
      grid-column: auto;
    }
  }

  /* Cards stack before they become narrow dashboard slivers. This breakpoint
     is scoped to the simulated web page, not the surrounding walkthrough. */
  @container run-stage (max-width: 820px) {
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout] {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout] > .live-card {
      grid-column: 1 / -1;
      grid-row: auto;
      height: auto;
    }
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-live-market .market-trade,
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-crowdfund {
      grid-template-columns: minmax(0, 1fr);
    }
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-live-market .market-trade > *,
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .appeal-crowdfund > :is(
      .appeal-outcome-rules,
      .appeal-goal-breakdown,
      .appeal-quote-details,
      .appeal-custody-note
    ) {
      grid-column: 1;
    }
  }
  @container run-stage (max-width: 620px) {
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-juror-workspace .block-evidence .evidence-brief,
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .juror-rating-factors {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @container run-stage (max-width: 319px) {
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-token-lending .defi-vault-stats,
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-parlay-slip .live-kpis {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-token-lending .defi-vault-stats .defi-vault-stat:last-child,
    .product-mode-panel[data-product-mode] .product-demo .sim-app-viewport .page-parlay-slip .live-kpis .live-kpi:last-child {
      grid-column: 1 / -1;
    }
  }

  /*
   * Fullscreen product canvas.
   * Large simulator windows get a deliberate desktop-app composition instead
   * of centering an embedded-size card cluster inside a much taller page.
   */
  .product-mode-panel.is-full-window .sim-app-viewport > .app-window {
    width: 100%;
    max-width: min(120rem, calc(100% - clamp(.75rem, 3vw, 4rem)));
    min-height: 100%;
    margin-inline: auto;
    border-inline: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 4%, transparent),
      0 0 4rem color-mix(in srgb, var(--bg) 44%, transparent);
  }
  .product-mode-panel.is-full-window .protocol-sequence > :is(.protocol-sequence-header, .protocol-sequence-scroll) {
    box-sizing: border-box;
    width: 100%;
    max-width: min(120rem, calc(100% - clamp(.75rem, 3vw, 4rem)));
    margin-inline: auto;
    border-inline: 1px solid color-mix(in srgb, var(--protocol-accent) 18%, var(--protocol-line));
  }
  .product-mode-panel.is-full-window .protocol-sequence > .protocol-sequence-header {
    border-radius: 10px 10px 0 0;
  }
  .product-mode-panel.is-full-window .protocol-sequence > .protocol-sequence-scroll {
    border-radius: 0 0 10px 10px;
    box-shadow: 0 0 4rem color-mix(in srgb, var(--protocol-bg) 48%, transparent);
  }
  .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout] {
    align-content: start;
  }
  @media (min-width: 1100px) and (min-height: 680px) {
    .product-mode-panel.is-full-window .sim-app-viewport {
      --product-text-caption: .78rem;
      --product-text-meta: .84rem;
      --product-text-body: .92rem;
      --product-text-control: .92rem;
      --product-text-subtitle: 1.04rem;
      --product-text-title: 1.15rem;
      --product-text-display: 1.42rem;
      --product-text-figure: 1.82rem;
    }
    .product-mode-panel.is-full-window .sim-app-viewport .app-nav {
      position: sticky;
      z-index: 24;
      top: 0;
      min-height: 4.25rem;
      padding: .6rem 1rem;
      box-shadow: 0 8px 20px color-mix(in srgb, var(--bg) 32%, transparent);
    }
    .product-mode-panel.is-full-window .sim-app-viewport .live-page {
      min-height: 100%;
      padding: clamp(.82rem, .95vw, 1.05rem);
    }
    .product-mode-panel.is-full-window .sim-app-viewport .live-main {
      gap: clamp(.68rem, .75vw, .86rem);
      min-height: 100%;
    }
    .product-mode-panel.is-full-window .sim-app-viewport .live-head {
      position: relative;
      z-index: 18;
      top: auto;
      padding: clamp(.76rem, .78vw, .92rem);
      box-shadow: 0 8px 18px color-mix(in srgb, var(--bg) 26%, transparent);
    }
    .product-mode-panel.is-full-window .sim-app-viewport .live-card {
      align-self: stretch;
      padding: clamp(.76rem, .78vw, .92rem);
    }

    /* Appeal funding already states raised, remaining, and deadline inside its
       main card, so the duplicate KPI strip is removed in the spacious
       fullscreen dashboard. The remaining controls are tightened just enough
       to keep the full decision context and contribution action together. */
    .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .page-appeal-crowdfund .live-kpis {
      display: none;
    }
    .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .page-appeal-crowdfund .appeal-crowdfund {
      gap: .46rem;
    }
    .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .page-appeal-crowdfund {
      padding: .7rem;
    }
    .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .page-appeal-crowdfund .live-main {
      gap: .56rem;
    }
    .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .page-appeal-crowdfund .live-card {
      padding: .7rem;
    }
    .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .page-appeal-crowdfund :is(
      .appeal-contributors,
      .appeal-contribution-panel
    ) {
      gap: .4rem;
      padding: .56rem;
    }
    .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .page-appeal-crowdfund .appeal-contributor-row {
      padding-block: .32rem;
    }

    /* Receipt-and-result stacks become purposeful desktop columns, while
       sparse cards keep their natural height instead of turning into giant
       empty panels on tall monitors. */
    .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="stack"] > .live-card[data-block-index="0"] {
      grid-column: span 8;
    }
    .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .live-main[data-layout="stack"] > .live-card[data-block-index="1"] {
      grid-column: span 4;
    }
    .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .page-appeal-result .live-main[data-layout="stack"] > .live-card[data-layout-role="result"] {
      grid-column: span 4;
    }
    .product-mode-panel.is-full-window[data-product-mode] .product-demo .sim-app-viewport .page-appeal-result .live-main[data-layout="stack"] > .live-card[data-layout-role="next-round"] {
      grid-column: span 8;
    }

  }

  @media (min-width: 1600px) and (min-height: 850px) {
    .product-mode-panel.is-full-window .sim-app-viewport {
      --product-text-caption: .82rem;
      --product-text-meta: .88rem;
      --product-text-body: .96rem;
      --product-text-control: .96rem;
      --product-text-subtitle: 1.08rem;
      --product-text-title: 1.2rem;
      --product-text-display: 1.5rem;
      --product-text-figure: 1.92rem;
    }
  }

  @media (min-width: 2400px) and (min-height: 1000px) {
    .product-mode-panel.is-full-window .sim-app-viewport > .app-window,
    .product-mode-panel.is-full-window .protocol-sequence > :is(.protocol-sequence-header, .protocol-sequence-scroll) {
      max-width: min(160rem, calc(100% - clamp(.75rem, 3vw, 4rem)));
    }
    .product-mode-panel.is-full-window .sim-app-viewport {
      --product-text-caption: .86rem;
      --product-text-meta: .93rem;
      --product-text-body: 1rem;
      --product-text-control: 1rem;
      --product-text-subtitle: 1.14rem;
      --product-text-title: 1.28rem;
      --product-text-display: 1.62rem;
      --product-text-figure: 2.05rem;
    }
  }

  /* Keep the built-in responsive audit deterministic even when the browser is backgrounded. */
  .layout-audit-mode .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

/* Mutual-dependency racetrack card: the chapter opener that introduces the two
   products as one loop. The circuit uses rounded-rect corners so its sweep can
   never pass behind the node cards, both node fields and the two station chips
   are fully opaque, and the balls ride the line, diving cleanly through the
   demand and arbitration stations edge to edge. */
  .rt-card { border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: 0 14px 34px -26px rgba(41, 37, 34, .55); padding: 1rem 1.1rem 1.15rem; margin: 2rem 0; font-family: var(--sans); }
  .rt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .8rem; }
  .rt-head b { font-size: 1.02rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
  .rt-sep { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 999px; padding: .26rem .7rem; background: var(--bg); white-space: nowrap; }
  .rt-sep i { width: .42rem; height: .42rem; border-radius: 50%; }
  .rt-sep i.o { background: #0a6b3c; }
  .rt-sep i.t { background: var(--dt-emission-ink); }
  .rt-band { position: relative; margin: 1.6rem 0; padding: 1.5rem 3.3rem; }
  .rt-track { position: absolute; inset: 0; border: 2px dashed color-mix(in srgb, var(--accent) 48%, var(--line-strong)); border-radius: 2.6rem; pointer-events: none; }
  .rt-dot { position: absolute; top: 0; left: 0; width: .55rem; height: .55rem; margin: -.275rem; border-radius: 50%; offset-path: inset(0 round 2.6rem); }
  .rt-dot.o { background: #04e26d; box-shadow: 0 0 6px rgba(4, 226, 109, .95), 0 0 14px rgba(4, 226, 109, .5); animation: rt-run 9s linear infinite; }
  .rt-dot.t { background: var(--dt-emission); box-shadow: 0 0 6px rgba(var(--dt-emission-rgb), .95), 0 0 14px rgba(var(--dt-emission-rgb), .5); animation: rt-run 9s linear infinite; animation-delay: -4.5s; }
  .rt-nodes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(2.5rem, 8vw, 5rem); align-items: stretch; }
  .rt-node { min-width: 0; display: grid; align-content: center; justify-items: start; border-radius: 13px; padding: .8rem .9rem; border: 1px solid var(--line-strong); }
  .rt-node .rt-brand { display: block; margin-bottom: .45rem; }
  .rt-node small { display: block; font-size: .8rem; line-height: 1.45; color: var(--ink-soft); }
  .rt-node.omen { background: radial-gradient(120% 150% at 12% 0%, rgba(4, 226, 109, .2), transparent 55%), linear-gradient(165deg, #07231498, #04150ccc), #071b10; border-color: rgba(4, 226, 109, .42); box-shadow: inset 0 0 0 1px rgba(4, 226, 109, .08), 0 10px 26px -18px rgba(0, 89, 42, .8); }
  .rt-node.omen small { color: #cfe6d7; }
  .rt-node.themis { background: linear-gradient(color-mix(in srgb, var(--dt-emission-wash) 46%, transparent), color-mix(in srgb, var(--dt-emission-wash) 46%, transparent)), var(--surface); border-color: color-mix(in srgb, var(--dt-emission) 42%, var(--line-strong)); box-shadow: 0 10px 26px -18px rgba(var(--dt-emission-rgb), .55); }
  .rt-omen-wordmark { display: block; width: min(12.5rem, 82%); }
  .rt-omen-wordmark img { width: 100%; height: auto; display: block; }
  .rt-card .dt-wordmark-emission img { width: min(12.5rem, 78%); height: auto; display: block; }
  .rt-caption { margin: 1.05rem 0 0; font-size: .8rem; color: var(--muted); line-height: 1.5; text-align: center; }
  .rt-caption b { color: var(--ink-soft); }
  .rt-chip { position: absolute; z-index: 2; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-family: var(--mono); font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; padding: .3rem .75rem; border: 1px solid; }
  .rt-chip.demand { top: 0; color: #0a6b3c; border-color: #0a6b3c99; background: linear-gradient(180deg, #fdfcf9, #f0f5ec), var(--surface); }
  .rt-chip.arb { top: 100%; color: var(--dt-emission-ink); border-color: color-mix(in srgb, var(--dt-emission) 58%, var(--line-strong)); background: linear-gradient(180deg, #eff9f9, #fdfcf9), var(--surface); }
  @media (prefers-reduced-motion: reduce) { .rt-dot { display: none; } }
  @media (max-width: 720px) {
    .rt-band { margin: 2.3rem 0 2.4rem; padding: 1.6rem 2.1rem; }
    .rt-track { border-radius: 1.5rem; }
    .rt-dot { offset-path: inset(0 round 1.5rem); }
    .rt-nodes { grid-template-columns: 1fr; }
    .rt-chip { max-width: calc(100% - .5rem); white-space: normal; text-align: center; }
  }
@keyframes rt-run { from { offset-distance: 0%; } to { offset-distance: 100%; } }