@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');

:root {
  --bg: #f2f1eb;
  --panel: rgba(252,252,247,.84);
  --panel-2: rgba(232,232,223,.78);
  --border: rgba(19,33,31,.13);
  --border-strong: rgba(19,33,31,.24);
  --ink: #13211f;
  --ink-soft: #263633;
  --muted: #5d6b68;
  --faint: #899491;
  --accent: #b64f32;
  --accent-ink: #a74329;
  --accent-soft: rgba(182,79,50,.09);
  --gold: #b64f32;
  --green: #287146;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --topbar: 68px;
}

:root[data-theme="dark"] {
  --bg: #081018;
  --panel: rgba(15,27,34,.84);
  --panel-2: rgba(27,43,51,.82);
  --border: rgba(220,235,231,.12);
  --border-strong: rgba(220,235,231,.22);
  --ink: #eef3f1;
  --ink-soft: #dce5e2;
  --muted: #8e9c9a;
  --faint: #53615f;
  --accent: #ff9e80;
  --accent-ink: #ffac93;
  --accent-soft: rgba(255,158,128,.11);
  --gold: #ff9e80;
  --green: #75d99b;
}

body {
  font-family: var(--sans);
  background: radial-gradient(circle at 88% 7%, rgba(82,195,255,.08), transparent 28rem),
    radial-gradient(circle at 7% 35%, var(--accent-soft), transparent 25rem), var(--bg);
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .38;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.topbar {
  height: var(--topbar); padding: 0 clamp(1rem,4vw,2.5rem);
  background: color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.topbar .h { display: inline-flex; align-items: center; font-family: var(--sans); font-size: .88rem; font-weight: 600; }
.topbar .h::before {
  content: "A"; width: 28px; height: 28px; margin-right: 10px; display: inline-grid; place-items: center;
  border: 1px solid color-mix(in srgb,var(--accent) 60%,var(--border)); border-radius: 50%;
  color: var(--accent); font: 400 .9rem var(--serif);
}
.topbar a, .topbar button { border-radius: 999px; font: 500 .62rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.wrap { max-width: 930px; padding-bottom: 6rem; }
header.hero { position: relative; overflow: hidden; padding: clamp(4.2rem,9vw,7.5rem) 0 clamp(3rem,6vw,5rem); }
header.hero::after {
  content: "2"; position: absolute; right: 0; bottom: -1rem; z-index: -1; color: var(--accent-soft);
  font: 500 clamp(8rem,22vw,16rem)/.8 var(--serif); pointer-events: none;
}
h1 { max-width: 800px; font-size: clamp(3.2rem,8vw,6.6rem); font-weight: 400; line-height: .88; letter-spacing: -.05em; }
.lede { max-width: 70ch; font-size: 1.08rem; line-height: 1.75; }
.pill { padding: .34rem .7rem; text-transform: uppercase; letter-spacing: .05em; }
nav.toc { padding: 1.4rem; border-radius: 14px; background: var(--panel); }
h2.cat-head { margin-top: 3.8rem; font-size: 2.2rem; font-weight: 400; letter-spacing: -.025em; }
article.prob { padding: 2rem 0; }
article.prob h3 { font-size: 1.45rem; font-weight: 500; }
p.answer, pre, nav.toc { border-color: var(--border); }
p.answer { border-left-color: var(--green); background: var(--panel); }
pre { border-radius: 12px; }
th { background: var(--panel-2); }
@media (max-width: 650px) {
  .topbar .h span, .topbar .sp a { display: none; }
  h1 { font-size: clamp(3rem,15vw,5rem); }
}