:root{
  --paper:#fff6e9; --ground:#f3e3cd; --ink:#5a3a22; --ink-soft:#8a7159;
  --gold:#f5b942; --gold-deep:#d68910; --keyline:#1a1008; --frame:#4a2e1c;
  --link:#1f7a99; --note:#fdf0c4;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#2b2119; --ground:#1c1510; --ink:#f0e2ce; --ink-soft:#bfa88c;
    --frame:#120d09; --link:#6fc9e6; --note:#4a3a18;
  }
}
*{box-sizing:border-box}
body{
  margin:0; padding:24px 16px 64px;
  background:var(--ground); color:var(--ink);
  font-family:"Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.65;
}
main{max-width:760px; margin:0 auto}
.banner{
  max-width:420px; margin:0 auto -26px; position:relative; z-index:2;
  background:var(--gold); border:3px solid var(--keyline); border-radius:14px;
  box-shadow:inset 0 14px 0 rgba(255,255,255,.26);
  text-align:center; padding:12px 22px;
}
.banner h1{
  margin:0; font-size:22px; font-weight:800; letter-spacing:.5px;
  color:#fff; -webkit-text-stroke:4px var(--keyline); paint-order:stroke fill;
}
.card{
  background:var(--paper); border:3px solid var(--keyline); border-radius:20px;
  padding:44px 26px 30px; box-shadow:0 6px 0 var(--frame);
}
.meta{text-align:center; color:var(--ink-soft); font-size:14px; margin:0 0 26px}
.tldr{
  background:var(--note); border:2px solid var(--gold-deep); border-radius:14px;
  padding:16px 18px; margin:0 0 30px; font-weight:600;
}
.tldr p{margin:0}
h2{
  font-size:18px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  margin:34px 0 10px; padding-bottom:6px; border-bottom:2px solid rgba(138,113,89,.4);
}
h2:first-of-type{margin-top:0}
h3{font-size:17px; font-weight:800; margin:20px 0 6px}
p,ul,ol{margin:0 0 14px}
ul,ol{padding-left:22px}
li{margin-bottom:6px}
a{color:var(--link); font-weight:600; overflow-wrap:anywhere}
table{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:15px}
th,td{text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid rgba(138,113,89,.35)}
th{font-weight:800}
.table-wrap{overflow-x:auto}
.links{display:flex; flex-direction:column; gap:12px; margin:8px 0 0}
.links a{
  display:block; padding:14px 18px; border:2px solid var(--keyline); border-radius:14px;
  background:var(--note); color:var(--ink); text-decoration:none; font-weight:800;
}
footer{text-align:center; color:var(--ink-soft); font-size:14px; margin-top:26px}
footer a{margin:0 8px}
@media (max-width:480px){ .card{padding:40px 16px 24px} th,td{padding:6px} }