:root {
  color-scheme: dark;
  --bg: #0b1020;
  --panel: #151e30;
  --line: #2b3951;
  --text: #f5f7ff;
  --muted: #b0bbcf;
  --accent: #f2bd65;
  --accent-soft: #ffe0a5;
  font-family: "Segoe UI Variable", "Aptos", "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box }
body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(ellipse at 80% 0, #6f4fb321 0, transparent 34rem),
    radial-gradient(ellipse at 5% 40%, #d69a2712 0, transparent 30rem),
    var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
}
.wrap { width: min(820px, calc(100% - 48px)); margin-inline: auto }
header { padding: 22px 0; border-bottom: 1px solid #ffffff15 }
header a, .back { color: var(--accent-soft); text-decoration: none }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 5px }
main { padding: clamp(42px, 7vw, 64px) 0 76px }
h1, h2, p { overflow-wrap: break-word }
h1 { margin: 0 0 12px; font-size: clamp(34px, 6vw, 50px); font-weight: 760; line-height: 1.12; letter-spacing: -.05em; text-wrap: balance }
h2 { margin: 34px 0 9px; font-size: clamp(20px, 3vw, 23px); font-weight: 720; line-height: 1.35; letter-spacing: -.025em }
p, li { color: var(--muted) }
p { margin: 0 0 17px }
.updated { color: #9aa8bf; font-size: 13px }
.card { margin: 22px 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, #1a263c, var(--panel)) }
.card strong { color: var(--text) }
code { padding: .1em .35em; border: 1px solid var(--line); border-radius: 5px; background: #ffffff08; color: var(--accent-soft); font-size: .9em }
footer { padding: 22px 0; border-top: 1px solid #ffffff15; color: #aeb7c5; font-size: 13px }
@media (max-width: 560px) {
  .wrap { width: min(100% - 36px, 460px) }
  main { padding-bottom: 58px }
  .card { padding: 17px }
}