:root {
  color-scheme: light;
  --ink: #202a38;
  --muted: #526174;
  --blue: #284fc5;
  --line: #d8dee6;
  --paper: #fafbfc;

  /* Latin first so digits, "AI" and the wordmark keep their shapes,
     then a CJK face picks up the rest. */
  --f-latin: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-zh: var(--f-latin), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --f-ja: var(--f-latin), "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
          "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif;
  --f-ko: var(--f-latin), "Apple SD Gothic Neo", Pretendard, "Malgun Gothic",
          "Noto Sans CJK KR", "Noto Sans KR", sans-serif;

  --font: var(--f-latin);
  --lh: 1.65;
  --lh-lead: 1.55;
  --tight: -.02em;
}

/* Per-language typography. CJK wants a little more air between lines and
   none of the negative tracking that suits Latin headings. */
html[lang^="zh"] { --font: var(--f-zh); --lh: 1.8; --lh-lead: 1.7; --tight: normal; }
html[lang="ja"]  { --font: var(--f-ja); --lh: 1.8; --lh-lead: 1.7; --tight: normal; }
html[lang="ko"]  { --font: var(--f-ko); --lh: 1.8; --lh-lead: 1.7; --tight: normal; }

/* Korean reads better broken at word boundaries than mid-word. */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }
html[lang="ja"] body { line-break: strict; }

/* Language names inside a page written in another language. */
[lang^="zh"] { font-family: var(--f-zh); }
[lang="ja"]  { font-family: var(--f-ja); }
[lang="ko"]  { font-family: var(--f-ko); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

::selection { background: #dce5ff; }

.page {
  width: min(58rem, calc(100% - 3rem));
  margin-inline: auto;
}

h1, h2, h3, p { margin: 0; }

h1, h2, h3 {
  color: var(--ink);
  line-height: 1.2;
}

a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 5px;
  border-radius: 2px;
}

.intro { padding-top: 2.75rem; }

h1 {
  font-size: clamp(2.65rem, 6.5vw, 4.25rem);
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: 1.08;
  font-family: var(--f-latin);
}

.period { color: var(--blue); }

.intro p {
  max-width: 45rem;
  margin-top: 1rem;
  font-size: 1.2rem;
  line-height: var(--lh-lead);
}

.example { margin-top: 1.9rem; }

.example > h2 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.messages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.message {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 5px;
  padding: 1.25rem 1.4rem 1.4rem;
}

.message.formal { border-top-color: #a45839; }

.message h3 {
  font-size: .9375rem;
  font-weight: 650;
  color: var(--blue);
  margin-bottom: 1.1rem;
}

.message.formal h3 { color: #934328; }

blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: var(--lh);
}

blockquote p + p { margin-top: .75rem; }

.example-note {
  max-width: 52rem;
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 1rem;
}

.explanation {
  margin-top: 2rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}

.prose { max-width: 47rem; }
.prose section + section { margin-top: 1.75rem; }

.prose h2 {
  margin-bottom: .65rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: var(--tight);
}

.prose p + p { margin-top: .8rem; }

.prompt {
  margin-top: 1rem;
  padding: .85rem 1.1rem;
  border-left: 3px solid #9db1ee;
  background: #f0f3fb;
}

.prompt figcaption {
  margin-bottom: .35rem;
  color: var(--muted);
  font-size: .875rem;
}

figure { margin: 0; }

footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  margin-top: 2rem;
  padding: 1.15rem 0 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .875rem;
}

/* Language switch: quiet enough to ignore, plain enough to find. */
.langs { line-height: 1.9; }

.langs > * + *::before {
  content: "·";
  margin: 0 .5rem;
  color: #aab3bf;
}

.langs a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.langs a:hover {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.langs [aria-current="page"] {
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 42rem) {
  .page { width: calc(100% - 2.25rem); }
  .intro { padding-top: 1.6rem; }
  .intro p { font-size: 1.0625rem; margin-top: .85rem; }
  .example { margin-top: 1.5rem; }
  .messages { grid-template-columns: 1fr; gap: 1rem; }
  .message { padding: 1rem 1.1rem 1.15rem; }
  .message h3 { margin-bottom: .7rem; }
  .explanation { margin-top: 1.5rem; padding-top: 1.5rem; }
}

@media print {
  body { background: #fff; font-size: 11pt; }
  .page { width: 100%; }
  .intro { padding-top: 0; }
  h1 { font-size: 32pt; }
  .message { break-inside: avoid; }
  h2 { break-after: avoid; }
  footer { padding-bottom: 0; }
  .langs { display: none; }
}