:root {
  --cream: #FFF4E8;
  --dot: #F9D3E0;
  --ink: #4A3542;
  --red: #C8323F;
  --sakura: #F7A8C4;
  --muted: #6A4A5A;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "M PLUS Rounded 1c", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream) radial-gradient(var(--dot) 2px, transparent 2.6px) 0 0 / 22px 22px;
  line-height: 1.6;
  padding: 32px 16px 64px;
}
main {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--ink);
  padding: 28px clamp(18px, 5vw, 44px) 36px;
}
header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
header img { width: 64px; height: 64px; border-radius: 16px; border: 2.5px solid var(--ink); }
header a { color: inherit; text-decoration: none; }
.brand { font-weight: 800; font-size: 26px; line-height: 1.1; }
.brand span { color: var(--red); }
.kana { color: var(--muted); font-size: 14px; font-weight: 700; }
h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.15; margin: 18px 0 4px; }
h2 { font-size: 20px; margin: 28px 0 6px; }
p, li { font-size: 16px; }
ul { padding-left: 22px; }
a { color: var(--red); font-weight: 700; }
a:focus-visible { outline: 3px solid var(--sakura); outline-offset: 2px; }
.lede { font-size: 17px; }
.box {
  background: #FFF9F0;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  padding: 12px 18px;
  margin: 18px 0;
}
.box ul { margin: 6px 0; }
nav { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 15px; }
.updated { color: var(--muted); font-size: 14px; }