:root{
  --night:#0B1E3B; --night-2:#12305C; --cream:#FFF7F0;
  --gold:#F5C542; --pine:#3FA34D; --muted:#B8C6DC;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--night); color:var(--cream);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:720px;margin:0 auto;padding:40px 20px 72px}
header{border-bottom:1px solid rgba(255,247,240,.15);padding-bottom:24px;margin-bottom:32px}
.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700;letter-spacing:.2px}
.mark{width:34px;height:34px;flex:0 0 34px}
h1{font-size:28px;line-height:1.25;margin:22px 0 6px}
h2{font-size:19px;margin:34px 0 8px;color:var(--gold)}
.updated{color:var(--muted);font-size:14px;margin:0}
p,li{color:#E8EEF7}
a{color:var(--gold)}
ul{padding-left:20px}
li{margin:6px 0}
.callout{
  background:var(--night-2);border:1px solid rgba(245,197,66,.35);
  border-radius:12px;padding:16px 18px;margin:24px 0;
}
.callout p{margin:0}
footer{margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,247,240,.15);color:var(--muted);font-size:14px}
footer a{margin-right:14px}
@media (max-width:520px){ h1{font-size:24px} .wrap{padding:28px 18px 56px} }