:root {
    --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    --bg: #0c1118;
    --grid: rgba(88, 167, 173, 0.045);
    --surface: #131b26;
    --surface-2: #0f151e;
    --surface-hi: #17212e;
    --border: #253140;
    --border-hi: #35485e;
    --text: #e6ebf2;
    --text-dim: #8593a6;
    --text-faint: #5d6b7e;

    --amber: #e2a94e;    --amber-dim: rgba(226, 169, 78, 0.13);
    --teal: #59a9af;     --teal-dim: rgba(89, 169, 175, 0.13);
    --green: #6fbf8e;    --green-dim: rgba(111, 191, 142, 0.13);
    --rust: #d97a54;     --rust-dim: rgba(217, 122, 84, 0.13);
    --slate: #7d8ba0;    --slate-dim: rgba(125, 139, 160, 0.12);
  }

  @media (prefers-color-scheme: light) {
    :root {
      --bg: #eceff4;
      --grid: rgba(47, 125, 132, 0.06);
      --surface: #ffffff;
      --surface-2: #f3f6f9;
      --surface-hi: #ffffff;
      --border: #d8dee7;
      --border-hi: #c2ccd8;
      --text: #16202e;
      --text-dim: #566275;
      --text-faint: #8592a2;
      --amber: #a56a1f;    --amber-dim: rgba(165, 106, 31, 0.10);
      --teal: #2c757c;     --teal-dim: rgba(44, 117, 124, 0.10);
      --green: #2c845a;    --green-dim: rgba(44, 132, 90, 0.10);
      --rust: #b04e2c;     --rust-dim: rgba(176, 78, 44, 0.10);
      --slate: #5a6675;    --slate-dim: rgba(90, 102, 117, 0.10);
    }
  }
  :root[data-theme="dark"]  { color-scheme: dark; }
  :root[data-theme="light"] { color-scheme: light; }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behaviour: smooth; scroll-padding-top: 70px; }

  body {
    background-color: var(--bg);
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 46px 46px;
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeScale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
  .animate { animation: fadeUp 0.5s cubic-bezier(0.2,0.7,0.2,1) both; animation-delay: calc(var(--i, 0) * 0.05s); }
  .delay-0 { --i: 0; } .delay-1 { --i: 1; } .delay-2 { --i: 2; } .delay-3 { --i: 3; }
  .delay-4 { --i: 4; } .delay-5 { --i: 5; } .delay-6 { --i: 6; } .delay-7 { --i: 7; }
  .u-bg-amber { background: var(--amber); } .u-bg-teal { background: var(--teal); }
  .u-bg-green { background: var(--green); } .u-bg-rust { background: var(--rust); } .u-bg-slate { background: var(--slate); }
  .u-text-green { color: var(--green); }
  .span-all { grid-column: 1 / -1; }
  .mb-16 { margin-bottom: 16px; } .mb-18 { margin-bottom: 18px; } .mb-22 { margin-bottom: 22px; }
  .mt-10 { margin-top: 10px; } .mt-22 { margin-top: 22px; }
  .card-h-sm { font-size: 14px; }
  .report-subheading { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 26px 0 12px; }
  .scroll-y-440 { max-height: 440px; overflow-y: auto; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behaviour: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  }

  /* ============ NAV ============ */
  nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 9px 24px;
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  }
  .nav-brand {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    color: var(--amber); letter-spacing: 0.5px; margin-right: 6px; white-space: nowrap; flex: none;
  }
  .nav-links {
    display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto;
    min-width: 0; flex: 1 1 auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
            mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
    text-decoration: none; padding: 4px 9px; border-radius: 5px; white-space: nowrap;
    transition: background 0.15s, color 0.15s;
  }
  .nav-links a:hover { background: var(--amber-dim); color: var(--amber); }

  /* ============ LAYOUT ============ */
  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; }

  header.hero { padding: 54px 0 30px; border-bottom: 1px solid var(--border); margin-bottom: 44px; }
  .tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
  .tag {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border-hi); color: var(--text-dim);
  }
  .tag.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: var(--green-dim); }
  .tag.warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-dim); }

  h1 {
    font-family: var(--font-display); font-size: clamp(34px, 6vw, 62px); font-weight: 700;
    letter-spacing: -1.6px; line-height: 1.02; text-wrap: balance; margin-bottom: 14px;
  }
  h1 .accent { color: var(--amber); }
  .lede { font-size: 17px; color: var(--text-dim); max-width: 760px; line-height: 1.65; }
  .lede strong { color: var(--text); font-weight: 600; }

  .meta-strip {
    margin-top: 26px; display: flex; gap: 26px 40px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 12px;
  }
  .meta-strip .k { color: var(--text-faint); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 3px; }
  .meta-strip .v { color: var(--text); }
  .meta-strip .v.ok { color: var(--green); }

  /* ============ SECTION ============ */
  section.block { margin-bottom: 58px; scroll-margin-top: 70px; }
  .sec-label {
    display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim);
  }
  .sec-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
  .sec-label .num { color: var(--text-faint); }
  h2 { font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 33px); font-weight: 600; letter-spacing: -0.6px; margin-bottom: 14px; text-wrap: balance; }
  .sec-intro { color: var(--text-dim); max-width: 780px; margin-bottom: 26px; font-size: 15px; }
  .sec-intro code, p code, li code, td code, .card code { font-family: var(--font-mono); font-size: 0.85em; background: var(--slate-dim); color: var(--text); padding: 1px 5px; border-radius: 4px; }

  /* ============ KPI TILES ============ */
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
  .kpi {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 16px 14px;
    min-width: 0; animation: fadeScale 0.5s cubic-bezier(0.2,0.7,0.2,1) both; animation-delay: calc(var(--i,0)*0.04s);
  }
  .kpi .big { font-family: var(--font-display); font-size: 27px; font-weight: 700; letter-spacing: -0.8px; line-height: 1; color: var(--text); overflow-wrap: break-word; }
  .kpi .big.amber { color: var(--amber); } .kpi .big.teal { color: var(--teal); } .kpi .big.green { color: var(--green); } .kpi .big.rust { color: var(--rust); }
  .kpi .lab { margin-top: 7px; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); line-height: 1.35; }

  /* ============ CARD GRID ============ */
  .grid { display: grid; gap: 14px; }
  .g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; min-width: 0; overflow-wrap: break-word; }
  .card.flat { background: var(--surface-2); }
  .card.hi { background: var(--surface-hi); box-shadow: 0 10px 34px -18px rgba(0,0,0,0.55); }
  .card-h { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: baseline; gap: 9px; letter-spacing: -0.2px; }
  .card-h .pill { font-family: var(--font-mono); font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 20px; letter-spacing: 0.3px; flex: none; }
  .card-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-bottom: 11px; }
  .card p { font-size: 13.5px; color: var(--text-dim); }
  .card p + p { margin-top: 8px; }
  .accent-l { border-left: 3px solid var(--border-hi); }
  .accent-l.amber { border-left-color: var(--amber); } .accent-l.teal { border-left-color: var(--teal); }
  .accent-l.green { border-left-color: var(--green); } .accent-l.rust { border-left-color: var(--rust); } .accent-l.slate { border-left-color: var(--slate); }

  .p-amber { background: var(--amber-dim); color: var(--amber); } .p-teal { background: var(--teal-dim); color: var(--teal); }
  .p-green { background: var(--green-dim); color: var(--green); } .p-rust { background: var(--rust-dim); color: var(--rust); } .p-slate { background: var(--slate-dim); color: var(--slate); }

  /* ============ VERDICT ============ */
  .verdict {
    background: linear-gradient(135deg, var(--green-dim), transparent 70%), var(--surface-hi);
    border: 1px solid color-mix(in srgb, var(--green) 40%, var(--border));
    border-radius: 14px; padding: 24px 26px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  }
  .verdict .mark { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--green); line-height: 1; }
  .verdict h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 6px; }
  .verdict p { color: var(--text-dim); font-size: 14px; }
  .verdict p strong { color: var(--text); }
  @media (max-width: 560px) { .verdict { grid-template-columns: 1fr; } }

  /* ============ LIST ============ */
  ul.clean { list-style: none; }
  ul.clean li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: 14px; color: var(--text-dim); }
  ul.clean li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
  ul.clean li strong { color: var(--text); font-weight: 600; }
  ul.clean.teal li::before { background: var(--teal); } ul.clean.green li::before { background: var(--green); } ul.clean.rust li::before { background: var(--rust); }

  /* ============ TABLE ============ */
  .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
  table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 520px; }
  thead th {
    position: sticky; top: 0; background: var(--surface-2); text-align: left; padding: 11px 15px;
    font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim);
    border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  tbody td { padding: 10px 15px; border-bottom: 1px solid var(--border); color: var(--text-dim); vertical-align: top; }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr:hover td { background: color-mix(in srgb, var(--amber) 4%, transparent); }
  td .mono, .mono { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
  .st { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; display: inline-block; }
  .st-stable { background: var(--green-dim); color: var(--green); }
  .st-exp { background: var(--teal-dim); color: var(--teal); }
  .st-dev { background: var(--amber-dim); color: var(--amber); }
  .st-dep { background: var(--slate-dim); color: var(--text-faint); }
  .on-y { color: var(--green); font-weight: 600; } .on-n { color: var(--text-faint); }

  /* ============ CHIPS ============ */
  .chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .chip { font-family: var(--font-mono); font-size: 12px; padding: 5px 11px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
  .chip.primary { border-color: color-mix(in srgb, var(--amber) 40%, transparent); color: var(--amber); background: var(--amber-dim); }

  /* ============ CODE ============ */
  .code {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 4px;
  }
  .code-h { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); padding: 9px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 40%, var(--surface-2)); display: flex; justify-content: space-between; gap: 12px; }
  .code pre { padding: 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; }
  .code pre .c-key { color: var(--amber); } .code pre .c-dim { color: var(--text-faint); } .code pre .c-teal { color: var(--teal); }
  details.code-full { margin-top: 14px; }
  details.code-full > summary {
    cursor: pointer; font-family: var(--font-mono); font-size: 12px; color: var(--teal);
    padding: 10px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; list-style: none;
    display: flex; align-items: center; gap: 8px; transition: background 0.15s;
  }
  details.code-full > summary:hover { background: var(--surface); }
  details.code-full > summary::before { content: '▸'; color: var(--text-faint); }
  details.code-full[open] > summary::before { content: '▾'; }
  details.code-full[open] > summary { border-radius: 10px 10px 0 0; border-bottom: none; }
  details.code-full .code { border-radius: 0 0 10px 10px; margin-top: 0; border-top: none; }
  details.code-full pre { max-height: 560px; overflow-y: auto; }

  /* ============ ARCHITECTURE DIAGRAM ============ */
  .diagram-shell { position: relative; margin-top: 6px; }
  .diagram-shell__hint { display: flex; justify-content: flex-end; margin-bottom: 9px; }
  .diagram-open { font-family: var(--font-mono); font-size: 11px; color: var(--teal); text-decoration: none; }
  .diagram-open:hover { text-decoration: underline; text-underline-offset: 3px; }
  .architecture-diagram { margin: 0; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; }
  .architecture-diagram a { display: block; min-width: 720px; }
  .architecture-diagram img { display: block; width: 100%; height: auto; }
  .legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
  .legend-item { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
  .legend-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }

  /* ============ CALLOUT ============ */
  .callout { border-radius: 0 12px 12px 0; padding: 16px 20px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); overflow-wrap: break-word; }
  .sec-intro, .lede, .card p, ul.clean li { overflow-wrap: break-word; }
  code { overflow-wrap: break-word; word-break: break-word; }
  .callout.teal { border-left-color: var(--teal); } .callout.rust { border-left-color: var(--rust); } .callout.slate { border-left-color: var(--slate); }
  .callout strong { color: var(--text); }
  .callout .lab { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--amber); display: block; margin-bottom: 5px; }
  .callout.teal .lab { color: var(--teal); } .callout.rust .lab { color: var(--rust); } .callout.slate .lab { color: var(--slate); }

  footer { border-top: 1px solid var(--border); padding-top: 28px; margin-top: 20px; color: var(--text-faint); font-size: 12.5px; font-family: var(--font-mono); line-height: 1.8; }
  footer strong { color: var(--text-dim); }

  .two-col { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 30px; align-items: start; }
  .two-col > * { min-width: 0; }
  @media (max-width: 820px) { .two-col { grid-template-columns: 1fr; gap: 20px; } }

  /* ============ MOBILE ============ */
  @media (max-width: 620px) {
    body { background-size: 34px 34px; }
    .nav-inner { padding: 8px 13px; gap: 6px; }
    .nav-brand { font-size: 11px; }
    .wrap { padding: 0 15px 60px; }
    header.hero { padding: 34px 0 22px; margin-bottom: 32px; }
    h1 { font-size: clamp(27px, 8.5vw, 40px); letter-spacing: -0.9px; }
    .lede { font-size: 15px; }
    .meta-strip { gap: 14px 24px; margin-top: 20px; }
    section.block { margin-bottom: 42px; }
    h2 { font-size: clamp(21px, 6vw, 28px); }
    .sec-intro { font-size: 14px; }
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
    .kpi { padding: 14px 13px 12px; }
    .kpi .big { font-size: 22px; }
    .verdict { padding: 19px 18px; gap: 14px; }
    .verdict .mark { font-size: 32px; }
    .card { padding: 16px; }
    .grid.g2, .grid.g3 { grid-template-columns: 1fr; }
    .callout { padding: 14px 16px; font-size: 13px; }
    .code pre { font-size: 11.5px; padding: 14px; }
    .code-h { flex-direction: column; gap: 3px; }
    .diagram-open { font-size: 10px; }
  }
  @media (max-width: 380px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    h1 { font-size: 25px; }
  }