:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.65 "Segoe UI", system-ui, -apple-system, sans-serif;
       color:#1b1420; background:#faf9f6; padding:48px 20px 80px; }
main { max-width:680px; margin:0 auto; }
a { color:#6a4bb0; }
h1 { font-size:26px; margin:0 0 4px; font-weight:600; letter-spacing:-.01em; }
h2 { font-size:15px; margin:36px 0 10px; font-weight:600; letter-spacing:.05em;
     text-transform:uppercase; color:#9b968d; }
h3 { font-size:17px; margin:24px 0 8px; font-weight:600; }
p, li { color:#2c2530; }
.sub { color:#6b6760; font-size:15px; margin:0 0 8px; }
.meta { color:#9b968d; font-size:13px; margin:0; }
.card { background:#fff; border:1px solid #e6e2da; border-radius:12px;
        padding:20px 24px; margin-top:12px; }
.card > :first-child { margin-top:0; }
.card > :last-child { margin-bottom:0; }
.jump { display:flex; gap:14px; font-size:14px; margin:20px 0 0;
        padding-bottom:20px; border-bottom:1px solid #e6e2da; }
hr.lang { border:none; border-top:1px solid #e6e2da; margin:56px 0 40px; }
ul { padding-left:22px; }
li { margin-bottom:6px; }
code { font:14px ui-monospace, Consolas, monospace; background:#f2efe9;
       border:1px solid #e6e2da; border-radius:4px; padding:1px 5px; }
footer { margin-top:48px; color:#9b968d; font-size:13px; }
@media (prefers-color-scheme: dark) {
  body { color:#ece8f0; background:#17141b; }
  p, li { color:#cfc9d6; }
  a { color:#a98ce8; }
  .card { background:#1f1b25; border-color:#332c3d; }
  .jump, hr.lang { border-color:#332c3d; }
  .sub { color:#9c95a6; } .meta, h2, footer { color:#847d90; }
  code { background:#2a2432; border-color:#3d3548; }
}