:root{
  color-scheme:dark;
  --bg:#0b0b0d; --panel:#1a1a1f; --ink:#f0efe9; --ink-2:#a8a8b4; --ink-3:#70707c;
  --line:#2c2c34; --line-2:#23232a;
  --skel:#24242c; --skel-2:#32323c; --skel-txt:#6a6a76;
  --win:#7fae8b; --win-s:#1c241e; --loss:#c88a74; --loss-s:#241c19;
  --THAI:#c9463f; --THAI-s:#291815;
  --TECH:#ff7a5c; --TECH-s:#2c1b17;
  --WORLD:#6fb2ee; --WORLD-s:#16202b;
  --GOOD:#68c185; --GOOD-s:#15251b;
  --SPORT:#e0b839; --SPORT-s:#2a2313;
  --BALL:#4ec3cb; --BALL-s:#122528;
  --serif:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  /* side padding, never less than the notch in landscape */
  --pl:max(18px,env(safe-area-inset-left)); --pr:max(18px,env(safe-area-inset-right));
}
*{box-sizing:border-box}
/* stops a pull at the top of the page reaching the browser's own pull-to-refresh or back/forward
   swipe. CSS alone is not enough on its own, see the touchmove guard near the pull top code below;
   the two only work together. */
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;
  line-height:1.5;-webkit-font-smoothing:antialiased;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}
/* touch-action: manipulation kills double tap zoom and keeps pinch zoom */
body *{touch-action:manipulation}
.page{max-width:640px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--panel);
  padding:0 var(--pr) 34px var(--pl)}
/* a mouse gets a centred column with the dark surround, a phone gets the whole screen in either
   orientation, so turning it sideways never leaves black bars */
@media (min-width:680px) and (hover:hover){.page{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
@media (hover:none) and (pointer:coarse){
  body{background:var(--panel)}
  .page{max-width:none}}

/* desktop scrollbar: a track line, thumb takes the colour of the current section */
html::-webkit-scrollbar{width:9px}
html::-webkit-scrollbar-track{background:linear-gradient(to right,transparent 4px,
  var(--line) 4px,var(--line) 5px,transparent 5px)}
html::-webkit-scrollbar-thumb{background:var(--cur,var(--ink-2));border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:var(--cur,var(--ink-2)) transparent}}
/* touch: hidden entirely, the system overlay is drawn by the OS and cannot be removed */
@media (hover:none) and (pointer:coarse){
  html{scrollbar-width:none}
  html::-webkit-scrollbar{width:0;height:0}}

.mast{position:sticky;top:0;margin:0 calc(-1 * var(--pr)) 0 calc(-1 * var(--pl));background:var(--panel);z-index:4;
  padding:calc(18px + env(safe-area-inset-top)) var(--pr) 9px var(--pl);border-bottom:1px solid var(--line)}
.mast .top{display:flex;align-items:center;gap:16px}
.mast .t{font-family:var(--serif);letter-spacing:-.015em;line-height:1.05;font-size:33px;flex:1;
  user-select:none;-webkit-user-select:none;position:relative}
.mbtn{width:36px;height:36px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0;transition:opacity .25s ease}
.mbtn.dim{opacity:.3}
#jump{color:var(--ink);border-color:var(--ink-3)}
.mbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.mast .sub{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}

.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
/* each category is a block of its own: air above, then a full width tinted band you can tap to fold */
/* a soft break between categories: about a third of the way from the plain hairline to a hard band */
.sec{margin-top:31px}
.sec:first-of-type{margin-top:20px}
.secH{display:flex;align-items:center;gap:10px;margin:0 calc(-1 * var(--pr)) 4px calc(-1 * var(--pl));
  padding:10px var(--pr) 10px var(--pl);font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;cursor:pointer;user-select:none;-webkit-user-select:none;
  border-bottom:1px solid color-mix(in srgb,currentColor 20%,transparent);
  transition:opacity .25s ease,background-color .25s ease}
.secH .cnt{font-size:10px;opacity:.7;margin-left:auto;font-weight:400}
.secH .chev{font-size:15px;line-height:1;opacity:.8;transition:transform .2s;transform:rotate(90deg)}
.sec.collapsed .secH .chev{transform:rotate(0deg)}
/* folded: the band recedes, but stays exactly where it was, so folding never moves the band itself,
   only the items beneath it disappear */
.sec.collapsed .secH{opacity:.5;background:transparent !important;border-bottom-color:transparent}
.sec.collapsed>:not(.secH){display:none}
.none{padding:12px 0 8px 17px;color:var(--ink-3);font-size:13.5px}

/* basketball band: air and a full width rule, still subordinate to Sports */
.band{margin:20px 0 0 13px;padding:4px 0 0 13px;border-top:1px solid var(--line)}
.subH{display:flex;align-items:center;gap:6px;padding:14px 0 1px;font-family:var(--mono);
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.subH .sq{width:5px;height:5px;border-radius:1.5px;flex:0 0 auto}
.subH .cnt{margin-left:auto;font-size:8.5px;opacity:.8}

.row{border-bottom:1px solid var(--line-2)}
.row:last-of-type{border-bottom:0}
.row>summary{list-style:none;cursor:pointer;padding:13px 0;display:grid;
  grid-template-columns:auto 1fr auto;gap:10px;align-items:start}
.row>summary::-webkit-details-marker{display:none}
.row h3{font-family:var(--serif);font-size:16.5px;line-height:1.3;margin:0;font-weight:600}
.band .row h3{font-size:15.5px}
.row .lead{padding-top:6px}
.row .chev{color:var(--ink-3);font-size:14px;line-height:1.6;transition:transform .2s}
.row[open]>summary .chev{transform:rotate(90deg)}
.row .body{padding:0 0 16px 17px}
/* a quiet hairline between the headline and the text once an item is open */
.row .body::before{content:"";display:block;height:1px;background:var(--line);margin:0 0 12px}
/* description and why it matters share size and ink, the key line is quieter */
.desc{font-size:14.5px;color:var(--ink);line-height:1.6}
.prev{font-size:12px;color:var(--ink-3);border-left:2px solid var(--line);padding-left:9px;margin:9px 0 0}
.key{margin:15px 0 14px;padding:0 0 0 13px;border-left:2px solid var(--line-2)}
.key.q{border-left-color:var(--line)}
.key .txt{font-family:var(--serif);font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.key .who{display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.why{font-size:14.5px;color:var(--ink);line-height:1.6}
.why b{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:4px;font-weight:400}
.more{margin-top:14px}
/* the pill sits at --mx (0 left, .5 centre, 1 right) of the row. Hold it to wiggle, then slide it
   sideways and let go. The spot is remembered and shared by every item. */
.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;width:max-content;
  position:relative;left:calc(var(--mx,.5) * 100%);transform:translateX(calc(var(--mx,.5) * -100%));
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--ink-3);border-radius:99px;padding:7px 15px;
  touch-action:pan-y pinch-zoom;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.more>summary::-webkit-details-marker{display:none}
.more>summary.edit{border-color:var(--ink);animation:wig .2s ease-in-out infinite alternate}
@keyframes wig{from{rotate:-2.6deg}to{rotate:2.6deg}}
.more .deep{padding-top:11px;font-size:14px;color:var(--ink);line-height:1.6}
.more .deep p{margin:0 0 9px}.more .deep p:last-of-type{margin-bottom:0}
.out{display:inline-block;margin-top:8px;padding:8px 0 3px;font-size:13.5px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink-3)}
.act{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--panel);background:var(--ink);padding:2px 6px;border-radius:4px;display:inline-block;margin-top:12px}

/* game block */
.game{border:1px solid var(--BALL);border-radius:9px;overflow:hidden;margin:9px 0 3px;
  background:var(--BALL-s);transition:background .45s ease,border-color .45s ease}
.game>summary{list-style:none;cursor:pointer;padding:9px 11px;display:grid;
  grid-template-columns:auto 1fr auto;gap:7px;align-items:baseline}
.game>summary::-webkit-details-marker{display:none}
/* one phrase, not a caption plus a value: the team leads, "Last night" trails as a quiet aside,
   both set to share a real baseline so they read as a single line */
.game .gt{font-family:var(--serif);font-size:15px;line-height:1;color:var(--ink);font-weight:600}
.game .gl{font-family:var(--sans);font-size:11.5px;line-height:1;color:var(--BALL);opacity:.85}
.game .chev{color:var(--BALL);font-size:12px;transition:transform .2s}
.game[open]>summary .chev{transform:rotate(90deg)}
.game .gbody{padding:1px 11px 11px}
.game.rv-w{border-color:var(--win);background:var(--win-s)}
.game.rv-l{border-color:var(--loss);background:var(--loss-s)}
.game.rv-w .gl,.game.rv-w .chev{color:var(--win)}
.game.rv-l .gl,.game.rv-l .chev{color:var(--loss)}

.skel{position:relative;border-radius:7px;overflow:hidden;background:var(--skel);min-height:112px;
  transition:background .45s ease}
.skel.shown{background:transparent;min-height:0}
.skel .real{opacity:0;transition:opacity .3s ease}
.skel.shown .real{opacity:1}
.skel .wire{position:absolute;inset:0;background:var(--skel);cursor:pointer;display:flex;
  flex-direction:column;justify-content:center;gap:7px;padding:11px;transition:opacity .3s ease;
  user-select:none;-webkit-user-select:none;touch-action:none}
.skel.shown .wire{opacity:0;pointer-events:none}
.skel .bar{height:8px;border-radius:4px;background:var(--skel-2)}
.skel .bar.w1{width:44%;height:14px} .skel .bar.w2{width:86%} .skel .bar.w3{width:62%}
.skel .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--skel-txt);margin-top:2px;display:flex;align-items:center;gap:8px}
.skel .track{flex:1;max-width:92px;height:2px;border-radius:2px;background:var(--skel-2);
  overflow:hidden;opacity:0;transition:opacity .18s}
.skel.arming .track{opacity:1}
.skel .fill{height:100%;width:0;background:var(--skel-txt)}
.skel.arming .fill{width:100%;transition:width .65s linear}

/* the card: Blazers always left, the winning half tinted and bold */
.gm{display:flex}
.gh{flex:1;min-width:0;padding:10px 12px}
.gh.t{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.gv{width:1px;background:var(--skel-2);opacity:.7}
.gn{display:flex;align-items:baseline;gap:7px}
.tn{font-size:13px;white-space:nowrap}
.tn.us::before{content:"";display:inline-block;width:6px;height:6px;border-radius:1px;
  background:var(--ink);margin-right:5px;vertical-align:1px}
.won{font-weight:700;color:var(--ink)}
.lost{font-weight:400;color:var(--ink-2)}
.rec{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.04em}
.gs{display:flex;align-items:center;gap:8px;margin:3px 0 4px}
.ts{font-family:var(--serif);font-size:28px;font-variant-numeric:tabular-nums;line-height:1;
  letter-spacing:-.01em}
.ts.won{font-weight:700}
.tp{display:block;font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tp b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.gd{padding:9px 12px 11px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.res{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;padding:2px 8px;
  border-radius:5px;user-select:none;-webkit-user-select:none;position:relative;
  border:1px solid transparent}
.res.win{color:var(--win);background:var(--win-s);border-color:var(--win)}
.res.loss{color:var(--loss);background:var(--loss-s);border-color:var(--loss)}

/* fast pass */
.fast{margin-top:26px;border-top:1px solid var(--line);padding-top:16px;scroll-margin-top:72px}
.fastH{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:16px;
  padding-bottom:13px;border-bottom:1px solid var(--line)}
.fastH .ft{font-family:var(--serif);font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.fastH .fn{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--ink-3)}
.pips{display:flex;gap:2px;margin-bottom:16px}
.pips i{height:3px;flex:1;border-radius:2px;transition:background .18s ease}
.tapwrap{position:relative;user-select:none;-webkit-user-select:none}
/* the chip stays pinned at the same top position and the counter at the same bottom position on
   every card; only .fcmid, the group between them, grows to fill the space and centres its own
   content inside it. Two fixed points to read by, so the eye is not relocating them on every tap. */
.fc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 32px;
  display:flex;flex-direction:column;height:300px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.fc .chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;align-self:flex-start;flex:0 0 auto;margin-bottom:12px}
.fc .fcmid{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:12px}
.fc h4{font-family:var(--serif);font-size:28px;line-height:1.24;margin:0;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fc .kl{font-size:16px;color:var(--ink-2);line-height:1.42;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fc .kw{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;flex:0 0 auto}
.fc .ct{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--ink-3);flex:0 0 auto;margin-top:12px}
.fc.endcard{align-items:center;justify-content:center;text-align:center;gap:5px}
.zones{position:absolute;inset:0;display:flex;cursor:pointer;border-radius:14px;overflow:hidden}
.zones span{flex:1;display:flex;align-items:center;font-size:17px;line-height:1;color:var(--ink-3);
  opacity:.22;transition:opacity .22s ease,background .22s ease}
.zones .zl{justify-content:flex-start;padding-left:7px}
.zones .zr{justify-content:flex-end;padding-right:7px}
.tapwrap.peek .zones span{opacity:.62;background:rgba(128,128,128,.09)}
.restart{font:inherit;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--ink-2);
  border-radius:99px;padding:5px 13px;margin-top:9px;z-index:3;position:relative}

.done{text-align:center;color:var(--ink-3);font-size:13px;padding:100px 8px 16px}
.done b{display:block;font-family:var(--serif);font-size:21px;color:var(--ink);margin-bottom:3px;font-weight:400}
.endmark{display:block;margin:26px auto 26px;opacity:.55;width:42px;height:4px;
  background:radial-gradient(circle,var(--ink-3) 1.7px,transparent 1.8px) repeat-x;background-size:14px 4px}
.err{padding:90px 8px;text-align:center;color:var(--ink-3);font-family:var(--serif);font-size:19px}

/* easter eggs */
@keyframes fall{to{transform:translateY(130px) rotate(var(--r));opacity:0}}
.conf{position:absolute;width:5px;height:8px;border-radius:1px;animation:fall .9s ease-in forwards;z-index:3}
@keyframes ringx{to{transform:translate(-50%,-50%) scale(5);opacity:0}}
.ring{position:absolute;width:26px;height:26px;border-radius:50%;border:2px solid var(--win);
  transform:translate(-50%,-50%) scale(.4);animation:ringx .75s ease-out forwards;z-index:1}
.shout{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.5);opacity:0;
  font-family:var(--serif);font-size:22px;font-weight:700;z-index:5;background:#0d0d10;
  border:1px solid #e03a3e;border-radius:99px;padding:5px 15px;
  transition:all .34s cubic-bezier(.2,1.5,.4,1);white-space:nowrap;pointer-events:none}
.shout.go{opacity:1;transform:translate(-50%,-50%) scale(1)}
.shout .r{color:#e03a3e}.shout .c{color:#fff}
.whisper{font-size:11.5px;color:var(--ink-3);font-style:italic;height:0;overflow:hidden;
  transition:height .26s ease,opacity .26s ease;opacity:0}
.whisper.go{height:18px;opacity:1}
.stamp{position:absolute;right:4px;top:2px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--TECH);border:2px solid var(--TECH);border-radius:5px;padding:3px 7px;
  transform:rotate(-13deg) scale(1.8);opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.stamp.go{opacity:.9;transform:rotate(-13deg) scale(1)}
.ball{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--TECH);
  border:1.5px solid var(--ink);pointer-events:none;z-index:6}

/* pulling past the top of the page and letting go: its own shuffle bag, own effects, fixed to the
   viewport rather than the masthead, since the masthead itself is what is being dragged */
@keyframes ptdust{to{transform:translateY(90px);opacity:0}}
.pt-dust{position:fixed;top:0;width:3px;height:3px;border-radius:50%;background:var(--ink-3);
  opacity:.7;z-index:6;pointer-events:none;animation:ptdust .9s ease-in forwards}
.pt-bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:6;pointer-events:none}
.pt-grain{position:fixed;left:0;right:0;top:0;height:140px;z-index:6;opacity:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--ink-3) .6px,transparent .7px);background-size:3px 3px;
  transition:opacity .12s}
.pt-seal{position:fixed;right:18px;top:calc(18px + env(safe-area-inset-top));z-index:6;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--GOOD);
  border:1.5px solid var(--GOOD);border-radius:50%;width:46px;height:46px;display:flex;
  align-items:center;justify-content:center;text-align:center;pointer-events:none;
  transform:rotate(-10deg) scale(1.6);opacity:0;transition:opacity .2s,transform .2s}
.pt-corner{position:fixed;left:0;top:0;width:90px;height:90px;z-index:6;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 60%);
  clip-path:polygon(0 0,100% 0,0 100%);opacity:0;transform:scale(.7);transform-origin:top left;
  transition:opacity .3s,transform .3s}