/* KryptoHead house tokens — shared with kryptohead.com and ai.kryptohead.com.
   Dark only, like every other page on the site; there is deliberately no
   light variant, so the apps do not disagree with each other on one screen. */
  :root {
    color-scheme: dark;
    --base:#0f172a; --card:#1e293b; --well:#0b1120; --ink:#e2e8f0;
    --muted:#94a3b8; --accent:#38bdf8; --line:#334155; --line-2:#475569;

    /* this page's roles, mapped onto the house set */
    --bg: var(--base);
    --surface: var(--card);
    --surface2: #22304a;        /* the house hover tone */
    --ink2: var(--muted);
    --ink3: #64748b;
    --line-strong: var(--line-2);
    --blue: var(--accent);
    --teal: #34d399;
    --amber: #fbbf24;
    --amber-ink: #fbbf24;
    --red: #f87171;
    --violet: #a78bfa;
    --heat-a: 248,113,113;      /* warm ramp base (house comp red) */
    --heat-b: 56,189,248;       /* cool ramp base (house accent)   */
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.28);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background:
      radial-gradient(circle at 12% 8%, rgba(56,189,248,.08), transparent 32rem),
      radial-gradient(circle at 88% 92%, rgba(167,139,250,.07), transparent 34rem),
      var(--bg);
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, "PingFang TC", "Noto Sans TC",
      "Microsoft JhengHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }
  .mono { font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; }
  a { color: var(--blue); text-decoration: none; }
  a:hover { text-decoration: underline; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

  /* ---------- nav ---------- */
  nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner { display: flex; align-items: center; gap: 20px; height: 52px; }
  .nav-inner .spacer { flex: 1; }
  /* Wordmark links home, exactly as on ai.kryptohead.com. The brand reads
     "KryptoHead.com" everywhere on the site — Google's consent-screen review
     requires the app name to match the name on the home page. */
  .wordmark {
    font-size: 17px; font-weight: 600; letter-spacing: -.02em;
    color: var(--ink); text-decoration: none; white-space: nowrap;
  }
  .wordmark:hover { text-decoration: none; }
  .wordmark .tld { font-weight: 400; color: var(--accent); }

  .nav-links {
    display: inline-flex; gap: 2px; padding: 3px;
    background: rgba(30,41,59,.72); border: 1px solid var(--line);
    border-radius: 999px; overflow-x: auto; scrollbar-width: none;
    min-width: 0; flex-shrink: 1;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
    line-height: 1.5; padding: 5px 14px; border-radius: 999px; white-space: nowrap;
    transition: background-color .16s ease, color .16s ease;
  }
  .nav-links a:hover { color: var(--ink); text-decoration: none; }
  .nav-links a.on { color: var(--well); background: var(--accent); }

  /* ---------- hero ---------- */
  header.hero { padding: 72px 0 48px; }
  .eyebrow {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink3); margin-bottom: 18px;
  }
  h1 {
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 900; line-height: 1.22; margin: 0 0 20px;
    letter-spacing: .01em; text-wrap: balance; max-width: 21em;
  }
  h1 .hl-blue { color: var(--blue); }
  h1 .hl-red { color: var(--red); }
  .hero-thesis { max-width: 46em; color: var(--ink2); font-size: 16px; margin: 0 0 40px; }
  .hero-thesis strong { color: var(--ink); font-weight: 700; }

  .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  @media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
  .stat {
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 18px 20px 14px; box-shadow: var(--shadow);
  }
  .stat .v {
    font-family: "IBM Plex Mono", monospace; font-weight: 600;
    font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -.01em;
  }
  .stat .k { font-size: 13px; color: var(--ink2); margin-top: 6px; line-height: 1.5; }
  .stat .src { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--ink3); margin-top: 8px; letter-spacing: .02em; }

  /* ---------- sections ---------- */
  section { padding: 64px 0 8px; scroll-margin-top: 64px; }
  /* the modular build puts .wrap on the section itself */
  section.wrap { max-width: 1180px; margin: 0 auto; padding: 64px 28px 8px; }
  .sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
  .sec-num {
    font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600;
    color: var(--ink3); letter-spacing: .1em;
  }
  h2 { font-size: 27px; font-weight: 900; margin: 0; letter-spacing: .01em; text-wrap: balance; }
  .sec-lede { color: var(--ink2); max-width: 52em; margin: 10px 0 30px; }
  .sec-lede strong { color: var(--ink); }

  h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }

  /* battlefield cards */
  .bf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 1000px) { .bf-grid { grid-template-columns: 1fr; } }
  .bf {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    border-top: 3px solid var(--bf); padding: 22px 22px 18px;
    box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px;
  }
  .bf.blue { --bf: var(--blue); }
  .bf.teal { --bf: var(--teal); }
  .bf.red  { --bf: var(--red); }
  .bf-tag {
    font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .12em;
    color: var(--bf); text-transform: uppercase;
  }
  .bf h3 { font-size: 19px; margin-top: 2px; }
  .bf .bf-desc { font-size: 13.5px; color: var(--ink2); margin: 0; }
  .cat { border-top: 1px solid var(--line); padding-top: 14px; }
  .cat-label { font-size: 12.5px; font-weight: 700; color: var(--ink2); letter-spacing: .05em; margin-bottom: 9px; }
  .chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .chip {
    font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 1.35;
    background: color-mix(in srgb, var(--bf) 9%, var(--surface2));
    border: 1px solid color-mix(in srgb, var(--bf) 30%, transparent);
    color: var(--ink);
    border-radius: 7px; padding: 4px 9px; cursor: pointer; text-align: left;
  }
  .chip:hover { border-color: var(--bf); }
  .chip.active { background: color-mix(in srgb, var(--bf) 22%, var(--surface2)); border-color: var(--bf); }
  .chip .acq { color: var(--ink3); font-size: 10.5px; }
  .chip-detail {
    min-height: 3.2em; font-size: 13px; color: var(--ink2);
    background: var(--surface2); border-radius: 9px; padding: 10px 13px;
    border: 1px dashed var(--line-strong); margin-top: auto;
  }
  .chip-detail b { color: var(--ink); font-weight: 700; }

  .note-strip {
    margin-top: 16px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; padding: 16px 20px; font-size: 13.5px; color: var(--ink2);
    box-shadow: var(--shadow);
  }
  .note-strip b { color: var(--ink); }

  /* matrix */
  .matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
  table.matrix { width: 100%; min-width: 860px; border-collapse: collapse; background: var(--surface); }
  .matrix th, .matrix td { padding: 14px 16px; vertical-align: top; text-align: left; font-size: 13.5px; }
  .matrix thead th {
    font-size: 13px; letter-spacing: .04em; border-bottom: 1px solid var(--line-strong);
    background: var(--surface2);
  }
  .matrix thead .col-red { color: var(--red); }
  .matrix thead .col-blue { color: var(--blue); }
  .matrix tbody tr + tr td, .matrix tbody tr + tr th { border-top: 1px solid var(--line); }
  .matrix tbody th {
    font-weight: 700; font-size: 13.5px; width: 15%; color: var(--ink);
    background: var(--surface2);
  }
  .matrix td { color: var(--ink2); width: 42.5%; }
  .matrix td b, .matrix td strong { color: var(--ink); font-weight: 700; }
  .matrix .ex { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--ink3); display: block; margin-top: 5px; letter-spacing: .02em; }

  .events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
  @media (max-width: 900px) { .events { grid-template-columns: 1fr; } }
  .event {
    background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ev, var(--ink3));
    border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow);
  }
  .event .d { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink3); letter-spacing: .06em; }
  .event .t { font-weight: 700; font-size: 14px; margin: 3px 0 4px; }
  .event p { margin: 0; font-size: 13px; color: var(--ink2); }

  /* timeline */
  .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
  .fbtn {
    font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 5px 14px;
    background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink2); cursor: pointer;
  }
  .fbtn:hover { color: var(--ink); }
  .fbtn.on { background: var(--accent); color: var(--well); border-color: var(--accent); font-weight: 700; }
  .tl { position: relative; margin-left: 6px; padding-left: 26px; border-left: 2px solid var(--line-strong); }
  .tl-item { position: relative; padding: 0 0 22px; max-width: 60em; }
  .tl-item::before {
    content: ""; position: absolute; left: -33px; top: 7px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--jd, var(--ink3)); border: 2px solid var(--bg);
  }
  .tl-item.hidden { display: none; }
  .tl-year {
    position: relative; font-family: "IBM Plex Mono", monospace; font-weight: 600;
    font-size: 15px; color: var(--ink); padding: 4px 0 18px; letter-spacing: .1em;
  }
  .tl-year::before {
    content: ""; position: absolute; left: -32px; top: 12px;
    width: 10px; height: 2px; background: var(--line-strong);
  }
  .tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
  .tl-date { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink3); letter-spacing: .05em; }
  .jtag {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; border-radius: 4px; padding: 1px 7px;
    color: var(--jd); background: color-mix(in srgb, var(--jd) 13%, transparent);
  }
  .tl-item.us  { --jd: var(--blue); }
  .tl-item.st  { --jd: var(--amber-ink); }
  .tl-item.eu  { --jd: var(--violet); }
  .tl-item.gl  { --jd: var(--teal); }
  .tl-t { font-weight: 700; font-size: 14.5px; }
  .tl-item p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink2); }

  .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
  @media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }
  .cmp {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 22px 24px; box-shadow: var(--shadow); border-top: 3px solid var(--c);
  }
  .cmp.us-c { --c: var(--blue); }
  .cmp.eu-c { --c: var(--violet); }
  .cmp h3 { color: var(--c); font-size: 17px; margin-bottom: 10px; }
  .cmp p { font-size: 13.5px; color: var(--ink2); margin: 0 0 10px; }
  .cmp p b { color: var(--ink); }
  .cmp-common {
    grid-column: 1 / -1; background: var(--surface2); border: 1px dashed var(--line-strong);
    border-radius: 12px; padding: 16px 22px; font-size: 13.5px; color: var(--ink2);
  }
  .cmp-common b { color: var(--ink); }

  /* heatmap */
  .heat-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
  table.heat { width: 100%; min-width: 880px; border-collapse: collapse; background: var(--surface); }
  .heat th, .heat td { padding: 13px 16px; text-align: left; font-size: 13.5px; vertical-align: top; }
  .heat thead th { font-size: 12.5px; letter-spacing: .05em; color: var(--ink2); border-bottom: 1px solid var(--line-strong); background: var(--surface2); }
  .heat tbody tr + tr td, .heat tbody tr + tr th { border-top: 1px solid var(--line); }
  .heat tbody th { font-weight: 700; color: var(--ink); width: 12%; background: var(--surface2); }
  .cell { white-space: nowrap; }
  .pill {
    display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px;
    padding: 3px 10px; letter-spacing: .04em;
  }
  .warm-5 { background: rgba(var(--heat-a), .42); }
  .warm-4 { background: rgba(var(--heat-a), .30); }
  .warm-3 { background: rgba(var(--heat-a), .19); }
  .warm-2 { background: rgba(var(--heat-a), .10); }
  .warm-1 { background: rgba(var(--heat-a), .045); }
  .cool-5 { background: rgba(var(--heat-b), .42); }
  .cool-4 { background: rgba(var(--heat-b), .30); }
  .cool-3 { background: rgba(var(--heat-b), .19); }
  .cool-2 { background: rgba(var(--heat-b), .10); }
  .cool-1 { background: rgba(var(--heat-b), .045); }
  .heat .inc { color: var(--ink2); font-size: 12.5px; }
  .heat .inc b { color: var(--ink); }
  .heat-legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 12px; font-size: 12px; color: var(--ink3); }
  .heat-legend .sw { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; }

  /* future */
  .future { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 6px; }
  @media (max-width: 1000px) { .future { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .future { grid-template-columns: 1fr; } }
  .fy {
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 18px 18px 14px; box-shadow: var(--shadow);
  }
  .fy .y { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 17px; letter-spacing: .06em; }
  .fy .yt { font-size: 13px; font-weight: 700; color: var(--ink2); margin: 2px 0 10px; }
  .fy ul { margin: 0; padding-left: 18px; }
  .fy li { font-size: 13px; color: var(--ink2); margin-bottom: 7px; }
  .fy li b { color: var(--ink); }

  .tensions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
  @media (max-width: 900px) { .tensions { grid-template-columns: 1fr; } }
  .tension {
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 20px 20px 16px; box-shadow: var(--shadow);
  }
  .tension .n { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink3); letter-spacing: .1em; }
  .tension h3 { margin: 6px 0 8px; font-size: 16px; }
  .tension p { margin: 0; font-size: 13px; color: var(--ink2); }
  .tension p b { color: var(--ink); }

  .outro {
    margin-top: 34px; background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--blue); border-radius: 12px; padding: 24px 28px;
    box-shadow: var(--shadow); max-width: 60em;
  }
  .outro p { margin: 0 0 12px; color: var(--ink2); font-size: 14.5px; }
  .outro p:last-child { margin-bottom: 0; }
  .outro b { color: var(--ink); }

  footer { padding: 56px 0 64px; }
  .src-title { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; margin-bottom: 14px; }
  .src-list { columns: 2; column-gap: 40px; font-size: 12.5px; color: var(--ink2); }
  @media (max-width: 800px) { .src-list { columns: 1; } }
  .src-list div { break-inside: avoid; margin-bottom: 7px; }
  .foot-meta { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink3); letter-spacing: .04em; }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  /* ---------- language switch ---------- */
  .l-en { display: none; }
  body.en .l-en { display: revert; }
  body.en .zh { display: none; }
  /* Segmented EN / 繁中 control — matches the switch on kryptohead.com:
     both languages always visible, the active one filled with the accent,
     rather than one button showing the language you are not in. */
  .lang {
    flex-shrink: 0;
    display: inline-flex; gap: 2px; padding: 3px;
    background: rgba(30,41,59,.72); border: 1px solid var(--line);
    border-radius: 999px;
  }
  .lang button {
    font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .04em;
    line-height: 1.5; padding: 4px 13px; border: 0; border-radius: 999px;
    background: transparent; color: var(--ink2); cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
  }
  .lang button:hover { color: var(--ink); }
  .lang button[aria-pressed="true"] { background: var(--accent); color: var(--well); }
  .lang button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .ver-badge {
    flex-shrink: 0;
    font-size: 10px; font-weight: 500; color: var(--ink3);
    border: 1px solid var(--line-strong); border-radius: 4px;
    padding: 1px 6px; letter-spacing: .06em;
  }
  .changelog { margin-bottom: 34px; }
  .changelog table { border-collapse: collapse; font-size: 12.5px; }
  .changelog td { padding: 3px 22px 3px 0; color: var(--ink2); vertical-align: top; }
  .changelog td.cv { font-family: "IBM Plex Mono", monospace; color: var(--ink); font-weight: 600; white-space: nowrap; }
  .changelog td.cd { font-family: "IBM Plex Mono", monospace; color: var(--ink3); white-space: nowrap; }

  /* ---------- site footer (shared shape with the other KryptoHead apps) ---------- */
  .site-foot {
    margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    font-size: 13px; color: var(--muted);
  }
  .site-foot a { color: var(--muted); text-decoration: none; }
  .site-foot a:hover { color: var(--accent); text-decoration: underline; }
  .site-foot .sep { margin: 0 9px; color: var(--line-2); }
  .site-foot .spacer { flex: 1; }
  .x-link { display: inline-flex; align-items: center; gap: 7px; }
  .x-link svg { width: 13px; height: 13px; fill: currentColor; display: inline; }

  /* Wide Latin tracking and uppercase are a Latin treatment; they mangle Han
     glyphs. Same rule the other KryptoHead pages carry. */
  html[lang="zh-Hant"] .eyebrow { letter-spacing: .1em; text-transform: none; font-size: 12.5px; }
  html[lang="zh-Hant"] .src-title { letter-spacing: .1em; text-transform: none; font-size: 12.5px; }
  html[lang="zh-Hant"] .bf-tag { letter-spacing: .06em; }
  /* the mono face has no Han glyphs, so this line falls back mid-sentence */
  html[lang="zh-Hant"] .foot-meta { font-family: inherit; letter-spacing: 0; font-size: 12px; line-height: 1.9; }
  html[lang="zh-Hant"] .sec-lede { line-height: 1.9; max-width: 42em; }
  html[lang="zh-Hant"] .hero-thesis { line-height: 1.9; max-width: 40em; }
  html[lang="zh-Hant"] .tension p,
  html[lang="zh-Hant"] .cmp p,
  html[lang="zh-Hant"] .fy li { line-height: 1.9; }

  @media (max-width: 560px) {
    /* Two rows, not three: wordmark and the language switch share the first,
       the section nav takes its own and scrolls sideways within it. */
    .nav-inner { gap: 8px 10px; height: auto; padding: 10px 0; flex-wrap: wrap; }
    .nav-links { order: 3; flex: 0 0 100%; }
    .nav-links a { padding: 5px 11px; font-size: 12px; }
    .lang button { padding: 5px 10px; font-size: 11.5px; }
    .site-foot { row-gap: 10px; }
    .site-foot .spacer { flex: 0 0 100%; height: 0; }
    .site-foot .sep-copy { display: none; }
    .site-foot .copy { flex: 0 0 100%; }
  }