/* Omnistack site — one stylesheet for all five pages.
   The design is deliberately plain: white paper, one accent that is the same black as
   the text, hairline borders, no shadows and no gradients. Everything that looks like
   a button is a link with a real href, so the site works with scripting off. */

:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --dim: #4a4a4a;
  --faint: #868686;
  --line: #e6e6e6;
  --line-2: #d4d4d4;
  --accent: #0a0a0a;
  --warn: #8a8a8a;
  --good: #0a0a0a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; color: var(--ink); background: transparent;
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC",
        "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px 120px; position: relative; }
.narrow { max-width: 760px; }

/* ── background ────────────────────────────────────────
   The page is still white paper; what moves is the light falling on it. A dot
   grid drifts, and two very soft pools of light drift with it. Everything is a
   transform animation so the compositor moves the layers and nothing repaints,
   and the whole thing sits behind the content at an alpha low enough that no
   line of text ever has to fight it. */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-grid {
  position: absolute; inset: -90px;
  background-image: radial-gradient(circle at 1px 1px, rgba(10, 10, 10, .11) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 92%);
  animation: bg-drift 90s linear infinite;
}
.bg-glow {
  position: absolute; border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.bg-glow-a {
  width: 62vw; height: 62vw; top: -22vw; left: -12vw;
  background: radial-gradient(circle, rgba(88, 128, 205, .13), transparent 62%);
  animation: bg-glow-a 46s ease-in-out infinite;
}
.bg-glow-b {
  width: 54vw; height: 54vw; top: 34vh; right: -18vw;
  background: radial-gradient(circle, rgba(196, 158, 112, .10), transparent 62%);
  animation: bg-glow-b 58s ease-in-out infinite;
}
@keyframes bg-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-26px, -52px, 0); }
}
@keyframes bg-glow-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(7vw, 5vh, 0) scale(1.14); }
}
@keyframes bg-glow-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50% { transform: translate3d(-6vw, -7vh, 0) scale(1); }
}

/* ── top bar ───────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar-in {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; height: 60px;
}
.wordmark {
  font-weight: 600; font-size: 16px; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; flex: none;
}
.nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.nav a {
  color: var(--dim); text-decoration: none; font-size: 14.5px;
  padding: 7px 12px; border-radius: 8px; white-space: nowrap; transition: .16s;
}
.nav a:hover { color: var(--ink); background: #fafafa; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
@media (max-width: 680px) {
  .bar-in { gap: 12px; height: auto; padding: 10px 24px; flex-wrap: wrap; }
  .nav { order: 3; flex-basis: 100%; }
}

/* ── hero ───────────────────────────────────────────── */
header.hero { position: relative; padding: 110px 0 90px; text-align: center; }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 26px;
}
h1 {
  font-size: clamp(34px, 6vw, 62px); line-height: 1.1; margin: 0 auto 28px;
  letter-spacing: -.035em; font-weight: 600; max-width: 18ch;
}
h1 em { font-style: normal; color: var(--faint); }
.lede { font-size: 19px; color: var(--dim); max-width: 58ch; margin: 0 auto 40px; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center;
  font: 500 15px/1 inherit; text-decoration: none; border-radius: 10px;
  padding: 13px 24px; transition: .18s; border: 1px solid var(--line-2);
}
.btn-primary { color: #fff; background: var(--ink); border-color: var(--ink); }
.btn-primary:hover { background: #2a2a2a; border-color: #2a2a2a; }
.btn-ghost { color: var(--dim); background: #fff; }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }

/* A page that is not the home page does not need a 62px headline to say what it is. */
.pagehead { padding: 76px 0 8px; }
.pagehead h1 { max-width: 20ch; margin-left: 0; text-align: left; }
.pagehead .lede { margin-left: 0; max-width: 62ch; }

/* ── language switch ───────────────────────────────── */
.langswitch {
  display: flex; gap: 2px; padding: 2px; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
}
.langswitch button {
  font: 500 12.5px/1 inherit; background: transparent; color: var(--faint);
  border: 0; border-radius: 7px; padding: 7px 13px; cursor: pointer; transition: .18s;
}
.langswitch button:hover { color: var(--ink); }
.langswitch button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ── section ────────────────────────────────────────── */
h2 {
  font-size: 26px; letter-spacing: -.02em; font-weight: 600;
  color: var(--ink); margin: 110px 0 24px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.pagehead + h2, h2:first-of-type { margin-top: 74px; }
h3 { font-size: 17px; margin: 0 0 10px; letter-spacing: -.01em; font-weight: 600; }
p { margin: 0 0 16px; max-width: 68ch; }
.dim { color: var(--dim); }
.small { font-size: 13px; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--ink); }
code {
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f5f5f5; border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 5px; color: var(--ink);
}
ul { margin: 0 0 16px; padding-left: 20px; max-width: 68ch; }
li { margin-bottom: 6px; }

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 26px; transition: border-color .2s;
}
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { border-color: var(--line-2); }
.card p:last-child { margin-bottom: 0; }
.card .kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}
.card .icon { font-size: 20px; margin-bottom: 14px; display: block; color: var(--ink); }
.card h3 a { text-decoration: none; }
.card .more { font-size: 14px; color: var(--dim); margin-top: 14px; display: block; }
a.card:hover .more { color: var(--ink); }

figure {
  margin: 0 0 24px; padding: 32px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
figure svg { display: block; width: 100%; height: auto; overflow: visible; }
figcaption { margin-top: 20px; font-size: 13px; color: var(--faint); text-align: center; }
svg text { font-family: inherit; }
.n-box   { fill: #fafafa; stroke: #cfcfcf; stroke-width: 1; }
.n-box-2 { fill: #f6f6f6; stroke: #cfcfcf; stroke-width: 1; }
.n-box-3 { fill: #eeeeee; stroke: #c2c2c2; stroke-width: 1; }
.t-main { fill: #0a0a0a; font-size: 14px; font-weight: 600; }
.t-sub  { fill: #868686; font-size: 11px; }
.t-lab  { fill: #868686; font-size: 11px; font-weight: 600; letter-spacing: .09em; }
.t-flow { fill: #9a9a9a; font-size: 10.5px; }
.arrow  { stroke: #b4b4b4; stroke-width: 1.4; fill: none; }
.arrow-d{ fill: #b4b4b4; }
.wire   { stroke: #e6e6e6; stroke-width: 1; fill: none; }

table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 8px 0 6px; font-size: 14px; }
th, td { text-align: left; padding: 13px 14px; vertical-align: top; }
thead th { color: var(--faint); font-weight: 600; font-size: 11.5px; text-transform: uppercase;
           letter-spacing: .09em; border-bottom: 1px solid var(--line); }
tbody td { border-bottom: 1px solid #f0f0f0; }
tbody tr:last-child td { border-bottom: none; }
td:first-child { color: var(--faint); white-space: nowrap; }
.diff { color: var(--ink); font-weight: 600; }

.truth {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 26px 28px;
  border-left-width: 2px; border-left-style: solid;
}
.truth.ok { border-left-color: var(--ink); }
.truth.no { border-left-color: var(--line-2); }
.truth ul { color: var(--dim); }
.truth li::marker { color: var(--faint); }
.truth.ok li::marker { color: var(--ink); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 24px; transition: border-color .2s;
}
.stat:hover { border-color: var(--line-2); }
.stat b { display: block; font-size: 30px; letter-spacing: -.03em; font-weight: 600; }
.stat span { font-size: 13px; color: var(--faint); }

.note { font-size: 13px; color: var(--faint); }
.ph {
  border: 1px dashed var(--line-2); border-radius: 12px;
  padding: 16px 18px; color: var(--faint); font-size: 14px;
}

form.stack { display: grid; gap: 16px; max-width: 560px; }
label { display: grid; gap: 7px; font-size: 14px; color: var(--dim); }
input, textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px;
}
input:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
textarea { min-height: 130px; resize: vertical; }

/* ── footer ─────────────────────────────────────────── */
footer {
  margin-top: 110px; padding-top: 30px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 13px;
}
.foot-in { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; }
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer .spacer { flex: 1; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Both translations live in the document; the html lang attribute decides which one is
   shown, so the page still reads correctly with scripting off, in print, and to a crawler. */
html[lang="zh"] .lang-en, html[lang="en"] .lang-zh { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .stat:hover, .btn:hover { transform: none; }
  /* The background is decoration; someone who asked for less motion gets none of it. */
  .bg-grid, .bg-glow { animation: none; }
}