:root {
  --ink: #22222b;
  --paper: #fcfaf3;
  --muted: #5b5a63;
  --honest: #cfeedd;
  --crooked: #3e384e;
  --gold: #f2b833;
  --line: #e6e1d4;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #f4f1ea; --paper: #1d1c23; --muted: #b9b6c2; --line: #34323d; --honest: #2f4a3c; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
header { display: flex; align-items: center; gap: 14px; }
header img { width: 64px; height: 64px; border-radius: 15px; }
header a { color: inherit; text-decoration: none; font-weight: 700; font-size: 22px; }
h1 { font-size: 40px; line-height: 1.1; margin: 36px 0 12px; }
h2 { font-size: 22px; margin: 32px 0 8px; }
p, li { color: var(--muted); }
.hero { display: grid; grid-template-columns: 1fr 220px; gap: 32px; align-items: center; }
.hero img { width: 100%; border-radius: 28px; border: 6px solid var(--ink); }
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.lane { padding: 16px; border-radius: 12px; }
.lane.honest { background: var(--honest); }
.lane.crooked { background: var(--crooked); color: #fff; }
.lane.crooked p { color: #ddd9e8; }
.lane strong { display: block; font-size: 18px; }
.badge { display: inline-block; margin-top: 12px; padding: 12px 20px; border-radius: 12px; background: var(--gold); color: #22222b; font-weight: 700; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
footer a { color: inherit; }
@media (max-width: 600px) { .hero { grid-template-columns: 1fr; } .hero img { max-width: 240px; } h1 { font-size: 32px; } .lanes { grid-template-columns: 1fr; } }