:root{
    --bg:#070709; --surface:#131316; --surface-2:#1c1c21; --raised:#26262c;
    --border:#2c2c33; --border-soft:#212127;
    --text:#f0f0f0; --muted:#9a9aa4; --faint:#6a6a74;
    --orange:#d93c09; --orange-lt:#ea714d; --orange-ink:#160702;
    --win:#37c06a; --place:#e8932a; --unplaced:#7a7a84; --cap:#f2c14e; --over:#e8532a;
    --sans:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
    --shadow:0 10px 30px -14px rgba(0,0,0,.8);
    --r:8px;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;
    line-height:1.45;-webkit-font-smoothing:antialiased}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  h1,h2,h3{margin:0;text-wrap:balance}
  .it{font-style:italic;font-weight:800;letter-spacing:-.01em}
  button{font-family:inherit;cursor:pointer}
  ::selection{background:var(--orange);color:#fff}

  /* Masthead */
  .masthead{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
    padding:12px clamp(14px,3vw,28px);background:rgba(7,7,9,.86);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border)}
  .logo{display:flex;align-items:center;gap:9px;margin-right:auto;text-decoration:none;color:var(--text)}
  .gg{font-style:italic;font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1}
  .gg span{color:var(--orange)}
  .logo .sub{font-style:italic;font-weight:800;font-size:15px;color:var(--muted);letter-spacing:-.01em}
  .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
    border:1px solid var(--border);border-radius:4px;padding:3px 7px;font-style:normal;font-weight:600}
  .chip{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);
    background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:6px 11px}
  .chip b{color:var(--text)}

  /* Hero */
  .hero{padding:26px clamp(14px,3vw,28px) 6px;max-width:1200px;margin:0 auto}
  .hero h1{font-size:clamp(26px,5vw,46px);font-style:italic;font-weight:800;line-height:.98;letter-spacing:-.025em}
  .hero h1 span{color:var(--orange)}
  .hero p{color:var(--muted);max-width:62ch;margin:12px 0 0}
  .hero .note{font-size:12px;color:var(--faint);margin-top:8px}

  .layout{display:grid;grid-template-columns:1fr 356px;gap:22px;align-items:start;
    max-width:1200px;margin:0 auto;padding:16px clamp(14px,3vw,28px) 120px}
  @media (max-width:900px){.layout{grid-template-columns:1fr}}

  .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
  .search{flex:1;min-width:150px;display:flex;align-items:center;gap:8px;background:var(--surface);
    border:1px solid var(--border);border-radius:6px;padding:8px 11px}
  .search input{border:0;background:transparent;color:var(--text);font:inherit;width:100%;outline:none}
  .search input::placeholder{color:var(--faint)}
  .btn{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:6px;
    padding:8px 13px;font-size:13px;font-weight:700}
  .btn:hover{border-color:var(--orange);color:var(--orange-lt)}
  .count{font-size:12px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}

  /* Race block */
  .race{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
  .race.hide{display:none}
  .rhead{display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--border)}
  .rtime{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--orange-lt)}
  .rcourse{font-style:italic;font-weight:800;letter-spacing:-.01em}
  .rmeta{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  .pill{border:1px solid var(--border);border-radius:4px;padding:2px 7px;font-size:10px;letter-spacing:.04em;
    text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .pill.hcap{color:var(--orange-lt);border-color:color-mix(in oklab,var(--orange) 45%,var(--border))}

  .runner{display:grid;grid-template-columns:22px 1fr auto auto auto;gap:12px;align-items:center;
    padding:9px 14px;border-top:1px solid var(--border-soft)}
  .runner:hover{background:var(--raised)}
  .runner.picked{background:color-mix(in oklab,var(--orange) 16%,var(--surface));
    box-shadow:inset 3px 0 0 var(--orange)}
  .silk{width:20px;height:24px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);cursor:pointer}
  .rn-main{cursor:pointer;min-width:0}
  .rn-name{font-weight:700;letter-spacing:-.01em;display:flex;align-items:baseline;gap:8px}
  .rn-name .odds{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:600}
  .rn-conn{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rn-conn b{color:var(--muted);font-weight:600}
  .rn-figs{text-align:right;font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
  .rn-figs .rpr{color:var(--text);font-weight:700}
  .rn-price{font-family:var(--mono);font-weight:800;color:var(--orange-lt);font-size:15px;text-align:right}
  .rowbtns{display:flex;gap:6px;align-items:center}
  .det,.pick{width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:transparent;
    color:var(--muted);font-size:14px;display:grid;place-items:center;transition:transform .15s}
  .det:hover{color:var(--text);border-color:var(--faint)}
  .det.open{transform:rotate(180deg);color:var(--orange-lt)}
  .pick{font-size:18px;font-weight:700}
  .pick:hover{border-color:var(--orange);color:var(--orange)}
  .runner.picked .pick{background:var(--orange);border-color:var(--orange);color:#fff}

  /* Smart card */
  .smartcard{padding:2px 14px 14px 48px;background:var(--surface);border-top:1px solid var(--border-soft);
    display:none;animation:drop .18s ease}
  .smartcard.open{display:block}
  @keyframes drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px 16px;margin:10px 0}
  .sc-grid .k{display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
  .sc-grid b{font-weight:700;font-size:13.5px}
  .sc-grid .sr{color:var(--orange-lt);font-family:var(--mono);font-size:11px;margin-left:5px}
  .angles{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
  .angle{font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:4px;
    background:color-mix(in oklab,var(--orange) 16%,transparent);color:var(--orange-lt);
    border:1px solid color-mix(in oklab,var(--orange) 30%,transparent)}
  .spotlight{font-size:13px;color:var(--muted);font-style:italic;line-height:1.5;max-width:80ch;
    border-left:2px solid var(--border);padding-left:12px}

  /* Stable rail */
  .stable{position:sticky;top:72px;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
  .stable h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:14px 16px 0;font-weight:700}
  .budget{padding:12px 16px 14px;border-bottom:1px solid var(--border)}
  .bglabel{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted)}
  .bglabel .mono{font-size:15px;color:var(--text);font-weight:800}
  .bar{height:7px;border-radius:99px;background:var(--surface-2);margin-top:8px;overflow:hidden}
  .bar > i{display:block;height:100%;width:0;background:var(--orange);border-radius:99px;transition:width .35s cubic-bezier(.2,.7,.2,1)}
  .bar.over > i{background:var(--over)}
  .slots{padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-height:56px}
  .slot{display:grid;grid-template-columns:20px 1fr auto auto;gap:9px;align-items:center;padding:8px;border-radius:6px}
  .slot.empty{color:var(--faint);font-size:12.5px;grid-template-columns:1fr;padding:9px 10px;
    border:1px dashed var(--border);margin:2px 0}
  .slot .nm{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .slot .rc{font-size:10.5px;color:var(--faint);font-family:var(--mono)}
  .slot .pr{font-family:var(--mono);font-weight:800;color:var(--orange-lt);font-size:13px}
  .slot .x{color:var(--faint);border:0;background:transparent;font-size:16px;padding:0 4px}
  .slot .x:hover{color:var(--over)}
  .slot.cap{background:color-mix(in oklab,var(--cap) 12%,transparent)}
  .capdot{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;font-size:10px;font-weight:800;
    border:1px solid var(--border);color:var(--faint);background:transparent}
  .capdot.on{background:var(--cap);color:#20160a;border-color:var(--cap)}
  .lockwrap{padding:12px 16px 16px}
  .lock{width:100%;border:0;border-radius:7px;background:var(--orange);color:#fff;font-weight:800;font-style:italic;
    font-size:16px;letter-spacing:.01em;padding:13px;transition:transform .1s,filter .2s}
  .lock:disabled{background:var(--surface-2);color:var(--faint);cursor:not-allowed;font-style:normal}
  .lock:not(:disabled):hover{filter:brightness(1.08)}
  .lock:not(:disabled):active{transform:translateY(1px)}
  .hint{font-size:11.5px;color:var(--faint);text-align:center;margin-top:9px;line-height:1.45}

  /* Results */
  .result-head{padding:18px 16px;border-bottom:1px solid var(--border);text-align:center}
  .result-head .pts{font-family:var(--mono);font-weight:800;font-size:44px;color:var(--orange-lt);line-height:1;letter-spacing:-.02em}
  .result-head .rank{font-size:13px;color:var(--muted);margin-top:7px}
  .result-head .rank b{color:var(--text)}
  .board{padding:8px 10px 4px}
  .brow{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:8px;border-radius:6px;font-size:13.5px}
  .brow.you{background:color-mix(in oklab,var(--orange) 17%,transparent);font-weight:800}
  .brow .pos{font-family:var(--mono);color:var(--faint);text-align:center}
  .brow .tot{font-family:var(--mono);font-weight:800}
  .breakdown{padding:6px 10px 12px}
  .bd{display:grid;grid-template-columns:20px 1fr auto auto;gap:9px;align-items:center;padding:7px 8px;
    border-top:1px solid var(--border-soft);font-size:13px}
  .bd .res{font-size:10px;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:4px;font-weight:800}
  .res.won{background:color-mix(in oklab,var(--win) 24%,transparent);color:var(--win)}
  .res.placed{background:color-mix(in oklab,var(--place) 24%,transparent);color:var(--place)}
  .res.ran,.res.dnc,.res.non_runner{background:var(--surface-2);color:var(--unplaced)}
  .bd .bpts{font-family:var(--mono);font-weight:800;text-align:right}
  .capmark{color:var(--cap);font-weight:800;font-size:10px}
  .again{margin:2px 16px 16px;width:calc(100% - 32px);background:var(--surface-2);border:1px solid var(--border);
    color:var(--text);border-radius:6px;padding:11px;font-weight:700}
  .again:hover{border-color:var(--orange);color:var(--orange-lt)}

  .foot{max-width:1200px;margin:0 auto;padding:0 clamp(14px,3vw,28px) 44px;color:var(--faint);font-size:11.5px;line-height:1.6}

  .mob{display:none}
  @media (max-width:900px){
    .stable{position:static}
    .runner{grid-template-columns:22px 1fr auto auto}
    .rn-figs{display:none}
    .mob{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:12px;align-items:center;
      padding:11px 16px;background:rgba(7,7,9,.94);backdrop-filter:blur(10px);border-top:1px solid var(--border)}
    .mob .s{font-size:12px;color:var(--muted)}.mob .s b{color:var(--text);font-family:var(--mono)}
    .mob button{margin-left:auto;background:var(--orange);color:#fff;border:0;border-radius:6px;font-weight:800;font-style:italic;padding:10px 16px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.mob button:disabled{background:var(--surface-2);color:var(--faint);cursor:not-allowed;font-style:normal}
