:root {
  --paper:#faf4e6; --surface:#fffdf7; --ink:#1c1a15; --muted:#6e6656; --line:#e7e0cd;
  --accent:#fbd100; --on-accent:#1c1a15;
  --font-display:"Bricolage Grotesque Variable",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono Variable",ui-monospace,"Cascadia Code",Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#15130d; --surface:#1e1b14; --ink:#f1ead7; --muted:#a89e89; --line:#322d22; --on-accent:#15130d; }
}
*,*::before,*::after { box-sizing:border-box; }
html { color-scheme:light dark; text-underline-offset:.18em; }
body {
  margin:0; min-height:100dvh; padding:clamp(2rem,6vw,4rem) clamp(1.1rem,5vw,2.5rem);
  font-family:var(--font-body); line-height:1.6; color:var(--ink); background:var(--paper);
}
h2 {
  max-width:44rem; margin:0 auto 1.5rem; text-align:center; color:var(--ink);
  font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; font-size:2.2rem;
}
#intro {
  max-width:44rem; margin:0 auto; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:14px; padding:clamp(1.5rem,4vw,2.25rem);
  box-shadow:0 18px 40px rgba(28,26,21,.08);
}
#intro p { margin:0 0 1.1rem; }
#intro p:last-child { margin-bottom:0; }
a { color:inherit; text-decoration-line:underline; text-decoration-color:var(--accent); text-decoration-thickness:.12em; }
a:hover { text-decoration-thickness:.22em; }
#intro img { border-radius:10px; background:#fff; padding:7px; border:1px solid var(--line); }
kbd { font-family:var(--font-mono); background:var(--accent); color:var(--on-accent); border-radius:6px; padding:.05em .5em; font-weight:600; }
code, blockcode { font-family:var(--font-mono); color:var(--ink) !important; word-break:break-all; }
blockcode { display:inline-block; margin-top:.4rem; color:var(--muted) !important; letter-spacing:.02em; }