/* CrazeCode browser surface.
   No JavaScript, no external font or asset request: the page must render
   completely under `default-src 'none'` plus same-origin style and image.
   Only standard font weights are used because no variable font is loaded and
   non-standard weights silently collapse to the nearest available face. */

/* Palette rule: the neutrals stay neutral.
   Sampling apple.com, vercel.com and linear.app shows their greys hold a
   hue spread of 0–2 and lean very slightly cool. The previous palette tinted
   every neutral green (spread 3 on the paper, 15 on body text, 21 on secondary
   text, 41 on the brand), which reads organic rather than precise no matter how
   little saturated area the page has. Colour on this page now comes almost
   entirely from the terminal screenshot, which is the product itself. */

:root {
  --ink: #1d1d1f;
  --ink-soft: #5c5c61;
  --ink-faint: #6e6e73;
  --paper: #f5f5f7;
  --surface: #ffffff;
  --line: #d2d2d7;
  --line-strong: #babac0;
  /* The primary action is ink, not a hue: a black button is the most neutral
     way to be unmistakably the primary action. */
  --brand: #1d1d1f;
  --brand-ink: #ffffff;
  --brand-hover: #000000;
  /* Signal colours appear only as a small dot plus one word in the trust
     table, so their saturation never occupies meaningful page area. */
  --ok: #1a7f37;
  --warn: #8a5300;
  --term-bg: #0d1117;
  --term-line: #22272e;
  --danger: #b3261e;
  --danger-bg: #fdf1f0;
  --danger-ink: #8c1d18;
  --focus: #0071e3;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f2f4;
    --ink-soft: #a8a8ad;
    --ink-faint: #8e8e93;
    --paper: #0a0a0b;
    --surface: #141416;
    --line: #2a2a2e;
    --line-strong: #3d3d42;
    --brand: #f2f2f4;
    --brand-ink: #0a0a0b;
    --brand-hover: #ffffff;
    --ok: #3fb950;
    --warn: #d29922;
    --term-line: #30363d;
    --danger: #f0837d;
    --danger-bg: #241413;
    --danger-ink: #ffc9c5;
    --focus: #4c9bff;
  }
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: var(--paper); }
a { color: inherit; font-weight: 600; text-decoration: none; }
h1, h2, h3 { text-wrap: balance; }
:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- bilingual pairing ---------- */

/* Every reader-facing string ships in both languages, English above Chinese.
   The failure mode to avoid is the gloss: a small grey Chinese fragment
   trailing the English on the same line, which reads as machine output. The
   rule here is borrowed from bilingual signage — each language is its own
   line, set deliberately, sharing a left edge and a tight common leading, so
   the pair reads as one designed unit. The `lang` attributes are not
   decorative: without them a screen reader pronounces Chinese with English
   phonemes. */
[lang="en"], [lang="zh-Hans"] { display: block; }
/* The second language is never dimmed with `opacity`. Opacity blends toward
   the background and silently drops effective contrast — measured at 3.2:1 to
   3.9:1 on the faint tokens, below WCAG AA. Hierarchy comes from size and
   weight, and every colour is a token that has been measured on its
   background. */
[lang="zh-Hans"] { font-variant-east-asian: proportional-width; }

/* Inline-level pairs (buttons, links, table cells, terms) stay compact. */
a [lang], button [lang], .verdict [lang], .cheats dt [lang] { line-height: 1.35; }

/* The English line is the lead-in: a size step down, tracked slightly open so
   it reads as a label rather than a truncated sentence. The Chinese line
   carries the body size. Neither is greyed out relative to the other. */
h1 [lang="en"], h2 [lang="en"], h3 [lang="en"] { letter-spacing: 0; }
h1 [lang="zh-Hans"], h2 [lang="zh-Hans"], h3 [lang="zh-Hans"] {
  letter-spacing: 0; color: var(--ink-soft); font-weight: 600;
}
p [lang="en"], li > [lang="en"], dd [lang="en"], td [lang="en"],
figcaption [lang="en"], caption [lang="en"] { margin-bottom: .18em; }
p [lang="zh-Hans"], li > [lang="zh-Hans"], dd [lang="zh-Hans"], td [lang="zh-Hans"],
figcaption [lang="zh-Hans"], caption [lang="zh-Hans"] { color: var(--ink-faint); }

/* ---------- shared shell ---------- */

.welcome-nav, .auth-nav, .welcome-main, .site-foot-inner {
  width: min(100% - 3rem, 68rem);
  margin: 0 auto;
}
.welcome-nav, .auth-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.4rem 0;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  flex: 0 0 auto; white-space: nowrap;
  font-size: 1rem; font-weight: 700; letter-spacing: 0;
}
.wordmark img { display: block; width: 1.875rem; height: 1.875rem; }
.wordmark .brand-names { display: grid; gap: .08rem; line-height: 1; }
.wordmark .brand-names strong { font-size: .96rem; letter-spacing: 0; }
.wordmark .brand-names small { color: var(--ink-soft); font-size: .68rem; font-weight: 600; }
.welcome-nav nav { display: flex; align-items: center; gap: 1.2rem; }
.welcome-nav nav [lang="en"] { font-size: .88rem; font-weight: 600; }
.welcome-nav nav [lang="zh-Hans"] { color: var(--ink-soft); font-size: .72rem; font-weight: 500; }
.nav-join {
  padding: .38rem .9rem; border-radius: 5px; text-align: center;
  background: var(--brand); color: var(--brand-ink);
}
.nav-join:hover { background: var(--brand-hover); }

/* ---------- landing ---------- */

.welcome-body { background: var(--paper); }
.eyebrow { margin: 0 0 1.2rem; color: var(--ink-faint); font-weight: 700; }
.eyebrow [lang="en"] { font-size: .71rem; letter-spacing: 0; text-transform: uppercase; }
.eyebrow [lang="zh-Hans"] { margin-top: .25em; font-size: .74rem; letter-spacing: 0; color: var(--ink-soft); }
.welcome-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 3.5rem; align-items: center; padding: 3.5rem 0 4.5rem;
}
/* Measure is set in `em`, not `ch`. `ch` is the advance of "0" in the Latin
   fallback, but a Han character is a full em, so a ch-based limit silently
   halves the line for Chinese text and breaks the heading mid-phrase. */
.welcome-copy h1 { max-width: 15em; margin: 0; }
.welcome-copy h1 [lang="en"] {
  font-size: 3.2rem; font-weight: 700;
  line-height: 1.08; letter-spacing: 0;
}
.welcome-copy h1 [lang="zh-Hans"] {
  margin-top: .25em;
  font-size: 1rem; font-weight: 600;
  line-height: 1.3; color: var(--ink-soft);
}
/* Chinese has no spaces, so the browser may break a heading inside a phrase.
   Each phrase is its own inline-block, which makes the phrase boundaries the
   only break opportunities at every viewport width. */
.welcome-copy h1 [lang] span { display: inline-block; }
.hero-claim { max-width: 25em; margin: 1rem 0 0; }
.hero-claim [lang="en"] { font-size: 1.42rem; font-weight: 600; line-height: 1.28; color: var(--ink); }
.hero-claim [lang="zh-Hans"] { margin-top: .22rem; font-size: 1.08rem; font-weight: 600; color: var(--ink-soft); }
.lede { max-width: 30em; margin: 1.5rem 0 0; }
.lede [lang="en"] { color: var(--ink-soft); font-size: 1rem; }
.lede [lang="zh-Hans"] { color: var(--ink-faint); font-size: .95rem; }
.lede strong { color: var(--ink); font-weight: 600; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.primary-link, .quiet-link {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 3.1rem; padding: .5rem 1.3rem; border-radius: 5px;
  border: 1px solid var(--brand);
}
.primary-link [lang="en"], .quiet-link [lang="en"] { font-size: .92rem; font-weight: 600; }
.primary-link [lang="zh-Hans"], .quiet-link [lang="zh-Hans"] { font-size: .78rem; font-weight: 500; }
.primary-link [lang="zh-Hans"] { color: #e8e8ed; }
.quiet-link [lang="zh-Hans"] { color: var(--ink-soft); }
.primary-link { background: var(--brand); color: var(--brand-ink); }
.primary-link:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.quiet-link { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.quiet-link:hover { border-color: var(--brand); }
.trust-note { margin: 1.6rem 0 0; font-size: .84rem; }
.trust-note [lang="en"] { color: var(--ink-faint); }
.trust-note [lang="zh-Hans"] { color: var(--ink-soft); }

.hero-visual {
  /* figure carries a browser default margin of 1em 40px, which would inset the
     terminal from the grid column it is supposed to fill. */
  margin: 0;
  border: 1px solid var(--term-line); border-radius: 9px;
  overflow: hidden; background: var(--term-bg);
}
.hero-terminal { min-height: 24rem; color: #c9d1d9; }
.terminal-bar {
  display: flex; align-items: center; gap: .45rem;
  min-height: 2.4rem; padding: 0 1rem; border-bottom: 1px solid var(--term-line);
  color: #8b949e; font: 500 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.terminal-bar span { width: .7rem; height: .7rem; border-radius: 50%; background: #484f58; }
.terminal-bar strong { margin-left: .35rem; font-weight: 500; }
.hero-terminal pre {
  margin: 0; padding: 1.15rem 1.2rem 1.35rem; overflow: hidden;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font: 500 .77rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.term-prompt, .term-accent { color: #79c0ff; }
.term-strong, .term-section { color: #f0f6fc; font-weight: 700; }
.term-muted { color: #8b949e; }
.term-section { color: #56d4dd; }
.hero-visual figcaption {
  padding: .8rem 1.1rem; border-top: 1px solid var(--term-line);
  color: #8b949e; font-size: .8rem;
}
.hero-visual figcaption [lang="zh-Hans"] { color: #6e7681; }

/* ---------- capability sections ---------- */

.section { padding: 3.5rem 0; border-top: 1px solid var(--line); }
.section > h2 { margin: 0 0 .7rem; }
.section > h2 [lang="en"] { font-size: 1.4rem; font-weight: 700; letter-spacing: 0; }
.section > h2 [lang="zh-Hans"] { font-size: 1.12rem; font-weight: 600; color: var(--ink-soft); }
.section > .section-lede { max-width: 34em; margin: 0 0 2.2rem; font-size: .95rem; }
.section > .section-lede [lang="en"] { color: var(--ink-soft); }
.section > .section-lede [lang="zh-Hans"] { color: var(--ink-faint); }
.capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.capabilities article {
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1.4rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface);
}
.capabilities h3 { margin: 0; }
.capabilities h3 [lang="en"] { font-size: 1rem; font-weight: 700; }
.capabilities h3 [lang="zh-Hans"] { font-size: .93rem; font-weight: 600; color: var(--ink-soft); }
.capabilities p { margin: 0; font-size: .89rem; }
.capabilities p [lang="en"] { color: var(--ink-soft); }
.capabilities p [lang="zh-Hans"] { color: var(--ink-faint); }
.capabilities code, .boundary code, .start code, .lede code {
  padding: .1em .35em; border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; font-weight: 600;
}

/* ---------- trust boundary ---------- */

.boundary { width: 100%; border-collapse: collapse; font-size: .93rem; }
.boundary caption { margin-bottom: 1rem; color: var(--ink-soft); font-size: .96rem; text-align: left; }
.boundary th, .boundary td {
  padding: .85rem 1rem; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.boundary thead th {
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-faint); font-size: .78rem; font-weight: 700; letter-spacing: 0;
}
.boundary tbody th { width: 30%; font-weight: 600; }
.boundary td { color: var(--ink-soft); }
.boundary .verdict { width: 12ch; white-space: nowrap; font-weight: 600; }
/* The signal is a small dot plus one word, so the only saturated pixels on the
   page outside the terminal screenshot amount to a few dozen.
   The dot is an inline-block, not flex: making a `td` a flex container takes
   it out of table layout, and its border-bottom then stops at the content
   width instead of spanning the column. */
.boundary .verdict [lang="en"]::before {
  content: ""; display: inline-block; vertical-align: .1em;
  width: .44rem; height: .44rem; margin-right: .45rem;
  border-radius: 50%; background: currentColor;
}
.boundary .no { color: var(--ok); }
.boundary .yes { color: var(--warn); }

/* ---------- getting started ---------- */

.start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.start ol.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.5rem; counter-reset: step; }
.start ol.steps > li { position: relative; padding-left: 2.4rem; counter-increment: step; }
.start ol.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  color: var(--ink-faint); font-size: .78rem; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.start ol.steps > li > [lang="en"] { font-size: .97rem; font-weight: 600; }
.start ol.steps > li > [lang="zh-Hans"] { font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.start ol.steps p { margin: .5rem 0 0; font-size: .88rem; }
.start ol.steps p [lang="en"] { color: var(--ink-soft); }
.start ol.steps p [lang="zh-Hans"] { color: var(--ink-faint); }
.first-success {
  grid-column: 1 / -1; padding: 1rem 1.1rem; border-left: 3px solid var(--ink);
  background: var(--surface);
}
.first-success p { margin: 0; }
.first-success p + p { margin-top: .4rem; }
.first-success strong [lang] { display: inline; }

/* ---------- command cheatsheet ---------- */

.cheats {
  display: grid; grid-template-columns: minmax(11rem, auto) minmax(0, 1fr);
  gap: 0; margin: 0; border-top: 1px solid var(--line);
}
.cheats dt, .cheats dd {
  margin: 0; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--line);
}
.cheats dt code {
  padding: .12em .4em; border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem; font-weight: 600; white-space: nowrap;
}
.cheats dd { font-size: .89rem; }
.cheats dd [lang="en"] { color: var(--ink-soft); }
.cheats dd [lang="zh-Hans"] { color: var(--ink-faint); }
pre.command {
  margin: 0; padding: 1.1rem 1.2rem; border-radius: 8px; overflow-x: auto;
  background: var(--term-bg); color: #c9d1d9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .87rem; line-height: 1.8;
}
/* Both of these clear WCAG AA on the terminal background: the comment lines
   carry real usage information, not decoration. */
pre.command .prompt { color: #7d8590; user-select: none; }
pre.command .flag { color: #79c0ff; }
pre.command .note { color: #8b949e; }

/* ---------- footer ---------- */

.site-foot { padding: 2rem 0 3rem; border-top: 1px solid var(--line); }
.site-foot-inner {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between; color: var(--ink-faint); font-size: .84rem;
}
.site-foot p { margin: 0; }
.site-foot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

/* ---------- public Demo catalog ---------- */

.explore .explore-head { padding-top: 2.5rem; border-top: 0; }
.explore .explore-head h1 { max-width: 20em; margin: 0; }
.explore .explore-head h1 [lang="en"] { font-size: 2.55rem; line-height: 1.12; }
.explore .explore-head h1 [lang="zh-Hans"] {
  margin-top: .25em; font-size: 1.45rem; color: var(--ink-soft);
}
.explore .explore-head .lede { max-width: 43em; }
.explore-search {
  display: grid; grid-template-columns: minmax(0, 28rem) auto;
  align-items: end; gap: .75rem; max-width: 38rem; margin-top: 2rem;
}
.explore-search button { min-width: 7rem; }
.demo-list { display: grid; gap: 1rem; }
.demo-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 2rem; padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}
.demo-item:first-child { border-top: 1px solid var(--line); }
.demo-item h3 { margin: .25rem 0 .55rem; }
.demo-item h3 [lang="en"] { font-size: 1.15rem; }
.demo-item h3 [lang="zh-Hans"] { font-size: 1rem; color: var(--ink-soft); }
.demo-item p { max-width: 48rem; margin: 0; }
.demo-item p [lang="en"] { color: var(--ink-soft); }
.demo-item p [lang="zh-Hans"] { color: var(--ink-faint); }
.demo-kind [lang] { font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.demo-command { margin-top: .8rem !important; }
.demo-command code {
  padding: .2rem .45rem; border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.explore-terminal .command { max-width: 42rem; }

/* ---------- auth surfaces ---------- */

.auth-body { min-height: 100vh; background: var(--brand); }
@media (prefers-color-scheme: dark) { .auth-body { background: var(--paper); } }
.auth-nav { color: var(--brand-ink); }
@media (prefers-color-scheme: dark) { .auth-nav { color: var(--ink); } }
.auth-nav p { margin: 0; color: #3a3a3c; font-size: .84rem; text-align: right; }
.auth-nav p [lang="en"] { color: #d2d2d7; }
.auth-nav p [lang="zh-Hans"] { color: #a8a8ad; }
@media (prefers-color-scheme: dark) { .auth-nav p { color: var(--ink-soft); } }
.auth-main { width: min(100% - 2rem, 34rem); margin: 5vh auto 0; padding-bottom: 4rem; }
.auth-surface {
  padding: 2.75rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--ink);
}
.auth-surface h1 { margin: 0; font-size: 2.15rem; font-weight: 700; line-height: 1.15; }
.auth-surface .subtitle { margin: .45rem 0 0; color: var(--ink-soft); font-size: .92rem; }
.server { overflow-wrap: anywhere; margin: .7rem 0 0; color: var(--ink-faint); font-size: .8rem; }
.notice {
  margin: 1rem 0; padding: .75rem .9rem; border-radius: 6px;
  border-left: 3px solid var(--danger); color: var(--danger-ink); background: var(--danger-bg);
}
form { display: grid; gap: 1rem; margin-top: 1.5rem; }
label { display: grid; gap: .12rem; color: var(--ink); font-weight: 600; }
label > [lang="en"] { font-size: .86rem; }
label > [lang="zh-Hans"] { font-size: .8rem; color: var(--ink-soft); font-weight: 500; }
label > input, label > textarea, label > select { margin-top: .35rem; }
button [lang="en"] { font-size: .92rem; font-weight: 600; }
button [lang="zh-Hans"] { color: #e8e8ed; font-size: .76rem; font-weight: 500; }
button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; }
.auth-surface h1 [lang="en"] { font-size: 2rem; font-weight: 700; letter-spacing: 0; }
.auth-surface h1 [lang="zh-Hans"] { margin-top: .18em; font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); }
.auth-surface .subtitle [lang="en"] { color: var(--ink-soft); font-size: .9rem; }
.auth-surface .subtitle [lang="zh-Hans"] { color: var(--ink-faint); font-size: .86rem; }
.auth-surface > p a [lang="en"] { font-size: .9rem; }
.auth-surface > p a [lang="zh-Hans"] { color: var(--ink-soft); font-size: .8rem; }
.facts dt [lang="en"] { font-size: .84rem; }
.facts dt [lang="zh-Hans"] { font-size: .78rem; color: var(--ink-soft); font-weight: 500; }
.boundary thead th [lang="zh-Hans"] { font-weight: 600; color: var(--ink-soft); }
.boundary tbody th [lang="en"] { font-size: .93rem; }
.boundary tbody th [lang="zh-Hans"] { font-size: .86rem; color: var(--ink-soft); font-weight: 500; }
.verdict [lang="zh-Hans"] { font-size: .84rem; }
.site-foot [lang="zh-Hans"] { color: var(--ink-soft); }
input, textarea, select {
  width: 100%; min-height: 2.8rem; padding: .6rem .7rem; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font: inherit; font-weight: 400;
}
textarea { min-height: 6.5rem; resize: vertical; }
button {
  min-height: 2.8rem; padding: .55rem 1.15rem; border-radius: 6px;
  border: 1px solid var(--brand); background: var(--brand); color: var(--brand-ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
button:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.actions form { display: block; margin-top: 0; }
.actions .danger { border-color: var(--danger); background: var(--danger); color: #fff; }
.facts {
  display: grid; grid-template-columns: minmax(9rem, .7fr) minmax(0, 1.3fr);
  gap: .55rem 1rem; margin: 1.5rem 0; padding: 1rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper);
}
.facts dt { color: var(--ink-faint); font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.auth-surface > p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.profile-intro {
  margin: 1.35rem 0 0; padding: .9rem 1rem; border-radius: 6px;
  border-left: 2px solid var(--line-strong); background: var(--paper);
  color: var(--ink-soft);
}
.profile-intro p:last-child { margin: 0; font-size: .89rem; }
label > .hint { color: var(--ink-faint); font-size: .85em; font-weight: 400; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .welcome-hero { grid-template-columns: 1fr; gap: 2.4rem; padding: 2.5rem 0 3.5rem; }
  .welcome-copy h1 { max-width: 14em; }
  .capabilities { grid-template-columns: 1fr; }
  .start { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 760px) {
  .welcome-nav, .auth-nav, .welcome-main, .site-foot-inner { width: min(100% - 2rem, 68rem); }
  .auth-main { margin-top: 1.5rem; }
  .auth-surface { padding: 1.75rem; }
  /* The caption must be re-declared as a block here. Once the table itself is
     display:block the default table-caption box has no table to size against
     and collapses to a few characters wide. */
  .boundary, .boundary caption, .boundary tbody, .boundary tr,
  .boundary th, .boundary td { display: block; }
  .boundary thead { display: none; }
  /* With the header row hidden, a bare 是/否 has lost its column label, so the
     dot is replaced by the label itself. Every geometry declaration from the
     desktop dot has to be unset here, or the label renders inside a 0.44rem
     filled circle. */
  .boundary .verdict { width: auto; }
  .boundary .verdict [lang="en"]::before {
    content: attr(data-label) "：";
    display: inline; width: auto; height: auto; margin-right: 0;
    border-radius: 0; background: none; vertical-align: baseline;
    color: var(--ink-faint); font-weight: 400;
  }
  .boundary tr { padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .boundary th, .boundary td { width: auto; padding: .15rem 0; border: 0; }
  /* `.boundary tbody th` outranks `.boundary th`, so the desktop column width
     survives into the card layout and squeezes the row heading unless it is
     reset at the same specificity. */
  .boundary tbody th { width: auto; font-size: 1rem; }
  .facts { grid-template-columns: 1fr; gap: .2rem; }
  .facts dd { margin-bottom: .55rem; }
  .explore-search, .demo-item { grid-template-columns: 1fr; }
  .demo-item { gap: 1rem; }
  .demo-item .quiet-link { width: 100%; }
}
@media (max-width: 480px) {
  .welcome-copy h1 [lang="en"] { font-size: 2.35rem; }
  .hero-claim [lang="en"] { font-size: 1.2rem; }
  .hero-claim [lang="zh-Hans"] { font-size: 1rem; }
  .auth-surface h1, .auth-surface h1 [lang="en"] { font-size: 1.7rem; }
  .welcome-nav nav { gap: .9rem; font-size: .86rem; }
  .welcome-actions { display: grid; }
  .primary-link, .quiet-link { width: 100%; }
  .auth-nav p { display: none; }
}
@media (max-width: 360px) {
  .welcome-nav { gap: .55rem; }
  .wordmark { gap: .4rem; font-size: .88rem; }
  .wordmark img { width: 1.7rem; height: 1.7rem; }
  .welcome-nav nav { gap: .55rem; }
  .welcome-nav nav [lang="en"] { font-size: .78rem; }
  .welcome-nav nav [lang="zh-Hans"] { font-size: .65rem; }
  .nav-join { padding: .34rem .52rem; }
}

/* ---------- guide ---------- */

.guide .guide-head { padding-top: 2.5rem; border-top: 0; }
.guide .guide-head h1 { max-width: 18em; margin: 0 0 .4rem; }
.guide .guide-head h1 [lang="en"] {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 700;
  line-height: 1.14; letter-spacing: 0;
}
.guide .guide-head h1 [lang="zh-Hans"] {
  margin-top: .28em; font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600; line-height: 1.3; color: var(--ink-soft);
}
.guide .guide-head .lede { max-width: 40em; }
.guide .section > .command { margin-top: 1.4rem; }
.guide h3.sub { margin: 2rem 0 .6rem; }
.guide h3.sub [lang="en"] { font-size: 1rem; font-weight: 700; }
.guide h3.sub [lang="zh-Hans"] { font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
/* The traps list reads as a checklist, not as a reference table. */
.cheats.traps { grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); }
.cheats.traps dt { padding-right: 1.5rem; }
.cheats.traps dt [lang="en"] { font-size: .93rem; font-weight: 700; }
.cheats.traps dt [lang="zh-Hans"] { font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 760px) {
  .cheats, .cheats.traps { grid-template-columns: 1fr; }
  .cheats dt { padding-bottom: 0; border-bottom: 0; }
  .cheats dd { padding-top: .2rem; }
}