:root { --bg: #f3f5f1; --card: #fff; --ink: #18201c; --muted: #5d6a63; --line: #d6ddd7; --red: #cc2433; --chip: #e8ece7; }
@media (prefers-color-scheme: dark) { :root { --bg: #101513; --card: #171e1b; --ink: #e7ece8; --muted: #9aa8a0; --line: #2a3430; --red: #ff5a68; --chip: #222b27; } }
* { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 Barlow, "Segoe UI", system-ui, sans-serif; }
main { max-width: 860px; margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-left)) 60px; }
a { color: var(--red); } h1, h2 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; line-height: 1.05; }
h1 { font-size: clamp(40px, 7vw, 64px); margin: 4px 0; } h2 { font-size: 26px; margin: 30px 0 10px; } h2 small { font-family: Barlow, sans-serif; font-size: 14px; color: var(--muted); text-transform: none; }
.home { display: inline-flex; gap: 8px; align-items: center; font-family: "Barlow Condensed", sans-serif; font-weight: 800; text-transform: uppercase; color: var(--ink); text-decoration: none; margin-bottom: 18px; }
.home .logo { height: 34px; width: auto; }
.hero { display: flex; gap: 18px; align-items: center; } .erb { width: 90px; height: 108px; object-fit: contain; flex: none; }
.eyebrow { color: var(--red); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; } .facts { color: var(--muted); margin: 0; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.crumbs { font-size: 14px; color: var(--muted); margin: -6px 0 10px; } .crumbs a { color: var(--muted); }
.sum { font-size: 18px; margin: 16px 0 6px; } .ranks { display: inline-block; background: var(--chip); border-radius: 999px; padding: 4px 14px; font-size: 14.5px; font-weight: 600; margin: 4px 0 0; }
.shape { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; } .shape svg { width: 100%; height: auto; display: block; }
.shape .nb { fill: var(--chip); stroke: var(--line); stroke-width: 1; } .shape .me { fill: var(--red); fill-opacity: .55; stroke: var(--red); stroke-width: 2; }
.cta { background: var(--card); border: 2px solid var(--red); border-radius: 14px; padding: 18px; display: grid; gap: 8px; align-content: center; } .cta p { margin: 0; color: var(--muted); }
.btn { display: inline-block; background: var(--red); color: #fff; text-decoration: none; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 20px; text-transform: uppercase; padding: 10px 16px; border-radius: 10px; justify-self: start; }
.pl { list-style: none; padding: 0; display: grid; gap: 6px; } .pl li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; } .pl span { color: var(--muted); }
.nbs a { white-space: nowrap; } .kr { list-style: none; padding: 0; display: grid; gap: 6px; } .kr span { color: var(--muted); }
.foot { margin-top: 40px; color: var(--muted); font-size: 14px; } .foot a { color: var(--muted); }
@media (max-width: 640px) { .grid { grid-template-columns: minmax(0, 1fr); } .hero { align-items: flex-start; } .erb { width: 64px; height: 76px; } }