/* Track bias — /greyhound-track-bias
 *
 * EVERY RULE IS SCOPED TO .tb-page. This began as a standalone preview, where
 * bare `body`, `section`, `table` and `pre` were harmless; loaded after
 * site.css on a real page they restyle the nav and the footer.
 *
 * :root, body and .wrap stay with site.css. .wrap in particular was set here
 * to 1180px against the site's 1120, which put this one page out of line with
 * the nav above it.
 *
 * The three bucket colours are the only new values: led is the site green,
 * second the trap palette's blue, third a warm grey off --line.
 */
.tb-page{ --led:var(--green); --snd:#1F5FBF; --trd:#C9C7BE; }

/* CENTRED HERE, NOT INHERITED.
 *
 * site.css defines .wrap at 1120px centred, and this page's .wrap divs were
 * not picking it up — the nav centred, the hero did not. Rather than keep
 * hunting which rule wins on a page that loads two stylesheets and a third
 * party widget, the page states its own layout.
 *
 * Same numbers as site.css deliberately: this is not a different width, it is
 * the same width said in a place nothing else can override.
 */
.tb-page .wrap{max-width:1120px;margin-left:auto;margin-right:auto;
  padding-left:20px;padding-right:20px;width:100%}
.tb-page .tb-hd>.wrap,.tb-page section>.wrap{position:relative;z-index:2}

.tb-page *{box-sizing:border-box}
.tb-page h1, .tb-page h2, .tb-page h3{font-family:var(--disp);font-weight:600;
  letter-spacing:-.01em;margin:0}
.tb-page .mono{font-family:var(--mono)}
.tb-page .tb-hd{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding:64px 0 52px}
.tb-page .tb-hd::before{content:'';position:absolute;inset:0;
  background:radial-gradient(820px 340px at 18% -20%,rgba(14,91,65,.07),transparent 70%);
  pointer-events:none}
.tb-page .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);margin:0 0 16px}
.tb-page .tb-hd h1{font-size:clamp(38px,5.4vw,62px);line-height:1.03;max-width:16ch}
.tb-page .tb-hd h1 em{font-style:normal;color:var(--green)}
.tb-page .tb-hd p.sub{color:var(--mut);font-size:18px;max-width:62ch;margin:20px 0 0}
.tb-page .tb-hd p.sub b{color:var(--ink);font-weight:600}
.tb-page .tb-race{position:relative;width:100%;margin:38px 0 0;height:132px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--white);overflow:hidden}
.tb-page .tb-race .split{position:absolute;top:0;bottom:0;left:34%;width:1px;
  background:linear-gradient(180deg,transparent,var(--green),transparent);opacity:.5}
.tb-page .tb-race .split b{position:absolute;top:8px;left:9px;font:500 10px/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--green);white-space:nowrap}
.tb-page .tb-race .fin{position:absolute;top:0;bottom:0;right:6%;width:2px;background:var(--mut);opacity:.5}
.tb-page .tb-race .fin b{position:absolute;top:8px;right:9px;font:500 10px/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.tb-page .lane{position:absolute;left:0;right:0;height:14px;display:flex;align-items:center}.tb-page .dog.win{height:11px;box-shadow:0 0 0 2px rgba(14,91,65,.16)}
.tb-page .tb-race figcaption{position:absolute;left:16px;bottom:10px;color:var(--mut);
  font:400 12px/1.4 var(--mono)}
@media(prefers-reduced-motion:reduce){
  .tb-page .dog{animation:none;left:var(--end)}
}
.tb-page .pills{display:flex;gap:8px;flex-wrap:wrap;margin:32px 0 0}
.tb-page .pill{font:500 12.5px/1 var(--mono);padding:9px 13px;border-radius:999px;
  border:1px solid var(--line);color:var(--mut);text-decoration:none;background:var(--white)}
.tb-page .pill:hover{color:var(--ink);border-color:var(--mut)}
.tb-page .pill.on{background:var(--green);border-color:var(--green);color:var(--white)}
.tb-page .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:-30px 0 0;
  position:relative;z-index:2}
.tb-page .fig{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px}
.tb-page .fig b{display:block;font-family:var(--disp);font-size:40px;
  line-height:1;font-weight:600;letter-spacing:-.02em}
.tb-page .fig span{display:block;color:var(--mut);font-size:13px;margin-top:6px}
.tb-page .fig i{display:block;color:var(--mut);font-style:normal;font-size:12px;margin-top:10px}
.tb-page section{padding:62px 0}
.tb-page section+section{border-top:1px solid var(--line)}
.tb-page h2{font-size:clamp(26px,3vw,34px);margin-bottom:10px}
.tb-page .lede{color:var(--mut);max-width:68ch;margin:0 0 26px}
.tb-page .tbl{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.tb-page table{width:100%;border-collapse:collapse;font-size:14.5px}
.tb-page th{text-align:left;font:500 11px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);padding:14px 16px;background:var(--paper);
  border-bottom:1px solid var(--line);white-space:nowrap}
.tb-page td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tb-page tr:last-child td{border-bottom:0}
.tb-page tbody tr:hover td{background:var(--paper)}
.tb-page .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-page .tk{font-weight:600}
.tb-page .tk s{display:block;text-decoration:none;color:var(--mut);font-size:12px;
  font-family:var(--mono);margin-top:2px}
.tb-page .strip{display:flex;height:24px;border-radius:var(--radius);overflow:hidden;min-width:190px;
  border:1px solid var(--line)}
.tb-page .strip i{font-style:normal;position:relative;transition:width .6s cubic-bezier(.4,0,.2,1)}
.tb-page .s1{background:var(--green)}
.tb-page .s2{background:#1F5FBF}
.tb-page .s3{background:var(--trd)}
.tb-page .gap{font-family:var(--mono);font-weight:500}
.tb-page .up{color:var(--green)}
.tb-page .dn{color:#C8332B}
.tb-page .verdict{font:500 11.5px/1 var(--mono);padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--mut);white-space:nowrap;display:inline-block}
.tb-page .verdict.early{color:var(--green);border-color:#BFD8C6;background:#E4EFE7}
.tb-page .verdict.late{color:#1F5FBF;border-color:#C3D4EC;background:#EAF1FA}
.tb-page tr.quiet td{opacity:.5}
.tb-page .key{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px;font-size:13px;color:var(--mut)}
.tb-page .key span{display:flex;align-items:center;gap:7px}
.tb-page .key b{width:12px;height:12px;border-radius:3px;display:inline-block}
.tb-page .ends{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 30px}
.tb-page .end{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  background:var(--white);position:relative;overflow:hidden}
.tb-page .end::after{content:'';position:absolute;inset:0;pointer-events:none}
.tb-page .end.a::after{background:radial-gradient(420px 140px at 0% 0%,rgba(14,91,65,.07),transparent 70%)}
.tb-page .end.b::after{background:radial-gradient(420px 140px at 0% 0%,rgba(31,95,191,.06),transparent 70%)}
.tb-page .end h3{font-size:22px;margin-bottom:4px}
.tb-page .end .num{font-family:var(--disp);font-size:52px;line-height:1;
  font-weight:600;letter-spacing:-.02em}
.tb-page .end .num small{font-size:20px;color:var(--mut);font-weight:500}
.tb-page .end p{color:var(--mut);font-size:14.5px;margin:12px 0 0}
.tb-page .cols{display:grid;grid-template-columns:1fr 1fr;gap:38px}
.tb-page .cols h3{font-size:19px;margin:26px 0 8px}
.tb-page .cols h3:first-child{margin-top:0}
.tb-page .cols p{color:var(--mut);font-size:15px;margin:0 0 14px}
.tb-page .cols p b{color:var(--ink)}
.tb-page .note{border-left:3px solid var(--green);padding:2px 0 2px 16px;margin:20px 0 0;
  color:var(--mut);font-size:14.5px}
.tb-page pre{background:var(--night);color:var(--night-ink);border-radius:var(--radius);
  padding:16px 18px;overflow:auto;font:400 13.5px/1.7 var(--mono);margin:0}
.tb-page pre b{color:#7FD4AE;font-weight:400}
.tb-page .cta{display:flex;gap:30px;align-items:flex-start}
.tb-page .cta>div:first-child{flex:1}
@media(max-width:900px){
  .tb-page .figs{grid-template-columns:repeat(2,1fr)}
  .tb-page .cols, .tb-page .ends, .tb-page .cta{grid-template-columns:1fr;display:grid;gap:22px}
}

/* THE RACE — restored.
 *
 * The scoping pass understood @media and nothing else, so it fed @keyframes
 * through a flat rule-matcher that cannot see nested braces. The keyframes and
 * the .dog rule beside them were both consumed, leaving dogs with no size, no
 * position and an animation pointing at a name that no longer existed. They sat
 * on the start line, which read as "the animation is broken" rather than "the
 * stylesheet lost two rules".
 *
 * A keyframe name is global by nature — prefixing it is meaningless, which is
 * why the scoper had nothing sensible to do with it. Named tb-run so it cannot
 * collide with anything else on the site.
 */
@keyframes tb-run{
  from{left:0}
  to{left:var(--end)}
}
.tb-page .dog{position:absolute;left:0;height:9px;width:30px;border-radius:999px;
  animation:tb-run 3.4s cubic-bezier(.34,.07,.3,1) .35s forwards}
.tb-page .dog.win{height:11px;box-shadow:0 0 0 2px rgba(14,91,65,.16)}

/* The lanes need a height, or five absolutely positioned dogs stack on one
   line — which is the squashed look. */
.tb-page .lane{position:absolute;left:0;right:0;height:14px;display:flex;
  align-items:center}

@media(prefers-reduced-motion:reduce){
  .tb-page .dog{animation:none;left:var(--end)}
}
