/* StormChase shop · "Intercept" theme. Loaded after shop.css; everything is scoped under html.x.
   Language borrowed from /hq: black field, glass panels, condensed caps, mono telemetry, cyan glow.
   Grit: film grain, worn edges, a warm "hot" color reserved for actions that move you toward buying. */
html.x {
  --bg: #050608;
  --bg2: #0b0e12;
  --glass: rgba(16, 21, 27, .72);
  --glass-hi: rgba(26, 33, 42, .82);
  --edge: rgba(125, 160, 190, .16);
  --edge-hi: rgba(79, 216, 255, .45);
  --text: #e8eef4;
  --dim: #7d8a97;
  --faint: #7b8794;   /* 5.5:1 on the page, 4.8:1 on the size keys: readable for small labels */
  --cyan: #4fd8ff;
  --cyan-glow: 0 0 18px rgba(79, 216, 255, .35);
  --hot: #ffb547;
  --hot-ink: #160d00;
  --live: #ff3b47;
  --ok: #3dffa2;
  --sans: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", ui-sans-serif, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* map shop.css tokens so shared templates follow the theme */
  --surface: var(--glass); --ink: var(--text); --muted: var(--dim); --line: var(--edge);
  --accent: var(--cyan); --accent-ink: #00141b; --radius: 6px; --err: #ff6b74; --warn: var(--hot);
  /* Colors that used to be written inline, so the light theme can swap them. */
  --sub: var(--sub);              /* secondary body text */
  --hot-text: var(--hot);      /* amber as TEXT (prices); the fill stays --hot */
  --ok-text: var(--ok);        /* green as TEXT */
  --err-text: var(--err-text);
  --hot-hover: var(--hot-hover);
  --cyan-ink: #00141b;         /* text on a cyan fill */
  --well: #0d1116;             /* behind product photos */
  --field: #070a0d;            /* text inputs */
  --key-a: #141a21; --key-b: #0b0f13;
  --signup-a: #10161d; --signup-b: #0a0e12;
  --btn-off: #2a3038;
  --bar-a: rgba(5,6,8,.94); --bar-b: rgba(5,6,8,.72); --bar-solid: rgba(5,6,8,.97);
  --glow-top: #121a24;
  --corner: rgba(125,160,190,.35);
  --swatch-edge: rgba(232,238,244,.35);
  --shade: rgba(0,0,0,.6);
  --hero-shadow: #000;
  --grain: .07;
  --word-glow: 0 0 14px rgba(79,216,255,.45);
  color-scheme: dark;
  background: var(--bg);
}
html.x body { background: radial-gradient(120% 80% at 70% -10%, var(--glow-top) 0%, var(--bg) 55%) fixed, var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; }
html.x a { color: inherit; }
html.x ::selection { background: rgba(79, 216, 255, .3); }
html.x :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
html.x kbd { font-family: var(--mono); font-size: .68rem; line-height: 1; padding: 3px 5px; border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: 3px; color: var(--dim); background: rgba(255,255,255,.03); margin-right: 6px; vertical-align: 1px; }
.x-mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .02em; }
.x-dim { color: var(--dim); }
.x-blink { color: var(--live); animation: x-blink 1.6s steps(2, start) infinite; }
@keyframes x-blink { to { visibility: hidden; } }

/* Grain + frame */
.x-grain { position: fixed; inset: -50%; z-index: 0; pointer-events: none; opacity: var(--grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: x-grain 1.2s steps(6) infinite; }
@keyframes x-grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.x-frame i { position: fixed; width: 18px; height: 18px; z-index: 40; pointer-events: none; border-color: var(--corner); border-style: solid; }
.x-frame i:nth-child(1) { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.x-frame i:nth-child(2) { top: 8px; right: 8px; border-width: 1px 1px 0 0; }
.x-frame i:nth-child(3) { bottom: 8px; left: 8px; border-width: 0 0 1px 1px; }
.x-frame i:nth-child(4) { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

/* Top bar */
.x-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 18px 22px 12px;
  background: linear-gradient(to bottom, var(--bar-a), var(--bar-b)); backdrop-filter: blur(10px); border-bottom: 1px solid var(--edge); }
/* Logo: same mark, size and spot as /hq (StormChase Live), so it stays put moving between them. */
.x-brand { display: flex; align-items: center; gap: 12px; min-height: 41px; text-decoration: none; color: var(--text); flex: none; }
.x-brand a { color: inherit; text-decoration: none; }
.x-brand-home { display: flex; align-items: center; gap: 12px; }
.x-brand > .x-word { margin-left: calc(.45em - 12px); }
.x-mark { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--cyan); stroke-width: 1.2; filter: drop-shadow(0 0 6px rgba(79,216,255,.45)); }
.x-mark circle:nth-child(2) { stroke-opacity: .45; }
.x-mark .x-sweep { stroke-width: 1.6; transform-origin: 16px 16px; animation: x-spin 4s linear infinite; }
.x-mark .x-hub { fill: var(--cyan); stroke: none; }
@keyframes x-spin { to { transform: rotate(360deg); } }
.x-word { font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif; font-size: 21px; letter-spacing: .32em; line-height: 1; display: flex; gap: .45em; white-space: nowrap; }
.x-word b { font-weight: 700; }
.x-word span { color: var(--cyan); font-weight: 500; text-shadow: var(--word-glow); }
.x-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 6px; background: var(--glass); font-family: var(--mono); font-size: .72rem; color: var(--dim); overflow: hidden; }
.x-chip { flex: none; padding: 3px 8px; border: 1px solid var(--edge-hi); color: var(--cyan); border-radius: 3px; letter-spacing: .12em; font-family: var(--cond); font-weight: 600; font-size: .78rem; }
.x-ticker { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .08em; }
.x-clock { flex: none; display: flex; align-items: center; gap: 6px; color: var(--ok-text); }
.x-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px var(--live); display: inline-block; animation: x-pulse 2s ease-in-out infinite; }
@keyframes x-pulse { 50% { opacity: .35; } }
.x-nav { display: flex; align-items: center; gap: 6px; flex: none; }
.x-nav a { text-decoration: none; font-family: var(--cond); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .86rem; color: var(--dim); padding: 7px 10px; border-radius: 5px; border: 1px solid transparent; }
.x-nav a:hover, .x-nav a[aria-current] { color: var(--text); border-color: var(--edge); background: var(--glass); }
.x-kit { color: var(--text) !important; border-color: var(--edge) !important; }
.x-kit-n { font-family: var(--mono); color: var(--hot-text); margin-left: 4px; }
.x-kit.x-bump { animation: x-bump .6s ease; }
@keyframes x-bump { 30% { box-shadow: 0 0 0 4px rgba(255,181,71,.35); border-color: var(--hot) !important; } }
@media (max-width: 860px) { .x-status { display: none; } .x-bar { justify-content: space-between; } }
@media (max-width: 760px) { .x-bar { padding: 10px 10px 8px; flex-wrap: wrap; row-gap: 6px; } .x-brand { min-height: 30px; } .x-word { font-size: 16px; } }
@media (max-width: 520px) { .x-nav kbd { display: none; } .x-nav a { padding: 6px 7px; letter-spacing: .08em; font-size: .8rem; } }

.x-main { min-height: 60vh; position: relative; z-index: 1; } /* above the grain layer */
.x-section { max-width: 1240px; margin: 0 auto; padding: 34px 22px; }
@media (max-width: 520px) { .x-section { padding: 26px 16px; } }

/* Type */
.x-eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); margin: 0 0 10px; }
.x-h1 { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: .92; font-size: clamp(2.6rem, 7vw, 5.4rem); margin: 0 0 14px; }
.x-h1-file { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.x-h2 { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: .95rem; color: var(--dim); margin: 0 0 16px; }
.x-sub { color: var(--sub); font-size: 1.05rem; max-width: 46ch; }
.x-headline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; }
.x-crumbs { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; margin-bottom: 18px; }
.x-crumbs a { color: var(--dim); text-decoration: none; }
.x-crumbs a:hover { color: var(--cyan); }

/* Buttons */
.x-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 5px;
  border: 1px solid var(--edge-hi); background: rgba(79,216,255,.06); color: var(--text); text-decoration: none; cursor: pointer;
  font-family: var(--cond); font-weight: 600; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; overflow: hidden; transition: background .15s, box-shadow .15s, transform .08s; }
.x-btn:hover { background: rgba(79,216,255,.14); box-shadow: var(--cyan-glow); }
.x-btn:active { transform: translateY(1px); }
.x-btn kbd { margin: 0 0 0 6px; }
.x-btn-hot { background: var(--hot); color: var(--hot-ink); border-color: var(--hot); }
.x-btn-hot kbd { color: var(--hot-ink); border-color: rgba(0,0,0,.25); background: rgba(0,0,0,.08); }
.x-btn-hot:hover { background: var(--hot-hover); box-shadow: 0 0 22px rgba(255,181,71,.45); }
.x-btn-hot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); }
.x-btn-hot:hover::after { transform: translateX(120%); transition: transform .7s ease; }
.x-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.x-btn-block { width: 100%; }
.x-link, html.x .link-btn { background: none; border: 0; padding: 0; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: .85rem var(--mono); }
.x-link:hover { color: var(--text); }

/* Notices */
.x-notice { font-family: var(--mono); font-size: .8rem; padding: 10px 14px; border-radius: 5px; border: 1px solid; margin: 0 0 14px; }
.x-notice-ok { color: var(--ok-text); border-color: rgba(61,255,162,.35); background: rgba(61,255,162,.06); }
.x-notice-err { color: var(--err-text); border-color: rgba(255,59,71,.4); background: rgba(255,59,71,.07); }
.x-notice-sm { padding: 4px 8px; display: inline-block; margin: 4px 0 0; }

/* ---- Home: scope ------------------------------------------------------------- */
.x-ops { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - 58px); }
@media (min-width: 980px) { .x-ops { grid-template-columns: minmax(0, 1fr) 380px; } }
.x-scope-wrap { position: relative; min-height: 78vh; overflow: hidden; border-bottom: 1px solid var(--edge); }
@media (min-width: 980px) { .x-scope-wrap { border-bottom: 0; border-right: 1px solid var(--edge); min-height: 0; } }
.x-scope { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.x-hero { position: absolute; top: 28px; left: 28px; z-index: 2; max-width: min(520px, 80%); pointer-events: none; }
.x-hero .x-sub { text-shadow: 0 1px 12px var(--hero-shadow); }
.x-scope-hud { position: absolute; left: 28px; bottom: 54px; z-index: 2; display: flex; gap: 18px; font-family: var(--mono); font-size: .72rem; color: var(--dim); letter-spacing: .08em; pointer-events: none; }
.x-scope-hud b { color: var(--cyan); font-weight: 500; }
.x-hint { position: absolute; left: 28px; bottom: 18px; z-index: 2; margin: 0; font-family: var(--mono); font-size: .7rem; color: var(--faint); pointer-events: none; }
@media (max-width: 640px) {
  /* Phones: headline above a full-width square scope instead of on top of it. */
  .x-ops { min-height: 0; }
  .x-scope-wrap { min-height: 0; display: flex; flex-direction: column; }
  .x-hero { position: static; padding: 20px 16px 0; max-width: none; }
  .x-scope { position: relative; inset: auto; height: min(100vw, 520px); }
  .x-scope-hud { position: static; padding: 0 16px; gap: 12px; }
  .x-hint { position: static; padding: 6px 16px 14px; }
  .x-hint kbd, .x-hint-keys { display: none; }
}

.x-panel { background: var(--glass); border: 1px solid var(--edge); border-radius: 8px; backdrop-filter: blur(8px); }
.x-ops > .x-panel { border-radius: 0; border-width: 0; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.x-panel-h { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--cond); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: .82rem; color: var(--dim); border-bottom: 1px solid var(--edge); padding-bottom: 10px; }
.x-panel-h b { font-family: var(--mono); font-weight: 400; letter-spacing: .06em; color: var(--cyan); font-size: .72rem; }
.x-targets { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 36vh; overflow: auto; }
.x-target { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 5px; text-decoration: none; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.x-target:hover, .x-target.is-locked { background: var(--glass-hi); border-color: var(--edge-hi); }
.x-target.is-locked { box-shadow: inset 3px 0 0 var(--cyan); }
.x-t-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.x-t-name b { font-family: var(--mono); font-weight: 400; font-size: .72rem; color: var(--cyan); margin-right: 8px; }
.x-t-price { font-family: var(--mono); font-size: .8rem; color: var(--dim); }
.x-target.is-logged .x-t-name b::after { content: " ✓"; color: var(--ok-text); }
.x-lock { display: grid; gap: 6px; animation: x-in .35s ease; }
.x-lock[hidden] { display: none; }
@keyframes x-in { from { opacity: 0; transform: translateY(8px); } }
.x-lock-img { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--well); border: 1px solid var(--edge); }
.x-lock-img img { width: 100%; height: 100%; object-fit: cover; }
.x-lock-cs { margin: 6px 0 0; font-family: var(--mono); font-size: .75rem; color: var(--cyan); }
.x-lock-tag { display: inline-block; padding: 2px 6px; background: var(--cyan); color: var(--cyan-ink); border-radius: 2px; letter-spacing: .14em; margin-right: 4px; animation: x-pulse 1.4s ease-in-out infinite; }
.x-lock-name { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 1.9rem; line-height: 1; margin: 0; }
.x-lock-tagline { color: var(--dim); margin: 0; }
.x-lock-meta { display: flex; gap: 14px; font-family: var(--mono); font-size: .85rem; margin: 0 0 6px; }
.x-lock-meta span:first-child { color: var(--hot-text); }
.x-empty { color: var(--dim); font-family: var(--mono); font-size: .85rem; }

.x-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 22px; }
.x-chips + .x-chips-for { margin-top: -12px; }
.x-chipbtn { display: inline-block; padding: 8px 14px; border: 1px solid var(--edge); border-radius: 4px; text-decoration: none; font-family: var(--cond); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; color: var(--dim); background: var(--glass); }
.x-chipbtn:hover, .x-chipbtn[aria-current] { color: var(--text); border-color: var(--edge-hi); }
.x-readouts { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 8px; padding: 0; margin: 34px auto; max-width: 1196px; }
@media (min-width: 760px) { .x-readouts { grid-template-columns: repeat(3, 1fr); } }
.x-readout { background: var(--bg2); padding: 22px; display: grid; gap: 6px; }
.x-ro-k { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: var(--cyan); text-transform: uppercase; }
.x-ro-v { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 1.35rem; }
.x-ro-d { color: var(--dim); font-size: .92rem; }

/* ---- Product: target file ------------------------------------------------------ */
.x-file { max-width: 1240px; margin: 0 auto; padding: 26px 22px 10px; }
@media (max-width: 520px) { .x-file { padding: 20px 16px 6px; } }
.x-file-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 920px) { .x-file-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; } .x-viewer { position: sticky; top: 86px; } }
.x-hudframe { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #1a222c, #07090c 70%); border: 1px solid var(--edge); }
.x-hudframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s, filter .4s, transform .18s ease-out; }
.x-hudframe.is-scanning img { filter: saturate(.2) brightness(1.3) contrast(1.2); opacity: .7; }
/* Vignette only. No scan lines or grain over product photos: they read as texture in the fabric. */
.x-hudframe::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.45)); }
.x-hudframe::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; z-index: 3; pointer-events: none; top: -20%;
  background: linear-gradient(to bottom, transparent, rgba(79,216,255,.18), transparent); }
.x-hudframe.is-scanning::after { animation: x-scan .7s ease-out; }
@keyframes x-scan { to { top: 105%; } }
.x-hudframe > span { position: absolute; z-index: 4; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--cyan); text-shadow: 0 0 6px rgba(0,0,0,.9); padding: 10px 12px; }
.x-hud-tl { top: 0; left: 0; } .x-hud-tr { top: 0; right: 0; } .x-hud-bl { bottom: 0; left: 0; } .x-hud-br { bottom: 0; right: 0; }
.x-hud-bl b { color: var(--ok-text); font-weight: 500; }
.x-reticle { position: absolute; z-index: 4; inset: 14%; pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 22px 1px no-repeat, linear-gradient(var(--cyan), var(--cyan)) top left / 1px 22px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top right / 22px 1px no-repeat, linear-gradient(var(--cyan), var(--cyan)) top right / 1px 22px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom left / 22px 1px no-repeat, linear-gradient(var(--cyan), var(--cyan)) bottom left / 1px 22px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 22px 1px no-repeat, linear-gradient(var(--cyan), var(--cyan)) bottom right / 1px 22px no-repeat;
  opacity: .55; transition: inset .5s cubic-bezier(.2,.9,.3,1.2), opacity .3s; }
.x-hudframe.is-scanning .x-reticle { inset: 26%; opacity: 1; }
.x-frames { list-style: none; padding: 0; margin: 10px 0 0; display: flex; gap: 8px; overflow-x: auto; }
html.x .thumb { position: relative; width: 74px; padding: 0; border-radius: 5px; border: 1px solid var(--edge); background: var(--well); cursor: pointer; overflow: hidden; }
html.x .thumb[aria-current] { border-color: var(--cyan); box-shadow: var(--cyan-glow); }
html.x .thumb span { position: absolute; left: 4px; bottom: 3px; font: .6rem var(--mono); color: var(--cyan); }

.x-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 6px; overflow: hidden; margin: 18px 0 22px; }
.x-specs > div { background: var(--bg2); padding: 12px 14px; }
.x-specs dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.x-specs dd { margin: 0; font-family: var(--cond); font-weight: 600; font-size: 1.15rem; letter-spacing: .04em; }
.x-specs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.x-specs dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 3px; }
.x-specs dd a:hover { text-decoration-color: currentColor; }
.x-specs .price { color: var(--hot-text); font-size: 1.5rem; }
.x-specs .price small { display: block; font: .66rem var(--mono); color: var(--dim); letter-spacing: .08em; }

.x-opt { margin: 0 0 20px; }
.x-opt legend { display: flex; gap: 10px; align-items: baseline; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.x-opt legend strong { color: var(--text); font-weight: 500; }
.x-fit-note { margin: -8px 0 20px; font-size: .9rem; color: var(--dim); }
.x-band input, .x-key input { position: absolute; opacity: 0; pointer-events: none; }
.x-band svg { display: block; width: 100%; height: 52px; border-radius: 5px; box-shadow: 0 0 0 1px var(--edge); cursor: pointer; transition: transform .12s; }
.x-band:hover svg { transform: translateY(-2px); }
.x-band input:checked + svg { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--cyan), var(--cyan-glow); }
.x-band input:focus-visible + svg { outline: 2px solid var(--cyan); outline-offset: 4px; }
.x-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.x-key span { position: relative; display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 5px; border: 1px solid var(--edge); border-bottom-width: 3px; background: linear-gradient(to bottom, var(--key-a), var(--key-b));
  font-family: var(--cond); font-weight: 700; font-size: 1.1rem; letter-spacing: .06em; cursor: pointer; transition: transform .06s, border-color .12s, box-shadow .12s; }
.x-key span small { position: absolute; top: 4px; left: 6px; font: .58rem var(--mono); color: var(--faint); }
.x-key span:hover { border-color: var(--edge-hi); }
.x-key input:checked + span { border-color: var(--cyan); color: var(--cyan); box-shadow: inset 0 0 14px rgba(79,216,255,.18), var(--cyan-glow); transform: translateY(2px); border-bottom-width: 1px; }
.x-key input:disabled + span { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.x-key input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.x-key.x-press span { transform: translateY(2px); }

.x-deploy { display: flex; gap: 10px; align-items: stretch; margin-top: 4px; }
.x-qty { display: flex; align-items: stretch; border: 1px solid var(--edge); border-radius: 5px; overflow: hidden; background: var(--bg2); }
.x-qty input, .x-qty-val { width: 46px; text-align: center; border: 0; background: transparent; color: var(--text); font: 1rem var(--mono); -moz-appearance: textfield; display: flex; align-items: center; justify-content: center; }
.x-qty input::-webkit-inner-spin-button, .x-qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.x-qty-btn { width: 38px; border: 0; background: transparent; color: var(--dim); font-size: 1.2rem; cursor: pointer; }
.x-qty-btn:hover { color: var(--cyan); background: rgba(79,216,255,.06); }
.x-btn-deploy { flex: 1; min-height: 54px; font-size: 1.1rem; }
.x-btn-deploy.is-firing { animation: x-fire .5s ease; }
@keyframes x-fire { 40% { box-shadow: 0 0 0 6px rgba(255,181,71,.35), 0 0 40px rgba(255,181,71,.5); } }
.x-instrument { margin: 24px 0; border: 1px solid var(--edge); border-radius: 6px; background: var(--bg2); padding: 0 14px; }
.x-instrument summary { cursor: pointer; display: flex; justify-content: space-between; padding: 14px 0; font-family: var(--cond); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: .9rem; }
.x-instrument summary b { font: .68rem var(--mono); color: var(--dim); letter-spacing: .06em; text-transform: none; }
.x-instrument[open] summary { border-bottom: 1px solid var(--edge); margin-bottom: 10px; }
.x-table { font-family: var(--mono); font-size: .78rem; }
.x-table th, .x-table td { border-bottom: 1px solid var(--edge); padding: 7px 8px; }
.x-table thead th { color: var(--cyan); font-weight: 500; }
.x-table tbody th { color: var(--dim); font-weight: 400; }
.x-notes { margin-top: 26px; color: var(--sub); }
.x-notes p { max-width: 60ch; }
.x-swatch-inline svg { vertical-align: -1px; }

/* Cards */
.x-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .x-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1080px) { .x-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.x-card a { display: grid; gap: 4px; text-decoration: none; }
.x-card-img { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--well); border: 1px solid var(--edge); transition: border-color .15s, box-shadow .15s; }
.x-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.x-card a:hover .x-card-img { border-color: var(--edge-hi); box-shadow: var(--cyan-glow); }
.x-card a:hover .x-card-img img { transform: scale(1.04); }
.x-card-ret { position: absolute; inset: 10px; opacity: 0; transition: opacity .2s, inset .3s; background:
  linear-gradient(var(--cyan),var(--cyan)) top left/14px 1px no-repeat, linear-gradient(var(--cyan),var(--cyan)) top left/1px 14px no-repeat,
  linear-gradient(var(--cyan),var(--cyan)) bottom right/14px 1px no-repeat, linear-gradient(var(--cyan),var(--cyan)) bottom right/1px 14px no-repeat; }
.x-card a:hover .x-card-ret { opacity: 1; inset: 16px; }
.x-card-cs { font: .7rem var(--mono); color: var(--cyan); margin-top: 6px; }
.x-card-name { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 1.1rem; line-height: 1.1; }
.x-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font: .8rem var(--mono); color: var(--dim); }
.x-card-meta b { color: var(--hot-text); font-weight: 500; }
.x-pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 30px; }

/* ---- Cart: field kit ----------------------------------------------------------- */
.x-kit-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
@media (min-width: 920px) { .x-kit-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .x-launch { position: sticky; top: 86px; } }
.x-loadout { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.x-slot { display: grid; grid-template-columns: auto 80px 1fr; gap: 12px 14px; align-items: center; padding: 12px; background: var(--glass); border: 1px solid var(--edge); border-radius: 6px; }
.x-slot.is-out { border-color: rgba(255,59,71,.4); }
.x-slot-n { font: .72rem var(--mono); color: var(--faint); writing-mode: vertical-rl; transform: rotate(180deg); }
.x-slot-img { aspect-ratio: 1; border-radius: 5px; overflow: hidden; background: var(--well); }
.x-slot-img img { width: 100%; height: 100%; object-fit: cover; }
.x-slot-info { display: grid; gap: 3px; min-width: 0; }
.x-slot-info b { font-family: var(--cond); text-transform: uppercase; letter-spacing: .04em; font-size: 1.1rem; }
.x-slot-act { grid-column: 2 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.x-slot-act form { margin: 0; }
.x-slot-act > b { margin-left: auto; color: var(--hot-text); font-size: .95rem; }
@media (min-width: 640px) { .x-slot { grid-template-columns: auto 96px 1fr auto; } .x-slot-act { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 8px; } .x-slot-act > b { margin: 0; } }
.x-qty-sm .x-qty-btn { width: 32px; height: 34px; }
.x-qty-sm .x-qty-val { width: 34px; font-size: .9rem; }
.x-launch { padding: 18px; display: grid; gap: 12px; }
.x-checks { list-style: none; margin: 0; padding: 0; font: .78rem var(--mono); display: grid; gap: 6px; }
.x-checks li { display: flex; justify-content: space-between; padding-left: 16px; position: relative; color: var(--dim); }
.x-checks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.x-checks li.ok::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.x-checks li.bad::before { background: var(--live); box-shadow: 0 0 6px var(--live); }
.x-checks li.pending::before { background: var(--hot); }
.x-checks b { color: var(--text); font-weight: 500; }
.x-row { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 0; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; }
.x-row b { font: 500 1.4rem var(--mono); color: var(--hot-text); letter-spacing: 0; }
.x-emptykit { padding: 60px 0; display: grid; gap: 10px; justify-items: start; }

/* ---- Footer -------------------------------------------------------------------- */
.x-foot { position: relative; z-index: 1; border-top: 1px solid var(--edge); margin-top: 30px; padding: 18px 22px 26px; font: .74rem var(--mono); color: var(--dim); }
.x-foot-row { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; }
.x-foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.x-foot a { color: var(--dim); text-decoration: none; }
.x-foot a:hover { color: var(--cyan); }
.x-foot-tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.x-toggle { background: none; border: 0; color: var(--dim); font: inherit; cursor: pointer; padding: 0; }
.x-toggle b { color: var(--faint); font-weight: 500; }
.x-toggle[aria-pressed="true"] b { color: var(--ok-text); }
.x-log b { color: var(--ok-text); font-weight: 500; }

/* ---- Shared templates (checkout, order status, policies) in the intercept skin ---- */
html.x .wrap { max-width: 1240px; }
html.x .section { padding: 34px 22px; }
html.x h1 { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: .95; font-size: clamp(2.2rem, 5vw, 3.6rem); }
html.x h2, html.x .h3 { font-family: var(--cond); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 1rem; color: var(--dim); }
html.x .lede, html.x .prose p, html.x .prose li { color: var(--sub); }
html.x .prose h2 { color: var(--cyan); }
html.x .muted { color: var(--dim); }
html.x .eyebrow, html.x .eyebrow-dark { font-family: var(--mono); color: var(--cyan); letter-spacing: .18em; }
html.x .btn { border-radius: 5px; font-family: var(--cond); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; min-height: 48px; }
html.x .btn-primary { background: var(--hot); color: var(--hot-ink); }
html.x .btn-primary:hover { background: var(--hot-hover); box-shadow: 0 0 22px rgba(255,181,71,.4); }
html.x .btn-primary:disabled { background: var(--btn-off); color: var(--dim); box-shadow: none; }
html.x .btn-small, html.x .btn-light { background: rgba(79,216,255,.06); color: var(--text); border: 1px solid var(--edge-hi); }
html.x .panel, html.x .order-summary, html.x .cart-summary { background: var(--glass); border-color: var(--edge); backdrop-filter: blur(8px); }
html.x .notice { font-family: var(--mono); font-size: .82rem; }
html.x .notice-ok { color: var(--ok-text); background: rgba(61,255,162,.06); border-color: rgba(61,255,162,.35); }
html.x .notice-err { color: var(--err-text); background: rgba(255,59,71,.07); border-color: rgba(255,59,71,.4); }
html.x .notice-warn { color: var(--hot-text); background: rgba(255,181,71,.07); border-color: rgba(255,181,71,.35); }
html.x .stack label { font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
html.x .stack input, html.x .stack select { background: var(--bg2); border: 1px solid var(--edge); color: var(--text); font: 1rem var(--sans); text-transform: none; letter-spacing: 0; }
html.x .stack input:focus, html.x .stack select:focus { border-color: var(--cyan); box-shadow: var(--cyan-glow); outline: none; }
html.x .field-err { text-transform: none; letter-spacing: 0; }
html.x .steps { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
html.x .steps [aria-current] { color: var(--cyan); }
html.x .rate { background: var(--glass); border-color: var(--edge); }
html.x .rate:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), var(--cyan-glow); }
html.x .rate strong, html.x .row-total span:last-child { color: var(--hot-text); font-family: var(--mono); }
html.x .row { font-family: var(--mono); font-size: .88rem; }
html.x .summary-thumb, html.x .cart-thumb { background: var(--well); }
html.x .qty-badge { background: var(--cyan); color: var(--cyan-ink); }
html.x .mock-banner { background: rgba(255,181,71,.08); border-color: var(--hot); color: var(--hot-text); font-family: var(--mono); font-weight: 500; }
html.x .site-footer, html.x .site-header { display: none; }

/* Motion safety: everything still works, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .x-grain, .x-blink, .x-dot, .x-lock-tag, .x-mark .x-sweep { animation: none !important; }
  .x-btn-hot::after, .x-hudframe::after { display: none; }
  html.x *, html.x *::before, html.x *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Dark swatches (black, navy) need an outline to show on the dark field. */
.x-band rect, .x-swatch-inline rect { stroke: var(--swatch-edge); stroke-width: 1.5; }

/* Brands strip on the scope page */
.x-brands { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.x-brandcard { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--edge); border-radius: 8px; background: var(--glass); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.x-brandcard:hover { border-color: var(--edge-hi); box-shadow: var(--cyan-glow); }
.x-brandcard b { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1.4rem; }
.x-brandcard span { color: var(--dim); font-size: .9rem; }
.x-brandcard .x-brandcode { font: .72rem var(--mono); color: var(--cyan); letter-spacing: .14em; }
.x-eyebrow a { color: inherit; }

/* Listing filters, Intercept look (layout in the shared rules above) */
.x-h1-list { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 16px; }
.x .fbar-seg, .x .fbar-menu summary { border-radius: 4px; background: var(--glass); border-color: var(--edge); }
.x .fbar-seg a, .x .fbar-menu summary { font-family: var(--cond); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; padding: 7px 13px; }
.x .fbar-seg li + li a { border-left-color: var(--edge); }
.x .fbar-seg a[aria-current] { background: rgba(79, 216, 255, .12); color: var(--text); box-shadow: inset 0 -2px 0 var(--cyan); }
.x .fbar-menu summary { color: var(--text); }
.x .fbar-menu summary:hover, .x .fbar-menu[open] summary { border-color: var(--edge-hi); }
.x .fbar-k { color: var(--dim); }
.x .fbar-menu ul { background: var(--bg2); border-color: var(--edge-hi); border-radius: 6px; box-shadow: 0 14px 40px var(--shade); }
.x .fbar-menu ul a { font-family: var(--cond); letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; color: var(--dim); }
.x .fbar-menu ul a:hover, .x .fbar-menu ul a[aria-current] { color: var(--text); background: var(--glass-hi); }

/* Email sign-up band, above the footer */
.x-signup { position: relative; z-index: 1; padding: 0 22px; margin-top: 40px; }
.x-signup-inner { max-width: 1240px; margin: 0 auto; display: grid; gap: 22px; align-items: center; padding: 30px 28px; border: 1px solid var(--edge-hi); border-left: 3px solid var(--hot); border-radius: 8px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,181,71,.10), transparent 55%), linear-gradient(180deg, var(--signup-a), var(--signup-b)); box-shadow: 0 0 40px rgba(255,181,71,.07); }
@media (min-width: 900px) { .x-signup-inner { grid-template-columns: 1fr minmax(380px, 540px); gap: 44px; } }
.x-signup-k { margin: 0 0 4px; font: .72rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--hot-text); }
html.x .x-signup-h { margin: 0 0 6px; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1; color: var(--text); }
.x-signup-sub { margin: 0; color: var(--sub); }
.x .signup { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.x .signup-email { flex: 1 1 220px; }
.x .signup input[type=email] { width: 100%; min-height: 48px; background: var(--field); color: var(--text); border: 1px solid var(--edge-hi); border-radius: 5px; padding: 0 14px; font: .95rem var(--mono); }
.x .signup input[type=email]:focus { border-color: var(--hot); outline: none; box-shadow: 0 0 0 3px rgba(255,181,71,.18); }
.x .signup-consent { margin: 0; flex-basis: 100%; font: .8rem var(--mono); color: var(--dim); }
@media (max-width: 520px) { .x-signup { padding: 0 16px; } .x-signup-inner { padding: 24px 18px; } .x .signup .x-btn { flex: 1 1 100%; } }

/* Sale and clearance (markup from View::priceHtml). */
.price-was { color: var(--dim); }
.price-was + .price-now { color: var(--hot-text); }
.promo-tag { font: 600 .62rem var(--mono); letter-spacing: .12em; background: transparent; color: var(--hot-text); border: 1px solid var(--hot-text); border-radius: 3px; padding: 2px 5px; }
.x-specs .price .promo-tag { font-size: .66rem; }
.x-free-ship { color: var(--cyan); font-family: var(--mono); }
.free-ship-where { font-size: .78em; color: var(--dim); }

/* iPhone Safari can paint black boxes under a sticky header that blurs its backdrop, especially with the full-screen grain
   or a pinned page background underneath (seen on /apps). Phones and touch screens get solid glass instead of blurred,
   no grain and a normally scrolling background; the look is the same at that size. */
@media (hover: none), (max-width: 760px) {
  .x-grain { display: none; }
  .x-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bar-solid); }
  .x-panel, html.x .panel, html.x .order-summary, html.x .cart-summary { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.x body { background-attachment: scroll; }
}

/* Product photos: no long-press save sheet on iPhone, no drag ghost. */
img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

/* ---- Gear lists: Show more ------------------------------------------------------ */
.x-more { display: grid; justify-items: center; gap: 12px; margin-top: 34px; }
.x-more-count { margin: 0; color: var(--faint); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.x-more-btn { min-width: min(320px, 100%); }
.x-more-n { opacity: .7; font-family: var(--mono); font-size: .85em; }
.x-more-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.x-more.is-done .x-more-count { color: var(--muted, var(--faint)); }
.x-pager[hidden] { display: none; }

/* ---- Products sold elsewhere (affiliate) ----------------------------------------- */
.x-partner { display: grid; gap: 10px; margin: 18px 0 8px; }
.x-partner .x-btn-deploy { width: 100%; }
.x-partner-note { margin: 0; font-size: .74rem; letter-spacing: .02em; }
.x-partner [data-partner-thanks][hidden] { display: none; }
.x-card-seller { color: var(--faint); }

/* ---- Discount code (cart) ------------------------------------------------------- */
.x-code summary { list-style: none; cursor: pointer; display: inline-block; }
.x-code summary::-webkit-details-marker { display: none; }
.x-code-form { display: flex; gap: 8px; margin-top: 10px; }
.x-code-form input { flex: 1; min-width: 0; min-height: 48px; background: var(--field); color: var(--text); border: 1px solid var(--edge-hi); border-radius: 5px; padding: 0 12px; font: .95rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.x-code-form input:focus { border-color: var(--hot); outline: none; box-shadow: 0 0 0 3px rgba(255,181,71,.18); }
.x-row-code b { color: var(--hot-text); }
.x-code-text { margin: 0; }


/* ---- Light theme ----------------------------------------------------------------------------
   <html data-mode="light|dark">: the visitor's sitewide choice (cookie sc_mode); dark by default. Every text color here is at least
   5.2:1 against the light page and panels (WCAG AA asks 4.5:1). Amber, green and cyan are too pale
   to read on white, so as TEXT they switch to deep versions; the amber buttons keep their fill. */
html.x[data-mode="light"] {
  --bg: #eef2f5;
  --bg2: #ffffff;
  --glass: rgba(255, 255, 255, .82);
  --glass-hi: rgba(255, 255, 255, .96);
  --edge: rgba(20, 45, 70, .16);
  --edge-hi: rgba(0, 102, 138, .45);
  --text: #0e1620;      /* 16:1 on the page */
  --sub: #2c3844;       /* 10.6:1 */
  --dim: #45515e;       /* 7.2:1 */
  --faint: #56626f;     /* 5.5:1 */
  --cyan: #00668a;      /* 5.7:1, links, labels, outlines */
  --cyan-glow: 0 0 0 3px rgba(0, 102, 138, .14);
  --cyan-ink: #ffffff;  /* 6.4:1 on the cyan fill */
  --hot-text: #8f4c00;  /* 5.8:1, prices; buttons keep the amber fill with dark ink (10.9:1) */
  --ok-text: #0a6e3f;   /* 5.6:1 */
  --live: #b8132a;      /* 5.9:1 */
  --err: #a8231b; --err-text: #a8231b;
  --accent-ink: #ffffff;
  --hot-hover: #ffc46b;
  --well: #e7ecf0;
  --field: #ffffff;
  --key-a: #ffffff; --key-b: #eef2f5;
  --signup-a: #ffffff; --signup-b: #f2f5f8;
  --btn-off: #d6dce2;
  --bar-a: rgba(244, 247, 250, .95); --bar-b: rgba(244, 247, 250, .82); --bar-solid: rgba(244, 247, 250, .98);
  --glow-top: #ffffff;
  --corner: rgba(20, 45, 70, .3);
  --swatch-edge: rgba(14, 22, 32, .35);
  --shade: rgba(20, 40, 60, .18);
  --hero-shadow: transparent;
  --grain: .035;
  --word-glow: none;
  color-scheme: light;
}
/* Dark in both themes: the on-air broadcast panel and the product photo viewer are "screens" with
   their own dark backdrop, so their text keeps the dark-theme colors. */
html.x .bc, html.x .x-hudframe {
  --bg: #050608; --bg2: #0b0e12; --glass: rgba(16, 21, 27, .72); --glass-hi: rgba(26, 33, 42, .82);
  --edge: rgba(125, 160, 190, .16); --edge-hi: rgba(79, 216, 255, .45);
  --text: #e8eef4; --sub: #b9c4cf; --dim: #7d8a97; --faint: #7b8794;
  --cyan: #4fd8ff; --cyan-glow: 0 0 18px rgba(79, 216, 255, .35); --cyan-ink: #00141b;
  --hot-text: #ffb547; --ok-text: #3dffa2; --live: #ff3b47; --err-text: #ff8f96; --accent-ink: #00141b;
  --well: #0d1116; --field: #070a0d; --shade: rgba(0,0,0,.6); --hero-shadow: #000; --word-glow: 0 0 14px rgba(79,216,255,.45);
  /* shop.css names, re-pointed here: on <html> they were worked out from the light values. */
  --surface: var(--glass); --ink: var(--text); --muted: var(--dim); --line: var(--edge); --accent: var(--cyan);
  color-scheme: dark;
  color: var(--text);   /* links inside inherit this, not the page's */
}
/* Key hints inside the broadcast panel: brighter than --dim on its deep blue (10:1). */
html.x .bc kbd { color: #a9c0d6; border-color: rgba(169, 192, 214, .35); }
html.x .x-btn-hot kbd { color: var(--hot-ink); border-color: rgba(0,0,0,.25); }   /* beats html.x kbd's gray */
/* The amber button's dark ink, also when the button is a link (html.x a would make it inherit). */
html.x a.x-btn-hot { color: var(--hot-ink); }
/* Skip link (keyboard users): readable in both themes when it appears. */
html.x .skip { background: var(--text); color: var(--bg); }
/* Light-theme touch-ups the tokens can't express. */
html.x[data-mode="light"] .x-btn-hot kbd, html.x[data-mode="light"] .x-kit-n { border-color: rgba(0,0,0,.25); }
html.x[data-mode="light"] .x-dot { box-shadow: none; }

/* Viewer corner labels sit on the product photo, which may be light: give them a dark backing (both themes). */
html.x .x-hudframe > span { background: rgba(5, 8, 12, .66); border-radius: 3px; padding: 4px 7px; margin: 8px; text-shadow: none; }

/* Theme switch (footer) */
.x-mode b { color: var(--text); font-weight: 500; }