/* The VEXA Experience overlay. Camera = .xp-world moving horizontally inside .xp-cam; scenes are 100vw wide each.
   Every colour below comes from the --xp-* tokens, which follow the site theme (html[data-theme]) set by mode.js before
   first paint, so the overlay opens in the right theme and changes with it. The site's own --text tokens are reused. */
:root {
  --xp-bg-1: #0f1411; --xp-bg-2: #060807;
  --xp-panel: #0f1311; --xp-panel-hi: rgba(255,255,255,.05); --xp-edge: rgba(255,255,255,.07); --xp-line: #252b27;
  --xp-shadow: 0 20px 50px rgba(0,0,0,.5); --xp-grid: rgba(255,255,255,.045); --xp-skel: #222924;
  --xp-draw: #e9efeb; --xp-path: rgba(233,239,235,.35); --xp-track: #1b221e; --xp-heat-up: 54,201,149; --xp-heat-dn: 239,68,68;
  --xp-donut-2: #a5aea8; --xp-donut-3: #6a736d; --xp-donut-4: #3a413c; --xp-find-edge: #8e9892;
  --xp-nav-bg: rgba(10,12,11,.78); --xp-on-bg: #36c995; --xp-on-fg: #04130d; --xp-ctl-bg: rgba(255,255,255,.06); --xp-ctl-edge: rgba(255,255,255,.22);
  --xp-prog-track: #141815;
  /* canvas colours, read by experience.js */
  --xp-rain-head: #e9efeb; --xp-rain-tail: #a9b4ad; --xp-rain-g: #36c995; --xp-rain-g2: #2f8f6c; --xp-rain-alpha: 1;
}
:root[data-theme="light"] {
  --xp-bg-1: #ffffff; --xp-bg-2: #eef2ef;
  --xp-panel: #ffffff; --xp-panel-hi: rgba(255,255,255,0); --xp-edge: rgba(255,255,255,0); --xp-line: #dbe1dd;
  --xp-shadow: 0 14px 34px rgba(16,24,20,.08); --xp-grid: rgba(16,24,20,.05); --xp-skel: #e6ebe8;
  --xp-draw: #121814; --xp-path: rgba(11,122,87,.35); --xp-track: #e3e9e5; --xp-heat-up: 13,139,99; --xp-heat-dn: 192,39,45;
  --xp-donut-2: #5f6a64; --xp-donut-3: #9aa49e; --xp-donut-4: #cfd6d2; --xp-find-edge: #0b7a57;
  --xp-nav-bg: rgba(255,255,255,.86); --xp-on-bg: #0b7a57; --xp-on-fg: #ffffff; --xp-ctl-bg: #ffffff; --xp-ctl-edge: #cfd6d2;
  --xp-prog-track: #e3e9e5;
  --xp-rain-head: #3f4a44; --xp-rain-tail: #8e9892; --xp-rain-g: #0b7a57; --xp-rain-g2: #4fa585; --xp-rain-alpha: .55;
}

.xp { position: fixed; inset: 0; z-index: 200; overflow: hidden; color: var(--text); font-family: var(--sans); }
.xp[hidden] { display: none; }
html.xp-pending .xp { display: block; }                 /* in the theme's colours from the first paint: the dashboard never flashes first */
html.xp-pending body, body.xp-open { overflow: hidden; }
.xp-bg { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, var(--xp-bg-1), var(--xp-bg-2) 72%); transition: background .3s; }
.xp-rain { position: absolute; inset: 0; width: 100%; height: 100%; }

/* opening: the VEXA wordmark, letters rising into place over a thin green rule */
.xp-intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; pointer-events: none; }
.xp-mark { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.2vw, 24px); will-change: transform, opacity; }
.xp-letters { display: flex; font-weight: 600; font-size: clamp(52px, 11vw, 132px); line-height: 1; letter-spacing: .22em; padding-left: .22em; color: var(--text); }
.xp-letters span { display: block; overflow: hidden; padding-bottom: .04em; }
.xp-letters i { display: block; font-style: normal; transform: translateY(105%); }
.xp-rule { display: block; width: clamp(64px, 12vw, 140px); height: 2px; border-radius: 2px; background: var(--accent-hi); transform: scaleX(0); }

/* camera and world */
.xp-cam { position: absolute; inset: 0; opacity: 0; perspective: 1400px; }
.xp-grid { position: absolute; inset: -20% -10%; width: 700vw; background-image: linear-gradient(var(--xp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--xp-grid) 1px, transparent 1px);
  background-size: 72px 72px; mask-image: radial-gradient(ellipse 120% 70% at 50% 50%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 120% 70% at 50% 50%, #000 30%, transparent 80%); will-change: transform; }
.xp-world { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; transform-origin: 0 50%; }
.xp-line { position: absolute; left: 0; right: 0; bottom: 9%; height: 26%; width: 100%; overflow: visible; pointer-events: none; }
.xp-line path { fill: none; stroke: var(--xp-path); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.xp-scene { position: relative; flex: none; width: 100vw; height: 100%; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 4vw;
  padding: 96px 7vw 110px; }
.xp-copy .xp-k { font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-hi); }
.xp-copy h2 { font-size: clamp(32px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; margin: 16px 0; color: var(--text); }
.xp-copy p { font-size: clamp(16px, 1.45vw, 20px); color: var(--text-2); line-height: 1.5; max-width: 30ch; }
.xp-vis { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.xp-src { position: absolute; right: 7vw; bottom: 70px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
  border: 1px solid var(--xp-line); border-radius: 999px; padding: 4px 11px; background: var(--xp-panel); }

/* shared scene parts: same materials as the app's cards */
.xp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.xp-tile, .xp-panel, .xp-search, .xp-col, .xp-ring { border: 1px solid var(--xp-line); border-radius: 14px;
  background: linear-gradient(180deg, var(--xp-panel-hi), transparent), var(--xp-panel); box-shadow: inset 0 1px 0 var(--xp-edge), var(--xp-shadow); }
.xp-tile { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xp-tile .n, .xp-panel .n { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.xp-tile b { font-size: clamp(17px, 2vw, 28px); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-tile.sm b { font-size: clamp(14px, 1.25vw, 17px); font-weight: 500; }
.xp-tile .c { font-size: 13px; font-weight: 600; } .xp-tile .c.up { color: var(--up); } .xp-tile .c.dn { color: var(--dn); }
.xp-panel { padding: 16px 18px; }
.xp-chart svg { width: 100%; height: clamp(120px, 20vh, 200px); display: block; margin-top: 8px; overflow: visible; }
.xp-draw { fill: none; stroke: var(--xp-draw); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.xp-draw.neg { stroke: var(--dn-line); }
.xp-area { fill: rgba(var(--xp-heat-dn), .09); }
.xp-search { padding: 14px 18px; font-size: 18px; letter-spacing: .08em; color: var(--text); min-height: 52px; display: flex; align-items: center; }
.xp-search::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--text-3); border-radius: 50%; margin-right: 12px; flex: none; }
.xp-caret::after { content: ''; display: inline-block; width: 2px; height: 20px; background: var(--text); margin-left: 3px; vertical-align: -3px; animation: xpBlink 1s steps(1) infinite; }
@keyframes xpBlink { 50% { opacity: 0; } }
.xp-heat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.xp-heat div { border: 1px solid var(--xp-line); border-radius: 10px; padding: 10px 12px; min-height: 66px; display: flex; flex-direction: column; justify-content: space-between; background-color: var(--xp-panel); }
.xp-heat span { font-size: 12px; color: var(--text-2); }
.xp-heat b { font-size: 16px; font-weight: 600; }
.xp-scores { flex-direction: row; align-items: center; gap: 22px; }
.xp-ring { width: clamp(130px, 16vw, 190px); aspect-ratio: 1; border-radius: 50%; flex: none; position: relative; display: grid; place-items: center; }
.xp-ring svg { position: absolute; inset: 10px; transform: rotate(-90deg); }
.xp-ring circle { fill: none; stroke-width: 6; }
.xp-ring .bg { stroke: var(--xp-track); }
.xp-ring .fg { stroke: var(--accent-hi); stroke-linecap: round; stroke-dasharray: 0 100; }
.xp-ring-n { text-align: center; position: relative; }
.xp-ring-n b { display: block; font-size: clamp(32px, 3.8vw, 48px); font-weight: 600; letter-spacing: -0.03em; }
.xp-ring-n span { font-size: 12px; color: var(--text-3); }
.xp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; min-width: 0; }
.xp-col { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.xp-col h4 { font-size: 13.5px; font-weight: 600; }
.xp-col.pos h4::before { content: '+ '; color: var(--up); } .xp-col.neg h4::before { content: '− '; color: var(--dn); } .xp-col.risk h4::before { content: '! '; color: #c9a14a; }
.xp-col i { display: block; height: 8px; border-radius: 4px; background: var(--xp-skel); }
.xp-col i:nth-child(odd) { width: 80%; } .xp-col i:nth-child(even) { width: 62%; }
.xp-port { flex-direction: row; align-items: center; gap: 26px; }
.xp-donut { width: clamp(150px, 18vw, 220px); flex: none; transform: rotate(-90deg); }
.xp-donut .seg { fill: none; stroke-width: 14; stroke-dasharray: 0 100; }
.xp-donut .s1 { stroke: var(--accent-hi); } .xp-donut .s2 { stroke: var(--xp-donut-2); } .xp-donut .s3 { stroke: var(--xp-donut-3); } .xp-donut .s4 { stroke: var(--xp-donut-4); }
.xp-find { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.xp-find li { border: 1px solid var(--xp-line); border-left: 2px solid var(--xp-find-edge); border-radius: 10px; padding: 12px 14px; font-size: 15px; background: var(--xp-panel); }

/* controls: nav strip, progress, theme, skip */
.xp-nav { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: var(--xp-nav-bg); border: 1px solid var(--xp-line); backdrop-filter: blur(10px); opacity: 0; z-index: 3; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
.xp-nav::-webkit-scrollbar { display: none; }
.xp-nav button { background: none; border: 0; color: var(--text-2); font: 500 13px var(--sans); padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: color .3s, background .3s; }
.xp-nav button:hover { color: var(--text); }
.xp-nav button.on { color: var(--xp-on-fg); background: var(--xp-on-bg); }
.xp-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--xp-prog-track); z-index: 3; }
.xp-progress i { display: block; height: 100%; width: 0; background: var(--accent-hi); transition: width .5s cubic-bezier(.45,0,.2,1); }
.xp-ctl { position: absolute; right: clamp(14px, 3vw, 30px); bottom: clamp(16px, 3vw, 28px); z-index: 4; display: flex; gap: 8px; align-items: center; }
.xp-skip { background: var(--xp-ctl-bg); border: 1px solid var(--xp-ctl-edge); color: var(--text); border-radius: 999px; padding: 10px 20px; font: 500 13px var(--sans);
  cursor: pointer; transition: border-color .2s; }
.xp-skip:hover { border-color: var(--accent-hi); }
.xp-ctl .theme-btn { width: 40px; height: 40px; border-radius: 999px; background: var(--xp-ctl-bg); border-color: var(--xp-ctl-edge); }

.app.xp-under { transform-origin: 50% 30%; }

@media (max-width: 860px) {
  .xp-scene { grid-template-columns: 1fr; align-content: center; gap: 22px; padding: 80px 6vw 124px; }
  .xp-copy h2 { font-size: clamp(30px, 8.4vw, 42px); }
  .xp-copy p { max-width: none; }
  .xp-row { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .xp-tile { padding: 10px 12px; }
  .xp-tile.sm b { white-space: normal; font-size: 13.5px; line-height: 1.3; }
  .xp-heat { grid-template-columns: repeat(3, 1fr); }
  .xp-scores, .xp-port { flex-direction: column; align-items: stretch; }
  .xp-ring, .xp-donut { align-self: center; }
  .xp-cols { grid-template-columns: 1fr; }
  .xp-src { left: 6vw; right: auto; bottom: 76px; }
  .xp-nav { top: 12px; }
  .xp-nav button { padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 520px) {
  .xp-heat div:nth-child(n+7) { display: none; }
  .xp-cols .xp-col:nth-child(n+2) { display: none; }
  .xp-find li:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .xp-caret::after { animation: none; } .xp-progress i { transition: none; } }