:root {
  --ground:#f7f9fc; --card:#fff; --ink:#102344; --ink-2:#4a586e; --ink-3:#546174;
  --line:#e1e8f1; --gold:#9a6f1e; --gold-soft:#fdf6e8;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#080d18; --card:#0d1424; --ink:#eef2f8; --ink-2:#93a3bc; --ink-3:#64758f;
    --line:#17233a; --gold:#f3c572; --gold-soft:#17161022;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink-2);
  font: 400 16px/1.65 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.doc { max-width: 44rem; margin: 0 auto; padding: 3rem 1.25rem 6rem; }
.back {
  display: inline-block; margin-bottom: 2.5rem; color: var(--ink-3);
  text-decoration: none; font-size: .8125rem; letter-spacing: .04em;
}
.back:hover { color: var(--gold); }
h1 { color: var(--ink); font-size: 2rem; font-weight: 300; letter-spacing: -.02em; margin: 0 0 .375rem; }
h2 { color: var(--ink); font-size: 1.0625rem; font-weight: 600; margin: 2.25rem 0 .625rem; }
.meta { color: var(--ink-3); font-size: .8125rem; margin: 0 0 2rem; }
p { margin: 0 0 .875rem; }
a { color: var(--gold); }
ul { padding-left: 1.125rem; margin: 0 0 .875rem; }
li { margin-bottom: .375rem; }
.notice {
  background: var(--gold-soft); border: 1px solid var(--gold);
  border-left-width: 3px; border-radius: .5rem; padding: 1rem 1.125rem;
  margin: 0 0 2rem; color: var(--ink-2); font-size: .9375rem;
}
.notice strong { color: var(--ink); display: block; margin-bottom: .375rem; }
.placeholder {
  margin-top: 2.5rem; padding: .875rem 1rem; border: 1px dashed var(--line);
  border-radius: .5rem; font-size: .8125rem; color: var(--ink-3);
}