/* Skin: signal-mine (Direct Link Downloader). See src/lib/skins.ts.
   A premium extraction facility: obsidian and graphite surfaces, one restrained
   metallic gold for seams, labels and the Store CTA, directional light from the
   upper left, and a fine technical grid. The page is always dark (skin dark: true,
   so the site's dark palette applies and is refined here). Static by design: no
   continuous animation. */

:root:has(body[data-skin~='signal-mine']) {
  background: oklch(13.5% 0.006 270);
}
body[data-skin~='signal-mine'][data-skin] {
  --sm-obsidian: oklch(13.5% 0.006 270);
  --sm-graphite: oklch(19.5% 0.008 265);
  --sm-graphite-2: oklch(24% 0.01 265);
  --sm-gold: oklch(81% 0.11 84);
  --sm-gold-deep: oklch(64% 0.1 74);
  --sm-gold-line: oklch(81% 0.11 84 / 0.38);
  --sm-hair: oklch(100% 0 0 / 0.09);
  --paper: var(--sm-obsidian);
  --surface: var(--sm-graphite);
  --ink: oklch(96% 0.008 85);
  --muted: oklch(77% 0.012 80);
  --line: var(--sm-hair);
  --accent: var(--sm-gold);
  --accent-dark: var(--sm-gold);
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(70% 50% at 0% 0%, oklch(32% 0.04 80 / 0.45), transparent 70%),
    radial-gradient(50% 40% at 100% 35%, oklch(24% 0.03 250 / 0.5), transparent 70%),
    var(--sm-obsidian);
}
/* The facility grid, fixed behind everything; it fades out toward the edges. */
body[data-skin~='signal-mine']::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(oklch(100% 0 0 / 0.035) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, oklch(100% 0 0 / 0.035) 1px, transparent 1px) 0 0 / 40px 100%;
  -webkit-mask: radial-gradient(90% 80% at 40% 30%, #000, transparent 85%);
  mask: radial-gradient(90% 80% at 40% 30%, #000, transparent 85%);
}
body[data-skin~='signal-mine'] .site-header {
  border-bottom-color: var(--sm-hair);
}

/* ---- Hero: the entrance --------------------------------------------------------- */
body[data-skin~='signal-mine'] .product-hero {
  position: relative;
  isolation: isolate;
}
/* A gold seam enters from the left edge under the hero copy. */
body[data-skin~='signal-mine'] .product-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: calc(50% - 50vw);
  width: 100vw;
  bottom: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sm-gold-line) 20%, var(--sm-gold-line) 55%, transparent 85%);
}
body[data-skin~='signal-mine'] .product-hero .product-tagline,
body[data-skin~='signal-mine'] .section-label,
body[data-skin~='signal-mine'] .category-label {
  color: var(--sm-gold);
  letter-spacing: 0.06em;
}
body[data-skin~='signal-mine'] .product-hero .hero-shot,
body[data-skin~='signal-mine'] .sm-diagram,
body[data-skin~='signal-mine'] .sm-bench,
body[data-skin~='signal-mine'] .sm-vault {
  background:
    linear-gradient(160deg, oklch(100% 0 0 / 0.05), transparent 40%),
    var(--sm-graphite);
  border: 1px solid var(--sm-hair);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    inset 0 0 0 1px oklch(0% 0 0 / 0.4),
    0 40px 80px -40px oklch(0% 0 0 / 0.9);
}
/* Machined bezel: a thin gold catch-light along the top edge. */
body[data-skin~='signal-mine'] :is(.product-hero .hero-shot, .sm-diagram, .sm-bench, .sm-vault)::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sm-gold), transparent);
  opacity: 0.7;
}
body[data-skin~='signal-mine'] .product-hero .hero-shot {
  position: relative;
}
body[data-skin~='signal-mine'] .product-hero .hero-shot img {
  border-radius: 8px;
}

/* ---- Store CTAs: the brightest thing on the page --------------------------------- */
body[data-skin~='signal-mine'] :is(.store-button, .campaign-button, .sticky-store .button) {
  color: oklch(16% 0.01 270);
  background: linear-gradient(180deg, oklch(86% 0.11 86), var(--sm-gold) 55%, oklch(74% 0.11 78));
  border: 0;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.55),
    inset 0 -1px 0 oklch(0% 0 0 / 0.2),
    0 12px 30px -14px oklch(81% 0.11 84 / 0.6);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
body[data-skin~='signal-mine'] :is(.store-button, .campaign-button):hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.55),
    0 16px 40px -14px oklch(81% 0.11 84 / 0.8);
}
body[data-skin~='signal-mine'] a:not(.button):hover {
  color: var(--sm-gold);
}

/* ---- Story: the four stages, joined by one seam ----------------------------------- */
body[data-skin~='signal-mine'] .sm {
  padding-block: clamp(40px, 7vw, 96px);
}
/* The head is a .container (full width, aligned with the page); only its text is narrow. */
body[data-skin~='signal-mine'] .sm-head {
  margin-bottom: clamp(32px, 5vw, 64px);
}
body[data-skin~='signal-mine'] .sm-head > * {
  max-width: 46rem;
}
body[data-skin~='signal-mine'] .sm-head h2 {
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 10px 0 16px;
}
body[data-skin~='signal-mine'] .sm-lead {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
body[data-skin~='signal-mine'] .sm-stages {
  position: relative;
  list-style: none;
  margin-block: 0;
  padding-left: var(--sm-rail, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(56px, 9vw, 128px);
}
/* The seam: one gold line through every stage, at the left edge, never over text. */
body[data-skin~='signal-mine'] .sm-stages::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 0;
  left: var(--sm-rail-x, 22px);
  width: 1px;
  background: linear-gradient(180deg, var(--sm-gold), var(--sm-gold-line) 30%, var(--sm-gold-line) 80%, transparent);
  box-shadow: 0 0 10px oklch(81% 0.11 84 / 0.3);
}
body[data-skin~='signal-mine'] .sm-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
body[data-skin~='signal-mine'] .sm-step {
  position: absolute;
  top: 2px;
  left: calc(-1 * var(--sm-rail, 64px) + var(--sm-rail-x, 22px) - 15px);
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 700 11px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--sm-gold);
  background: var(--sm-obsidian);
  border: 1px solid var(--sm-gold-line);
  box-shadow: 0 0 0 5px var(--sm-obsidian);
}
body[data-skin~='signal-mine'] .sm-text {
  position: relative;
}
body[data-skin~='signal-mine'] .sm-text h3 {
  font: 600 13px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sm-gold);
  margin: 8px 0 14px;
}
body[data-skin~='signal-mine'] .sm-text p {
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 36rem;
}

/* DISCOVER: text above, a full-width analysis diagram below. */
body[data-skin~='signal-mine'] .sm-diagram {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(80px, 1fr) minmax(0, 1fr);
  align-items: center;
  padding: clamp(18px, 3vw, 36px);
  overflow: hidden;
}
body[data-skin~='signal-mine'] .sm-url {
  border: 1px solid var(--sm-hair);
  background: var(--sm-obsidian);
  border-radius: 8px;
  padding: 12px 14px;
  font: 500 13px/1.3 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--ink);
  overflow-wrap: anywhere;
  position: relative;
  z-index: 1;
}
body[data-skin~='signal-mine'] .sm-branches {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 200px;
}
body[data-skin~='signal-mine'] .sm-branches path,
body[data-skin~='signal-mine'] .sm-converge path {
  fill: none;
  stroke: var(--sm-gold);
  stroke-opacity: 0.55;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
body[data-skin~='signal-mine'] .sm-node {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  margin-left: 18%;
  padding: 6px 10px;
  border-radius: 999px;
  font: 700 10px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(16% 0.01 270);
  background: var(--sm-gold);
  box-shadow: 0 0 22px oklch(81% 0.11 84 / 0.45);
}
body[data-skin~='signal-mine'] .sm-found {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
body[data-skin~='signal-mine'] .sm-found li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--sm-hair);
  background: oklch(100% 0 0 / 0.03);
  font-size: 14px;
  color: var(--muted);
}
body[data-skin~='signal-mine'] .sm-found b {
  min-width: 52px;
  font: 700 12px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  color: var(--sm-gold);
}
body[data-skin~='signal-mine'] .sm-found .sm-live b {
  color: oklch(80% 0.1 210);
}

/* CAPTURE: the text, and a capacity switch (Core / Pro) with a small pipeline. */
body[data-skin~='signal-mine'] .sm-capture {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
body[data-skin~='signal-mine'] .sm-capacity {
  position: relative;
  padding: clamp(18px, 2.6vw, 28px);
  border: 1px solid var(--sm-hair);
  border-radius: 14px;
  background:
    linear-gradient(160deg, oklch(100% 0 0 / 0.05), transparent 40%),
    var(--sm-graphite);
}
body[data-skin~='signal-mine'] .sm-capacity p {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
body[data-skin~='signal-mine'] .sm-capacity strong {
  color: var(--sm-gold);
}
body[data-skin~='signal-mine'] .sm-tier {
  font: 700 11px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-bottom: 12px !important;
}
body[data-skin~='signal-mine'] .sm-fine {
  font-size: 14px !important;
  color: var(--muted) !important;
}

/* REFINE: a wide workbench on the left, the text on the right. */
body[data-skin~='signal-mine'] .sm-refine {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
body[data-skin~='signal-mine'] .sm-refine .sm-text {
  order: 2;
}
body[data-skin~='signal-mine'] .sm-bench {
  position: relative;
  padding: clamp(16px, 2.6vw, 28px);
}
body[data-skin~='signal-mine'] .sm-timeline {
  position: relative;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.1) 0 calc(12.5% - 3px), transparent calc(12.5% - 3px) 12.5%),
    var(--sm-obsidian);
}
body[data-skin~='signal-mine'] .sm-cut {
  position: absolute;
  inset: -4px 30% -4px 22%;
  border: 2px solid var(--sm-gold);
  border-radius: 6px;
  background: oklch(81% 0.11 84 / 0.1);
  box-shadow: 0 0 18px oklch(81% 0.11 84 / 0.3);
}
body[data-skin~='signal-mine'] .sm-tools {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
body[data-skin~='signal-mine'] .sm-tools thead th {
  font: 700 11px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 10px 10px 0;
}
body[data-skin~='signal-mine'] .sm-tools :is(tbody th, td) {
  text-align: left;
  padding: 12px 10px 12px 0;
  border-top: 1px solid var(--sm-hair);
  vertical-align: top;
}
body[data-skin~='signal-mine'] .sm-tools tbody th {
  font-weight: 600;
  color: var(--ink);
}
body[data-skin~='signal-mine'] .sm-tools td {
  color: var(--muted);
}
body[data-skin~='signal-mine'] .sm-plan {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font: 700 11px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  color: var(--ink);
  border: 1px solid var(--sm-hair);
  white-space: nowrap;
}
body[data-skin~='signal-mine'] .sm-plan.is-pro {
  color: oklch(16% 0.01 270);
  background: var(--sm-gold);
  border-color: transparent;
}

/* DELIVER: the result under a gold light, and the Store CTA. */
body[data-skin~='signal-mine'] .sm-deliver {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
body[data-skin~='signal-mine'] .sm-vault {
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  padding: 0 24px 64px;
  background:
    radial-gradient(60% 70% at 50% 0%, oklch(81% 0.11 84 / 0.22), transparent 70%),
    var(--sm-graphite);
}
body[data-skin~='signal-mine'] .sm-file {
  padding: 26px 18px;
  border-radius: 6px;
  font: 700 13px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sm-graphite-2), oklch(18% 0.008 265));
  border: 1px solid var(--sm-gold-line);
  box-shadow: 0 -10px 30px -12px oklch(81% 0.11 84 / 0.35);
}
body[data-skin~='signal-mine'] .sm-plinth {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--sm-gold-line);
  text-align: center;
  font: 700 11px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
body[data-skin~='signal-mine'] .sm-cta {
  margin: 28px 0 12px;
}

/* ---- The rest of the page: levels of the same facility --------------------------- */
body[data-skin~='signal-mine'] :is(.product-glance-row, .product-overview, .product-answers, .product-closing, .product-tools, .product-more) {
  position: relative;
}
body[data-skin~='signal-mine'] :is(.product-overview, .product-answers, .product-tools, .product-more)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 1px;
  background: var(--sm-gold);
}
body[data-skin~='signal-mine'] .glance-list li > span,
body[data-skin~='signal-mine'] .faq-toggle {
  color: var(--sm-gold);
}
body[data-skin~='signal-mine'] .facts-card,
body[data-skin~='signal-mine'] .closing-inner {
  background:
    linear-gradient(160deg, oklch(100% 0 0 / 0.04), transparent 40%),
    var(--sm-graphite);
  border: 1px solid var(--sm-hair);
  color: var(--ink);
}
body[data-skin~='signal-mine'] .closing-inner {
  position: relative;
  border-top: 1px solid var(--sm-gold-line);
  box-shadow: 0 -30px 80px -50px oklch(81% 0.11 84 / 0.5);
}
body[data-skin~='signal-mine'] .closing-inner :is(h2, p) {
  color: var(--ink);
}
body[data-skin~='signal-mine'] .sticky-store {
  background: oklch(17% 0.008 268 / 0.94);
  border-top-color: var(--sm-gold-line);
}

/* ---- Small screens --------------------------------------------------------------- */
@media (max-width: 900px) {
  body[data-skin~='signal-mine'] :is(.sm-capture, .sm-refine, .sm-deliver) {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-skin~='signal-mine'] .sm-refine .sm-text {
    order: 0;
  }
  body[data-skin~='signal-mine'] .sm-diagram {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  body[data-skin~='signal-mine'] .sm-branches {
    display: none;
  }
  body[data-skin~='signal-mine'] .sm-node {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-left: 0;
  }
}
@media (max-width: 640px) {
  body[data-skin~='signal-mine'] .sm-stages {
    --sm-rail: 34px;
    --sm-rail-x: 8px;
  }
  body[data-skin~='signal-mine'] .sm-tools thead {
    display: none;
  }
  body[data-skin~='signal-mine'] .sm-tools tr {
    display: grid;
    grid-template-columns: 1fr auto;
    border-top: 1px solid var(--sm-hair);
    padding: 10px 0;
  }
  body[data-skin~='signal-mine'] .sm-tools :is(tbody th, td) {
    border: 0;
    padding: 2px 0;
  }
  body[data-skin~='signal-mine'] .sm-tools td:nth-of-type(1) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body[data-skin~='signal-mine'] .sm-tools td:nth-of-type(2) {
    grid-row: 1;
    grid-column: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-skin~='signal-mine'] :is(.store-button, .campaign-button) {
    transition: none;
  }
}

/* ---- Atmosphere: gold ore seams and soft light shafts behind everything ------------
   Very low contrast on purpose (no glare). The layer drifts only as you scroll
   (scroll-driven, no running animation); browsers without it show it still. */
body[data-skin~='signal-mine']::after {
  content: '';
  position: fixed;
  inset: -12% 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
  background:
    linear-gradient(112deg, transparent 22%, oklch(85% 0.09 85 / 0.045) 30%, transparent 40%),
    linear-gradient(112deg, transparent 52%, oklch(85% 0.09 85 / 0.035) 58%, transparent 66%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-linecap='round'%3E%3Cpath d='M-50 820C300 700 500 900 820 640S1300 420 1650 520' stroke-width='1.2' stroke-opacity='.32'/%3E%3Cpath d='M-50 260C260 340 520 120 900 220S1400 120 1650 60' stroke-width='1' stroke-opacity='.22'/%3E%3Cpath d='M300 1050C420 820 760 760 980 980' stroke-width='.8' stroke-opacity='.18'/%3E%3Cpath d='M1100 -40C1180 160 1060 300 1260 420S1500 640 1660 600' stroke-width='.8' stroke-opacity='.16'/%3E%3C/g%3E%3C/svg%3E")
      center / 100% 100% no-repeat;
}
@supports (animation-timeline: scroll()) {
  body[data-skin~='signal-mine']::after {
    animation: sm-drift linear both;
    animation-timeline: scroll(root);
  }
  /* A pulse of light travels down the seam as the stages pass. */
  body[data-skin~='signal-mine'] .sm-stages {
    view-timeline: --sm-seam block;
  }
  body[data-skin~='signal-mine'] .sm-stages::after {
    content: '';
    position: absolute;
    left: calc(var(--sm-rail-x, 22px) - 2px);
    width: 5px;
    height: 120px;
    border-radius: 5px;
    background: linear-gradient(transparent, var(--sm-gold), transparent);
    box-shadow: 0 0 16px oklch(81% 0.11 84 / 0.45);
    animation: sm-pulse linear both;
    animation-timeline: --sm-seam;
    animation-range: entry 30% exit 70%;
    pointer-events: none;
  }
}
@keyframes sm-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-9%); }
}
@keyframes sm-pulse {
  from { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  to { top: calc(100% - 120px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-skin~='signal-mine']::after,
  body[data-skin~='signal-mine'] .sm-stages::after {
    animation: none;
  }
  body[data-skin~='signal-mine'] .sm-stages::after {
    display: none;
  }
}
body[data-skin~='signal-mine'] .sm-extras {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 15px;
  color: var(--muted);
}
body[data-skin~='signal-mine'] .sm-extras li {
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-skin~='signal-mine'] .sm-extras li::before {
  content: '';
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--sm-gold);
}

/* ---- Hero: choose your source (CSS-only radio group) ------------------------------ */
body[data-skin~='signal-mine'] .sm-src {
  position: relative;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--sm-hair);
  border-radius: 16px;
  background:
    radial-gradient(80% 60% at 100% 0%, oklch(81% 0.11 84 / 0.1), transparent 70%),
    linear-gradient(160deg, oklch(100% 0 0 / 0.05), transparent 40%),
    var(--sm-graphite);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    0 40px 80px -40px oklch(0% 0 0 / 0.9);
  min-width: 0;
}
body[data-skin~='signal-mine'] .sm-src::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sm-gold), transparent);
  opacity: 0.7;
}
body[data-skin~='signal-mine'] .sm-src-title {
  margin: 0 0 12px;
  font: 700 11px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sm-gold);
}
body[data-skin~='signal-mine'] .sm-src-tabs,
body[data-skin~='signal-mine'] .sm-cap-tabs,
body[data-skin~='signal-mine'] .sm-scene-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
body[data-skin~='signal-mine'] :is(.sm-src-tabs, .sm-cap-tabs, .sm-scene-tabs) label {
  position: relative;
}
body[data-skin~='signal-mine'] :is(.sm-src-tabs, .sm-cap-tabs, .sm-scene-tabs) label span {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid var(--sm-hair);
  border-radius: 999px;
  font: 600 13px/1.2 var(--font, inherit);
  color: var(--ink);
  background: oklch(100% 0 0 / 0.03);
  cursor: pointer;
}
/* The radio itself covers its pill (transparent), so focus shows on it. */
body[data-skin~='signal-mine'] :is(.sm-src-tabs, .sm-cap-tabs, .sm-scene-tabs) input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
body[data-skin~='signal-mine'] :is(.sm-src-tabs, .sm-cap-tabs, .sm-scene-tabs) input:focus-visible {
  outline: 2px solid var(--sm-gold);
  outline-offset: 2px;
}
body[data-skin~='signal-mine'] .sm-src-tabs label:has(input:checked) span,
body[data-skin~='signal-mine'] .sm-capacity:has(#sm-cap-core:checked) label[for='sm-cap-core'] span,
body[data-skin~='signal-mine'] .sm-capacity:has(#sm-cap-pro:checked) label[for='sm-cap-pro'] span {
  color: oklch(16% 0.01 270);
  background: var(--sm-gold);
  border-color: transparent;
}
body[data-skin~='signal-mine'] .sm-src-tabs label:has(input:focus-visible) span,
body[data-skin~='signal-mine'] .sm-capacity:has(#sm-cap-core:focus-visible) label[for='sm-cap-core'],
body[data-skin~='signal-mine'] .sm-capacity:has(#sm-cap-pro:focus-visible) label[for='sm-cap-pro'] {
  outline: 2px solid var(--sm-gold);
  outline-offset: 2px;
}
body[data-skin~='signal-mine'] .sm-src-panel {
  min-height: 250px;
}
body[data-skin~='signal-mine'] .sm-src-panel:not([data-src='hls']),
body[data-skin~='signal-mine'] .sm-src:has(input:not([value='hls']):checked) [data-src='hls'] {
  display: none;
}
  body[data-skin~='signal-mine'] .sm-src:has(input[value='hls']:checked) [data-src='hls'] { display: block; }
  body[data-skin~='signal-mine'] .sm-src:has(input[value='dash']:checked) [data-src='dash'] { display: block; }
  body[data-skin~='signal-mine'] .sm-src:has(input[value='direct']:checked) [data-src='direct'] { display: block; }
  body[data-skin~='signal-mine'] .sm-src:has(input[value='live']:checked) [data-src='live'] { display: block; }
body[data-skin~='signal-mine'] .sm-src-flow {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding-left: 16px;
  margin-left: 4px;
  border-left: 1px solid var(--sm-gold-line);
}
body[data-skin~='signal-mine'] .sm-src-url {
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sm-hair);
  border-radius: 8px;
  background: var(--sm-obsidian);
  font: 500 13px/1.35 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--ink);
  overflow-wrap: anywhere;
}
body[data-skin~='signal-mine'] .sm-src-flow ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
body[data-skin~='signal-mine'] .sm-src-flow li {
  position: relative;
  padding: 7px 11px;
  border: 1px solid var(--sm-gold-line);
  border-radius: 999px;
  font: 600 12px/1.2 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--ink);
}
body[data-skin~='signal-mine'] .sm-src-flow li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -19px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--sm-gold);
}
body[data-skin~='signal-mine'] .sm-src-file {
  padding: 12px 16px;
  border-radius: 6px;
  font: 700 13px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: oklch(16% 0.01 270);
  background: linear-gradient(180deg, oklch(88% 0.1 88), var(--sm-gold) 50%, var(--sm-gold-deep));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.6),
    0 14px 30px -14px oklch(81% 0.11 84 / 0.6);
}
body[data-skin~='signal-mine'] .sm-src-text {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
body[data-skin~='signal-mine'] .sm-src-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* DISCOVER: what each branch is. */
body[data-skin~='signal-mine'] .sm-found li > span {
  display: grid;
  gap: 2px;
  color: var(--ink);
}
body[data-skin~='signal-mine'] .sm-found small {
  font-size: 12px;
  color: var(--muted);
}

/* CAPTURE: Core / Pro capacity panels and the pipeline. */
body[data-skin~='signal-mine'] .sm-cap-pro {
  display: none;
}
body[data-skin~='signal-mine'] .sm-capacity:has(#sm-cap-pro:checked) .sm-cap-pro {
  display: block;
}
body[data-skin~='signal-mine'] .sm-capacity:has(#sm-cap-pro:checked) .sm-cap-core {
  display: none;
}
body[data-skin~='signal-mine'] .sm-pipe {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
  font: 700 12px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--muted);
}
body[data-skin~='signal-mine'] .sm-pipe-q {
  display: flex;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--sm-hair);
  background:
    linear-gradient(90deg, transparent, var(--sm-gold-line), transparent) center / 100% 1px no-repeat,
    var(--sm-obsidian);
}
body[data-skin~='signal-mine'] .sm-pipe-q i {
  flex: 1;
  max-width: 26px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--sm-hair);
  background: var(--sm-graphite-2);
}
body[data-skin~='signal-mine'] .sm-pipe-q i.on {
  border-color: transparent;
  background: linear-gradient(180deg, oklch(88% 0.1 88), var(--sm-gold-deep));
  box-shadow: 0 0 12px oklch(81% 0.11 84 / 0.45);
}
body[data-skin~='signal-mine'] .sm-pipe-out {
  color: var(--sm-gold);
}

/* DELIVER: signals resolving into the files. */
body[data-skin~='signal-mine'] .sm-resolve {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  width: 80%;
  height: 46%;
}
body[data-skin~='signal-mine'] .sm-resolve path {
  fill: none;
  stroke: var(--sm-gold);
  stroke-opacity: 0.4;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

/* ---- Real app theater (renders only with genuine screenshots from the CMS) -------- */
body[data-skin~='signal-mine'] .sm-theater {
  padding-block: clamp(40px, 6vw, 80px) 0;
}
body[data-skin~='signal-mine'] .sm-theater-head h2 {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.03em;
  margin: 10px 0 22px;
}
body[data-skin~='signal-mine'] .sm-theater-stage {
  position: relative;
}
body[data-skin~='signal-mine'] .sm-scene {
  display: none;
  margin: 0;
}
body[data-skin~='signal-mine'] .sm-scene[data-scene='0'] {
  display: block;
}
body[data-skin~='signal-mine'] .sm-theater-stage:has(.sm-scene-radio:not(#sm-scene-0):checked) [data-scene='0'] {
  display: none;
}
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-0:checked) [data-scene='0'] { display: block; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-0:checked) label[for='sm-scene-0'] span { color: oklch(16% 0.01 270); background: var(--sm-gold); border-color: transparent; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-0:focus-visible) label[for='sm-scene-0'] { outline: 2px solid var(--sm-gold); outline-offset: 2px; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-1:checked) [data-scene='1'] { display: block; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-1:checked) label[for='sm-scene-1'] span { color: oklch(16% 0.01 270); background: var(--sm-gold); border-color: transparent; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-1:focus-visible) label[for='sm-scene-1'] { outline: 2px solid var(--sm-gold); outline-offset: 2px; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-2:checked) [data-scene='2'] { display: block; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-2:checked) label[for='sm-scene-2'] span { color: oklch(16% 0.01 270); background: var(--sm-gold); border-color: transparent; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-2:focus-visible) label[for='sm-scene-2'] { outline: 2px solid var(--sm-gold); outline-offset: 2px; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-3:checked) [data-scene='3'] { display: block; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-3:checked) label[for='sm-scene-3'] span { color: oklch(16% 0.01 270); background: var(--sm-gold); border-color: transparent; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-3:focus-visible) label[for='sm-scene-3'] { outline: 2px solid var(--sm-gold); outline-offset: 2px; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-4:checked) [data-scene='4'] { display: block; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-4:checked) label[for='sm-scene-4'] span { color: oklch(16% 0.01 270); background: var(--sm-gold); border-color: transparent; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-4:focus-visible) label[for='sm-scene-4'] { outline: 2px solid var(--sm-gold); outline-offset: 2px; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-5:checked) [data-scene='5'] { display: block; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-5:checked) label[for='sm-scene-5'] span { color: oklch(16% 0.01 270); background: var(--sm-gold); border-color: transparent; }
  body[data-skin~='signal-mine'] .sm-theater-stage:has(#sm-scene-5:focus-visible) label[for='sm-scene-5'] { outline: 2px solid var(--sm-gold); outline-offset: 2px; }
body[data-skin~='signal-mine'] .sm-scene-shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sm-hair);
  border-radius: 14px;
  background: var(--sm-graphite);
  box-shadow: 0 50px 100px -50px oklch(0% 0 0 / 0.9), 0 0 0 1px oklch(0% 0 0 / 0.4);
}
body[data-skin~='signal-mine'] .sm-scene-shot img {
  display: block;
  width: 100%;
  height: auto;
}
body[data-skin~='signal-mine'] .sm-hotspot {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--font, inherit);
  color: oklch(16% 0.01 270);
  background: var(--sm-gold);
  box-shadow: 0 0 0 4px oklch(81% 0.11 84 / 0.3), 0 2px 8px oklch(0% 0 0 / 0.6);
  font-size: 11px;
}
body[data-skin~='signal-mine'] .sm-hotspot:not([style]) {
  display: none;
}
body[data-skin~='signal-mine'] .sm-scene figcaption {
  margin-top: 14px;
  color: var(--ink);
}
body[data-skin~='signal-mine'] .sm-hotspot-notes {
  margin: 10px 0 0;
  padding-left: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 24px;
  font-size: 14px;
  color: var(--muted);
}
body[data-skin~='signal-mine'] .sm-hotspot-notes b {
  color: var(--sm-gold);
}

/* Without :has() every panel shows, so nothing is ever unreachable. */
@supports not selector(:has(*)) {
  body[data-skin~='signal-mine'] :is(.sm-src-panel, .sm-cap-pro, .sm-scene) {
    display: block !important;
  }
  body[data-skin~='signal-mine'] :is(.sm-src-tabs, .sm-cap-tabs, .sm-scene-tabs) {
    display: none;
  }
}
@media (max-width: 640px) {
  body[data-skin~='signal-mine'] .sm-src-panel {
    min-height: 0;
  }
  body[data-skin~='signal-mine'] .sm-pipe-q i {
    max-width: 18px;
  }
}

/* ---- Scroll-linked signal (scroll-driven CSS only; static without support) ---------
   As each stage scrolls in: its marker lights up, the analysis branches draw from the
   link, the capacity slots fill, the trim selection closes in, and the signals
   resolve into the saved files. Nothing runs while the page is still. */
@supports (animation-timeline: view()) {
  body[data-skin~='signal-mine'] .sm-stage {
    view-timeline: --sm-stage block;
  }
  body[data-skin~='signal-mine'] .sm-step {
    animation: sm-mark linear both;
    animation-timeline: --sm-stage;
    animation-range: entry 40% exit 40%;
  }
  body[data-skin~='signal-mine'] :is(.sm-diagram, .sm-capacity, .sm-bench, .sm-vault) {
    animation: sm-rise linear both;
    animation-timeline: --sm-stage;
    animation-range: entry 0% entry 70%;
  }
  body[data-skin~='signal-mine'] :is(.sm-branches, .sm-resolve) path {
    stroke-dasharray: 1;
    animation: sm-draw linear both;
    animation-timeline: --sm-stage;
    animation-range: entry 30% cover 45%;
  }
  body[data-skin~='signal-mine'] .sm-found li {
    animation: sm-found linear both;
    animation-timeline: --sm-stage;
    animation-range: entry 40% cover 45%;
  }
  body[data-skin~='signal-mine'] .sm-found li:nth-child(2) { animation-range: entry 50% cover 48%; }
  body[data-skin~='signal-mine'] .sm-found li:nth-child(3) { animation-range: entry 60% cover 51%; }
  body[data-skin~='signal-mine'] .sm-found li:nth-child(4) { animation-range: entry 70% cover 54%; }
  body[data-skin~='signal-mine'] .sm-pipe-q i.on {
    animation: sm-slot linear both;
    animation-timeline: --sm-stage;
    animation-range: entry 50% cover 45%;
  }
  body[data-skin~='signal-mine'] .sm-cut {
    animation: sm-trim linear both;
    animation-timeline: --sm-stage;
    animation-range: entry 40% cover 50%;
  }
  body[data-skin~='signal-mine'] .sm-file {
    animation: sm-land linear both;
    animation-timeline: --sm-stage;
    animation-range: entry 40% cover 50%;
  }
  body[data-skin~='signal-mine'] .sm-file + .sm-file {
    animation-range: entry 55% cover 55%;
  }
}
@keyframes sm-mark {
  0%, 100% { color: var(--sm-gold); background: var(--sm-obsidian); box-shadow: 0 0 0 5px var(--sm-obsidian); }
  30%, 70% {
    color: oklch(16% 0.01 270);
    background: var(--sm-gold);
    box-shadow: 0 0 0 5px var(--sm-obsidian), 0 0 22px oklch(81% 0.11 84 / 0.6);
  }
}
@keyframes sm-rise {
  from { opacity: 0.2; transform: translateY(48px); }
  to { opacity: 1; transform: none; }
}
@keyframes sm-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes sm-found {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}
@keyframes sm-slot {
  from { background: var(--sm-graphite-2); box-shadow: none; }
}
@keyframes sm-trim {
  from { inset: -4px 2% -4px 2%; }
  to { inset: -4px 30% -4px 22%; }
}
@keyframes sm-land {
  from { opacity: 0; transform: translateY(-46px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-skin~='signal-mine'] :is(.sm-step, .sm-diagram, .sm-capacity, .sm-bench, .sm-vault, .sm-found li, .sm-pipe-q i, .sm-cut, .sm-file),
  body[data-skin~='signal-mine'] :is(.sm-branches, .sm-resolve) path {
    animation: none !important;
  }
}

/* Phones: scene tabs in one swipeable row; smaller hotspot dots. */
@media (max-width: 640px) {
  body[data-skin~='signal-mine'] .sm-scene-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -4px;
    padding: 4px;
  }
  body[data-skin~='signal-mine'] .sm-scene-tabs label {
    flex: none;
  }
  body[data-skin~='signal-mine'] .sm-hotspot {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    font-size: 9px;
    box-shadow: 0 0 0 2px oklch(81% 0.11 84 / 0.3);
  }
}

/* ---- Polish: material response and transitions ----------------------------------- */
/* Machined surfaces catch a little more light under the pointer. */
body[data-skin~='signal-mine'] :is(.sm-src, .sm-diagram, .sm-capacity, .sm-bench, .sm-vault, .sm-scene-shot, .facts-card, .closing-inner) {
  transition:
    border-color 0.3s ease,
    box-shadow 0.4s ease;
}
body[data-skin~='signal-mine'] :is(.sm-src, .sm-diagram, .sm-capacity, .sm-bench, .sm-vault, .sm-scene-shot):hover {
  border-color: var(--sm-gold-line);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.1),
    0 40px 90px -40px oklch(81% 0.11 84 / 0.28),
    0 40px 80px -40px oklch(0% 0 0 / 0.9);
}
/* Pills: a clear hover, and the chosen one carries a soft glow. */
body[data-skin~='signal-mine'] :is(.sm-src-tabs, .sm-cap-tabs, .sm-scene-tabs) label span {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
body[data-skin~='signal-mine'] :is(.sm-src-tabs, .sm-cap-tabs, .sm-scene-tabs) label:hover span {
  border-color: var(--sm-gold-line);
}
body[data-skin~='signal-mine'] .sm-src-tabs label:has(input:checked) span,
body[data-skin~='signal-mine'] .sm-capacity:has(input:checked) label:has(input:checked) span,
body[data-skin~='signal-mine'] .sm-theater-stage label:has(input:checked) span {
  box-shadow: 0 6px 20px -8px oklch(81% 0.11 84 / 0.7);
}
/* Switching a source, a plan or a scene eases the new content in. */
body[data-skin~='signal-mine'] :is(.sm-src-panel, .sm-cap-panel, .sm-scene) {
  animation: sm-swap 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sm-swap {
  from { opacity: 0; transform: translateY(8px); }
}
/* Hotspots announce themselves twice when a scene appears, then rest. */
body[data-skin~='signal-mine'] .sm-hotspot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--sm-gold);
  opacity: 0;
  animation: sm-ping 1.4s ease-out 0.4s 2;
}
@keyframes sm-ping {
  from { opacity: 0.9; transform: scale(0.8); }
  to { opacity: 0; transform: scale(2.2); }
}
/* The hero headline sits under a faint key light; the lead reads a touch brighter. */
body[data-skin~='signal-mine'] .product-hero-copy {
  position: relative;
}
body[data-skin~='signal-mine'] .product-hero-copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -10% 0 10% 0;
  background: radial-gradient(50% 50% at 30% 40%, oklch(81% 0.11 84 / 0.09), transparent 70%);
  pointer-events: none;
}
body[data-skin~='signal-mine'] .product-hero .product-lead {
  color: oklch(84% 0.012 80);
}
/* Refine table rows respond to the pointer like a workbench list. */
body[data-skin~='signal-mine'] .sm-tools tbody tr {
  transition: background-color 0.2s ease;
}
body[data-skin~='signal-mine'] .sm-tools tbody tr:hover {
  background: oklch(81% 0.11 84 / 0.05);
}
@media (prefers-reduced-motion: reduce) {
  body[data-skin~='signal-mine'] :is(.sm-src-panel, .sm-cap-panel, .sm-scene) {
    animation: none;
  }
  body[data-skin~='signal-mine'] .sm-hotspot::after {
    display: none;
  }
}