/* Zard Charts content pages (sets, market, guides): the site's look, readable without the app */
:root{--bg:#0A0A0B;--surface:#141417;--raise:#1C1C21;--line:#26262C;--fg:#F4F4F5;--soft:#D4D4D8;--muted:#9C9CA6;--brand:#E8212E;--win:#A3E635;--loss:#F0435A;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 50% -200px,rgba(232,33,46,.12),transparent 70%) no-repeat,var(--bg);color:var(--fg);font:16px/1.65 Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif}
a{color:var(--fg);text-decoration-color:rgba(232,33,46,.6);text-underline-offset:3px}
a:hover{color:#fff;text-decoration-color:var(--brand)}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1040px;margin:0 auto;padding:18px 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 26px/1 Anton,Impact,sans-serif;letter-spacing:.02em}
.brand img{border-radius:10px}
.brand b{color:var(--brand);font-weight:400}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{font:600 14px Archivo,sans-serif;text-decoration:none;color:var(--soft);padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.nav a:hover{border-color:rgba(232,33,46,.6);color:#fff}
main{max-width:1040px;margin:0 auto;padding:8px 16px 40px}
.crumbs{font:500 13px var(--mono);color:var(--muted);margin:6px 0 18px}
.crumbs a{color:var(--muted)}
.crumbs span{opacity:.6;margin:0 4px}
.kicker{font:700 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin:0 0 6px}
h1{font:400 clamp(34px,7vw,58px)/1.02 Anton,Impact,sans-serif;letter-spacing:.01em;margin:0 0 14px;text-transform:uppercase}
h2{font:800 22px/1.25 Archivo,sans-serif;margin:34px 0 12px}
h2 small{font:500 13px var(--mono);color:var(--muted);margin-left:8px}
h3{font:800 18px/1.3 Archivo,sans-serif;margin:24px 0 8px}
p,li{color:var(--soft)}
.lede{font-size:18px;color:var(--fg);max-width:760px}
.lede b{color:#fff}
.asof{font-size:14px;color:var(--muted);max-width:760px}
.muted{color:var(--muted)}
.cta{display:inline-block;margin:10px 0 4px;padding:12px 18px;border-radius:999px;background:var(--fg);color:#030303;font:800 15px Archivo,sans-serif;text-decoration:none}
.cta:hover{background:#fff;color:#030303}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.n{font:500 13px var(--mono);color:var(--muted);width:30px}
td.pic{width:46px;padding-right:0}
td.pic img{display:block;width:36px;height:auto;border-radius:3px}
td.nm a{font-weight:600;text-decoration:none}
td.nm a:hover{text-decoration:underline}
td.nm small{display:block;font:500 12px var(--mono);color:var(--muted);margin-top:2px}
td.px,th.px{text-align:right;font:700 15px var(--mono);white-space:nowrap}
td.ch,th.ch,td.sd,th.sd{text-align:right;font:600 14px var(--mono);white-space:nowrap}
th.px,th.ch,th.sd{font:700 11px var(--mono);letter-spacing:.1em}
td.sd{color:var(--muted)}
sup{color:#E0A43A;font-size:11px}
.up{color:var(--win)}.dn{color:var(--loss)}
.jump a{margin-right:14px;font:600 14px Archivo,sans-serif}
ul.sets{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
ul.sets a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;height:100%}
ul.sets a:hover{border-color:rgba(232,33,46,.6)}
ul.sets b{display:block;font-size:15px}
ul.sets span{font:500 12px var(--mono);color:var(--muted)}
.prose{max-width:760px}
.prose h2{margin-top:30px}
.prose li{margin:4px 0}
.note{border-left:3px solid var(--brand);background:var(--surface);padding:12px 16px;border-radius:0 12px 12px 0;margin:18px 0}
.note p{margin:0}
.guides{list-style:none;padding:0;display:grid;gap:12px;max-width:760px}
.guides a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none}
.guides a:hover{border-color:rgba(232,33,46,.6)}
.guides b{display:block;font-size:18px}
.guides span{color:var(--muted);font-size:15px}
ul.links li{margin:6px 0}
.foot{border-top:1px solid var(--line);margin-top:40px;background:#08080A}
.foot .cols{max-width:1040px;margin:0 auto;padding:28px 16px 6px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
.foot b{display:block;font:800 14px Archivo,sans-serif;margin-bottom:8px}
.foot a{display:block;color:var(--muted);text-decoration:none;font-size:14px;margin:4px 0}
.foot a:hover{color:#fff}
.foot p{color:var(--muted);font-size:14px;margin:0}
.foot .fine{max-width:1040px;margin:0 auto;padding:10px 16px 28px;font-size:12px}
@media (max-width:720px){
  .foot .cols{grid-template-columns:1fr 1fr}
  .foot .cols>div:first-child{grid-column:1/-1}
  th.sd,td.sd,th.n,td.n{display:none}
  table{font-size:14px}
  td,th{padding:8px 6px}
  td.pic{width:38px}
  td.pic img{width:30px}
  td.px{font-size:14px}
  td.ch{font-size:13px}
  td.nm small{font-size:11px}
  .lede{font-size:17px}
}