:root{
  --paper:#FCFBF9; --card:#FFFFFF; --ink:#161415; --ink-soft:#57524E; --ink-mute:#8A847E;
  --line:#E8E4DF; --band:#F4F1EC;
  --orange:#FAA619; --red:#D9321B;
  --mark-orange:#C07A00; --mark-red:#C52E18; --mark-mute:#C9C3BB;
  --pill-good-bg:#F6E9D2; --pill-good-ink:#7A4E00;
  --pill-bad-bg:#F8DDD7; --pill-bad-ink:#9A2411;
  --logo-light:block; --logo-dark:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#171615; --card:#201E1C; --ink:#F2EEE9; --ink-soft:#BBB4AC; --ink-mute:#847E77;
    --line:#35322E; --band:#1D1B19;
    --mark-mute:#4A4641;
    --pill-good-bg:#3A2C10; --pill-good-ink:#F3C575;
    --pill-bad-bg:#43180F; --pill-bad-ink:#F0937F;
    --logo-light:none; --logo-dark:block;
  }
}
:root[data-theme="dark"]{
  --paper:#171615; --card:#201E1C; --ink:#F2EEE9; --ink-soft:#BBB4AC; --ink-mute:#847E77;
  --line:#35322E; --band:#1D1B19;
  --mark-mute:#4A4641;
  --pill-good-bg:#3A2C10; --pill-good-ink:#F3C575;
  --pill-bad-bg:#43180F; --pill-bad-ink:#F0937F;
  --logo-light:none; --logo-dark:block;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 Barlow,system-ui,sans-serif}
.wrap{max-width:1060px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:"Barlow Condensed",Barlow,sans-serif;text-wrap:balance;margin:0}
h2{font-size:clamp(26px,3.4vw,34px);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
h3.sub{font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:28px}
.kicker{font-family:"Barlow Condensed";font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--ink-mute)}
section{padding:56px 0}
section + section{border-top:1px solid var(--line)}
a{color:inherit}

/* top brand bar */
.topbar{background:#161415;color:#fff;padding:14px 0}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar img{height:34px;display:block}
.topbar .tag{font-family:"Barlow Condensed";font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:#C9C3BB}
.topbar .tag b{color:var(--orange);font-weight:600}
.nav{display:flex;gap:20px;align-items:center}
.nav a{color:#C9C3BB;text-decoration:none;font-family:"Barlow Condensed";font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:14px}
.nav a:hover{color:#fff}
.nav a.on{color:var(--orange)}

/* hero */
.hero{padding:72px 0 56px}
.hero h1{font-size:clamp(42px,6.5vw,76px);font-weight:700;text-transform:uppercase;line-height:1.02;letter-spacing:.005em}
.hero h1 .o{color:var(--orange)}
.hero h1 .r{color:var(--red)}
.hero p.lead{max-width:62ch;color:var(--ink-soft);font-size:18px;margin:20px 0 0}
.pagehead{padding:54px 0 10px}
.pagehead h1{font-size:clamp(34px,5vw,56px);font-weight:700;text-transform:uppercase;line-height:1.05}
.pagehead p.lead{max-width:66ch;color:var(--ink-soft);font-size:17px;margin:16px 0 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:40px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px 22px}
.stat .n{font-family:"Barlow Condensed";font-weight:700;font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.stat .n small{font-size:22px;font-weight:600;color:var(--ink-soft)}
.stat .l{color:var(--ink-soft);font-size:14.5px;margin-top:8px;line-height:1.45}
.stat.hot{border-top:4px solid var(--orange)}
.stat.bad{border-top:4px solid var(--red)}

/* chart */
.chartbox{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:26px 26px 18px;margin-top:26px;overflow-x:auto}
.chartbox svg{display:block;min-width:620px;width:100%;height:auto}
.chart-note{font-size:13.5px;color:var(--ink-mute);margin-top:10px}
.bar-row:hover rect{opacity:.82}

/* market cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:26px}
.cardx{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.cardx .head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cardx .cc{font-family:"Barlow Condensed";font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.03em}
.pill{font:600 12.5px/1 Barlow;letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;border-radius:99px;white-space:nowrap}
.pill.good{background:var(--pill-good-bg);color:var(--pill-good-ink)}
.pill.ok{background:var(--band);color:var(--ink-soft);border:1px solid var(--line)}
.pill.bad{background:var(--pill-bad-bg);color:var(--pill-bad-ink)}
.cardx .dist{font-size:13px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.cardx .vt{font-size:14.5px;color:var(--ink-soft);line-height:1.5}

/* sport vs profi */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
@media(max-width:720px){.duo{grid-template-columns:1fr}}
.duo .half{border-radius:6px;padding:26px;color:#161415}
.duo .half.sport{background:var(--orange)}
.duo .half.prof{background:var(--red);color:#fff}
.duo h3{font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.duo p{margin:10px 0 0;font-size:15.5px;line-height:1.55;font-weight:500}
.duo .verdict{font-family:"Barlow Condensed";font-weight:600;font-size:17px;text-transform:uppercase;letter-spacing:.06em;margin-top:14px;display:block}

/* quadrant */
.quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:10px}
.q{background:var(--card);padding:20px;min-height:150px}
.q .ql{font-family:"Barlow Condensed";font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.05em}
.q .qd{font-size:13.5px;color:var(--ink-mute);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font:600 14px/1 "Barlow Condensed";text-transform:uppercase;letter-spacing:.05em;padding:9px 12px;border-radius:4px;background:var(--band);border:1px solid var(--line);color:var(--ink)}
.chip.hot{background:var(--mark-orange);border-color:var(--mark-orange);color:#fff}
.chip.bad{background:var(--mark-red);border-color:var(--mark-red);color:#fff}
.axis-x,.axis-y{font-size:12.5px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.axis-x{text-align:right;margin-top:8px}
.quad-note{font-size:13.5px;color:var(--ink-mute);margin-top:10px}

/* strategy */
.strat{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:26px}
.scol{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:22px}
.scol.own{border-top:4px solid var(--orange)}
.scol.coop{border-top:4px solid var(--ink)}
.scol.hyb{border-top:4px solid var(--mark-mute)}
.scol h3{font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.scol .sub{font-size:13px;color:var(--ink-mute);margin-top:2px}
.scol ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.scol li{padding-left:26px;position:relative;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.scol li b{color:var(--ink)}
.scol li::before{content:"";position:absolute;left:0;top:5px;width:13px;height:13px;border-radius:3px;
  background:var(--ink);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><path d="M6.5 0 12 6H8.7v7H4.3V6H1z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><path d="M6.5 0 12 6H8.7v7H4.3V6H1z"/></svg>') center/contain no-repeat}
.scol.own li::before{background:var(--mark-orange)}

.quick{margin-top:26px;background:#161415;border-radius:6px;padding:26px;color:#fff}
.quick h3{font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--orange)}
.quick ol{margin:14px 0 0;padding-left:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;counter-reset:q}
.quick li{counter-increment:q;font-size:15px;line-height:1.5;color:#D8D3CC}
.quick li b{color:#fff}
.quick li::before{content:counter(q,decimal-leading-zero);display:block;font-family:"Barlow Condensed";font-weight:700;font-size:30px;color:var(--orange);margin-bottom:6px}

/* data tables (subpages) */
.tblwrap{overflow-x:auto;margin-top:20px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.tbl th{font-family:"Barlow Condensed";text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;text-align:left;padding:11px 14px;background:var(--band);color:var(--ink-soft);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft);line-height:1.5}
.tbl td b, .tbl td a{color:var(--ink)}
.tbl tr:last-child td{border-bottom:none}
.prose{max-width:72ch}
.prose p{color:var(--ink-soft)}
.prose li{color:var(--ink-soft);margin:6px 0}
.prose li b{color:var(--ink)}
.note{font-size:13.5px;color:var(--ink-mute)}
.numlist{counter-reset:n;list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:14px;max-width:76ch}
.numlist li{counter-increment:n;position:relative;padding-left:52px;color:var(--ink-soft);line-height:1.55}
.numlist li b{color:var(--ink)}
.numlist li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:0;font-family:"Barlow Condensed";font-weight:700;font-size:24px;color:var(--mark-orange)}

footer{padding:34px 0 60px;color:var(--ink-mute);font-size:13.5px;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer img{height:26px;display:block;opacity:.85}
footer a{color:var(--ink-soft)}
.logo-l{display:var(--logo-light)} .logo-d{display:var(--logo-dark)}
@media (prefers-reduced-motion: no-preference){
  .stat,.cardx,.scol{transition:transform .15s ease}
  .stat:hover,.cardx:hover{transform:translateY(-2px)}
}
a:focus-visible,.chip:focus-visible,.nav a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{font-size:13px}
  .wrap{max-width:100%;padding:0 6mm}
  section{padding:22px 0}
  .hero{padding:26px 0 20px}
  .hero h1{font-size:44px}
  .hero p.lead{font-size:14px}
  .stat .n{font-size:32px}
  .stats,.cards,.strat{gap:10px}
  .cardx,.stat,.scol,.q,.chartbox,.duo .half,.quick,.quad,.tblwrap{break-inside:avoid}
  .duo,.stats{break-inside:avoid}
  h2{font-size:24px}
  .chartbox svg{min-width:0}
  .nav{display:none}
  footer{padding:16px 0}
}