/* Fonts as served on mistral.ai — drop these @font-face rules when embedded there */
  @font-face{font-family:"ALTMistral";font-weight:400;font-display:swap;src:url("/assets/ALTMistral-Regular.woff2") format("woff2");}
  @font-face{font-family:"ALTMistral";font-weight:500;font-display:swap;src:url("/assets/ALTMistral-Medium.woff2") format("woff2");}
  @font-face{font-family:"ALTMistral";font-weight:600;font-display:swap;src:url("/assets/ALTMistral-Semibold.woff2") format("woff2");}

  /* mistral.ai site tokens (light), scoped to the embed */
  .ctf-race{
    --text-primary:#18181b;      /* zinc-900 */
    --text-secondary:#27272a;    /* zinc-800 */
    --text-tertiary:#6d6d78;     /* steel-500 */
    --surface-1:#fbfbf8;         /* surface-brand-primary */
    --surface-2:#f5f4ef;         /* surface-brand-secondary */
    --surface-3:#ebe9e0;         /* surface-brand-tertiary */
    --border:#e4e3de;            /* border-primary */
    --border-2:#c9c9c4;          /* border-secondary */
    --action:#09090b;            /* action-primary / zinc-950 */
    --action-hover:#18181b;      /* action-secondary / zinc-900 */
    --action-text:#fafafa;       /* text-invert / zinc-50 */
    --ours-bg:#fff0eb;           /* orange-50 */

    /* logo pixel palette */
    --px-yellow:#ffd800;--px-amber:#ffaf00;--px-tangerine:#ff8205;--px-orange:#fa500f;--px-red:#e10500;
    --px-other:#56566c;          /* navy-700 */
    --px-empty:#e4e2d6;          /* cream-300 */
    --px-ours-empty:#ffdccf;     /* orange-100 */
    --cr-trophy:url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M5.00977%205V9H1V5H5.00977Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M5.00977%209V13H1V9H5.00977Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M9.00977%205V9H5V5H9.00977Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M9.00977%209V13H5V9H9.00977Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M9.00977%2013V17H5V13H9.00977Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M9.00977%2025V29H5V25H9.00977Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M13.0098%2017V21H9V17H13.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M13.0098%2025V29H9V25H13.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M17.0098%2021V25H13V21H17.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M17.0098%2025V29H13V25H17.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M21.0098%2017V21H17V17H21.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M21.0098%2025V29H17V25H21.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M25.0098%205V9H21V5H25.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M25.0098%209V13H21V9H25.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M9.00977%201V5H5V1H9.00977Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M13.0098%201V5H9V1H13.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M17.0098%201V5H13V1H17.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M21.0098%201V5H17V1H21.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M25.0098%201V5H21V1H25.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M25.0098%2013V17H21V13H25.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M25.0098%2025V29H21V25H25.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M29.0098%205V9H25V5H29.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3Cpath%20d%3D%22M29.0098%209V13H25V9H29.0098Z%22%20fill%3D%22%23171722%22%2F%3E%0A%3C%2Fsvg%3E%0A");

    --font-mistral:"ALTMistral",ui-sans-serif,system-ui,sans-serif;
    --font-inter:var(--font-mistral);
    --font-mono:var(--font-mistral);
    /* Sampled response of the row reordering spring (K=260, D=29). */
    --cr-row-spring-ease:linear(0,.143 10%,.391 20%,.613 30%,.776 40%,.88 50%,.941 60%,.975 70%,.991 80%,.998 90%,1);

    /* quote sides: size-10 / md:size-17; middle: fixed content column */
    --cr-side:2.5rem;
    --cr-body:45rem;             /* 720px — same as prior race max-width */

    width:100%;max-width:100%;height:auto;margin:0;padding:0;
    color:var(--text-primary);font-family:var(--font-inter);font-size:15px;line-height:1.5;letter-spacing:-.01em;
    -webkit-font-smoothing:antialiased;
    scroll-margin-top:calc(var(--nav-height, 48px) + 12px);
  }
  .ctf-race{position:relative;}
  .ctf-race *{box-sizing:border-box;margin:0;}

  .cr-mono{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:0;}

  /* Quote-card chrome — fixed width, height follows content */
  .cr-quote{display:flex;align-items:stretch;width:100%;height:auto;margin-bottom:2.5rem;}
  .cr-quote-mark{appearance:none;cursor:pointer;flex:0 0 var(--cr-side);width:var(--cr-side);height:var(--cr-side);padding:0;flex-shrink:0;
    position:sticky;top:0;align-self:flex-start;
    display:flex;align-items:center;justify-content:center;background:#242433;color:#fff;
    border:none;z-index:1;transition:background-color .15s;}
  .cr-quote-mark:hover{background:#323248;}
  .cr-quote-mark:focus-visible{outline:none;}
  .cr-quote-mark .ico{display:block;width:.8rem;height:.8rem;}
  .cr-quote-mark .ico svg,.cr-quote-mark .ico img{display:block;width:100%;height:100%;}
  .cr-quote-mark .ico img{filter:brightness(0) invert(1);}
  .cr-quote-mark .ico img[src*="uturn"]{transform:scale(.8);}
  .cr-quote-body{flex:1 1 auto;width:var(--cr-body);max-width:none;min-width:0;
    height:auto;padding:0;border:none;background:var(--surface-2);border-radius:12px;overflow:hidden;}
  .cr-quote-end{display:flex;align-items:flex-end;align-self:stretch;flex:0 0 var(--cr-side);width:var(--cr-side);flex-shrink:0;}
  .cr-quote-block{width:var(--cr-side);height:var(--cr-side);flex-shrink:0;position:sticky;bottom:0;border:none;background:var(--surface-3);
    display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;}
  .cr-quote-block:focus-visible{outline:none;}
  .cr-quote-block img{display:block;width:.8rem;height:.8rem;}
  @media (min-width:768px){
    .ctf-race{--cr-side:4.25rem;}
    .cr-quote-mark .ico{width:1.4rem;height:1.4rem;}
    .cr-quote-block img{width:1.4rem;height:1.4rem;}
  }
  @media (max-width:calc(45rem + 5rem + 32px)){
    .ctf-race{width:100%;}
    .cr-quote-body{width:auto;}
  }

  /* Pane */
  .cr-pane{position:relative;}
  .cr-pane + .cr-pane{border-top:none;}
  .cr-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--cr-side);padding:0 12px;position:relative;box-sizing:border-box;}
  .cr-progress{position:sticky;top:0;z-index:3;height:2px;margin-top:-2px;background:color-mix(in srgb, #343446 12%, var(--surface-2));}
  .cr-progress + .cr-axis{margin-top:10px;}
  .cr-progress i{display:block;height:100%;width:0;background:#242433;transition:width .3s linear;}
  .cr-bar > *{display:flex;align-items:center;padding:0;}
  .cr-bar-side{flex:0 0 auto;gap:8px;}
  .cr-axis .cr-clock{position:absolute;right:16px;top:8px;height:1.25rem;align-items:baseline;transform:none;}
  .cr-heading{min-width:0;}
  .cr-title{flex:1;min-width:0;margin:0;font-family:var(--font-mistral);font-size:1rem;line-height:1.5rem;letter-spacing:normal;font-weight:500;color:#242433;}
  .cr-seg{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.25rem;
    border:1px solid var(--border);border-radius:.5rem;background:var(--surface-2);box-sizing:border-box;}
  .cr-bar .cr-seg{flex:0 0 auto;}
  .cr-seg-thumb{position:absolute;top:.25rem;bottom:.25rem;left:0;width:0;
    border-radius:.25rem;background:var(--surface-1);outline:1px solid var(--border);
    pointer-events:none;z-index:0;
    transition:transform .35s cubic-bezier(.22,1.1,.36,1),width .35s cubic-bezier(.22,1.1,.36,1);}
  .cr-seg button{appearance:none;cursor:pointer;position:relative;z-index:1;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;gap:.375rem;
    height:1.75rem;padding:0 .625rem;border:none;border-radius:.25rem;background:transparent;color:var(--text-primary);
    font-family:var(--font-mistral);font-size:.875rem;line-height:1.25rem;letter-spacing:.02em;font-weight:500;
    opacity:.5;transition:opacity .2s ease;}
  .cr-seg button .cr-seg-label{white-space:nowrap;}
  .cr-seg button:hover{opacity:.75;}
  .cr-seg button.on{opacity:1;}
  .cr-seg button:focus-visible{outline:2px solid var(--px-orange);outline-offset:1px;}
  @media (prefers-reduced-motion:reduce){
    .cr-seg-thumb{transition:none;}
  }
  .cr-bar .cell{border-left:1px solid var(--border);color:var(--text-tertiary);gap:8px;}
  .cr-clock{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary);
    font-family:var(--font-mistral);font-size:.875rem;line-height:1.25rem;letter-spacing:.02em;font-weight:500;}
  .cr-clock .cr-num{font:inherit;font-variant-numeric:lining-nums tabular-nums;}
  .cr-clock span{font-variant-numeric:lining-nums tabular-nums;}
  .cr-clock.is-done{align-items:stretch;white-space:normal;min-width:0;max-width:100%;}
  .cr-done-stack{display:flex;flex-direction:column;align-items:stretch;line-height:1.1;text-align:right;min-width:0;max-width:100%;}
  .cr-done-lead{opacity:.5;font-variant-numeric:normal;}
  .cr-done-mins{
    display:block;font-variant-numeric:lining-nums tabular-nums;
    min-width:0;max-width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .cr-done-mins.is-mistral{display:flex;align-items:baseline;gap:4px;color:#fa500f;overflow:hidden;}
  .cr-done-mins.is-mistral > .cr-mark{flex:none;}
  .cr-done-mins.is-mistral > span{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* Variant 2 — 1/3 controls | 2/3 race board */
  .ctf-race[data-variant="v2"]{user-select:none;-webkit-user-select:none;}
  .ctf-race[data-variant="v2"] .cr-title,
  .ctf-race[data-variant="v2"] .cr-heading .text-body-base,
  .ctf-race[data-variant="v2"] .cr-count{
    user-select:text;-webkit-user-select:text;
  }
  .ctf-race[data-variant="v2"] > .cr-quote-body{
    width:100%;max-width:none;flex:none;
    --cr-inner-radius:12px;
    --cr-inner-inset:8px;
    --cr-outer-radius:calc(var(--cr-inner-radius) + var(--cr-inner-inset));
    border:1px solid var(--border);border-radius:var(--cr-outer-radius);
    background:var(--surface-2);
  }
  .ctf-race[data-variant="v2"] .cr-pane-split{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:stretch;min-width:0;
  }
  .ctf-race[data-variant="v2"] .cr-side{
    display:flex;flex-direction:column;gap:16px;padding:12px;
    min-width:0;background:#fff;
    margin:var(--cr-inner-inset);
    border:1px solid color-mix(in srgb, var(--border) 50%, transparent);
    border-radius:var(--cr-inner-radius);
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-title{
    flex:none;height:auto;display:block;
    font-size:1rem;line-height:1.25rem;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-title-sub{
    margin-top:1px;opacity:.5;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-heading.is-hover > .cr-title:not(.cr-title-sub){
    opacity:.5;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-heading.is-hover > .cr-title-sub{
    opacity:1;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-heading .text-body-base{
    margin:.5rem 0 0;opacity:.75;text-wrap:balance;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-meta{
    margin:.5rem 0 0;font-family:var(--font-mistral);font-size:.875rem;line-height:1.25rem;
    letter-spacing:.02em;font-weight:500;color:var(--text-primary);
    display:flex;align-items:center;gap:.375rem;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-meta[hidden]{display:none;}
  .ctf-race[data-variant="v2"] .cr-side .cr-meta-chip{
    display:inline-flex;align-items:center;flex:none;
    height:1.25rem;padding:0 .5rem;border-radius:.25rem;
    margin-left:-2px;
    font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.75rem;line-height:1;letter-spacing:0;font-weight:400;
    text-transform:uppercase;
    color:#fff;background:var(--px-other);
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-meta-chip.d-easy{background:var(--px-amber);color:#242433;}
  .ctf-race[data-variant="v2"] .cr-side .cr-meta-chip.d-med{background:var(--px-orange);}
  .ctf-race[data-variant="v2"] .cr-side .cr-meta-chip.d-hard{background:var(--px-red);}
  .ctf-race[data-variant="v2"] .cr-side-head{display:contents;}
  .ctf-race[data-variant="v2"] .cr-side .cr-play-row{
    display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:auto;align-self:stretch;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-play{
    flex:none;appearance:none;cursor:pointer;
    border:1px solid color-mix(in srgb, var(--action) 12%, transparent);
    transition:width .3s cubic-bezier(.2,.9,.25,1),background-color .15s;
  }
  .ctf-race[data-variant="v2"] .cr-timing{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;line-height:1;
    min-width:0;flex:1 1 auto;overflow:hidden;
  }
  .ctf-race[data-variant="v2"] .cr-board-head .cr-clock{
    position:static;height:auto;transform:none;line-height:1.1;
    min-width:0;max-width:100%;width:100%;
  }
  .ctf-race[data-variant="v2"] .cr-subhead{
    margin:0;font-family:var(--font-mistral);font-size:.875rem;line-height:1.1;
    letter-spacing:.02em;font-weight:500;color:var(--text-primary);opacity:.5;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-play [data-cr-icon] svg,
  .ctf-race[data-variant="v2"] .cr-side .cr-play [data-cr-icon] img{
    display:block;width:100%;height:100%;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-play [data-cr-icon] img{
    filter:brightness(0) invert(1);
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-play [data-cr-icon] img[src*="uturn"]{
    transform:scale(.8);
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-play [data-cr-icon="in"]{opacity:0;}
  .ctf-race[data-variant="v2"] .cr-side .cr-play [data-cr-icon="out"]{opacity:1;}
  .ctf-race[data-variant="v2"] .cr-side .cr-play:hover [data-cr-icon="in"],
  .ctf-race[data-variant="v2"] .cr-side .cr-play:focus-visible [data-cr-icon="in"]{opacity:1;}
  .ctf-race[data-variant="v2"] .cr-side .cr-play:hover [data-cr-icon="out"],
  .ctf-race[data-variant="v2"] .cr-side .cr-play:focus-visible [data-cr-icon="out"]{opacity:0;}
  .ctf-race[data-variant="v2"] .cr-side .cr-play.is-icon{
    width:2.5rem;min-width:2.5rem;padding-left:0;padding-right:0;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-play.is-icon > div{
    justify-content:center;gap:0;width:100%;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-play.is-icon > div > p{display:none;}
  .ctf-race[data-variant="v2"] .cr-side .cr-play.is-icon [data-cr-icon="in"]{display:none;}
  .ctf-race[data-variant="v2"] .cr-side .cr-play.is-icon [data-cr-icon="out"],
  .ctf-race[data-variant="v2"] .cr-side .cr-play.is-icon:hover [data-cr-icon="out"],
  .ctf-race[data-variant="v2"] .cr-side .cr-play.is-icon:focus-visible [data-cr-icon="out"]{
    opacity:1;transform:none !important;translate:none;transition:none;position:relative;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-play-progress{
    position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
    background:color-mix(in srgb, #fff 18%, transparent);
    opacity:1;transition:opacity .45s ease;
  }
  .ctf-race[data-variant="v2"] .cr-side .cr-play-progress.is-done{opacity:0;}
  .ctf-race[data-variant="v2"] .cr-side .cr-play-progress i{
    display:block;height:100%;width:0;background:currentColor;transition:width .3s linear;
  }
  .ctf-race[data-variant="v2"] .cr-board{min-width:0;position:relative;padding:16px 0 72px;}
  .ctf-race[data-variant="v2"] .cr-board-head{
    position:absolute;z-index:4;left:16px;right:16px;bottom:16px;height:40px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .ctf-race[data-variant="v2"] .cr-sort{display:flex;align-items:center;gap:8px;flex:none;}
  .ctf-race[data-variant="v2"] .cr-sort-label{
    flex:none;font-family:var(--font-mistral);font-size:.875rem;line-height:1.25rem;
    letter-spacing:.02em;font-weight:500;color:var(--text-primary);opacity:.5;
  }
  .ctf-race[data-variant="v2"] .cr-sort .cr-seg{flex:none;}
  .ctf-race[data-variant="v2"] .cr-board-head .cr-done-stack{
    align-items:stretch;text-align:left;min-width:0;max-width:100%;width:100%;
  }
  .ctf-race[data-variant="v2"] .cr-board .cr-axis{position:relative;top:auto;height:1.75rem;align-items:baseline;background:transparent;}
  .ctf-race[data-variant="v2"] .cr-board .cr-axis .cr-main{padding-top:0;padding-bottom:0;display:flex;align-items:baseline;height:100%;}
  .ctf-race[data-variant="v2"] .cr-board .cr-axis .cr-strip{align-items:baseline;width:100%;}
  /* Strut keeps category labels aligned within the 28px axis row. */
  .ctf-race[data-variant="v2"] .cr-board .cr-axis .cr-strip::before{content:"\200b";font-size:1.25rem;line-height:1.75rem;}
  .ctf-race[data-variant="v2"] .cr-board .cr-axis .cr-strip .g{line-height:1.25rem;}
  @media (prefers-reduced-motion:reduce){
    .ctf-race[data-variant="v2"] .cr-side .cr-play{transition:background-color .15s;}
  }
  @media (max-width:768px){
    .ctf-race[data-variant="v2"] .cr-pane-split{grid-template-columns:1fr;}
    .ctf-race[data-variant="v2"] .cr-side-head{
      display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:12px;
    }
    .ctf-race[data-variant="v2"] .cr-side .cr-heading{display:contents;}
    .ctf-race[data-variant="v2"] .cr-side .cr-title,
    .ctf-race[data-variant="v2"] .cr-side .cr-meta{grid-column:1;min-width:0;}
    /* Fixed height = category chip + 2 lines of description,
       so the layout doesn't jump between default and hover states. */
    .ctf-race[data-variant="v2"] .cr-side .cr-detail{
      grid-column:1 / -1;min-width:0;overflow:hidden;
      height:calc(2.25rem + 2 * var(--text-body-base--line-height, 1.5rem));
    }
    .ctf-race[data-variant="v2"] .cr-side .cr-heading .text-body-base{max-width:80%;}
    .ctf-race[data-variant="v2"] .cr-side .cr-heading.is-hover .text-body-base{
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
    }
    .ctf-race[data-variant="v2"] .cr-side .cr-play-row{
      grid-column:2;grid-row:1 / span 2;margin-top:0;align-self:start;justify-content:flex-end;
    }
  }

  /* Leaderboard */
  /* Row = (name + task / full-width strip of square pixels) | count. Axis reuses the same columns. */
  /* Rows are absolutely positioned; each row's height is measured so square (ours) rows
     take more vertical space than thin-bar rows. Gaps come from --row-gap. */
  .cr-lb{position:relative;--lb-top:10px;--lb-bottom:16px;--row-gap:18px;}
  /* Full-height column hit targets sit behind rows (rows are pointer-events:none so
     hover works continuously across row gaps and the name/count band). */
  .cr-cols{position:absolute;inset:0;z-index:0;display:flex;gap:1px;padding:0 16px;
    pointer-events:none;min-width:0;}
  .cr-cols .g{flex:var(--n) 1 calc((var(--n) - 1) * 1px);display:flex;gap:1px;min-width:0;height:100%;}
  .cr-col{position:relative;flex:1 1 0;min-width:0;height:100%;pointer-events:auto;cursor:default;}
  /* Visual highlight spans the board; the .cr-col hit target itself remains leaderboard-only. */
  .cr-col.is-hl::before{
    content:"";position:absolute;left:0;width:calc(200% + 1px);top:-44px;bottom:-72px;
    background:linear-gradient(to right,color-mix(in srgb,var(--px-other) 3%,transparent),transparent);
    pointer-events:none;
  }
  .cr-row{position:absolute;top:var(--lb-top);left:0;right:0;display:flex;will-change:transform;
    z-index:1;pointer-events:none;}
  .cr-row.ours{z-index:1;}
  .cr-main{flex:1;min-width:0;padding:0 16px;}
  .cr-info{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0;margin-bottom:6px;}
  .cr-name,.cr-count{font-family:var(--font-mistral);font-size:.875rem;line-height:1.25rem;letter-spacing:.02em;font-weight:500;color:var(--text-primary);}
  .cr-name{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;
    pointer-events:none;user-select:none;-webkit-user-select:none;transition:opacity .12s;}
  .cr-lb.hovering .cr-name{opacity:.5;}
  .cr-lb.hovering .cr-row.is-hot .cr-name,
  .cr-lb.hovering .cr-row.is-win .cr-name{opacity:1;}
  /* Cat mark: painted pixels fill the PNG bottom edge, so baseline = visible cat bottom. */
  .cr-mark{display:block;height:.75rem;width:auto;flex-shrink:0;margin:0;align-self:baseline;image-rendering:pixelated;}
  .cr-trophy{
    flex:none;width:.75rem;height:.75rem;align-self:center;
    image-rendering:pixelated;
    background-color:var(--px-amber);
    background-image:linear-gradient(
      45deg,
      var(--px-amber) 0%,
      var(--px-amber) 38%,
      color-mix(in srgb, var(--px-yellow) 65%, #fff) 50%,
      var(--px-amber) 62%,
      var(--px-amber) 100%
    );
    background-size:250% 250%;
    background-repeat:no-repeat;
    -webkit-mask:var(--cr-trophy) center/contain no-repeat;
    mask:var(--cr-trophy) center/contain no-repeat;
    animation:cr-trophy-shimmer 2.4s ease-in-out infinite;
  }
  @keyframes cr-trophy-shimmer{
    0%{background-position:170% -70%;}
    100%{background-position:-70% 170%;}
  }
  .cr-count{display:inline-flex;align-items:baseline;gap:.25em;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .cr-count-normal{display:inline-flex;align-items:baseline;gap:.25em;transition:opacity .12s;}
  .cr-lb.hovering .cr-count-normal{opacity:0;}
  .cr-hover-time{
    position:absolute;top:0;z-index:2;pointer-events:none;white-space:nowrap;
    display:inline-flex;align-items:baseline;gap:.35em;
    font-family:var(--font-mistral);font-size:.875rem;line-height:1.25rem;
    letter-spacing:.02em;font-weight:500;color:var(--text-primary);
  }
  .cr-hover-time.is-muted{opacity:.5;}
  .cr-hover-gap{margin-left:.4em;opacity:.5;font-variant-numeric:tabular-nums;}
  .cr-hover-time.is-running{
    --cr-run:color-mix(in srgb, var(--text-primary) 42%, transparent);
    --cr-run-hi:color-mix(in srgb, var(--text-primary) 78%, transparent);
    background-image:linear-gradient(
      100deg,
      var(--cr-run) 0%,
      var(--cr-run) 38%,
      var(--cr-run-hi) 50%,
      var(--cr-run) 62%,
      var(--cr-run) 100%
    );
    background-size:220% 100%;
    background-clip:text;-webkit-background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:cr-hover-shimmer 2.4s ease-in-out infinite;
  }
  @keyframes cr-hover-shimmer{
    0%{background-position:120% 0;}
    100%{background-position:-120% 0;}
  }
  @media (prefers-reduced-motion:reduce){
    .cr-hover-time.is-running{
      animation:none;background:none;color:var(--text-primary);-webkit-text-fill-color:currentColor;
      opacity:.5;
    }
    .cr-trophy{animation:none;background:var(--px-amber);}
  }
  .cr-of{opacity:.5;}
  .cr-num{display:inline-flex;align-items:baseline;vertical-align:baseline;
    line-height:inherit;font:inherit;font-variant-numeric:tabular-nums;overflow:visible;}
  .cr-num-col{position:relative;display:inline-block;vertical-align:baseline;overflow:visible;
    width:1ch;line-height:inherit;font:inherit;font-variant-numeric:inherit;}
  /* Invisible in-flow digit so absolute glyphs share the surrounding text baseline */
  .cr-num-col::before{content:"0";display:block;visibility:hidden;font:inherit;line-height:inherit;
    pointer-events:none;}
  .cr-num-col.is-enter{animation:cr-num-col-in .4s var(--cr-row-spring-ease) both;}
  .cr-num-col.is-exit{animation:cr-num-col-out .4s var(--cr-row-spring-ease) both;pointer-events:none;}
  .cr-num-digit{position:absolute;left:0;top:0;width:100%;height:100%;display:block;text-align:center;
    font:inherit;line-height:inherit;font-variant-numeric:inherit;will-change:transform,opacity;}
  .cr-num-digit.in-up,.cr-num-digit.in-down{z-index:1;}
  .cr-num-digit.in-up{animation:cr-num-in-up .4s var(--cr-row-spring-ease) both;}
  .cr-num-digit.out-up{animation:cr-num-out-up .4s var(--cr-row-spring-ease) both;}
  .cr-num-digit.in-down{animation:cr-num-in-down .4s var(--cr-row-spring-ease) both;}
  .cr-num-digit.out-down{animation:cr-num-out-down .4s var(--cr-row-spring-ease) both;}
  @keyframes cr-num-in-up{
    0%{transform:translateY(70%);opacity:0;}
    100%{transform:translateY(0);opacity:1;}
  }
  @keyframes cr-num-out-up{
    0%{transform:translateY(0);opacity:1;}
    100%{transform:translateY(-70%);opacity:0;}
  }
  @keyframes cr-num-in-down{
    0%{transform:translateY(-70%);opacity:0;}
    100%{transform:translateY(0);opacity:1;}
  }
  @keyframes cr-num-out-down{
    0%{transform:translateY(0);opacity:1;}
    100%{transform:translateY(70%);opacity:0;}
  }
  @keyframes cr-num-col-in{
    0%{opacity:0;transform:translateX(-25%);}
    100%{opacity:1;transform:translateX(0);}
  }
  @keyframes cr-num-col-out{
    0%{opacity:1;transform:translateX(0);}
    100%{opacity:0;transform:translateX(-25%);}
  }
  @media (prefers-reduced-motion:reduce){
    .cr-num-digit.in-up,.cr-num-digit.out-up,.cr-num-digit.in-down,.cr-num-digit.out-down,
    .cr-num-col.is-enter,.cr-num-col.is-exit{animation:none;}
  }
  /* Groups take width in proportion to their square count, plus the 1px seams inside them,
     so every square ends up the same size and the row fills the label width exactly. */
  .cr-strip{display:flex;gap:1px;min-width:0;}
  .cr-strip .g{flex:var(--n) 1 calc((var(--n) - 1) * 1px);display:flex;align-items:flex-start;gap:1px;min-width:0;}
  .cr-main,.cr-info{background:inherit;}
  .cr-name{position:relative;z-index:1;background:inherit;padding-right:1em;}
  .cr-axis{display:flex;color:var(--text-tertiary);position:sticky;top:2px;z-index:2;background:var(--surface-2);
    font-family:var(--font-mistral);font-size:.875rem;line-height:1.25rem;letter-spacing:.02em;font-weight:500;}
  .cr-axis .cr-main{padding-top:8px;padding-bottom:6px;}
  .cr-axis .cr-strip .g{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip;
    transition:opacity .12s;}
  .cr-axis .cr-strip.hovering > .g:not(.is-hl){opacity:.5;}
  .cr-axis .cr-strip .g.is-clipped{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2em),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 2em),transparent);}
  /* On hover the full label slides over its neighbour, masking it with the board colour. */
  .cr-axis .cr-strip .g.is-clipped:is(.is-hl,:hover){overflow:visible;-webkit-mask-image:none;mask-image:none;position:relative;z-index:1;}
  .cr-axis .cr-strip .g.is-clipped:is(.is-hl,:hover) > span{background:var(--surface-2);padding-right:.5em;}
  .cr-axis .sh{display:none;}
  /* --fill = the colour a bar turns when solved (grey for others, difficulty colour for ML4) */
  .cr-cell{--fill:var(--px-other);--bg:var(--px-empty);flex:1 1 0;align-self:flex-start;min-width:0;min-height:0;
    height:6px;aspect-ratio:auto;background:var(--bg);}
  .cr-row.ours .cr-cell{--bg:var(--px-ours-empty);height:auto;aspect-ratio:1;}
  .cr-row.ours .cr-cell.d-easy{--fill:var(--px-amber);}
  .cr-row.ours .cr-cell.d-med{--fill:var(--px-orange);}
  .cr-row.ours .cr-cell.d-hard{--fill:var(--px-red);}
  .cr-cell.s,.cr-row.ours .cr-cell.s{--bg:var(--fill);}
  .cr-cell{position:relative;}
  /* Challenges only ML4 solved: pixel star (icons/star.svg, inlined) */
  .ctf-race{--star:url("/assets/star.svg");}
  .cr-cell.u::after{content:"";position:absolute;inset:-3px;background:var(--star) center/contain no-repeat;
    transform:scale(.75);animation:star-pop .5s steps(4,end) both;}
  @keyframes star-pop{0%{transform:scale(0);}60%{transform:scale(1.0125);}100%{transform:scale(.75);}}
  .cr-cell{cursor:default;}
  /* Hover: dim every other square so the hovered challenge's column stands out in all rows */
  .cr-cell{transition:opacity .12s;}
  .cr-lb.hovering .cr-cell:not(.hl){opacity:.25;}
  /* In progress: the square half-fills with its solved colour and blinks while racing.
     One clock on the board, inherited by every tile, so new blinkers join in phase. */
  @property --blink{syntax:"<number>";inherits:true;initial-value:.5;}
  .cr-cell.a::before{content:"";position:absolute;inset:0;background:var(--fill);opacity:.5;}
  .racing{animation:half-blink 1.2s ease-in-out infinite;}
  .racing .cr-cell.a::before{opacity:var(--blink);}
  @keyframes half-blink{50%{--blink:.15;}}
  .cr-cell.s.a::before{content:none;}

  @media (max-width:768px){
    .cr-seg button,.cr-clock,.cr-subhead,.cr-axis,.cr-name,.cr-count{font-size:.8125rem;}
  }
  @media (max-width:560px){
    .cr-main,.cr-cols{padding:0 12px;}
    .cr-lb{--lb-bottom:12px;}
    .cr-axis .lg{display:none;}
    .cr-axis .sh{display:inline;}
    .cr-seg button{padding:0 7px;}
  }
  @media (prefers-reduced-motion:reduce){.cr-seg button,.cr-seg button .cr-seg-label{transition:none;}.racing{animation:none;}.cr-cell.u::after{animation:none;}.cr-num-digit.in-up,.cr-num-digit.out-up,.cr-num-digit.in-down,.cr-num-digit.out-down{animation:none;}}

  #main{min-height:100vh;display:flex;flex-direction:column;justify-content:center;}