:root {
  --bg: #d9cfff;
  --ink: #1a1238;
  --v: #6a4ff0;
  --v-soft: #4a3d8a;
  --card: #fff;
  --display: "Archivo Black", "Arial Black", sans-serif;
  --text: "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  background: var(--bg); color: var(--ink); font: 500 16px/1.65 var(--text);
  -webkit-font-smoothing: antialiased; padding: 0 16px;
}
::selection { background: var(--v); color: #fff; }
:focus-visible { outline: 3px solid var(--v); outline-offset: 3px; border-radius: 4px; }
a { color: var(--ink); text-decoration-color: var(--v); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--v); }

.hd, .doc, .ft { max-width: 720px; margin: 0 auto; }

.hd { padding: 28px 0 8px; }
.back { font: 600 13px var(--text); color: var(--v-soft); text-decoration: none; }
.back:hover { color: var(--ink); }
.hd h1 { margin-top: 28px; font: clamp(56px, 13vw, 112px)/.84 var(--display); letter-spacing: -.045em; }
.hd h1 span { color: var(--v); }
.upd { margin-top: 30px; font: 600 13px var(--text); color: var(--v-soft); }
.upd time { color: var(--ink); }

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.toc a {
  font: 15px/1 var(--display); letter-spacing: -.02em; text-decoration: none;
  padding: 9px 15px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--card); box-shadow: 3px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s;
}
.toc a:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 5px 0 var(--ink); }
.toc a:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }

.doc { margin-top: 28px; }
.lede { font-size: 17px; }
.doc section {
  margin-top: 28px; padding: 26px 28px; background: var(--card);
  border: 3px solid var(--ink); border-radius: 22px; box-shadow: 5px 6px 0 var(--ink);
}
.doc h2 { font: clamp(24px, 4.5vw, 32px)/1.05 var(--display); letter-spacing: -.03em; margin-bottom: 6px; }
.doc h3 { font: 700 16px/1.3 var(--text); margin-top: 22px; color: var(--v); }
.doc p, .doc ul { margin-top: 8px; }
.doc ul { padding-left: 20px; }
.doc li + li { margin-top: 4px; }
.doc li::marker { color: var(--v); }
.small { font-size: 13px; color: var(--v-soft); }

.ft { display: flex; justify-content: space-between; gap: 16px; padding: 36px 0 44px; font: 600 13px var(--text); color: var(--v-soft); }
.ft a { color: var(--v-soft); text-decoration: none; }
.ft a:hover { color: var(--ink); }

@media (max-width: 560px) {
  .doc section { padding: 20px 18px; border-radius: 18px; box-shadow: 4px 5px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .toc a { transition: none; } }
@media print {
  body { background: #fff; }
  .toc, .back, .ft a { display: none; }
  .doc section { box-shadow: none; border-width: 1px; break-inside: auto; }
}