:root {
    color-scheme: dark;
    --bg: #0a0a0a;
    --panel: #121212;
    --panel-2: #0f0f0f;
    --panel-3: #161616;
    --line: #1f1f1f;
    --line-2: #2a2a2a;
    --line-3: #343434;
    --ink: #efefef;
    --ink-2: #c6c9cd;
    --ink-3: #8a8d93;
    --ink-4: #6f6f74;
    --white: #ffffff;
    --blue: #73bbff;
    --pink: #ff83d0;
    --yellow: #ffd272;
    --purple: #d572ff;
    --orange: #ffa372;
    --s1: #2f8fe8; --s2: #e83fa6; --s3: #b3891a; --s4: #a23fe0; --s5: #d9602a;
    --ok: #6fd08c; --warn: #e0b25a; --bad: #ff7b7b;
    --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --code: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --max: 1136px;
  }
  * { box-sizing: border-box; }
  html { background: var(--bg); }
  body {
    margin: 0; background: var(--bg); color: var(--ink-2);
    font-family: var(--sans); font-size: 16px; line-height: 1.45; letter-spacing: -0.08px;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, button:focus-visible { outline: 1.5px solid var(--blue); outline-offset: 3px; border-radius: 5px; }
  code { font-family: var(--code); font-size: .92em; color: var(--ink); }
  h1, h2, h3 { margin: 0; color: var(--white); font-weight: 500; text-wrap: balance; letter-spacing: -0.24px; }
  h1 { font-size: 40px; line-height: 1.2; letter-spacing: -0.4px; }
  h2 { font-size: 24px; line-height: 1.3; }
  h3 { font-size: 17px; line-height: 1.35; }
  p { margin: 0; }
  .num { font-variant-numeric: tabular-nums; }
  .meta { font-size: 13px; color: var(--ink-3); }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

  /* nav */
  .nav { position: sticky; top: 0; z-index: 20; background: rgba(10,10,10,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 24px; }
  .brand { display: flex; align-items: center; gap: 10px; color: var(--white); font-weight: 500; font-size: 15px; }
  .brand .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--white); position: relative; }
  .brand .dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--white); }
  .brand .sep { color: var(--ink-4); font-weight: 400; }
  .nav-right { display: flex; align-items: center; gap: 22px; }
  .nav-links { display: flex; gap: 22px; font-size: 14px; color: var(--ink-3); }
  .gh { display: inline-flex; align-items: center; gap: 8px; border-radius: 7px; padding: 7px 12px; font-size: 13.5px; font-weight: 500; border: 1px solid var(--line-3); color: var(--white); background: var(--panel-3); cursor: pointer; font-family: var(--sans); transition: background .2s, border-color .2s; }
  .gh:hover { background: #1d1d1d; border-color: #454545; }
  .gh svg { width: 16px; height: 16px; fill: currentColor; }
  .me { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
  .me .avatar { width: 24px; height: 24px; font-size: 11px; }
  .me button { background: none; border: 0; color: var(--ink-3); font-size: 13px; cursor: pointer; font-family: var(--sans); padding: 0; }
  .me button:hover { color: var(--ink); }
  .prize { color: var(--white); font-weight: 500; font-variant-numeric: tabular-nums; }
  .bonus { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
  .bonus i { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
  .prizebox { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
  .prizebox > div { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 10px; padding: 16px 18px; }
  .prizebox .k { font-size: 13px; color: var(--ink-3); }
  .prizebox .v { font-size: 24px; font-weight: 500; color: var(--white); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
  .prizebox .d { font-size: 13px; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }
  .note { font-size: 13px; color: var(--ink-3); }
  .nav-links a { padding: 6px 0; border-bottom: 1px solid transparent; }
  .nav-links a.active { color: var(--ink); border-bottom-color: var(--ink); }
  .nav-links a:hover { color: var(--ink); }

  /* pills & buttons */
  .shiny { position: relative; border-radius: 36px; padding: 1px; overflow: hidden; display: inline-flex; }
  .shiny::before { content: ""; position: absolute; inset: 0; border-radius: 36px; background: radial-gradient(circle 140px at 2% 10%, #fff 0%, rgba(255,255,255,.5) 12%, rgba(255,255,255,.2) 90%, transparent 100%); }
  .shiny::after { content: ""; position: absolute; inset: -70%; opacity: 0; background: conic-gradient(from 42deg, transparent 0deg, rgba(255,255,255,.08) 72deg, rgba(255,255,255,.7) 118deg, rgba(255,255,255,.12) 164deg, transparent 230deg, transparent 360deg); transition: opacity .5s ease-out; }
  .shiny:hover::after { opacity: 1; animation: spin 3.6s linear infinite; }
  .shiny > span { position: relative; z-index: 1; border-radius: 35px; background: var(--bg); color: var(--white); padding: 9px 16px; font-size: 15px; line-height: 1.45; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 7px; padding: 9px 14px; font-size: 14px; font-weight: 500; border: 1px solid var(--line-3); color: var(--white); background: var(--panel-3); cursor: pointer; transition: background .2s, border-color .2s; font-family: var(--sans); }
  .btn:hover { background: #1d1d1d; border-color: #454545; }
  .btn.primary { background: var(--white); color: #0a0a0a; border-color: var(--white); }
  .btn.primary:hover { background: #e6e6e6; }

  /* hero */
  .hero { margin: 28px auto 0; max-width: var(--max); padding: 0 24px; }
  .hero-card { position: relative; overflow: hidden; border-radius: 32px; border: 1px solid var(--line); background: var(--bg); padding: 70px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .hero-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
  .hero-card::before { content: ""; position: absolute; left: 50%; top: 50%; width: 94%; height: 160%; transform: translate(-50%,-50%); background: rgba(22,22,22,.75); backdrop-filter: blur(12px); -webkit-mask-image: radial-gradient(ellipse 68% 55% at 50% 60%, #000 40%, transparent 72%); mask-image: radial-gradient(ellipse 68% 55% at 50% 60%, #000 40%, transparent 72%); }
  .hero-card > * { position: relative; }
  .hero-meta { display: flex; align-items: center; gap: 20px; color: var(--ink-2); font-size: 15px; }
  .hero-sub { max-width: 570px; color: var(--ink-2); }
  .hero-sub b { color: var(--white); font-weight: 500; }

  /* sections */
  section.block { max-width: var(--max); margin: 56px auto 0; padding: 0 24px; }
  .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
  .eyebrow { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-bottom: 6px; }

  /* challenge grid */
  .grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .card { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 20px 22px; transition: border-color .2s, background .2s; }
  .card:hover { border-color: var(--line-3); background: #141414; }
  .card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .tag { font-size: 12.5px; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 8px; line-height: 1.3; }
  .tag.id { color: var(--white); border-color: var(--line-3); font-weight: 500; }
  .tag.area-kernels { color: var(--blue); } .tag.area-optimizer { color: var(--pink); } .tag.area-io { color: var(--yellow); } .tag.area-comms { color: var(--purple); } .tag.area-transfer { color: var(--orange); }
  .card { position: relative; }
  .card h3 { font-size: 18px; }
  .card-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
  .card .handle, .card .status { position: relative; z-index: 1; }
  .card .bar { font-size: 14px; color: var(--ink-2); }
  .card-mid { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-3); }
  .card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
  .leader { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
  .avatar { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #0a0a0a; flex: none; }
  .handle { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-weight: 500; }
  .handle:hover { text-decoration: underline; text-underline-offset: 3px; }
  .handle.ref { color: var(--ink-3); font-weight: 400; }
  .leader .x { color: var(--white); font-weight: 500; font-variant-numeric: tabular-nums; }

  /* tables */
  .table { width: 100%; border-collapse: collapse; font-size: 14px; }
  .table th { text-align: left; font-size: 13px; color: var(--ink-3); font-weight: 500; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  .table td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); }
  .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .table tr:last-child td { border-bottom: 0; }
  .table tr:hover td { background: #131313; }
  .table td.name { color: var(--white); font-weight: 500; }
  .table .sub { color: var(--ink-3); font-size: 13px; font-weight: 400; }
  .scroll { overflow-x: auto; }
  .status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; border-radius: 999px; padding: 3px 10px 3px 8px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
  .status i { width: 6px; height: 6px; border-radius: 50%; }
  .status.verified i { background: var(--ok); } .status.provisional i { background: var(--warn); } .status.failed i, .status.invalid i { background: var(--bad); } .status.landed i, .status.merged i, .status.production i { background: var(--blue); } .status.open i, .status.stale i { background: var(--ink-3); } .status.queued i, .status.running i { background: var(--purple); }

  /* live fleet strip (index.html #strip, filled by live.js) */
  .strip { max-width: var(--max); margin: 14px auto 0; padding: 0 20px;
           display: flex; gap: 18px; flex-wrap: wrap;
           font-size: 12.5px; color: var(--ink-3); }
  .strip b { color: var(--ink-2); font-weight: 500; }

  /* panels */
  .panel { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 20px 22px; }
  .two { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; }
  .stack { display: flex; flex-direction: column; gap: 12px; }
  .kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; font-size: 14px; margin: 0; }
  .kv dt { color: var(--ink-3); }
  .kv dd { margin: 0; color: var(--ink-2); }
  .kv dd b { color: var(--white); font-weight: 500; }
  .list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
  .list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; color: var(--ink-2); }
  .list li i { width: 5px; height: 5px; border-radius: 50%; margin-top: 8px; background: var(--ink-4); }
  .list li b { color: var(--white); font-weight: 500; }
  .steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
  .steps li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
  .steps li:last-child { border-bottom: 0; }
  .steps li span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .steps li b { color: var(--white); font-weight: 500; }
  pre.cmd { margin: 0; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 7px; padding: 14px 16px; font-family: var(--code); font-size: 12.5px; line-height: 1.6; color: var(--ink-2); overflow-x: auto; }
  pre.cmd .c { color: var(--ink-4); } pre.cmd .k { color: var(--blue); }

  /* charts */
  .chart { position: relative; }
  .chart svg { display: block; width: 100%; height: auto; }
  .chart text { font-family: var(--sans); font-size: 12px; fill: var(--ink-3); }
  .chart .grid line { stroke: var(--line-2); stroke-width: 1; }
  .chart .lbl { fill: var(--ink-2); font-size: 13px; }
  .chart .val { fill: var(--white); font-size: 13px; font-weight: 500; }
  .chart .ref { fill: var(--ink-3); font-size: 12px; }
  .tip { position: absolute; pointer-events: none; background: #0f0f0f; border: 1px solid var(--line-3); border-radius: 7px; padding: 8px 11px; font-size: 13px; color: var(--ink-2); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .12s; z-index: 5; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
  .tip b { color: var(--white); font-weight: 500; }
  .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin-top: 12px; }
  .legend span { display: inline-flex; align-items: center; gap: 7px; }
  .legend i { width: 12px; height: 2px; display: inline-block; border-radius: 1px; }
  .legend i.sq { height: 10px; width: 10px; border-radius: 2px; }
  .chart-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
  .chart-title h3 { font-size: 15px; }

  /* detail header */
  .detail-head { display: flex; flex-direction: column; gap: 14px; padding-top: 36px; }
  .detail-head h1 { font-size: 32px; max-width: 820px; }
  .crumbs { font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; }
  .crumbs a:hover { color: var(--ink); }
  .barbox { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
  .barbox > div { padding: 18px 22px; border-right: 1px solid var(--line-2); background: var(--panel-2); }
  .barbox > div:last-child { border-right: 0; }
  .barbox .k { font-size: 13px; color: var(--ink-3); }
  .barbox .v { font-size: 26px; font-weight: 500; color: var(--white); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
  .barbox .d { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

  .lanes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
  .lane { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }

  footer { max-width: var(--max); margin: 72px auto 40px; padding: 20px 24px 0; display: flex; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--ink-4); border-top: 1px solid var(--line); }
  footer a:hover { color: var(--ink-2); }

  @media (prefers-reduced-motion: reduce) { .shiny:hover::after { animation: none; } }
  @media (max-width: 860px) {
    .grid, .two, .lanes, .barbox { grid-template-columns: 1fr; }
    .barbox > div { border-right: 0; border-bottom: 1px solid var(--line-2); }
    .barbox > div:last-child { border-bottom: 0; }
    .hero-card { padding: 44px 22px; border-radius: 24px; }
    h1 { font-size: 32px; }
      .nav-links { gap: 14px; font-size: 13px; }
    .nav-right { gap: 12px; }
    .gh span { display: none; }
    .prizebox { grid-template-columns: 1fr; }
    .kv { grid-template-columns: 1fr; }
  }