/* Simulation pages (XR). Following the home page's rules: white and light grey sections, navy (.dark) bands,
   grey kickers, 800-weight headings, 8px-radius buttons; green only on buttons and small indicators.
   Components: src/pages/Simulator.jsx, SimulationCenter.jsx, src/components/xr.jsx, XrGame.jsx */

.xr {
  --ground: #fff;
  --ground2: var(--surface);
  --card-bg: #fff;
  --rule: var(--line);
  --copy: var(--ink);
  --faded: var(--ink-2);
  --dull: var(--ink-3);
  --accent: var(--lime-ink);
  --accent2: var(--lime-ink);
  --accent-a: rgba(141, 198, 63, .16);
  background: var(--ground); color: var(--copy); overflow: clip;
}
.xr .dark {
  --ground: var(--navy);
  --ground2: var(--navy);
  --card-bg: var(--navy-2);
  --rule: var(--navy-line);
  --copy: #fff;
  --faded: rgba(255, 255, 255, .7);
  --dull: rgba(255, 255, 255, .55);
  --accent: var(--lime);
  --accent2: var(--lime-ink);
  color: var(--copy);
}
.xr section { padding: 0; }
.xr h1, .xr h2, .xr h3 { color: var(--copy); }
.xr-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.xr-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--dull); margin: 0 0 16px; }
.xr-kicker em, .xr-level-list em { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px; background: #fdecea; color: #b3261e; }
.xr-entry { color: var(--faded); font-size: 18px; line-height: 1.65; max-width: 36em; margin-top: 16px; }
.xr-head { margin-bottom: 48px; }
.xr-head h2, .xr-continued, .xr-game-text h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; max-width: 18em; }
.xr-dot, .xr-board-top .is-live i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: xr-pulse 1.6s ease-in-out infinite; }
@keyframes xr-pulse { 50% { opacity: .35; } }

/* Buttons: the home page's .btn */
.xr-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }
.xr-btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 8px; font: 700 15.5px/1 var(--font); text-decoration: none; white-space: nowrap;
  color: var(--copy); border: 1px solid var(--rule); transition: background .2s, border-color .2s, color .2s; }
.xr .dark .xr-btn { border-color: rgba(255, 255, 255, .28); }
.xr-btn:hover, .xr .dark .xr-btn:hover { border-color: var(--copy); }
.xr-btn.filled, .xr .dark .xr-btn.filled { background: var(--lime); border-color: var(--lime); color: var(--navy); }
.xr-btn.filled:hover, .xr .dark .xr-btn.filled:hover { background: var(--lime-hi); border-color: var(--lime-hi); }
.xr-btn svg, .go-link svg { width: 16px; height: 16px; transition: transform .2s; }
.xr-btn:hover svg, a:hover .go-link svg { transform: translateX(3px); }
.xr-link { display: inline-flex; gap: 8px; color: var(--copy); font-weight: 700; font-size: 15px; text-decoration: none; margin-top: 28px; }
.xr-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Intro: white background, text on the left, framed image on the right ── */
.xr-stage { padding: clamp(48px, 6vw, 88px) 0 0 !important; }
.xr-stage-grid { display: grid; grid-template-columns: 6fr 7fr; gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.xr-stage h1 { font-size: clamp(40px, 4.9vw, 70px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; color: var(--ink); text-wrap: balance; }
.xr-center-head h1 { font-size: clamp(36px, 4.2vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; color: var(--ink); }
.xr-bottom { margin-top: 18px; max-width: 34em; font-size: 17.5px; line-height: 1.65; color: var(--ink-2); }
.xr-stage-visual { min-width: 0; }
.xr-frames { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.xr-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1s ease, transform 7s linear; }
.xr-frames img.on { opacity: 1; transform: none; }
.xr-cameras { display: flex; gap: 22px; margin-top: 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.xr-cameras::-webkit-scrollbar { display: none; }
.xr-cameras button { position: relative; flex: none; padding: 10px 0 12px; border: 0; background: none; font: 600 14px/1.3 var(--font); color: var(--ink-3); cursor: var(--cursor-hand); transition: color .2s; }
.xr-cameras button:hover, .xr-cameras button.on { color: var(--ink); }
.xr-cameras .fill { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.xr-cameras button.on .fill { animation: xr-fill 6.5s linear forwards; }
@keyframes xr-fill { to { transform: scaleX(1); } }
.xr-stage-inner > *, .xr-stage-visual { animation: xr-enter .7s cubic-bezier(.2, .7, .2, 1) both; }
.xr-stage-inner > :nth-child(2) { animation-delay: .06s; }
.xr-stage-inner > :nth-child(3) { animation-delay: .12s; }
.xr-stage-inner > :nth-child(4) { animation-delay: .18s; }
.xr-stage-visual { animation-delay: .12s; }
@keyframes xr-enter { from { opacity: 0; transform: translateY(14px); } }

/* Simulations page intro */
.xr-center-entry { padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 9vw, 120px) !important; }
.xr-center-head { display: grid; grid-template-columns: 7fr 5fr; gap: 24px clamp(32px, 5vw, 72px); align-items: end; margin-bottom: 48px; }
.xr-center-head .xr-entry { margin: 0; font-size: 16.5px; }
.xr-gray { background: var(--surface); }

/* ── Figures: boxless strip, large numerals, thin vertical dividers ── */
.xr-figures { padding: clamp(56px, 7vw, 96px) 0 0 !important; }
.xr-figures .xr-inner { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  max-width: calc(var(--wrap) - 2 * var(--gut)); padding: 0; width: calc(100% - 2 * var(--gut)); }
.xr-figure { padding: 30px 28px 32px; border-left: 1px solid var(--line); }
.xr-figure:first-child { border-left: 0; padding-left: 0; }
.xr-figure b { display: flex; align-items: baseline; font-size: clamp(44px, 5vw, 72px); font-weight: 800; letter-spacing: -.045em; line-height: .95; color: var(--ink); font-variant-numeric: tabular-nums; }
.xr-figure small { font-size: .42em; letter-spacing: -.01em; margin-left: 4px; }
.xr-figure p { margin-top: 14px; color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 18em; }

/* ── City strip (CityStrip.jsx): real city on the left, wireframe twin on the right, a vehicle moving along the middle road on scroll ── */
.xr-band { --aw: clamp(170px, 18vw, 260px); --x: 0px; --k: 1; --mx: 0; --spin: 0deg; position: relative; height: clamp(150px, 15vw, 210px); margin-top: clamp(40px, 5vw, 72px); overflow: hidden; }
.xr-band-cluster { position: absolute; bottom: 14px; width: min(36vw, 520px); height: auto; aspect-ratio: 480 / 180; overflow: visible; transition: transform .8s cubic-bezier(.2, .7, .2, 1);
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent); mask-image: linear-gradient(90deg, #000 50%, transparent); }
.xr-band-cluster.real { left: 0; transform: translateX(calc(var(--mx) * -12px)); }
.xr-band-cluster.twin { right: 0; transform: scaleX(-1) translateX(calc(var(--mx) * 12px)); }
.xr-band-cluster .fuselage, .xr-band-cluster .wing { stroke: var(--ink); stroke-width: 2; }
.xr-band-cluster.real .fuselage { fill: var(--ink); opacity: .08; }
.xr-band-cluster.real .wing { opacity: .1; }
.xr-band-cluster.real .light { fill: #fff; }
.xr-band-cluster.twin .fuselage, .xr-band-cluster.twin .wing { fill: none; stroke-width: 1; opacity: .3; }
.xr-band-cluster .net { fill: none; stroke: var(--ink); stroke-width: .6; opacity: .22; }
.xr-band-cluster .net circle { fill: var(--ink); stroke: none; }
.xr-band-cluster .data { stroke-width: 1; stroke-dasharray: 2 6; }
.xr-band-cluster .wing { transform-origin: 300px 92px; transform-box: view-box; }
.xr-band-path { position: absolute; left: 0; right: 0; bottom: 14px; height: 1px; background: var(--line); }
.xr-band-wire { position: absolute; left: 0; right: 0; bottom: calc(14px + var(--aw) * 66 / 260); height: 1px; background: var(--ink-3); opacity: .45; }
.xr-band-border { position: absolute; left: 50%; top: 30px; bottom: 15px; border-left: 1px dashed var(--ink-3); opacity: .6; }
.xr-band-label { position: absolute; top: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.xr-band-label.left { right: calc(50% + 12px); }
.xr-band-label.right { left: calc(50% + 12px); }
.xr-band-vehicle { position: absolute; left: 0; bottom: calc(14px - var(--aw) * 4 / 260); width: var(--aw); aspect-ratio: 260 / 80; transform: translateX(var(--x)); will-change: transform; }
.xr-band-vehicle-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke-linejoin: round; stroke-linecap: round; }
.xr-band-vehicle-svg .wheel { transform: rotate(var(--spin)); }
.xr-band-vehicle-svg.filled { clip-path: inset(-30px calc((1 - var(--k)) * 100%) -4px -30px); }
.xr-band-vehicle-svg.filled .body { fill: var(--navy); }
.xr-band-vehicle-svg.filled .upper { fill: none; stroke: var(--navy); stroke-width: 2.4; }
.xr-band-vehicle-svg.filled .window { fill: #fff; opacity: .9; }
.xr-band-vehicle-svg.filled .wheel circle { fill: var(--navy); stroke: #fff; stroke-width: 2.5; }
.xr-band-vehicle-svg.filled .wheel path { stroke: #fff; stroke-width: 1.5; }
.xr-band-vehicle-svg.wireframe { clip-path: inset(-30px -30px -4px calc(var(--k) * 100%)); }
.xr-band-vehicle-svg.wireframe .body, .xr-band-vehicle-svg.wireframe .upper, .xr-band-vehicle-svg.wireframe .window { fill: none; stroke: var(--navy); stroke-width: 1.2; }
.xr-band-vehicle-svg.wireframe .window { stroke-dasharray: 3 3; }
.xr-band-vehicle-svg.wireframe .wheel circle { fill: #fff; stroke: var(--navy); stroke-width: 1.2; }
.xr-band-vehicle-svg.wireframe .wheel path { stroke: var(--navy); stroke-width: 1; }
@media (prefers-reduced-motion: no-preference) {
  .xr-band-cluster .wing { animation: xr-spin 16s linear infinite; }
  .xr-band-cluster .data { animation: xr-data 2.4s linear infinite; }
}
@keyframes xr-spin { to { transform: rotate(360deg); } }
@keyframes xr-data { to { stroke-dashoffset: -16; } }
@media (max-width: 700px) {
  .xr-band { --aw: 150px; height: 140px; }
  .xr-band-cluster { width: 50vw; }
}

/* ── 3D vehicle (Vehicle3D.jsx): rotatable model, a real / digital-twin scan plane that sweeps across on scroll ── */
.xr-d3 { padding: clamp(40px, 5vw, 72px) 0 0 !important; }
.xr-d3-stage { position: relative; height: clamp(380px, 44vw, 620px); border-radius: 14px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.xr-d3.none { display: none; }
.xr-d3-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.xr-d3-canvas.ready { opacity: 1; }
.xr-d3-canvas canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.xr-d3-canvas.drag canvas { cursor: grabbing; }
.xr-d3-label { position: absolute; left: 0; top: 0; padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .3s; }
.xr-d3-bottom { position: absolute; left: clamp(18px, 2.4vw, 28px); right: clamp(18px, 2.4vw, 28px); bottom: clamp(16px, 2vw, 24px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; pointer-events: none; }
.xr-d3-bottom b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.xr-d3-bottom .xr-link { margin: 0; pointer-events: auto; }
@media (max-width: 700px) {
  .xr-d3-stage { height: 400px; }
}

/* ── Scroll scene: pinned section, real → virtual curtain ── */
.xr-scroll { position: relative; height: calc(100svh + var(--n, 3) * 70svh); padding: 0 !important; background: #fff; }
.xr-scroll-stage { position: sticky; top: 72px; height: calc(100svh - 72px); display: flex; align-items: center; overflow: hidden; }
.xr-scroll-grid { width: 100%; display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
/* the number of open steps varies per slide: text starts at the card's top edge, card and title stay in place */
.xr-scroll-text { align-self: start; }
.xr-scroll-text h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.xr-scroll-text ol { position: relative; list-style: none; margin: 32px 0 0; padding: 0 0 0 22px; }
.xr-scroll-text ol::before, .xr-scroll-text ol::after { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--line); }
.xr-scroll-text ol::after { background: var(--navy); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
.xr-scroll-text li { padding: 7px 0; color: var(--ink-3); transition: color .35s; }
.xr-scroll-text li.passed { color: var(--ink-2); }
.xr-scroll-text li.on { color: var(--ink); }
.xr-scroll-text li b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.xr-scroll-text li small { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); transition: max-height .45s cubic-bezier(.2, .7, .2, 1), opacity .35s, margin .45s; }
.xr-scroll-text li.on small { max-height: 6.5em; opacity: 1; margin-top: 4px; }
.xr-scroll-card { position: relative; aspect-ratio: 4 / 3; max-height: calc(100svh - 72px - 96px); width: 100%; overflow: hidden; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.xr-slide { position: absolute; inset: 0; clip-path: inset(0 0 0 calc((1 - var(--w, 0)) * 100%)); }
.xr-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: scale(calc(1.08 - var(--w, 0) * .06)); }
/* KİTEM video frames: there is a black bar at the top, cropped by scaling from the bottom */
.xr-slide.crop img { transform-origin: 50% 100%; transform: scale(calc(1.2 - var(--w, 0) * .04)); }
.xr-curtain { position: absolute; top: 0; bottom: 0; left: calc((1 - var(--w, 0)) * 100%); width: 2px; margin-left: -1px; background: #fff;
  opacity: min(1, calc(var(--w, 0) * 30), calc((1 - var(--w, 0)) * 30)); }
.xr-scroll-label { position: absolute; left: 16px; bottom: 16px; padding: 7px 11px; border-radius: 8px; background: rgba(11, 22, 34, .72); color: #fff; font-size: 13px; font-weight: 700; }
@media (max-width: 800px) {
  .xr-scroll { height: calc(100svh + var(--n, 3) * 55svh); }
  .xr-scroll-grid { grid-template-columns: 1fr; gap: 28px; }
  .xr-scroll-card { order: -1; aspect-ratio: 1 / 1; max-height: 50svh; }
  .xr-scroll-stage { align-items: flex-start; padding-top: 24px; }
  .xr-scroll-text .xr-kicker { margin-bottom: 10px; }
  .xr-scroll-text h2 { font-size: 24px; }
  .xr-scroll-text ol { margin-top: 18px; padding: 14px 0 0; }
  .xr-scroll-text ol::before, .xr-scroll-text ol::after { top: 0; bottom: auto; right: 0; width: auto; height: 2px; }
  .xr-scroll-text ol::after { transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
  .xr-scroll-text li:not(.on) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xr-scroll { height: auto; padding: clamp(72px, 9vw, 120px) 0 !important; }
  .xr-scroll-stage { position: relative; top: 0; height: auto; }
  .xr-scroll-text li:not(.on) { display: block; }
}

/* ── Award ───────────────────────────────────────── */
.xr-award { padding: clamp(72px, 9vw, 120px) 0 0 !important; }
.xr-award-box > .xr-award-text { border: 1px solid var(--line); border-radius: 14px; padding: clamp(26px, 4vw, 44px); background: var(--surface); }
.xr-award h2 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.xr-award-text > p:not(.xr-kicker) { color: var(--faded); margin-top: 14px; font-size: 16.5px; line-height: 1.65; max-width: 760px; }
.xr-award dl { display: grid; grid-template-columns: repeat(4, auto); gap: 18px 36px; margin: 26px 0 0; justify-content: start; }
.xr-award dt { font-size: 13px; font-weight: 600; color: var(--dull); }
.xr-award dd { margin: 4px 0 0; font-weight: 700; font-size: 15px; }

/* ── Overview ──────────────────────────────────────── */
.xr-overview { padding: clamp(72px, 9vw, 120px) 0 !important; }
.xr-overview-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.xr-overview-text p { color: var(--faded); font-size: 17px; line-height: 1.7; }
.xr-overview-text p + p { margin-top: 16px; }
.xr-items { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.xr-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(48px, 6vw, 72px); }
.xr-bento .xr-items { margin: 0; grid-template-columns: 1fr 1fr; }
.xr-bento .xr-items li { padding: 30px 28px 32px; }
.xr-bento-visual { position: relative; margin: 0; min-height: 420px; border-radius: 14px; overflow: hidden; background: var(--surface); }
.xr-bento-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xr-bento-visual figcaption { position: absolute; left: 16px; bottom: 16px; padding: 7px 11px; border-radius: 8px; background: rgba(11, 22, 34, .72); color: #fff; font-size: 13px; font-weight: 700; }
.xr-items li { background: #fff; padding: 26px 24px 28px; }
.xr-items h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.xr-items p { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* ── Game (navy band) ─────────────────────────────── */
.xr-game { padding: clamp(72px, 9vw, 120px) 0 !important; background: var(--navy); }
.xr-game-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.xr-game .xr-entry { color: rgba(255, 255, 255, .7); }
.xr-note { margin-top: 20px; padding-left: 14px; border-left: 2px solid var(--lime); color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.6; max-width: 30em; }
.xr-game-box { border-radius: 16px; background: var(--navy-2); border: 1px solid var(--navy-line); padding: 8px; }
.xr-game-stage { position: relative; aspect-ratio: 6 / 5; border-radius: 10px; overflow: hidden; background: #000; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.xr-game-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.xr-game-hud { position: absolute; inset: 12px 12px auto; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: #fff; pointer-events: none; }
.xr-game-hud span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 8px; background: rgba(11, 22, 34, .72); }
.xr-game-hud b { font-weight: 800; font-variant-numeric: tabular-nums; }
.xr-game-hud b.accent { color: var(--lime); }
.xr-game-hud .hud-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.xr-game-result { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; pointer-events: none;
  opacity: 0; transition: opacity .25s; background: rgba(11, 22, 34, .62); }
.xr-game-result small { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.xr-game-result b { font-size: clamp(56px, 8vw, 96px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.xr-game-result b em { font-style: normal; font-size: .34em; margin-left: 8px; color: rgba(255, 255, 255, .7); letter-spacing: 0; }
.xr-game-result b.small { font-size: clamp(32px, 4.4vw, 52px); }
.state-result .xr-game-result, .state-early .xr-game-result, .state-late .xr-game-result, .phase-out .xr-game-result { opacity: 1; }
.xr-game-control { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 16px 10px 8px; }
.xr-brake { position: relative; width: 108px; height: 108px; border-radius: 50%; border: 0; cursor: var(--cursor-hand); font: inherit; color: #fff; padding: 0;
  background: #d32f2f; box-shadow: 0 0 0 5px var(--navy), 0 0 0 6px rgba(255, 255, 255, .16), inset 0 -5px 0 rgba(0, 0, 0, .2);
  transition: transform .08s, background .2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.xr-brake:hover { background: #e53935; }
.xr-brake span { display: block; padding: 0 12px; font-size: 14px; font-weight: 800; line-height: 1.15; }
.xr-brake:active { transform: scale(.95); }
.xr-brake:focus-visible { outline: 3px solid var(--lime); outline-offset: 8px; }
.state-hazard .xr-brake { animation: xr-brake .5s ease-in-out infinite; }
@keyframes xr-brake { 50% { box-shadow: 0 0 0 5px var(--navy), 0 0 0 12px rgba(211, 47, 47, .45), inset 0 -5px 0 rgba(0, 0, 0, .2); } }
.xr-brake.lance-button { background: var(--lime); color: var(--navy); }
.xr-brake.lance-button:hover { background: var(--lime-hi); }
.xr-game-info p { color: rgba(255, 255, 255, .7); font-size: 14.5px; line-height: 1.55; min-height: 3.1em; }
.xr-game-info dl { display: flex; gap: 26px; margin: 12px 0 0; flex-wrap: wrap; }
.xr-game-info dt { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.xr-game-info dd { margin: 3px 0 0; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.xr-attempts { display: flex; align-items: flex-end; gap: 4px; height: 28px; margin-top: 10px; }
.xr-attempts i { width: 10px; height: var(--h); min-height: 3px; border-radius: 2px; background: var(--lime); opacity: .5; }
.xr-attempts i:last-child { opacity: 1; }

/* Reaction: driving, hazard */
.reaction .xr-game-stage > img { transition: transform .4s ease-out, filter .3s; }
.state-driving .xr-game-stage > img, .state-hazard .xr-game-stage > img { animation: xr-advance 2.2s ease-in-out infinite alternate; }
@keyframes xr-advance { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.09) translateY(.6%); } }
.state-driving .xr-game-hud .hud-dot { background: var(--lime); }
.state-hazard .xr-game-hud .hud-dot { background: #ff3b3b; }
.state-hazard .xr-game-stage { box-shadow: inset 0 0 0 4px #ff3b3b, inset 0 0 120px rgba(255, 30, 30, .5); }
.state-ready .xr-game-stage > img { filter: saturate(.6) brightness(.75); }
.xr-hazard { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.state-hazard .xr-hazard { opacity: 1; }
.xr-hazard .hazard-ring { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; border: 3px solid #ff3b3b; background: rgba(255, 59, 59, .18); }
.state-hazard .xr-hazard .hazard-ring { animation: xr-ring .9s ease-out infinite; }
@keyframes xr-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.xr-hazard .icon { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; color: #fff; filter: drop-shadow(0 0 10px #ff3b3b); }
.state-hazard .xr-hazard .icon { animation: xr-appear .18s ease-out; }
@keyframes xr-appear { from { transform: scale(.2); } }
.xr-hazard .hazard-name { position: absolute; left: 50%; top: 54px; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 6px; background: #d32f2f; color: #fff;
  font-size: 13px; font-weight: 700; }

/* Lance: flames, jet, ash, steam */
.lance .xr-game-stage { cursor: crosshair; }
.xr-flame { position: absolute; width: 0; height: 0; --hp: 1; pointer-events: none; }
.xr-flame .light { position: absolute; left: calc(-90px * var(--size)); top: calc(-90px * var(--size)); width: calc(180px * var(--size)); height: calc(180px * var(--size)); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 40, .55), transparent 65%); opacity: var(--hp); mix-blend-mode: screen; animation: xr-shake .18s infinite alternate; }
.xr-flame .tongue { position: absolute; left: calc(-17px * var(--size)); bottom: calc(-14px * var(--size)); width: calc(34px * var(--size)); height: calc(62px * var(--size)); border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 85%, #fff4e0 0 18%, #ff9a2e 40%, #ff4a1c 70%, rgba(255, 60, 20, 0) 74%);
  transform-origin: 50% 100%; transform: scale(calc(var(--hp) * .9 + .1)); opacity: min(1, calc(var(--hp) * 3)); mix-blend-mode: screen; filter: blur(.6px);
  animation: xr-tongue .55s ease-in-out infinite alternate; transition: opacity .3s; }
.xr-flame .d2 { left: calc(-34px * var(--size)); height: calc(46px * var(--size)); animation-duration: .43s; animation-delay: -.2s; }
.xr-flame .d3 { left: calc(2px * var(--size)); height: calc(52px * var(--size)); animation-duration: .5s; animation-delay: -.35s; }
@keyframes xr-tongue { from { transform: scale(calc(var(--hp) * .9 + .1)) skewX(-5deg); } to { transform: scale(calc(var(--hp) * .95 + .1), calc(var(--hp) * 1.1 + .1)) skewX(6deg); } }
@keyframes xr-shake { to { opacity: calc(var(--hp) * .75); } }
.xr-flame .ash { position: absolute; left: calc(-60px * var(--size)); top: calc(-52px * var(--size)); width: calc(120px * var(--size)); height: calc(104px * var(--size)); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(22, 24, 27, .96) 30%, rgba(22, 24, 27, 0) 70%); opacity: calc(1 - var(--hp)); }
.xr-flame .steam { position: absolute; left: calc(-40px * var(--size)); top: calc(-80px * var(--size)); width: calc(80px * var(--size)); height: calc(80px * var(--size)); border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 240, 245, .7), transparent 65%); opacity: 0; filter: blur(6px); }
.pressing .xr-flame:not(.extinguished) .steam { animation: xr-steam 1s ease-out infinite; }
.xr-flame.extinguished .steam { animation: xr-steam 1.6s ease-out 2; }
@keyframes xr-steam { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-50px) scale(1.5); } }
.xr-jet { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .12s; }
.xr-jet path { fill: none; stroke: rgba(210, 240, 255, .85); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 14 9; animation: xr-jet .2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(160, 220, 255, .9)); vector-effect: non-scaling-stroke; }
@keyframes xr-jet { to { stroke-dashoffset: -23; } }
.pressing .xr-jet { opacity: 1; }
.xr-spray { position: absolute; left: var(--nx); top: var(--ny); width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(220, 245, 255, .9), rgba(180, 225, 255, .25) 45%, transparent 70%); }
.pressing .xr-spray { opacity: 1; animation: xr-spray .2s infinite alternate; }
@keyframes xr-spray { to { transform: scale(1.25); } }
.phase-out .xr-game-stage > img { filter: saturate(.5) brightness(.8); transition: filter 1s; }


/* ── Hardware and data flow ─────────────────────── */
.xr-hardware { padding: clamp(72px, 9vw, 120px) 0 !important; background: var(--surface); }
.xr-flow { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 24px clamp(18px, 3vw, 32px) 30px; background: #fff; overflow: hidden; }
.xr-flow-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); margin-bottom: 28px; }
.xr-flow ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.xr-flow ol::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 9px; height: 1px; background: var(--line); }
.xr-flow ol::after { content: ""; position: absolute; top: 9.5px; left: calc(50% / var(--n)); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--lime);
  animation: xr-packet 6s linear infinite; }
@keyframes xr-packet { 0% { left: calc(50% / var(--n)); opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { left: calc(100% - 50% / var(--n)); opacity: 0; } }
.xr-flow li { position: relative; text-align: center; padding: 0 8px; }
.xr-flow .node { position: relative; z-index: 1; display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink-3); margin: 0 auto 16px; }
.xr-flow b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.xr-flow small { display: block; margin-top: 5px; color: var(--ink-3); font-size: 13.5px; line-height: 1.45; }
.xr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; margin-top: 16px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.xr-card { background: #fff; padding: 26px 24px 28px; }
.xr-card .card-top { margin-bottom: 16px; }
.xr-card .card-top em { display: inline-block; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--surface); padding: 5px 9px; border-radius: 6px; }
.xr-card.physical .card-top em { background: var(--navy); color: #fff; }
.xr-card.virtual .card-top em { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.xr-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.xr-card p { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* ── Scenarios ───────────────────────────────────── */
.xr-scenarios { padding: clamp(72px, 9vw, 120px) 0 !important; }
.xr-level { display: grid; grid-template-columns: minmax(260px, .8fr) 1.4fr; gap: 16px; }
.xr-level-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; align-self: start; }
.xr-level-list button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 16px 20px; border: 0; border-top: 1px solid var(--line); background: #fff;
  color: var(--ink-2); font: inherit; text-align: left; cursor: var(--cursor-hand); transition: background .2s, color .2s; }
.xr-level-list button:first-child { border-top: 0; }
.xr-level-list button:hover { background: var(--surface); color: var(--ink); }
.xr-level-list button.on { background: var(--surface); color: var(--ink); box-shadow: inset 3px 0 0 var(--navy); }
.xr-level-list b { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.xr-level-screen { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.xr-level-screen article { position: relative; min-height: 380px; height: 100%; padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; justify-content: flex-end; animation: xr-enter .4s ease; }
.xr-level-screen article[hidden] { display: none; }
.xr-level-screen h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; max-width: 16em; }
.xr-level-screen article > p:not(.xr-kicker) { margin-top: 14px; color: var(--ink-2); font-size: 16.5px; line-height: 1.65; max-width: 36em; }
.xr-labels { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.xr-labels li { padding: 5px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.xr-level-nav { position: absolute; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); display: flex; gap: 8px; }
.xr-level-nav button { width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 17px; cursor: var(--cursor-hand); transition: border-color .2s; }
.xr-level-nav button:hover { border-color: var(--ink); }

/* ── Physical / virtual ───────────────────────────── */
.xr-equipment { padding: clamp(72px, 9vw, 120px) 0 !important; background: var(--surface); }
.xr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.xr-split.three-col { grid-template-columns: 1fr 1fr 1fr; }
.xr-half { padding: clamp(24px, 3vw, 36px); border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.xr-half ul { list-style: none; margin: 0; padding: 0; }
.xr-half li { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; padding: 12px 0; border-bottom: 1px solid var(--line); }
.xr-half li:last-child { border-bottom: 0; }
.xr-half .footnote { margin-top: 16px; color: var(--ink-2); font-size: 15px; }
.xr-half.physical { background: var(--navy); border-color: var(--navy); color: #fff; }
.xr-half.physical .xr-kicker { color: rgba(255, 255, 255, .6); }
.xr-half.physical li { border-bottom-color: var(--navy-line); }

/* ── Web panel (navy band) ────────────────────────── */
.xr-panel { padding: clamp(72px, 9vw, 120px) 0 !important; background: var(--navy); }
.xr-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.xr-panel .xr-head { margin-bottom: 0; }
.xr-panel .xr-entry { color: rgba(255, 255, 255, .7); }
.xr-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--navy-line); border: 1px solid var(--navy-line); border-radius: 12px; overflow: hidden; }
.xr-roles li { padding: 16px 20px; background: var(--navy); }
.xr-roles b { display: block; font-size: 15.5px; }
.xr-roles small { display: block; margin-top: 3px; color: rgba(255, 255, 255, .62); font-size: 14px; line-height: 1.5; }
.xr-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.xr-ticks li { position: relative; padding-left: 26px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.xr-ticks li::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 5px; border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(-45deg); }

/* ── Simulator cards ──────────────────────────────── */
.xr-other { padding: clamp(72px, 9vw, 120px) 0 !important; }
.xr-sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.xr-sim-grid.three-col { grid-template-columns: repeat(3, 1fr); }
.xr-sim-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.xr-sim-card:hover { border-color: var(--ink-3); }
.xr-sim-card .image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.xr-sim-card .image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.xr-sim-card:hover .image img { transform: scale(1.03); }
.xr-sim-card .card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 24px 24px 26px; }
.xr-sim-card .xr-kicker { margin-bottom: 10px; }
.xr-sim-card h2, .xr-sim-card h3 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.xr-sim-card .card-body > p:not(.xr-kicker) { margin-top: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.xr-badge { display: inline-block; margin-top: 14px; padding: 5px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--surface); }
.go-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; font-size: 15px; font-weight: 700; color: var(--ink); }

/* ── Call to action: the home page's navy box ─────── */
.xr-cta { padding: 0 0 clamp(72px, 9vw, 120px) !important; }
.xr-gray + .xr-cta { padding-top: clamp(72px, 9vw, 120px) !important; }
.xr-cta-box { border-radius: 20px; padding: clamp(40px, 6vw, 72px); background: var(--navy); display: grid; grid-template-columns: 7fr 5fr; gap: 12px 40px; align-items: center; }
.xr-cta-box > .xr-kicker, .xr-cta-box > h2, .xr-cta-box > .xr-entry { grid-column: 1; }
.xr-cta-box .xr-kicker { color: rgba(255, 255, 255, .6); margin: 0; }
.xr-cta h2 { font-size: clamp(30px, 4vw, 50px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.xr-cta .xr-entry { color: rgba(255, 255, 255, .7); margin: 2px 0 0; }
.xr-cta .xr-buttons { grid-column: 2; grid-row: 1 / span 3; justify-content: flex-end; margin: 0; }

.xr-center .xr-overview .xr-head { margin-bottom: 0; }

/* ── Elements that appear on scroll ───────────────── */
.js .xr-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .xr-reveal.reveal { opacity: 1; transform: none; }

/* ── Narrow screens ───────────────────────────────── */
@media (max-width: 1100px) {
  .xr-items { grid-template-columns: 1fr 1fr; }
  .xr-figures .xr-inner { grid-template-columns: 1fr 1fr; }
  .xr-figure:nth-child(odd) { border-left: 0; padding-left: 0; }
  .xr-figure:nth-child(n+3) { border-top: 1px solid var(--line); }
  .xr-game-grid, .xr-panel-grid, .xr-overview-top { grid-template-columns: 1fr; }
  .xr-game-box { max-width: 720px; }
  .xr-flow ol { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .xr-flow ol::before, .xr-flow ol::after { display: none; }
  .xr-split.three-col { grid-template-columns: 1fr 1fr; }
  .xr-split.three-col .measured { grid-column: 1 / -1; }
  .xr-award dl { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 1000px) {
  .xr-stage-grid, .xr-center-head { grid-template-columns: 1fr; }
  .xr-bento { grid-template-columns: 1fr; }
  .xr-bento-visual { min-height: 0; aspect-ratio: 16 / 10; }
  .xr-sim-grid.three-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .xr-cta-box { grid-template-columns: 1fr; }
  .xr-cta .xr-buttons { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 20px; }
}
@media (max-width: 800px) {
  .xr-buttons .xr-btn { flex: 1 1 100%; justify-content: center; }
  .xr-level { grid-template-columns: 1fr; }
  .xr-level-list { display: none; }
  .xr-level-screen { border: 0; background: none; display: grid; gap: 12px; }
  .xr-level-screen article, .xr-level-screen article[hidden] { display: flex; min-height: 0; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); padding: 26px 22px; animation: none; }
  .xr-level-nav { display: none; }
  .xr-split, .xr-split.three-col { grid-template-columns: 1fr; }
  .xr-flow ol { grid-template-columns: 1fr 1fr; }
  .xr-game-control { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .xr-game-info dl { justify-content: center; }
  .xr-attempts { justify-content: center; }
}
@media (max-width: 640px) {
  .xr-sim-grid, .xr-sim-grid.three-col { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .xr-items, .xr-bento .xr-items { grid-template-columns: 1fr; }
  .xr-figure { padding: 22px 0 24px 18px; }
  .xr-figure:nth-child(odd) { padding-left: 0; padding-right: 14px; }
  .xr-figure p { font-size: 13.5px; }
  .xr-flow ol { grid-template-columns: 1fr; row-gap: 18px; }
  .xr-flow li { display: grid; grid-template-columns: 18px 1fr; column-gap: 14px; text-align: left; padding: 0; }
  .xr-flow .node { grid-row: span 2; margin: 2px 0 0; }
  .xr-award dl { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .xr *, .xr *::before, .xr *::after { animation: none !important; transition: none !important; }
  .xr-frames img.on { transform: none; }
  .js .xr-reveal { opacity: 1; transform: none; }
}

/* ---------- Training sequence: scroll-driven 3D training run (TrainingScene.jsx, scenes/*.js) ---------- */
.xr-scene { position: relative; height: calc(100svh + var(--n, 7) * 80svh); padding: 0 !important; background: #eef2f6; }
.xr-scene-fixed { position: sticky; top: 72px; height: calc(100svh - 72px); overflow: hidden; --edge-c: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); }
.xr-scene-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.xr-scene-canvas.ready { opacity: 1; }
.xr-scene-canvas canvas { display: block; width: 100%; height: 100%; }
.xr-scene-marks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.xr-scene-curtain { position: absolute; inset: 0; background: #eef2f6; opacity: 0; pointer-events: none; }
/* soft background-coloured veil behind the title at the top left, so the scene doesn't overpower the title */
.xr-scene-fixed::before { content: ""; position: absolute; left: 0; top: 0; width: min(760px, 62vw); height: 300px; background: radial-gradient(ellipse at 0 0, rgba(238, 242, 246, .96) 0, rgba(238, 242, 246, .82) 38%, rgba(238, 242, 246, 0) 72%); pointer-events: none; z-index: 0; }
.xr-scene-left, .xr-scene-hud, .xr-scene-report, .xr-scene-bar { z-index: 1; }
.xr-scene-mark.info { background: var(--navy); color: #fff; }
.xr-scene-mark { position: absolute; left: 0; top: 0; translate: -50% calc(-100% - 6px); opacity: 0; white-space: nowrap; font-size: 13px; font-weight: 700; line-height: 1; padding: 7px 10px; border-radius: 6px; background: #fff; color: var(--ink); box-shadow: 0 4px 14px rgba(15, 26, 38, .14); will-change: transform, opacity; }
.xr-scene-mark.crisis { background: #c4332c; color: #fff; }
.xr-scene-mark.stop { color: var(--lime-ink); }
.xr-scene-mark.small { font-size: 12px; padding: 5px 8px; }

.xr-scene-left { position: absolute; left: var(--edge-c); top: 36px; bottom: 76px; width: min(390px, 34vw); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; pointer-events: none; }
.xr-scene-head .xr-kicker { margin-bottom: 10px; }
.xr-scene-head h2 { font-size: clamp(24px, 2.3vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.xr-scene-head { transition: opacity .5s ease, transform .5s ease; }
.xr-scene.advanced .xr-scene-head { opacity: 0; transform: translateY(-8px); }
.xr-scene-steps { display: grid; list-style: none; margin: 0; padding: 0; }
.xr-scene-step { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease, visibility .4s; pointer-events: auto;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; box-shadow: 0 12px 32px rgba(15, 26, 38, .08); }
.xr-scene-step.shown { opacity: 1; visibility: visible; transform: none; }
.xr-scene-step h3 { font-size: 19px; font-weight: 750; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }
.xr-scene-step.crisis h3 { color: #b3261e; }
.xr-scene-step p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.xr-scene-step ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.xr-scene-step ul li { font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: var(--surface); color: var(--ink-2); }
.xr-scene-step.crisis ul li { background: #fdecea; color: #b3261e; }

.xr-scene-hud, .xr-scene-report { position: absolute; right: var(--edge-c); top: 36px; margin: 0; background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 26, 38, .08); transition: opacity .4s ease, transform .4s ease, visibility .4s; }
.xr-scene-hud { width: 252px; padding: 6px 18px; }
.xr-scene-hud > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.xr-scene-hud > div:first-child { border-top: 0; }
.xr-scene-hud dt { font-size: 13px; color: var(--ink-3); }
.xr-scene-hud dd { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .25s; }
.xr-scene-hud .crisis dd { color: #b3261e; }
.xr-scene-hud .accent dd { color: var(--lime-ink); }
.xr-scene-report { width: 320px; padding: 22px 24px 24px; opacity: 0; visibility: hidden; transform: translateY(10px); }
.xr-scene-report .xr-kicker { margin-bottom: 14px; }
.xr-scene-report ul { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.xr-scene-report li { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; }
.xr-scene-report span { font-size: 13.5px; color: var(--ink-2); }
.xr-scene-report b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.xr-scene-report small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.xr-scene-report i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.xr-scene-report i::after { content: ""; display: block; height: 100%; width: var(--o); background: var(--lime); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2, .7, .2, 1) .2s; }
.xr-scene.report .xr-scene-report { opacity: 1; visibility: visible; transform: none; }
.xr-scene.report .xr-scene-report i::after { transform: none; }
.xr-scene.report .xr-scene-hud { opacity: 0; visibility: hidden; transform: translateY(-10px); }

.xr-scene-bar { position: absolute; left: var(--edge-c); right: var(--edge-c); bottom: 30px; height: 20px; display: flex; }
.xr-scene-bar::before, .xr-scene-bar > i { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 1px; background: rgba(15, 26, 38, .12); }
.xr-scene-bar > i { background: var(--lime); transform: scaleX(0); transform-origin: left; }
.xr-scene-bar button { flex: 1; position: relative; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.xr-scene-bar button::after { content: ""; position: absolute; left: 0; top: 4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; border: 2px solid rgba(15, 26, 38, .22); transition: border-color .3s; }
.xr-scene-bar button.passed::after { border-color: var(--lime); }
.xr-scene-bar button.crisis.passed::after { border-color: #c4332c; }
.xr-scene-bar button:focus-visible { outline: 2px solid var(--lime-ink); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 760px) {
  .xr-scene { height: calc(100svh + var(--n, 7) * 70svh); }
  .xr-scene-fixed { --edge-c: 16px; }
  .xr-scene-left { left: 16px; right: 16px; width: auto; top: auto; bottom: 52px; }
  .xr-scene-head { display: none; }
  .xr-scene-fixed::before { display: none; }
  .xr-scene-step { padding: 16px 18px; border-radius: 12px; }
  .xr-scene-step h3 { font-size: 16.5px; }
  .xr-scene-step p { font-size: 14px; line-height: 1.55; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .xr-scene-step ul { display: none; }
  .xr-scene-hud { left: 16px; right: 16px; top: 12px; width: auto; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px 12px; border-radius: 12px; }
  .xr-scene-hud > div { display: block; padding: 7px 0; border-top: 0; min-width: 0; }
  .xr-scene-hud > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .xr-scene-hud dt { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .xr-scene-hud dd { font-size: 14px; margin-top: 2px; }
  .xr-scene-report { left: 16px; right: 16px; top: 12px; width: auto; padding: 16px 18px; border-radius: 12px; }
  .xr-scene-report ul { gap: 10px; }
  .xr-scene-report b { font-size: 16px; }
  .xr-scene-bar { bottom: 20px; }
}

/* No WebGL: scenarios as a plain list */
.xr-scene.none { height: auto; padding: clamp(72px, 9vw, 120px) 0 !important; background: #fff; }
.xr-scene.none .xr-scene-fixed { position: static; height: auto; overflow: visible; }
.xr-scene.none .xr-scene-canvas, .xr-scene.none .xr-scene-hud, .xr-scene.none .xr-scene-report, .xr-scene.none .xr-scene-bar, .xr-scene.none .xr-scene-marks { display: none; }
.xr-scene.none .xr-scene-left { position: static; width: auto; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.xr-scene.none .xr-scene-steps { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.xr-scene.none .xr-scene-step { grid-area: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; }