
/* Layout: one phone-first column (max 760px), a sticky scoreboard bar, sections ruled like a scouting sheet. */
:root{
  --bg:#eef1f3; --surface:#ffffff; --ink:#11171c; --ink-2:#47525c; --muted:#7d8893; --rule:#d6dce1;
  --accent:#1d6b51; --accent-ink:#ffffff; --chip:#e3e8ec;
  --away:#2a78d6; --home:#eb6834; --away-tint:rgba(42,120,214,.13); --home-tint:rgba(235,104,52,.13);
  --good:#1d7a3e; --bad:#b4372f;
  --f-display:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0d1114; --surface:#161c21; --ink:#e8ecef; --ink-2:#a6b0b9; --muted:#6e7a85; --rule:#28313a;
  --accent:#4fb78d; --accent-ink:#0d1114; --chip:#212a32;
  --away:#3987e5; --home:#d95926; --away-tint:rgba(57,135,229,.18); --home-tint:rgba(217,89,38,.18);
  --good:#4fbf74; --bad:#e8706a; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0d1114; --surface:#161c21; --ink:#e8ecef; --ink-2:#a6b0b9; --muted:#6e7a85; --rule:#28313a;
  --accent:#4fb78d; --accent-ink:#0d1114; --chip:#212a32;
  --away:#3987e5; --home:#d95926; --away-tint:rgba(57,135,229,.18); --home-tint:rgba(217,89,38,.18);
  --good:#4fbf74; --bad:#e8706a; color-scheme:dark }
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 40px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px;width:100%}
.wrap>*{min-width:0}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:12px 10px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.02em;text-transform:uppercase;line-height:1;cursor:pointer;color:var(--ink);text-decoration:none}
.brand span{color:var(--accent)}
.brandwrap{display:flex;flex-direction:column;gap:3px}
.tagline{font-size:12px;color:var(--muted)}
.asof{font-size:12px;color:var(--muted);margin-left:auto;font-family:var(--f-num)}
a{color:var(--accent)}
button,select{font:inherit;color:inherit}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{text-decoration:none;flex:0 0 auto;border:1px solid var(--rule);background:var(--surface);border-radius:999px;padding:5px 12px;font-family:var(--f-num);font-size:13px;cursor:pointer;color:var(--ink-2)}
.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip:focus-visible,button:focus-visible,select:focus-visible,a:focus-visible,.gcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
section.card{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:14px;min-width:0}
h1.sec,h2.sec{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
h1.sec small,h2.sec small{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);font-size:13px}
.picker{display:grid;grid-template-columns:1fr auto 1fr auto;gap:8px;align-items:center}
.picker select{width:100%;min-width:0;padding:8px;border:1px solid var(--rule);border-radius:8px;background:var(--surface)}
.picker .at{font-family:var(--f-display);font-size:18px;color:var(--muted)}
.btn{border:0;border-radius:8px;padding:9px 14px;background:var(--accent);color:var(--accent-ink);font-weight:700;cursor:pointer}
.grid-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.gcard{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left;color:inherit;text-decoration:none}
.gcard:hover{border-color:var(--accent)}
.gl{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:21px;font-weight:600;line-height:1.1}
.gl .tm{flex:1}
.gl .sc{font-family:var(--f-num);font-size:17px;font-weight:600}
.gl.lost{color:var(--muted)}
.gwx{font-size:12px;color:var(--ink-2);border-top:1px dashed var(--rule);padding-top:5px}
.gwx.flag{color:var(--bad);font-weight:600}
.facts .wide{grid-column:1/-1}
.facts .wide span:last-child{font-family:var(--f-body);text-align:right}
.facts .wide small{color:var(--muted);font-size:11px}
.facts .asof span{font-size:12px;color:var(--muted)!important}
.wxflag{color:var(--bad);font-weight:600}
.asofn{margin:10px 0 0;font-size:12px}
.foot{margin-top:6px;padding-top:12px;border-top:1px solid var(--rule);font-size:11.5px;line-height:1.5;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.foot p{margin:0;max-width:70ch}
.foot a{color:var(--ink-2)}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.gmeta{font-size:12px;color:var(--muted);font-family:var(--f-num);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tag{font-size:11px;font-family:var(--f-num);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:600}
/* scoreboard */
.board{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center}
.board .team{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.board .abbr{font-family:var(--f-display);font-weight:700;font-size:40px;line-height:.95;letter-spacing:.02em}
.board .nm{font-size:13px;color:var(--ink-2)}
.board .rec{font-family:var(--f-num);font-size:12px;color:var(--muted)}
.board .mid{font-family:var(--f-num);font-size:13px;color:var(--ink-2);display:flex;flex-direction:column;gap:2px}
.board .big{font-family:var(--f-num);font-size:30px;font-weight:600;color:var(--ink)}
.bar-a{height:4px;border-radius:2px;background:var(--away);width:44px}
.bar-h{height:4px;border-radius:2px;background:var(--home);width:44px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:6px 14px;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);font-size:13px}
.facts div{display:flex;justify-content:space-between;gap:8px}
.facts span:first-child{color:var(--muted)}
.facts span:last-child{font-family:var(--f-num);text-align:right}
/* matchup strips */
.unit-h{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:19px;font-weight:600;margin:4px 0 6px}
.unit-h .vs{color:var(--muted);font-size:14px;font-family:var(--f-body);font-weight:400}
.mrow{display:grid;grid-template-columns:1fr;gap:3px;padding:8px 0;border-top:1px solid var(--rule)}
.mrow .lab{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.mrow .lab b{font-weight:600}
.mrow .vals{display:flex;justify-content:space-between;font-family:var(--f-num);font-size:12.5px;color:var(--ink-2);gap:8px}
.edge{font-family:var(--f-num);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:4px;white-space:nowrap}
.edge.o{background:var(--chip);color:var(--ink)}
.edge.n{color:var(--muted)}
.strip svg{display:block;width:100%;height:22px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-bottom:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.radar svg{max-width:440px;margin:0 auto}
.radar:not(.big){cursor:zoom-in;position:relative}
.expand{position:absolute;right:0;bottom:0;border:1px solid var(--rule);background:var(--surface);color:var(--accent);font-weight:600;font-size:12px;border-radius:999px;padding:4px 10px;cursor:pointer}
.radar.big svg{max-width:640px}
html.noscroll, html.noscroll body{overflow:hidden}
.ovl{position:fixed;inset:0;z-index:30;background:var(--surface);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:max(24px,env(safe-area-inset-bottom,0px));
  padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
.ovl-in{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.ovl-h{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;background:var(--surface);padding-block:6px;z-index:2;border-bottom:1px solid var(--rule)}
.close{border:0;background:var(--accent);color:var(--accent-ink);font-weight:700;border-radius:8px;padding:8px 14px;cursor:pointer;flex:0 0 auto}
.lh{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:8px 0 0;padding-inline:8px}
.lh small{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);font-size:12px}
.rlist{display:flex;flex-direction:column;padding-inline:8px}
.rrow{padding:8px 6px;border-top:1px solid var(--rule);border-radius:6px}
.rrow.on{background:var(--chip)}
.rh{display:flex;justify-content:space-between;gap:8px;font-size:14px;margin-bottom:4px}
.rv{display:grid;grid-template-columns:36px 1fr 28px minmax(96px,auto);gap:8px;align-items:center;font-size:12.5px}
.rt{font-family:var(--f-display);font-weight:700;font-size:14px}
.rb{display:block;height:8px;border-radius:4px;background:var(--chip);overflow:hidden}
.rb span{display:block;height:100%;border-radius:4px}
.rn{font-family:var(--f-num);text-align:right;color:var(--ink)}
.rr{font-family:var(--f-num);color:var(--ink-2);text-align:right;white-space:nowrap}
.ovl .edges{padding-inline:8px}
.edges{display:flex;flex-direction:column;gap:4px;font-size:13px;margin:4px 0 6px}
.edges div{display:grid;grid-template-columns:96px 1fr;gap:8px}
.edges .who{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.02em}
details.ranks{margin-top:8px;border-top:1px solid var(--rule);padding-top:8px}
.grp{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 2px}
.two{display:grid;grid-template-columns:1fr;gap:18px}
.bz{margin-top:10px;border-top:1px solid var(--rule);padding-top:8px;display:flex;flex-direction:column;gap:2px}
.bz-h{font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.bz-h small{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);font-size:12px}
.bz-r{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;padding:4px 0;border-bottom:1px solid var(--rule)}
.bz-r>span:first-child{display:flex;align-items:center;gap:6px;min-width:0}
.bz-v{font-family:var(--f-num);text-align:right;color:var(--ink);white-space:nowrap}
.bz-v small{display:block;font-size:11px;color:var(--muted)}
.bz-verdict{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--ink);border-left:3px solid var(--muted);padding-left:8px}
table.ctx td{white-space:normal;vertical-align:top}
.proj{margin:10px 0 0;font-size:13px;color:var(--ink-2)} .proj b{color:var(--ink)}
table.ctx td:first-child{width:38%;font-weight:600}
table.ctx td:not(:first-child){width:31%}
table.ctx .mv{display:block;color:var(--ink);font-size:13.5px}
table.ctx .sv{display:block;font-size:11px;color:var(--muted);font-weight:400;font-family:var(--f-body);line-height:1.3;margin-top:2px}
table.ctx tr.gh td{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:14px;border-bottom:1px solid var(--rule)}
.ltag{display:inline-block;white-space:nowrap;font-family:var(--f-body);font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--chip);color:var(--ink-2)}
.ltag.up{background:var(--good);color:var(--surface)} .ltag.dn{background:var(--bad);color:var(--surface)}
.ltag.soft{background:transparent;border:1px solid currentColor} .ltag.up.soft{color:var(--good)} .ltag.dn.soft{color:var(--bad)}
@media (min-width:700px){.two{grid-template-columns:1fr 1fr}}
.chart{position:relative;min-width:0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--surface);font-size:12px;font-family:var(--f-num);padding:6px 8px;border-radius:6px;white-space:nowrap;z-index:3;line-height:1.35}
.axis text{fill:var(--muted);font-family:var(--f-num);font-size:10.5px}
.grid line{stroke:var(--rule);stroke-width:1}
/* tables */
.tbl{overflow-x:auto;min-width:0}
table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
th{font-weight:600;color:var(--muted);text-align:right;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;padding:4px 6px;border-bottom:1px solid var(--rule);white-space:nowrap}
td{text-align:right;padding:6px;border-bottom:1px solid var(--rule);font-family:var(--f-num);white-space:nowrap}
th:first-child,td:first-child{text-align:left;font-family:var(--f-body)}
td.win{font-weight:600;color:var(--ink)}
td.lose{color:var(--ink-2)}
.pos{color:var(--good)} .neg{color:var(--bad)}
.drv{display:grid;grid-template-columns:34px 1fr 92px;gap:8px;align-items:center;font-size:12px;padding:5px 0;border-top:1px solid var(--rule)}
.drv .tm{font-family:var(--f-display);font-weight:600;font-size:15px}
.drv .res{font-family:var(--f-num);text-align:right;color:var(--ink-2)}
.drv .res.sc{color:var(--ink);font-weight:600}
.drv svg{display:block;width:100%;height:14px}
details{font-size:13px;color:var(--ink-2)}
details summary{cursor:pointer;color:var(--accent);font-weight:600}
dl.gloss{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0}
dl.gloss dt{font-weight:600;color:var(--ink)}
dl.gloss dd{margin:0}
.back{font-size:14px;cursor:pointer;color:var(--accent);background:none;border:0;padding:0;font-weight:600}
.row-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.note{font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){ .fade{animation:fade .25s ease-out} @keyframes fade{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}} }

/* site shell (the artifact viewer provides these on claude.ai) */
html{-webkit-text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font-size:14px}
img{max-width:100%}
[hidden]{display:none!important}
.seo h1{font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.1;margin:0 0 8px;text-wrap:balance}
.seo ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.45;max-width:70ch}
.seo .crumbs{font-size:12px;color:var(--muted);margin:0 0 6px}
.seo .crumbs a{color:var(--ink-2)}
.seo table{margin-top:10px}
.seo td:first-child{white-space:normal}
.seo td small{display:block;font-size:11px;color:var(--muted)}
.seo h2{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:14px 0 6px}
.seo .glist{list-style:none;padding:0;gap:0}
.seo .glist li{padding:7px 0;border-top:1px solid var(--rule)}
.seo .glist a{font-weight:600}
.foot .foot-links{font-size:13px;font-weight:600}
.foot .foot-links a{color:var(--accent);text-decoration:none}
.seo p{max-width:70ch;line-height:1.5;margin:0 0 10px}
.seo .cta{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;border-radius:8px;padding:10px 16px;margin:4px 0 10px}
.seo .mail{font-family:var(--f-num);font-size:15px;font-weight:600}
