:root {
  --void: #05060e;
  --space: #12142b;
  --panel: #1b2420;
  --ion: #4a7c4e;
  --lavender: #9fcf8f;
  --gold: #7bc26a;
  --text: #eae8f7;
  --muted: #a9b4a5;
  --line: rgba(159, 207, 143, 0.22);
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono: 'Fragment Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--void); }
body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(900px 620px at 85% -10%, #16261a 0%, transparent 65%), var(--void);
  color: var(--text);
  font: 1.05rem/1.68 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #cdeec2; }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }
.shell { width: min(900px, calc(100% - 40px)); margin: 0 auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 0; }
.wordmark { color: var(--text); font: 700 0.95rem/1 var(--font-display); letter-spacing: .34em; text-decoration: none; }
.back { color: var(--muted); font-size: .9rem; }
main { padding: clamp(34px, 8vw, 100px) 0 72px; }
.eyebrow { margin: 0 0 16px; color: var(--lavender); font: .72rem/1.3 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }
h1, h2 { font-family: var(--font-display); line-height: 1.18; text-wrap: balance; }
h1 { max-width: 760px; margin: 0; font-size: clamp(2rem, 6vw, 4.3rem); }
h2 { margin: 44px 0 12px; font-size: clamp(1.2rem, 3vw, 1.7rem); }
p, li { max-width: 760px; }
.lede { max-width: 680px; color: var(--muted); font-size: 1.18rem; }
.card { margin-top: 36px; padding: clamp(22px, 4vw, 42px); border: 1px solid var(--line); border-radius: 20px; background: rgba(20, 30, 22, .78); box-shadow: 0 24px 80px rgba(0, 0, 0, .22); }
.card h2:first-child { margin-top: 0; }
.facts { display: grid; grid-template-columns: minmax(130px, .38fr) 1fr; gap: 10px 20px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--lavender); font-family: var(--font-mono); font-size: .8rem; }
.facts dd { margin: 0; }
.notice { padding: 16px 18px; border-left: 3px solid var(--gold); background: rgba(123, 194, 106, .09); }
footer { padding: 24px 0 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

/* Memory-cue methodology page. The rows stay flat inside the outer card so
   the explanation reads as one process instead of a stack of nested cards. */
h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1rem; line-height: 1.35; }
.method-list, .example-list { margin-top: 22px; border-top: 1px solid var(--line); }
.method-step, .cue-example { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.method-step:last-child, .cue-example:last-child { border-bottom: 0; }
.method-step p, .cue-example p { margin: 0; }
.method-number { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); font: 700 1rem/1 var(--font-mono); }
.hanzi-example { color: var(--lavender); font-family: 'STKaiti', 'KaiTi', serif; font-size: 2.8rem; line-height: 1; text-align: center; }
.source-list { padding-left: 1.2em; }
.source-list li + li { margin-top: 10px; }
.source-note { margin-top: 24px; color: var(--muted); font-size: .95rem; }

/* Component terminology stays flat and text-led. The equation gives the
   compact-form relationship one visual anchor without turning it into a card
   inside a card. */
.term-list { display: grid; grid-template-columns: minmax(120px, .34fr) 1fr; gap: 0 24px; margin: 22px 0 0; border-top: 1px solid var(--line); }
.term-list dt, .term-list dd { margin: 0; padding: 15px 0; border-bottom: 1px solid var(--line); }
.term-list dt { color: var(--lavender); font: .8rem/1.5 var(--font-mono); }
.term-list dd { padding-left: 4px; }
.term-list [lang="zh-Hans"] { color: var(--lavender); font-size: 1.12em; }
.component-demo { display: grid; grid-template-columns: minmax(210px, .7fr) 1fr; gap: 28px; align-items: center; padding: 28px 0; }
.component-demo p { margin: 0; }
.component-equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font: 1.1rem/1 var(--font-mono); }
.component-equation [lang="zh-Hans"] { color: var(--lavender); font-family: 'STKaiti', 'KaiTi', serif; font-size: 2.5rem; }

/* Tables and tier keys, used by the learning-mechanics page (chac/mastery/).
   The dot colours are lifted from the app's own mastery bar so the page and
   the profile screen read as the same thing. */
.table-wrap { margin: 18px 0 4px; overflow-x: auto; }
table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: .97rem; }
th, td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--lavender); font: .74rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.tier { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.dot { width: 11px; height: 11px; flex: none; border-radius: 50%; }
.dot.unseen { background: #a48a6b; }
.dot.learning { background: #b5622a; }
.dot.familiar { background: #c89a55; }
.dot.strong { background: #789269; }
.dot.sealed { background: #2f6b4f; }

@media (max-width: 560px) { .shell { width: min(100% - 28px, 900px); } .facts { grid-template-columns: 1fr; gap: 4px; } .facts dd { margin-bottom: 12px; } }
@media (max-width: 560px) { .method-step, .cue-example { grid-template-columns: 46px 1fr; gap: 12px; } .method-number { width: 38px; height: 38px; } .hanzi-example { font-size: 2.25rem; } }
@media (max-width: 560px) { .term-list { grid-template-columns: 1fr; gap: 0; } .term-list dt { padding-bottom: 2px; border-bottom: 0; } .term-list dd { padding-top: 0; padding-left: 0; } .component-demo { grid-template-columns: 1fr; gap: 18px; } .component-equation { justify-content: flex-start; gap: 8px; } .component-equation [lang="zh-Hans"] { font-size: 2.1rem; } }
/* On a phone the tables fit the card and wrap instead of needing a sideways
   swipe to reach the last column. .table-wrap stays a scroll container as the
   fallback, so nothing can ever push the page itself wide. */
@media (max-width: 560px) { table { min-width: 0; font-size: .9rem; } th, td { padding: 9px 10px 9px 0; } }