/* ==========================================================================
   Home page - "Proof-First AI"
   Source of truth: TEMP/Iryna-Aug-S4D-HP-mock02.html (approved mockup).

   Three layers, in the order the mockup applied them:
     1. mockup <style>          2. layout layer          3. visualization layer
   Layers 2 and 3 were injected by JS in the mockup; they are static CSS here.

   Only coexistence changes were made - no mockup rule was restyled:
     - the mockup's own header/footer rules were dropped (site navbar/footer reused)
     - generic selectors (a, .btn, section, h1, h2, *) are scoped to .hp-content
     - --gradient-primary / --shadow-lg namespaced to --hp-* (they collide with main.css)

   Theme: locked by <html data-theme="dark"> in index.html. The mockup's own
   :root[data-theme='light'|'dark'] blocks are intact, so switching to light is a
   one-attribute change; remove the attribute to follow the visitor's OS setting.
   ========================================================================== */

  :root {
    --paper: #FDFAFF;
    --paper-2: #FBF2FF;
    --ink: #1A0A2E;
    --muted: #4C5166;
    --accent: #4B006E;
    --accent-2: #8B5CF6;
    --accent-ink: #FFFFFF;
    --hp-gradient-primary: linear-gradient(135deg, #4B006E 0%, #6D0A96 100%);
    --pass: #22C55E;
    --rule: #E2D4EC;
    --rule-soft: #EFE6F6;
    --card: #FFFFFF;
    --card-tint: linear-gradient(145deg, #FFFFFF 0%, rgba(251, 242, 255, 0.6) 100%);
    --hp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(75, 0, 110, 0.10);
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #0A0412;
      --paper-2: #150A24;
      --ink: #F0E9F7;
      --muted: #A79DB8;
      --accent: #A78BFA;
      --accent-2: #8B5CF6;
      --accent-ink: #14061F;
      --hp-gradient-primary: linear-gradient(135deg, #6D0A96 0%, #8B5CF6 100%);
      --pass: #34D583;
      --rule: #32204B;
      --rule-soft: #241537;
      --card: #1A0A2E;
      --card-tint: linear-gradient(145deg, #1E0D33 0%, #170928 100%);
      --hp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.08);
    }
  }
  :root[data-theme="light"] {
    --paper: #FDFAFF; --paper-2: #FBF2FF; --ink: #1A0A2E; --muted: #4C5166;
    --accent: #4B006E; --accent-2: #8B5CF6; --accent-ink: #FFFFFF;
    --hp-gradient-primary: linear-gradient(135deg, #4B006E 0%, #6D0A96 100%);
    --pass: #22C55E; --rule: #E2D4EC; --rule-soft: #EFE6F6;
    --card: #FFFFFF; --card-tint: linear-gradient(145deg, #FFFFFF 0%, rgba(251, 242, 255, 0.6) 100%);
    --hp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(75, 0, 110, 0.10);
  }
  :root[data-theme="dark"] {
    --paper: #0A0412; --paper-2: #150A24; --ink: #F0E9F7; --muted: #A79DB8;
    --accent: #A78BFA; --accent-2: #8B5CF6; --accent-ink: #14061F;
    --hp-gradient-primary: linear-gradient(135deg, #6D0A96 0%, #8B5CF6 100%);
    --pass: #34D583; --rule: #32204B; --rule-soft: #241537;
    --card: #1A0A2E; --card-tint: linear-gradient(145deg, #1E0D33 0%, #170928 100%);
    --hp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.08);
  }

  .hp-content * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--paper); }
  .hp-content {
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

  .hp-content a { color: var(--accent); text-decoration: none; }
  .hp-content a:hover { text-decoration: underline; }
  .hp-content a:focus-visible, .hp-content button:focus-visible {
    outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px;
  }

  .eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .eyebrow b { color: var(--accent); font-weight: 600; }

  /* ---------- hero ---------- */
  .hero { padding: 72px 0 64px; }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 52px;
    align-items: center;
  }
  .hp-content h1 {
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 18px 0 20px;
    text-wrap: balance;
  }
  .hp-content h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero p.lede { font-size: 19px; color: var(--muted); max-width: 34em; margin: 0 0 30px; }
  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .hp-content .btn {
    display: inline-block;
    font-size: 15px; font-weight: 600;
    padding: 13px 24px;
    border-radius: 0.5rem;
    border: 1px solid transparent;
  }
  .hp-content .btn.primary { background: var(--hp-gradient-primary); color: #fff; box-shadow: 0 4px 12px rgba(75,0,110,0.25); }
  .hp-content .btn.primary:hover { text-decoration: none; filter: brightness(1.12); color: #fff; }
  .hp-content .btn.ghost { color: var(--accent); border-color: var(--accent); }
  .hp-content .btn.ghost:hover { text-decoration: none; background: var(--paper-2); }

  /* ---------- scrolling test feed ---------- */
  .scorecard {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    box-shadow: var(--hp-shadow-lg);
    overflow: hidden;
  }
  .scorecard-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--mono); font-size: 11.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
    background: var(--card-tint);
  }
  .scorecard-head .status { color: var(--pass); white-space: nowrap; }
  .scorecard-head .status::before {
    content: "●"; margin-right: 6px;
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

  .ticker {
    height: 336px;
    overflow: hidden;
    position: relative;
  }
  .ticker::before, .ticker::after {
    content: ""; position: absolute; left: 0; right: 0; height: 34px; z-index: 2;
    pointer-events: none;
  }
  .ticker::before { top: 0; background: linear-gradient(var(--card), transparent); }
  .ticker::after { bottom: 0; background: linear-gradient(transparent, var(--card)); }
  .ticker-track {
    animation: feed 46s linear infinite;
  }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  @keyframes feed { from { transform: translateY(0); } to { transform: translateY(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
    .scorecard-head .status::before { animation: none; }
  }

  .trow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 62px;
    gap: 14px;
    align-items: baseline;
    padding: 10px 18px;
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
  }
  .trow .app {
    font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent-2); display: block; margin-bottom: 2px;
  }
  .trow .metric { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trow .value { font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; }
  /* `padding` + `background-color` are a Bootstrap reset, not a restyle: `.mark` is
     also a Bootstrap utility (padding + --bs-highlight-bg). The mockup had no
     Bootstrap, so this badge must render as plain text. Rest of rule is verbatim. */
  .trow .mark { text-align: right; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--pass); padding: 0; background-color: transparent; }
  .trow .mark::before { content: "✓ "; }
  .scorecard-foot {
    padding: 11px 18px;
    font-family: var(--mono); font-size: 11px;
    color: var(--muted);
    background: var(--paper-2);
    border-top: 1px solid var(--rule-soft);
  }

  /* ---------- sections ---------- */
  .hp-content section { border-top: 1px solid var(--rule); padding: 64px 0; }
  .wp-ref { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; }
  .wp-ref .idx {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    color: var(--accent); letter-spacing: 0.1em;
    border: 1px solid var(--rule); border-radius: 0.375rem;
    padding: 4px 9px; background: var(--card);
  }
  .hp-content h2 {
    font-size: clamp(26px, 3.2vw, 34px);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }
  .section-lede { color: var(--muted); font-size: 18px; max-width: 40em; margin: 0 0 36px; }

  .prose { max-width: 41em; }
  .prose p { margin: 0 0 18px; }
  .prose strong { color: var(--accent); }

  /* depth section */
  .depth-grid {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 36px; align-items: start;
  }
  .depth-prose .prose { max-width: none; columns: 2; column-gap: 48px; }
  .depth-prose .prose p:first-child { margin-top: 0; }
  .depth-chart .chart-head { margin: 0 0 6px; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); }
  .depth-chart .chart-head em { font-style: normal; color: var(--accent-2); }
  .depth-chart .chart-dek { margin: 0 0 6px; font-size: 16px; line-height: 1.45; color: var(--muted); max-width: 62ch; }
  .ln-ohno { stroke: #D92B4B; stroke-width: 2; fill: none; }
  .ring-ohno { fill: none; stroke: #D92B4B; stroke-width: 3; }
  .dot-ohno { fill: #D92B4B; }
  .ohno-title { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; fill: #D92B4B; }
  .ohno-body { font-size: 24px; fill: var(--muted); }
  .gap-title { font-family: var(--mono); font-size: 23px; font-weight: 700; letter-spacing: 0.1em; fill: var(--accent-2); }
  .gap-body { font-size: 24px; fill: var(--muted); }
  .axis-lbl { font-family: var(--mono); font-size: 21px; fill: var(--muted); }
  .depth-chart {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    padding: 22px 22px 14px;
    box-shadow: var(--hp-shadow-lg);
  }
  .depth-chart svg { width: 100%; height: auto; display: block; }
  .depth-chart .cap {
    font-family: var(--mono); font-size: 13px; color: var(--muted);
    text-align: center; padding-top: 10px;
  }
  .ln-proto { stroke: var(--muted); stroke-width: 2.25; fill: none; stroke-dasharray: 5 5; stroke-linecap: round; opacity: 0.8; }
  .ln-athena { stroke: var(--accent-2); stroke-width: 3.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .ln-fill { fill: url(#depthFillGrad); }
  .grid-line { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 6; }
  .ax { stroke: var(--rule); stroke-width: 1; }
  .lbl { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
  .lbl-athena { fill: var(--accent-2); font-weight: 700; font-size: 13px; }
  .lbl-sub { fill: var(--accent-2); font-weight: 500; font-size: 10.5px; }
  .dot-athena { fill: var(--accent-2); }
  .dot-fork { fill: var(--card); stroke: var(--muted); stroke-width: 2; }
  .leader { stroke: var(--muted); stroke-width: 1.4; fill: none; }
  .ohno { font-family: var(--mono); font-size: 11.5px; font-weight: 700; fill: var(--ink); }

  /* offers */
  .offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .offer {
    background: var(--card-tint);
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    padding: 26px 24px 24px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .offer .tag {
    font-family: var(--mono); font-size: 11.5px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2);
  }
  .offer h3 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
  .offer p { margin: 0; color: var(--muted); font-size: 15.5px; flex: 1; }
  .offer .foot {
    font-family: var(--mono); font-size: 12.5px; color: var(--ink);
    border-top: 1px solid var(--rule-soft); padding-top: 12px;
  }
  .offer.challenge { border-color: var(--accent-2); box-shadow: 0 0 20px rgba(139, 92, 246, 0.15); }
  .offer.challenge .foot { color: var(--accent); font-weight: 700; }

  /* evidence */
  .evidence-strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--rule); border-radius: 0.75rem;
    background: var(--card); overflow: hidden;
  }
  .ev { padding: 26px 22px; border-right: 1px solid var(--rule-soft); }
  .ev:last-child { border-right: none; }
  .ev .num {
    font-family: var(--mono); font-size: 28px; font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .ev .lbl2 { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }

  .cases { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
  .case {
    border: 1px solid var(--rule); border-radius: 0.75rem;
    background: var(--card-tint); padding: 22px 24px;
  }
  .case .dom {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px;
  }
  .case p { margin: 0; font-size: 15.5px; color: var(--muted); }
  .case p b { color: var(--accent); }

  /* who */
  .who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .who {
    border-top: 3px solid var(--accent-2);
    background: var(--paper-2);
    border-radius: 0 0 0.75rem 0.75rem;
    padding: 20px 22px;
  }
  .who h3 { font-size: 18px; margin: 0 0 8px; font-weight: 700; }
  .who p { margin: 0; color: var(--muted); font-size: 15px; }

  /* platform */
  .platform { display: flex; gap: 40px; align-items: baseline; flex-wrap: wrap; }
  .platform .prose { flex: 1; min-width: 300px; }
  .platform-list {
    font-family: var(--mono); font-size: 13.5px; color: var(--muted);
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px; min-width: 220px;
  }
  .platform-list li::before { content: "· "; color: var(--accent-2); font-weight: 700; }

  /* final cta */
  .final {
    background: linear-gradient(135deg, #4B006E 0%, #6D0A96 55%, #8B5CF6 130%);
    color: #FFFFFF;
    border-radius: 1rem; padding: 56px 48px;
    box-shadow: var(--hp-shadow-lg);
  }
  .final h2 { color: #fff; margin-bottom: 12px; }
  .final p { color: rgba(255, 255, 255, 0.85); max-width: 36em; margin: 0 0 28px; }
  .final .btn.primary {
    background: #fff; color: #4B006E; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  }
  .final .btn.primary:hover { filter: none; background: #FBF2FF; color: #4B006E; }
  .final .mono-note { font-family: var(--mono); font-size: 12px; margin-top: 22px; color: rgba(255,255,255,0.6); }


  @media (max-width: 900px) {
    .hero-grid, .depth-grid { grid-template-columns: 1fr; gap: 40px; }
    .offers, .who-grid { grid-template-columns: 1fr; }
    .evidence-strip { grid-template-columns: 1fr 1fr; }
    .ev:nth-child(2) { border-right: none; }
    .ev:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
    .cases { grid-template-columns: 1fr; }
    .final { padding: 40px 28px; }
  }

      :root {
        --site-content-max: 1320px;
        --site-gutter: clamp(18px, 2.4vw, 32px);
        --site-section-space: clamp(24px, 2.4vw, 34px);
        --site-column-gap: clamp(16px, 1.8vw, 24px);
        --site-index-width: 52px;
        --site-heading-gap: 13px;
        --site-radius-sm: 0.65rem;
        --site-radius-md: 0.9rem;
        --site-radius-lg: 1.15rem;
        --site-surface: color-mix(in srgb, var(--paper-2) 97%, var(--accent-2) 3%);
        --site-surface-muted: color-mix(in srgb, var(--paper) 46%, var(--paper-2) 54%);
        --site-band-odd: color-mix(in srgb, var(--paper) 97%, var(--accent-2) 3%);
        --site-band-even: color-mix(in srgb, var(--paper) 38%, var(--paper-2) 62%);
        --site-band-glow: color-mix(in srgb, var(--accent-2) 5%, transparent);
        --site-halo-violet: color-mix(in srgb, var(--accent-2) 24%, transparent);
        --site-halo-plum: color-mix(in srgb, var(--accent) 18%, transparent);
        --site-halo-glint: color-mix(in srgb, var(--ink) 11%, transparent);
        --site-border: color-mix(in srgb, var(--rule) 84%, var(--accent-2) 16%);
        --site-border-strong: color-mix(in srgb, var(--rule) 62%, var(--accent-2) 38%);
        --site-highlight: rgba(75, 0, 110, 0.08);
        --site-shadow: 0 18px 52px rgba(26, 10, 46, 0.10), 0 3px 12px rgba(26, 10, 46, 0.06);
        --site-shadow-hover: 0 22px 58px rgba(26, 10, 46, 0.14), 0 5px 16px rgba(26, 10, 46, 0.08);
        --site-cta-surface: #3b0a54;
        --site-cta-surface-2: #531071;
        --site-cta-ink: #ffffff;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --site-highlight: rgba(240, 233, 247, 0.065);
          --site-shadow: 0 20px 60px rgba(2, 1, 5, 0.34), 0 4px 16px rgba(2, 1, 5, 0.20);
          --site-shadow-hover: 0 26px 70px rgba(2, 1, 5, 0.42), 0 6px 20px rgba(2, 1, 5, 0.24);
          --site-cta-surface: #1c0b29;
          --site-cta-surface-2: #2a103d;
        }
      }
      :root[data-theme='light'] {
        --site-highlight: rgba(75, 0, 110, 0.08);
        --site-shadow: 0 18px 52px rgba(26, 10, 46, 0.10), 0 3px 12px rgba(26, 10, 46, 0.06);
        --site-shadow-hover: 0 22px 58px rgba(26, 10, 46, 0.14), 0 5px 16px rgba(26, 10, 46, 0.08);
        --site-cta-surface: #3b0a54;
        --site-cta-surface-2: #531071;
      }
      :root[data-theme='dark'] {
        --site-highlight: rgba(240, 233, 247, 0.065);
        --site-shadow: 0 20px 60px rgba(2, 1, 5, 0.34), 0 4px 16px rgba(2, 1, 5, 0.20);
        --site-shadow-hover: 0 26px 70px rgba(2, 1, 5, 0.42), 0 6px 20px rgba(2, 1, 5, 0.24);
        --site-cta-surface: #1c0b29;
        --site-cta-surface-2: #2a103d;
      }

      html { scroll-padding-top: 68px; }

      .hp-content {
        font-size: 16px;
        line-height: 1.58;
        background: var(--site-band-odd);
      }
      .hp-content .wrap {
        width: 100%;
        max-width: var(--site-content-max);
        margin-inline: auto;
        padding-inline: var(--site-gutter);
      }

      .hp-content header {
        border-color: var(--site-border);
        background: color-mix(in srgb, var(--paper) 90%, transparent);
        backdrop-filter: blur(16px) saturate(120%);
      }
      .hp-content .nav { min-height: 60px; gap: 18px; padding-block: 10px; }
      .hp-content .brand { font-size: 19px; letter-spacing: -0.025em; }
      .hp-content .nav-links { gap: 4px; }
      .hp-content .nav-links a {
        padding: 7px 10px;
        border-radius: var(--site-radius-sm);
        font-size: 13.5px;
        transition: color 150ms ease, background 150ms ease;
      }
      .hp-content .nav-links a:hover { background: var(--site-surface-muted); }
      .hp-content .nav-cta {
        padding: 8px 14px;
        border: 1px solid color-mix(in srgb, var(--accent-2) 60%, transparent);
        border-radius: var(--site-radius-sm);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(75,0,110,0.16);
      }

      .hp-content main#top {
        scroll-margin-top: 60px;
        background: var(--site-band-odd);
      }
      .hp-content .hero {
        position: relative;
        isolation: isolate;
        overflow: visible;
        padding-block: clamp(28px, 3.3vw, 42px) clamp(30px, 3.5vw, 44px);
      }
      .hp-content .hero::before,
      .hp-content .hero::after {
        content: '';
        position: absolute;
        z-index: 0;
        top: 50%;
        pointer-events: none;
      }
      .hp-content .hero::before {
        left: 50%;
        width: 100vw;
        height: 112%;
        background:
          radial-gradient(ellipse at 72% 48%, var(--site-halo-violet) 0 6%, transparent 29%),
          radial-gradient(ellipse at 31% 61%, var(--site-halo-plum) 0 3%, transparent 24%),
          radial-gradient(circle at 88% 19%, var(--site-halo-glint) 0 2%, transparent 17%),
          radial-gradient(ellipse at 68% 50%, transparent 30%, var(--site-halo-plum) 38%, transparent 59%),
          conic-gradient(from 18deg at 70% 50%, transparent 0 10%, var(--site-halo-violet) 17%, transparent 27%, var(--site-halo-glint) 42%, transparent 53%, var(--site-halo-plum) 70%, transparent 86%);
        filter: blur(32px) saturate(118%);
        opacity: 0.78;
        transform: translate(-50%, -50%) scale(0.96);
        animation: site-halo-breathe 9s ease-in-out infinite alternate;
      }
      .hp-content .hero::after {
        right: 2%;
        width: clamp(420px, 56vw, 720px);
        aspect-ratio: 1;
        background: conic-gradient(from 0deg, transparent 0 9%, var(--site-halo-glint) 14%, transparent 21% 46%, var(--site-halo-violet) 55%, transparent 64% 82%, var(--site-halo-plum) 90%, transparent);
        -webkit-mask: radial-gradient(circle, transparent 0 37%, #000 39% 40%, transparent 42% 45%, #000 48% 51%, transparent 54%);
        mask: radial-gradient(circle, transparent 0 37%, #000 39% 40%, transparent 42% 45%, #000 48% 51%, transparent 54%);
        filter: blur(0.7px);
        opacity: 0.42;
        transform: translateY(-50%);
        animation: site-halo-orbit 20s linear infinite;
      }
      .hp-content .hero-grid { position: relative; z-index: 1; }
      @keyframes site-halo-breathe {
        0% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.64; background-position: 0% 0%; }
        48% { opacity: 0.84; }
        100% { transform: translate(-50%, -51%) scale(1.04); opacity: 0.74; background-position: 3% -2%; }
      }
      @keyframes site-halo-orbit {
        to { transform: translateY(-50%) rotate(360deg) scale(1.025); }
      }
      .hp-content .hero-grid {
        display: flex;
        align-items: center;
        gap: clamp(22px, 3vw, 40px);
      }
      .hp-content .hero-grid > * { min-width: 0; }
      .hp-content .hero-grid > :first-child { flex: 1.12 1 0; }
      .hp-content .hero-grid > .scorecard { flex: 0.88 1 0; }
      .hp-content .eyebrow { font-size: 10.5px; letter-spacing: 0.16em; }
      .hp-content h1 {
        max-width: 13ch;
        margin-block: 10px 12px;
        font-size: clamp(34px, 3.85vw, 46px);
        line-height: 1.04;
        letter-spacing: -0.04em;
      }
      .hp-content h1 em { text-shadow: 0 0 32px color-mix(in srgb, var(--accent-2) 22%, transparent); }
      .hp-content .hero p.lede { max-width: 40em; margin-bottom: 16px; font-size: 16px; line-height: 1.5; }
      .hp-content .cta-row { gap: 10px; }
      .hp-content .btn {
        padding: 11px 18px;
        border-radius: var(--site-radius-sm);
        font-size: 14px;
        transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
      }
      .hp-content .btn:hover { transform: translateY(-1px); }
      .hp-content .btn.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 22px rgba(75,0,110,0.20); }
      .hp-content .btn.ghost { border-color: var(--site-border-strong); background: color-mix(in srgb, var(--paper) 78%, transparent); }

      .hp-content .scorecard {
        border-color: var(--site-border);
        border-radius: var(--site-radius-lg);
        background:
          radial-gradient(ellipse at 82% 0%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 38%),
          var(--site-surface);
        box-shadow: var(--site-shadow), inset 0 1px 0 var(--site-highlight);
      }
      .hp-content .scorecard-head { padding: 12px 16px; font-size: 10.5px; }
      .hp-content .ticker { height: 254px; }
      .hp-content .trow { display: flex; align-items: center; gap: 9px; padding: 7px 14px; }
      .hp-content .trow .mark { flex: 0 0 auto; }
      .hp-content .trow .meta { flex: 1 1 auto; min-width: 0; }
      .hp-content .trow .value { flex: 0 0 auto; margin-left: auto; }
      .hp-content .trow .pass { flex: 0 0 auto; }
      .hp-content .trow .app { font-size: 9.5px; }
      .hp-content .trow .metric { font-size: 11.5px; }
      .hp-content .trow .value { font-size: 12px; }
      .hp-content .scorecard-foot { padding: 10px 16px; font-size: 10px; }

      .hp-content main > section {
        position: relative;
        padding-block: var(--site-section-space);
        border: 0;
        border-top: 1px solid var(--site-border);
        scroll-margin-top: 68px;
      }
      .hp-content main > section:nth-of-type(odd) { background: var(--site-band-odd); }
      .hp-content main > section:nth-of-type(even) {
        background:
          radial-gradient(ellipse at 92% 18%, var(--site-band-glow), transparent 42%),
          var(--site-band-even);
      }
      .hp-content #depth { padding-block: var(--site-section-space); }
      .hp-content .wp-ref {
        display: flex;
        align-items: start;
        gap: var(--site-heading-gap);
        width: 100%;
        margin: 0 0 12px;
      }
      .hp-content .wp-ref > :last-child { flex: 1 1 auto; min-width: 0; }
      .hp-content .wp-ref .idx {
        flex: 0 0 var(--site-index-width);
        white-space: nowrap;
        margin-top: 4px;
        padding: 4px 8px;
        border: 1px solid var(--site-border);
        border-radius: 0.5rem;
        background: var(--site-surface);
        box-shadow: inset 0 1px 0 var(--site-highlight);
        color: color-mix(in srgb, var(--accent-2) 82%, var(--ink));
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.11em;
      }
      .hp-content h2 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.14; letter-spacing: -0.03em; }
      .hp-content .section-lede { width: 100%; max-width: none; margin: -4px 0 14px; padding-left: calc(var(--site-index-width) + var(--site-heading-gap)); font-size: 15px; line-height: 1.5; }
      .hp-content .prose { max-width: none; }
      .hp-content .prose p { margin: 0; color: color-mix(in srgb, var(--ink) 88%, var(--muted)); }

      .hp-content #problem > .wrap {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .hp-content #problem .prose {
        display: flex;
        align-items: stretch;
        gap: var(--site-column-gap);
        width: 100%;
        padding-left: calc(var(--site-index-width) + var(--site-heading-gap));
        font-size: 15px;
      }
      .hp-content #problem .prose > p {
        flex: 1 1 0;
        min-width: 0;
        padding: 0;
        border: 0;
      }

      .hp-content #depth > .wrap,
      .hp-content #depth .depth-grid,
      .hp-content #depth .depth-prose .prose {
        display: flex;
      }
      .hp-content #depth > .wrap,
      .hp-content #depth .depth-grid { flex-direction: column; }
      .hp-content #depth .depth-grid { gap: 18px; }
      .hp-content #depth .depth-prose .prose {
        align-items: stretch;
        gap: var(--site-column-gap);
        width: 100%;
        padding-left: calc(var(--site-index-width) + var(--site-heading-gap));
        columns: initial;
        font-size: 15px;
      }
      .hp-content #depth .depth-prose .prose > p {
        min-width: 0;
        padding: 0;
        border: 0;
      }
      .hp-content #depth .depth-prose .prose > p:first-child { flex: 0 1 43%; }
      .hp-content #depth .depth-prose .prose > p:last-child { flex: 0 1 57%; }

      .hp-content #engines > .wrap,
      .hp-content #who > .wrap {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: start;
      }
      .hp-content #engines .wp-ref,
      .hp-content #who .wp-ref { flex: none; margin-bottom: 12px; }
      .hp-content #engines .section-lede,
      .hp-content #who .section-lede { flex: none; }
      .hp-content .offers,
      .hp-content .who-grid {
        display: flex;
        flex: 0 0 100%;
        flex-wrap: wrap;
        align-items: stretch;
        gap: var(--site-column-gap);
      }
      .hp-content .offer,
      .hp-content .who {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        position: relative;
        min-width: 0;
        padding: 18px 18px 16px;
        border: 1px solid var(--site-border);
        border-radius: var(--site-radius-md);
        background:
          linear-gradient(145deg, color-mix(in srgb, var(--site-surface) 96%, var(--accent-2) 4%), var(--site-surface));
        box-shadow: inset 0 1px 0 var(--site-highlight);
        overflow: hidden;
        transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
      }
      .hp-content .offer::before,
      .hp-content .who::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(circle at 8% -8%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 38%);
        pointer-events: none;
      }
      .hp-content .offer > *,
      .hp-content .who > * { position: relative; z-index: 1; }
      .hp-content .offer:hover,
      .hp-content .who:hover { transform: translateY(-2px); border-color: var(--site-border-strong); box-shadow: var(--site-shadow-hover), inset 0 1px 0 var(--site-highlight); }
      .hp-content .offer { gap: 8px; }
      .hp-content .offer .tag,
      .hp-content .case .dom { font-size: 10px; }
      .hp-content .offer h3 { font-size: 17px; line-height: 1.25; }
      .hp-content .offer p,
      .hp-content .who p { font-size: 14px; line-height: 1.55; }
      .hp-content .offer .foot { margin-top: auto; padding-top: 10px; font-size: 11px; line-height: 1.4; }
      .hp-content .offer.challenge { border-color: color-mix(in srgb, var(--accent-2) 28%, var(--site-border)); box-shadow: inset 0 1px 0 var(--site-highlight); }
      .hp-content .who { border-top-width: 1px; }
      .hp-content .who h3 { margin-bottom: 7px; font-size: 17px; line-height: 1.3; }

      .hp-content #platform .platform {
        display: flex;
        align-items: stretch;
        gap: var(--site-column-gap);
      }
      .hp-content #platform .platform .prose { flex: 1.4 1 0; min-width: 0; }
      .hp-content #platform .platform .wp-ref { margin-bottom: 12px; }
      .hp-content #platform .platform .prose > p { margin: -2px 0 0; padding-left: calc(var(--site-index-width) + var(--site-heading-gap)); font-size: 15px; }
      .hp-content .platform-list {
        display: flex;
        flex: 0.8 1 0;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        gap: 0;
        padding: 5px 16px;
        border: 1px solid var(--site-border);
        border-radius: var(--site-radius-md);
        background: var(--site-surface);
        box-shadow: inset 0 1px 0 var(--site-highlight);
      }
      .hp-content .platform-list li { padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
      .hp-content .platform-list li:last-child { border-bottom: 0; }
      .hp-content .platform-list li::before { color: var(--accent-2); }

      .hp-content main > section:last-of-type { padding-block: clamp(30px, 3.6vw, 46px); }
      .hp-content .final {
        display: flex;
        align-items: center;
        gap: clamp(26px, 4vw, 58px);
        padding: clamp(24px, 3vw, 34px);
        border: 1px solid color-mix(in srgb, var(--accent-2) 36%, transparent);
        border-radius: var(--site-radius-lg);
        background: radial-gradient(ellipse at 8% 8%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 40%), linear-gradient(135deg, var(--site-cta-surface), var(--site-cta-surface-2));
        box-shadow: var(--site-shadow), inset 0 1px 0 rgba(255,255,255,0.08);
      }
      .hp-content .final h2 { flex: 0 1 35%; max-width: 12ch; color: var(--site-cta-ink); }
      .hp-content .final-copy {
        display: flex;
        flex: 1 1 0;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 18px;
        min-width: 0;
      }
      .hp-content .final-copy p { flex: 0 0 100%; width: 100%; max-width: none; margin: 0; color: color-mix(in srgb, var(--site-cta-ink) 82%, transparent); }
      .hp-content .final-copy .btn { flex: 0 0 auto; margin: 0; }
      .hp-content .final-copy .mono-note { flex: 1 1 280px; margin: 0; color: color-mix(in srgb, var(--site-cta-ink) 58%, transparent); }

      .hp-content footer { padding-block: 24px 34px; border-color: var(--site-border); font-size: 12px; }
      .hp-content footer .wrap { align-items: center; }

      @media (max-width: 960px) {
        .hp-content .offer,
        .hp-content .who { flex: 1 1 calc(50% - 12px); }
        .hp-content .offer:last-child,
        .hp-content .who:last-child { flex-basis: 100%; }
        .hp-content #platform .platform { flex-direction: column; gap: 16px; }
        .hp-content .platform-list { width: 100%; }
      }
      @media (max-width: 760px) {
        .hp-content .hero-grid { flex-direction: column; align-items: stretch; }
        .hp-content .hero-grid > :first-child,
        .hp-content .hero-grid > .scorecard { flex-basis: auto; }
        .hp-content h1 { max-width: 15ch; }
        .hp-content .scorecard { max-width: 680px; }
        .hp-content .ticker { height: 242px; }
        .hp-content .hero::before { top: 58%; left: 50%; opacity: 0.58; }
        .hp-content .hero::after { top: 62%; right: -34%; opacity: 0.28; }
      }
      @media (max-width: 720px) {
        .hp-content .nav { gap: 10px; }
        .hp-content .nav-links { display: none; }
        .hp-content .nav-cta { margin-left: auto; }
        .hp-content .hero { padding-block: 27px 31px; }
        .hp-content h1 { font-size: clamp(32px, 9.2vw, 42px); }
        .hp-content .section-lede,
        .hp-content #problem .prose,
        .hp-content #depth .depth-prose .prose,
        .hp-content #platform .platform .prose > p { padding-left: 0; }
        .hp-content #problem .prose,
        .hp-content #depth .depth-prose .prose { flex-direction: column; gap: 14px; }
        .hp-content #depth .depth-prose .prose > p { flex-basis: auto; }
        .hp-content #engines .wp-ref,
        .hp-content #who .wp-ref,
        .hp-content #engines .section-lede,
        .hp-content #who .section-lede { flex-basis: 100%; }
        .hp-content .offers,
        .hp-content .who-grid { flex-direction: column; }
        .hp-content .offer,
        .hp-content .who,
        .hp-content .offer:last-child,
        .hp-content .who:last-child { flex-basis: auto; width: 100%; }
        .hp-content .final { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 20px; }
        .hp-content .final h2,
        .hp-content .final-copy { flex-basis: auto; width: 100%; }
        .hp-content .final h2 { max-width: 14ch; }
      }
      @media (max-width: 440px) {
        .hp-content .brand { font-size: 17px; }
        .hp-content .nav-cta { padding: 7px 10px; font-size: 12px; }
        .hp-content .scorecard-head { align-items: flex-start; flex-direction: column; gap: 4px; }
        .hp-content .trow .mark { display: none; }
      }
      @media (prefers-reduced-motion: reduce) {
        .hp-content .hero::before,
        .hp-content .hero::after { animation: none; }
        .hp-content .offer,
        .hp-content .who,
        .hp-content .btn,
        .hp-content .nav-links a { transition: none; }
        .hp-content .offer:hover,
        .hp-content .who:hover,
        .hp-content .btn:hover { transform: none; }
      }
      html, body { overflow-x: clip; }
      .depth-chart.depth-story-host {
        --story-verified: #2f7f2c;
        --story-verified-soft: rgba(47, 127, 44, 0.12);
        --story-risk: #b92c49;
        --story-risk-soft: rgba(185, 44, 73, 0.11);
        --story-warning: #a94313;
        --story-warning-soft: rgba(169, 67, 19, 0.12);
        --story-neutral: #667085;
        --story-neutral-soft: rgba(102, 112, 133, 0.10);
        --story-surface: #fdfbfe;
        --story-surface-alt: #f7f3f9;
        --story-glint: rgba(139, 92, 246, 0.055);
        --story-hairline: rgba(75, 0, 110, 0.08);
        --story-depth-shadow: rgba(26, 10, 46, 0.16);
        width: min(1440px, calc(100vw - 48px));
        margin-left: 50%;
        transform: translateX(-50%);
        padding: 0;
        overflow: hidden;
        border-color: color-mix(in srgb, var(--accent-2) 12%, var(--rule));
        border-radius: 1rem;
        box-shadow: 0 28px 80px var(--story-depth-shadow), 0 4px 16px rgba(13, 8, 24, 0.08), inset 0 1px 0 var(--story-hairline);
        background: var(--story-surface);
      }
      @media (prefers-color-scheme: dark) {
        .depth-chart.depth-story-host {
          --story-verified: #56c24f;
          --story-verified-soft: rgba(86, 194, 79, 0.13);
          --story-risk: #f25f72;
          --story-risk-soft: rgba(242, 95, 114, 0.13);
          --story-warning: #f47a35;
          --story-warning-soft: rgba(244, 122, 53, 0.13);
          --story-neutral: #9ca3b2;
          --story-neutral-soft: rgba(156, 163, 178, 0.09);
          --story-surface: #17131d;
          --story-surface-alt: #120f18;
          --story-glint: rgba(139, 92, 246, 0.065);
          --story-hairline: rgba(240, 233, 247, 0.065);
          --story-depth-shadow: rgba(2, 1, 5, 0.44);
        }
      }
      :root[data-theme='light'] .depth-chart.depth-story-host {
        --story-verified: #2f7f2c;
        --story-verified-soft: rgba(47, 127, 44, 0.12);
        --story-risk: #b92c49;
        --story-risk-soft: rgba(185, 44, 73, 0.11);
        --story-warning: #a94313;
        --story-warning-soft: rgba(169, 67, 19, 0.12);
        --story-neutral: #667085;
        --story-neutral-soft: rgba(102, 112, 133, 0.10);
        --story-surface: #fdfbfe;
        --story-surface-alt: #f7f3f9;
        --story-glint: rgba(139, 92, 246, 0.055);
        --story-hairline: rgba(75, 0, 110, 0.08);
        --story-depth-shadow: rgba(26, 10, 46, 0.16);
      }
      :root[data-theme='dark'] .depth-chart.depth-story-host {
        --story-verified: #56c24f;
        --story-verified-soft: rgba(86, 194, 79, 0.13);
        --story-risk: #f25f72;
        --story-risk-soft: rgba(242, 95, 114, 0.13);
        --story-warning: #f47a35;
        --story-warning-soft: rgba(244, 122, 53, 0.13);
        --story-neutral: #9ca3b2;
        --story-neutral-soft: rgba(156, 163, 178, 0.09);
        --story-surface: #17131d;
        --story-surface-alt: #120f18;
        --story-glint: rgba(139, 92, 246, 0.065);
        --story-hairline: rgba(240, 233, 247, 0.065);
        --story-depth-shadow: rgba(2, 1, 5, 0.44);
      }
      .depth-story-intro {
        display: block;
        padding: 14px 38px 13px;
        border-bottom: 1px solid var(--rule-soft);
        background: radial-gradient(ellipse at 82% -40%, var(--story-glint), transparent 48%), var(--story-surface-alt);
      }
      .depth-story-intro > div { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; min-width: 0; }
      .depth-story-host .chart-head { width: 100%; max-width: none; margin: 0; white-space: normal; overflow-wrap: anywhere; text-wrap: pretty; font-size: clamp(25px, 2.15vw, 31px); line-height: 1.08; }
      .depth-story-host .chart-head em { color: var(--accent-2); }
      .depth-story-host .chart-dek { width: 100%; max-width: none; margin: 0; padding-bottom: 2px; white-space: normal; overflow-wrap: anywhere; text-wrap: pretty; font-size: 13.5px; line-height: 1.42; }
      .depth-story-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 6px 32px 10px;
        background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 1.8%, var(--story-surface)), var(--story-surface));
        border-bottom: 1px solid var(--rule-soft);
        scrollbar-width: none;
      }
      .depth-story-nav::-webkit-scrollbar { display: none; }
      .depth-stage {
        --stage-color: var(--story-neutral);
        position: relative;
        min-width: 0;
        min-height: 70px;
        padding: 10px 13px 9px;
        border: 1px solid var(--rule-soft);
        border-radius: 0.68rem;
        background: color-mix(in srgb, var(--story-surface-alt) 58%, transparent);
        color: var(--muted);
        text-align: left;
        cursor: pointer;
        font: inherit;
        box-shadow: inset 0 1px 0 var(--story-hairline);
        transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
      }
      .depth-stage:hover { color: var(--ink); border-color: var(--stage-color); background: color-mix(in srgb, var(--stage-color) 6%, var(--story-surface)); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--story-hairline), 0 8px 22px rgba(13, 8, 24, 0.12); }
      .depth-stage[aria-selected='true'] { color: var(--ink); border-color: color-mix(in srgb, var(--stage-color) 82%, var(--rule)); background: linear-gradient(180deg, color-mix(in srgb, var(--stage-color) 9%, var(--story-surface)), color-mix(in srgb, var(--stage-color) 5%, var(--story-surface))); box-shadow: inset 0 1px 0 var(--story-hairline), inset 0 -2px 0 var(--stage-color), 0 8px 20px rgba(13, 8, 24, 0.10); }
      .depth-story-host .depth-stage:focus-visible { outline-color: var(--stage-color); }
      .depth-stage-num { display: block; margin-bottom: 4px; color: var(--stage-color); font: 700 10px/1.3 var(--mono); letter-spacing: 0.12em; }
      .depth-stage-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; line-height: 1.35; }
      .depth-stage-action { display: block; margin-top: 5px; color: var(--stage-color); font: 700 9px/1.3 var(--mono); letter-spacing: 0.03em; transition: transform 150ms ease; }
      .depth-stage:hover .depth-stage-action { transform: translateX(2px); }
      .depth-story-workspace { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px); align-items: stretch; background: var(--story-surface); }
      .depth-story-main { min-height: 0; }
      .depth-plot-wrap { position: relative; min-width: 0; padding: 18px 26px 2px; background: radial-gradient(ellipse at 38% 0%, var(--story-glint), transparent 44%), var(--story-surface); }
      .depth-plot { width: 100%; height: var(--story-chart-height, 500px); min-height: 0; overflow: hidden; }
      .depth-plot svg { width: 100%; height: 100%; overflow: hidden; }
      .depth-plot .grid line { stroke: var(--rule-soft); stroke-dasharray: 2 8; }
      .depth-plot .grid path, .depth-plot .axis path { display: none; }
      .depth-plot .axis line { stroke: var(--rule); }
      .depth-plot .axis text { fill: var(--muted); font: 11px var(--mono); }
      .depth-plot .axis-title { fill: var(--muted); font: 700 10px var(--mono); letter-spacing: 0.1em; }
      .depth-plot .focus-band { stroke-width: 1.25; }
      .depth-plot .phase-boundary { stroke: var(--rule); stroke-dasharray: 2 7; }
      .depth-plot .phase-label { fill: var(--muted); font: 700 9.5px var(--mono); letter-spacing: 0.08em; }
      .depth-plot .easy-line { stroke: var(--story-warning); stroke-width: 1.5; stroke-dasharray: 5 7; }
      .depth-plot .easy-label { font: 700 10px var(--mono); letter-spacing: 0.05em; }
      .depth-plot .easy-label-easy { fill: var(--ink); }
      .depth-plot .easy-label-edge { fill: var(--story-warning); }
      .depth-plot .gap-area { fill: url(#story-gap-gradient); }
      .depth-plot .gap-hatch { fill: url(#story-gap-hatch); opacity: 0.36; }
      .depth-plot .shared-line { fill: none; stroke: var(--story-neutral); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
      .depth-plot .athena-line { fill: none; stroke: var(--story-verified); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: url(#story-verified-glow); }
      .depth-plot .prototype-line { fill: none; stroke: url(#story-risk-gradient); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 7; }
      .depth-plot .event-guide { stroke: var(--rule); stroke-width: 1; }
      .depth-plot .event-name { fill: var(--ink); font: 700 10px var(--mono); letter-spacing: 0.025em; }
      .depth-plot .event-action { fill: var(--story-verified); font: 9.5px var(--mono); }
      .depth-plot .verified-marker { fill: var(--story-surface); stroke: var(--story-verified); stroke-width: 2.5; }
      .depth-plot .verified-check { fill: none; stroke: var(--story-verified); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
      .depth-plot .risk-cross { stroke: var(--story-risk); stroke-width: 2.5; stroke-linecap: round; }
      .depth-plot .gap-measure { stroke: var(--story-risk); stroke-opacity: 0.34; stroke-width: 1; stroke-dasharray: 2 4; }
      .depth-plot .interstitial-mark { opacity: 0.60; transition: opacity 140ms ease; }
      .depth-plot .interstitial-mark.is-hovered { opacity: 0.95; }
      .depth-plot .interstitial-dot-neutral { fill: var(--story-surface); stroke: var(--story-neutral); stroke-width: 1.6; }
      .depth-plot .interstitial-dot-verified { fill: var(--story-surface); stroke: var(--story-verified); stroke-width: 1.6; }
      .depth-plot .interstitial-dot-risk { fill: var(--story-surface); stroke: var(--story-risk); stroke-width: 1.6; }
      .depth-plot .critical-fork { pointer-events: none; }
      .depth-plot .fork-halo {
        fill: var(--story-warning); fill-opacity: 0.10; stroke: var(--story-warning); stroke-width: 1.5;
        transform-box: fill-box; transform-origin: center; animation: depth-fork-pulse 2.4s ease-in-out infinite;
      }
      .depth-plot .fork-orbit { fill: var(--story-surface); stroke: var(--story-warning); stroke-width: 2; stroke-dasharray: 2.5 3; transition: fill 150ms ease, fill-opacity 150ms ease, stroke-width 150ms ease; }
      .depth-plot .fork-split { fill: none; stroke: var(--story-warning); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width 150ms ease; }
      .depth-plot .fork-diamond { fill: var(--story-warning); stroke: var(--story-surface); stroke-width: 2; }
      .depth-plot .fork-core { fill: var(--story-surface); }
      .depth-plot .fork-callout {
        fill: var(--story-warning); stroke: var(--story-surface); stroke-width: 5; paint-order: stroke;
        font: 700 9px var(--mono); letter-spacing: 0.08em; transition: letter-spacing 150ms ease;
      }
      .depth-plot .critical-fork.is-hovered .fork-halo { fill-opacity: 0.20; animation-duration: 1.2s; }
      .depth-plot .critical-fork.is-hovered .fork-orbit { fill: var(--story-warning); fill-opacity: 0.10; stroke-width: 3; }
      .depth-plot .critical-fork.is-hovered .fork-split { stroke-width: 3; }
      .depth-plot .critical-fork.is-hovered .fork-callout { letter-spacing: 0.12em; }
      @keyframes depth-fork-pulse {
        0%, 100% { transform: scale(0.82); opacity: 0.35; }
        50% { transform: scale(1.18); opacity: 0.88; }
      }
      .depth-plot .series-label { font: 700 11px var(--mono); letter-spacing: 0.045em; }
      .depth-plot .series-label-athena { fill: var(--story-verified); }
      .depth-plot .series-label-prototype { fill: var(--story-risk); }
      .depth-plot .proof-bracket { fill: none; stroke: var(--story-risk); stroke-width: 1.5; }
      .depth-plot .proof-label { fill: var(--story-risk); font: 700 11px var(--mono); letter-spacing: 0.08em; }
      .depth-plot .proof-sub { fill: var(--muted); font: 10px var(--mono); }
      .depth-plot .hover-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.32; }
      .depth-plot .hover-dot-verified { fill: var(--story-surface); stroke: var(--story-verified); stroke-width: 2.5; }
      .depth-plot .hover-dot-risk { fill: var(--story-surface); stroke: var(--story-risk); stroke-width: 2.5; }
      .depth-plot .chart-segment rect { fill: var(--segment-color); fill-opacity: 0.055; stroke: var(--segment-color); stroke-opacity: 0.32; transition: fill-opacity 140ms ease, stroke-opacity 140ms ease; }
      .depth-plot .chart-segment text { fill: var(--segment-color); font: 700 9px/1 var(--mono); letter-spacing: 0.045em; pointer-events: none; }
      .depth-plot .chart-segment:hover rect, .depth-plot .chart-segment[aria-current='true'] rect { fill-opacity: 0.16; stroke-opacity: 0.9; }
      .depth-plot .chart-segment:focus-visible { outline: none; }
      .depth-plot .chart-segment:focus-visible rect { stroke-width: 2; stroke-opacity: 1; }
      .depth-hover-cue {
        position: absolute; z-index: 4; top: 14px; right: 20px; display: inline-flex; align-items: center; gap: 7px;
        padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--accent-2) 14%, var(--rule)); border-radius: 999px; background: color-mix(in srgb, var(--story-surface) 88%, transparent);
        color: var(--muted); box-shadow: inset 0 1px 0 var(--story-hairline), 0 7px 20px rgba(13, 8, 24, 0.10); backdrop-filter: blur(10px); font: 700 9.5px/1.2 var(--mono); pointer-events: none;
      }
      .depth-hover-cue span { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--story-warning); border-radius: 50%; color: var(--story-warning); font-size: 10px; }
      .depth-chart-tooltip {
        position: absolute; z-index: 5; width: 230px; pointer-events: none; opacity: 0;
        transform: translate(-50%, calc(-100% - 13px)); padding: 11px 13px;
        border: 1px solid color-mix(in srgb, var(--accent-2) 16%, var(--rule)); border-radius: 0.68rem; background: color-mix(in srgb, var(--story-surface) 94%, transparent); color: var(--ink);
        box-shadow: inset 0 1px 0 var(--story-hairline), 0 16px 42px rgba(2, 1, 5, 0.28); backdrop-filter: blur(12px); font-size: 12px; line-height: 1.45; transition: opacity 120ms ease;
      }
      .depth-chart-tooltip.is-visible { opacity: 1; }
      .depth-chart-tooltip strong { display: block; margin-bottom: 3px; color: var(--ink); }
      .depth-chart-tooltip .depth-tooltip-time { display: block; margin-bottom: 7px; color: var(--muted); font: 700 9px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
      .depth-chart-tooltip .verified-copy { display: block; color: var(--story-verified); }
      .depth-chart-tooltip .risk-copy { display: block; margin-top: 6px; color: var(--story-risk); }
      .depth-story-panel {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 26px;
        min-width: 0;
        padding: 31px 29px 28px;
        border-left: 1px solid var(--rule-soft);
        background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 2%, var(--story-surface-alt)), var(--story-surface-alt) 42%);
      }
      .depth-panel-step { color: var(--story-neutral); font: 700 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
      .depth-panel-title { margin: 8px 0 7px; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
      .depth-panel-copy { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
      .depth-panel-compare { display: grid; grid-template-columns: 1fr; gap: 22px; }
      .depth-outcome { padding-left: 15px; border-left: 3px solid; }
      .depth-outcome.verified { border-color: var(--story-verified); }
      .depth-outcome.risk { border-color: var(--story-risk); }
      .depth-outcome-label { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font: 700 10px/1.3 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; }
      .depth-outcome.verified .depth-outcome-label { color: var(--story-verified); }
      .depth-outcome.risk .depth-outcome-label { color: var(--story-risk); }
      .depth-outcome-value { color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.45; }
      .depth-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: auto; padding: 12px 13px; border: 1px solid color-mix(in srgb, var(--story-neutral) 76%, var(--rule)); border-radius: 0.62rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 2.5%, var(--story-surface)), var(--story-surface)); color: var(--ink); box-shadow: inset 0 1px 0 var(--story-hairline); font: 700 12px/1.2 var(--mono); cursor: pointer; transition: border-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
      .depth-play:hover { border-color: var(--story-verified); color: var(--story-verified); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--story-hairline), 0 8px 20px rgba(13, 8, 24, 0.12); }
      .depth-story-host .depth-play:focus-visible { outline-color: var(--story-verified); }
      .depth-play-icon { font-size: 10px; }
      .depth-story-foot { display: flex; justify-content: space-between; gap: 18px; padding: 12px 38px 14px; border-top: 1px solid var(--rule-soft); background: var(--story-surface); color: var(--muted); font: 11px/1.45 var(--mono); }
      .depth-story-foot strong { color: var(--ink); }
      @media (max-width: 1050px) {
        .depth-story-intro { padding: 15px 30px 14px; }
        .depth-story-workspace { grid-template-columns: minmax(0, 1fr) 310px; }
        .depth-story-panel { padding: 27px 24px 25px; }
      }
      @media (max-width: 720px) {
        .depth-chart.depth-story-host { width: calc(100vw - 32px); }
        .depth-story-intro { padding: 14px 24px 13px; }
        .depth-story-nav { display: flex; overflow-x: auto; gap: 8px; padding: 8px 18px 13px; }
        .depth-stage { min-width: 154px; }
        .depth-story-workspace { display: block; }
        .depth-plot-wrap { padding: 14px 8px 0; }
        .depth-plot { height: var(--story-chart-height, 420px); min-height: 380px; }
        .depth-hover-cue { top: 9px; right: 10px; }
        .depth-story-panel { gap: 20px; padding: 22px 24px 24px; border-top: 1px solid var(--rule-soft); border-left: 0; }
        .depth-panel-compare { grid-template-columns: 1fr 1fr; gap: 18px; }
        .depth-play { width: 100%; }
        .depth-story-foot { display: block; padding: 11px 24px 13px; }
        .depth-story-foot span + span { display: block; margin-top: 4px; }
      }
      @media (max-width: 440px) {
        .depth-story-host .chart-head { font-size: 27px; }
        .depth-panel-compare { grid-template-columns: 1fr; }
        .depth-hover-cue { font-size: 0; }
        .depth-hover-cue::after { content: 'Tap marks for detail'; font: 700 9px/1.2 var(--mono); }
      }
      @media (prefers-reduced-motion: reduce) {
        .depth-chart-tooltip { transition: none; }
        .depth-plot .fork-halo { animation: none; opacity: 0.72; }
      }