:root { --paper:#f6f1e8; --card:#fffaf4; --ink:#2c261f; --muted:#4f453c; --line:#e3d5c6; --terra:#7a3e28; --focus:#7a3e28; }
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0; color: var(--ink); background:
    radial-gradient(900px 420px at 0% -10%, #f3dfc8, transparent 60%),
    radial-gradient(700px 380px at 100% 0%, #e7f0df, transparent 55%), var(--paper);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 17px; line-height: 1.75;
}
h1, h2, h3 { font-family: "Yu Mincho", "Hiragino Mincho ProN", Palatino, "Times New Roman", serif; line-height: 1.35; font-weight: 600; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0.2rem 0 0.6rem; }
a { color: var(--terra); }
a, p, li, h1, h2, h3 { overflow-wrap: anywhere; }
.skip { position: absolute; left: 12px; top: -40px; background: #fffaf4; padding: 8px 12px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: 46rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.brand { letter-spacing: 0.16em; color: var(--terra); font-size: 0.9rem; margin: 0; }
nav, .crumbs { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin: 0.8rem 0 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 0.2rem 1rem 0.4rem; }
pre { white-space: pre-wrap; background: #f4eee6; border-radius: 0.8rem; padding: 0.8rem 1rem; font-family: inherit; }
.muted { color: var(--muted); }
footer { margin-top: 1.5rem; font-size: 0.95rem; }