:root{
  color-scheme: dark;
  --base:#0f172a; --card:#1e293b; --well:#0b1120; --ink:#e2e8f0;
  --muted:#94a3b8; --accent:#38bdf8; --line:#334155; --line-2:#475569;
  --comp:#f87171;   /* 硃砂 · 競爭 */
  --coop:#38bdf8;   /* 天青 · 合作 */
  --cap:#fbbf24;    /* 赭金 · 資本 */
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  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(--base);
  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;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  line-height:1.75;min-height:100vh;
  padding:26px 20px 52px;
}
main{width:min(940px,100%);margin:0 auto}

/* ---------- top bar ---------- */
.topbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
.wordmark{
  font-size:17px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.wordmark .tld{font-weight:400;color:var(--accent)}
.topbar .spacer{flex:1}
.nav{display:inline-flex;gap:2px;padding:3px;background:rgba(30,41,59,.72);
  border:1px solid var(--line);border-radius:999px}
.nav a{
  font-size:12.5px;font-weight:600;letter-spacing:.03em;line-height:1.5;
  padding:5px 14px;border-radius:999px;text-decoration:none;
  color:var(--muted);transition:background-color .16s ease,color .16s ease;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{background:var(--accent);color:var(--well)}

/* ---------- language switch ---------- */
.lang{
  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:5px 13px;border:0;border-radius:999px;
  background:transparent;color:var(--muted);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(--accent);outline-offset:2px}

/* ---------- masthead ---------- */
.eyebrow{
  font-size:11px;letter-spacing:.16em;color:var(--muted);
  margin-bottom:10px;font-weight:500;
}
/* wide Latin tracking and long measures do not suit Han glyphs */
html[lang="zh-Hant"] .eyebrow{letter-spacing:.1em}
html[lang="zh-Hant"] .sub{max-width:38em;line-height:1.9}
html[lang="zh-Hant"] .notes{line-height:1.95}
html[lang="zh-Hant"] .info p{line-height:1.9}
h1{
  font-size:clamp(28px,6vw,42px);font-weight:600;line-height:1.2;
  letter-spacing:-.025em;
}
h1 .accent{color:var(--accent)}
.sub{color:var(--muted);font-size:15.5px;margin-top:14px;max-width:46em;line-height:1.8}

/* ---------- legend ---------- */
.legend{
  display:flex;flex-wrap:wrap;gap:12px 24px;
  margin:24px 0 12px;font-size:13px;color:var(--muted);
}
.legend span{display:inline-flex;align-items:center;gap:8px}
.swatch{width:26px;height:0;border-top:3px solid;flex:none}
.sw-comp{border-color:var(--comp);border-top-style:dashed}
.sw-coop{border-color:var(--coop)}
.sw-cap{border-color:var(--cap);border-top-style:dotted}

/* ---------- map ---------- */
.map-wrap{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:8px 4px 2px;margin-top:6px;overflow:hidden;
}
svg{width:100%;height:auto;display:block;touch-action:manipulation}
.edge{fill:none;stroke-width:1.7;opacity:.62;transition:opacity .25s,stroke-width .25s}
.edge.comp{stroke:var(--comp);stroke-dasharray:7 5}
.edge.coop{stroke:var(--coop)}
.edge.cap{stroke:var(--cap);stroke-dasharray:2 4;stroke-width:2.1}
.node{cursor:pointer}
.node rect{fill:var(--card);stroke:var(--line-2);stroke-width:1.3;transition:all .25s}
.node.giant rect{fill:#22304a;stroke:#7c8ba1;stroke-width:1.6}
.node.lab rect{fill:#152a3d;stroke:var(--accent);stroke-width:2}
.node.tiger rect{fill:#1b2942;stroke:#5b7f9c;stroke-width:1.4}
.node.compute rect{fill:var(--well);stroke:#7c8ba1;stroke-width:1.3;stroke-dasharray:5 3}
.node.state rect{fill:var(--well);stroke:var(--cap);stroke-width:1.6;stroke-dasharray:5 3}
.node text{
  font-size:15px;font-weight:600;fill:var(--ink);
  text-anchor:middle;dominant-baseline:middle;
  font-family:inherit;pointer-events:none;
}
.node .en{
  font-size:10.5px;font-weight:500;fill:#9fb0c4;letter-spacing:.02em;
  font-family:Georgia,"Times New Roman",serif;font-style:italic;
}
.node .tag{font-size:9.5px;font-weight:400;fill:var(--muted);letter-spacing:.05em}
/* the serif italic is a Latin treatment; Han subtitles need the sans face */
html[lang="zh-Hant"] .node .en{font-family:inherit;font-style:normal;font-size:11px}
html[lang="zh-Hant"] .info h3 .en{font-family:inherit;font-style:normal}
svg.focused .edge{opacity:.07}
svg.focused .edge.lit{opacity:1;stroke-width:2.6}
svg.focused .node{opacity:.2}
svg.focused .node.lit{opacity:1}
.tierlabel{
  font-size:10.5px;letter-spacing:.12em;fill:#64748b;font-weight:500;
}

/* ---------- info panel ---------- */
.info{
  margin-top:16px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:20px 22px;min-height:96px;font-size:14.5px;
}
.info h3{font-size:19px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.info h3 .en{
  font-size:13.5px;font-style:italic;font-family:Georgia,serif;
  color:var(--muted);font-weight:400;margin-left:2px;
}
.info h3 .tag{font-size:12px;color:var(--muted);font-weight:400;margin-left:10px}
.info p{color:#cbd5e1;line-height:1.9}
.info .hint{color:var(--muted);font-size:13.5px}
.info .rel{margin-top:12px}
.info .rel b{font-weight:600;display:block;font-size:12px;letter-spacing:.12em;margin-bottom:4px}
.info .rel .r{color:var(--comp)}
.info .rel .b{color:var(--coop)}
.info .rel .g{color:var(--cap)}
.info .rel .item{margin:4px 0 4px 1.1em;text-indent:-1.1em;color:#cbd5e1;line-height:1.85}
.info .lead{color:var(--muted);font-size:13.5px;margin-bottom:10px;line-height:1.85}
.info .lead b{color:var(--ink);font-weight:600;font-size:13.5px;letter-spacing:0;display:inline;margin:0}

/* ---------- snapshot stamp ---------- */
.stamp{
  margin-top:14px;font-size:12.5px;color:#64748b;
  display:flex;flex-wrap:wrap;gap:0 4px;align-items:baseline;
}
.stamp a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-2)}
.stamp a:hover{color:var(--accent);border-color:var(--accent)}
.howto code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--well);border:1px solid var(--line);border-radius:5px;padding:1px 5px;
}
.howto a{color:var(--accent);text-decoration:none}
.howto a:hover{text-decoration:underline}

/* ---------- notes + footer ---------- */
.notes{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);line-height:1.95;
}
.notes b{color:var(--ink)}
.notes p + p{margin-top:14px}
footer{
  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);
}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--accent);text-decoration:underline}
footer .sep{margin:0 9px;color:var(--line-2)}
footer .spacer{flex:1}
.x-link{display:inline-flex;align-items:center;gap:7px}
.x-link svg{width:13px;height:13px;fill:currentColor;display:inline}
@media (max-width:560px){
  body{padding:18px 14px 44px}
  .topbar{gap:8px 10px}
  .nav a{padding:5px 11px;font-size:12px}
  .lang button{padding:5px 10px;font-size:11.5px}
  footer{row-gap:10px}
  footer .spacer{flex:0 0 100%;height:0}
  footer .sep-copy{display:none}
  footer .copy{flex:0 0 100%}
  .topbar{gap:10px}
}