:root {
  --ink: #1b2423;
  --muted: #5e6a66;
  --teal: #0e6b66;
  --paper: #f3efe4;
  --card: #fffbf5;
  --line: #e4d9c8;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Sans", "Noto Sans CJK JP", "PingFang SC", "Noto Sans SC",
    "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(14, 107, 102, 0.12), transparent 40%),
    linear-gradient(180deg, #e7f0ea 0%, var(--paper) 45%, #efe8d8 100%);
  line-height: 1.55;
}
.banner, main, footer { max-width: 720px; margin: 0 auto; padding: 24px 20px; }
.banner { padding-top: 40px; }
.brand {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}
h1 { margin: 0 0 12px; font-size: 1.8rem; line-height: 1.25; }
h2 { margin-top: 2rem; color: var(--teal); }
.lead, footer, .muted { color: var(--muted); }
.langs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 8px;
}
.langs a, main a { color: var(--teal); font-weight: 600; }
section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 16px 0;
}
ul { padding-left: 1.2rem; }
.todo {
  background: #fff3cd;
  border: 1px solid #e0c36a;
  border-radius: 8px;
  padding: 8px 10px;
  display: inline-block;
}