/* The run player (player.js), shared by the public site and the app. It carries the
   few tokens it needs, so it looks the same in both, and its animations are named
   rpl-* so they cannot meet anyone else's. */
.rpl, .race { --ember-dim: rgba(255, 106, 43, .12); --ember-line: rgba(255, 106, 43, .45);
  --hair: rgba(245, 244, 242, .08); --hair-2: rgba(245, 244, 242, .15); --ease: cubic-bezier(.22, .61, .36, 1); }
.rpl { position: relative; border: 1px solid var(--hair-2); border-radius: 16px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #14151c 0%, #0e0e13 100%);
  box-shadow: 0 50px 120px -50px rgba(255, 106, 43, .35), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.rpl::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: .35;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px); }
.rpl:focus-visible { outline: 2px solid var(--ember-line); outline-offset: 3px; }
.rpl-pick { display: flex; gap: .5rem; flex-wrap: wrap; padding: .9rem .9rem 0; }
.rpl-pick button { display: grid; gap: .1rem; text-align: left; padding: .55rem .85rem; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--hair); background: rgba(255, 255, 255, .02); color: var(--smoke); font: 500 .88rem/1.2 var(--sans);
  transition: border-color .2s, background .2s, color .2s; }
.rpl-pick button small { font: 400 .72rem/1.2 var(--mono); color: var(--ash); }
.rpl-pick button[aria-selected=true] { border-color: var(--ember-line); background: var(--ember-dim); color: var(--white); }
.rpl-pick .ok { color: #7fd6a4; } .rpl-pick .bad { color: #ff8b73; }
.rpl-bar { display: flex; align-items: center; gap: .9rem; height: 42px; padding: 0 1rem; border-bottom: 1px solid var(--hair);
  font: 400 .76rem/1 var(--mono); color: var(--ash); }
.rpl-dots { width: 44px; height: 10px; flex: none;
  background: radial-gradient(circle at 5px 5px, #ff5f57 4px, transparent 4.5px), radial-gradient(circle at 22px 5px, #febc2e 4px, transparent 4.5px),
    radial-gradient(circle at 39px 5px, #28c840 4px, transparent 4.5px); opacity: .75; }
.rpl-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpl-tags { display: flex; gap: .35rem; }
.rpl-tags i { font-style: normal; padding: .2rem .45rem; border: 1px solid var(--hair); border-radius: 6px; color: var(--smoke); }
.rpl-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 470px; }
.rpl-rail { list-style: none; margin: 0; padding: .6rem; overflow-y: auto; border-right: 1px solid var(--hair); scrollbar-width: none; }
.rpl-rail li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .35rem; align-items: start; padding: .55rem .55rem; border-radius: 9px;
  color: var(--ash); cursor: pointer; border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s; }
.rpl-rail li:hover { color: var(--smoke); }
.rpl-rail .i { font: 500 .72rem/1.5 var(--mono); color: var(--soot); text-align: center; }
.rpl-rail .t b { display: block; font: 500 .84rem/1.3 var(--sans); overflow-wrap: anywhere; }
.rpl-rail .t small { font: 400 .7rem/1.3 var(--mono); color: var(--soot); }
.rpl-rail li.done { color: var(--smoke); } .rpl-rail li.done .i { color: var(--ember); }
.rpl-rail li.on { color: var(--white); background: linear-gradient(90deg, var(--ember-dim), transparent); border-color: var(--ember-line); }
.rpl-rail li.on .i { color: var(--ember-hi); }
.rpl-rail li.no .t small { color: #ff8b73; }
.rpl-screen { position: relative; padding: 1.1rem 1.2rem; overflow: hidden; font: 400 .8rem/1.6 var(--mono); color: var(--smoke);
  animation: rpl-in .45s var(--ease) both; }
@keyframes rpl-in { from { opacity: 0; transform: translateY(6px); } }
.rpl .rp-term .rp-prompt { display: flex; align-items: center; gap: .6rem; color: var(--white); }
.rpl .rp-ps { color: var(--ember); }
.rpl .rp-caret { width: .55em; height: 1.1em; background: var(--ember); animation: rpl-caret 1s steps(1) infinite; }
@keyframes rpl-caret { 50% { opacity: 0; } }
.rpl .rp-out { margin: .6rem 0 0 1.1rem; display: grid; gap: .15rem; }
.rpl .rp-out > div { animation: rpl-in .3s var(--ease) both; }
.rpl .rp-out.rp-refused { color: #ff8b73; }
.rpl .rp-spin { display: flex; align-items: center; gap: .55rem; }
.rpl .rp-spin::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hair-2); border-top-color: var(--ember); animation: rpl-spin .8s linear infinite; }
@keyframes rpl-spin { to { transform: rotate(360deg); } }
.rpl .rp-muted { color: var(--ash); }
.rpl .rp-boot { display: grid; align-content: center; height: 100%; gap: .6rem; max-width: 34rem; }
.rpl .rp-boot .rp-big { font: 600 1.45rem/1.2 var(--display); color: var(--white); letter-spacing: -.02em; margin: 0; }
.rpl .rp-boot p { margin: 0; font-family: var(--sans); color: var(--smoke); font-size: .92rem; }
.rpl .rp-files { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.rpl .rp-files li { padding: .35rem .6rem; border: 1px solid var(--hair-2); border-radius: 7px; color: var(--white);
  animation: rpl-in .5s var(--ease) both; animation-delay: calc(var(--n) * 140ms + 300ms); }
.rpl .rp-viewer { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; margin: -.2rem -.3rem; }
.rpl .rp-vh { display: flex; justify-content: space-between; gap: 1rem; padding: 0 .2rem .55rem; border-bottom: 1px solid var(--hair); margin-bottom: .4rem; }
.rpl .rp-vh b { color: var(--white); font-weight: 500; } .rpl .rp-vh span { color: var(--ash); }
.rpl .rp-code { overflow: hidden; font-size: .76rem; line-height: 1.55; }
.rpl .rp-code.rp-md { font-family: var(--sans); font-size: .84rem; }
.rpl .rp-code .rp-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); white-space: pre; }
.rpl .rp-code.rp-diff .rp-row { grid-template-columns: minmax(0, 1fr); padding: 0 .4rem; border-radius: 3px; animation: rpl-in .25s var(--ease) both; }
.rpl .rp-ln { color: var(--soot); text-align: right; padding-right: .9rem; user-select: none; }
.rpl .cl { overflow: hidden; text-overflow: ellipsis; }
.rpl .tk-k { color: var(--ember-hi); } .rpl .tk-s { color: #9fd8b5; } .rpl .tk-c { color: var(--soot); font-style: italic; }
.rpl .rp-row.rp-add { background: rgba(92, 200, 130, .10); color: #c3ecd0; }
.rpl .rp-row.rp-del { background: rgba(255, 96, 86, .10); color: #f4b7b0; }
.rpl .rp-row.rp-hunk { color: var(--ash); }
.rpl .rp-shutter { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(14, 14, 19, .96) 50%, rgba(14, 14, 19, .96) 50%); animation: rpl-shut 1.1s .5s var(--ease) both; }
@keyframes rpl-shut { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
.rpl .rp-shutter { display: grid; place-items: center; }
.rpl .rp-shutter b { font: 600 .78rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ember);
  padding: .7rem 1rem; border: 1px solid var(--ember-line); border-radius: 8px; box-shadow: 0 0 40px -8px rgba(255, 106, 43, .6);
  animation: rpl-in .4s 1.2s var(--ease) both; }
.rpl .rp-grade { display: grid; align-content: center; gap: 1.4rem; height: 100%; font-family: var(--sans); }
.rpl .rp-grade > p { margin: 0; color: var(--smoke); max-width: 32rem; font-size: .92rem; }
.rpl .rp-boxes { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; }
.rpl .rp-gbox { position: relative; overflow: hidden; display: grid; gap: .2rem; padding: 1rem; border-radius: 12px; border: 1px solid var(--hair-2); background: var(--plate); }
.rpl .rp-gbox b { color: var(--white); font: 600 1rem/1.2 var(--display); }
.rpl .rp-gbox span { color: var(--ash); font-size: .8rem; }
.rpl .rp-gbox.rp-sealed { animation: rpl-in .5s var(--ease) both; }
.rpl .rp-gbox.rp-sealed::after { content: "sealed"; position: absolute; top: .6rem; right: .7rem; font: 500 .65rem/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ember); border: 1px solid var(--ember-line); padding: .25rem .4rem; border-radius: 5px; }
.rpl .rp-gbox.rp-grader { border-color: var(--ember-line); animation: rpl-in .5s .8s var(--ease) both; }
.rpl .rp-scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 106, 43, .22), transparent);
  width: 40%; animation: rpl-scan 1.3s 1.2s ease-in-out infinite; transform: translateX(-120%); }
@keyframes rpl-scan { to { transform: translateX(300%); } }
.rpl .rp-flow { position: relative; height: 2px; margin: 0 .5rem; background: var(--hair-2); }
.rpl .rp-flow i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ember);
  box-shadow: 0 0 12px var(--ember); animation: rpl-flow 1.2s .5s var(--ease) infinite; }
@keyframes rpl-flow { from { left: 0; opacity: 0; } 20% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
.rpl .rp-verdict { display: grid; align-content: center; justify-items: start; gap: 1.1rem; height: 100%; font-family: var(--sans); }
.rpl .rp-stamp { display: grid; gap: .25rem; padding: .9rem 1.3rem; border-radius: 12px; border: 2px solid currentColor; transform: rotate(-3deg);
  animation: rpl-stamp .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.rpl .rp-stamp b { font: 700 1.9rem/1 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.rpl .rp-stamp span { font: 400 .78rem/1.3 var(--mono); opacity: .8; }
.rpl .rp-verdict.rp-pass .rp-stamp { color: #8fe0b0; box-shadow: 0 0 60px -10px rgba(120, 220, 160, .45), 0 0 0 1px rgba(120, 220, 160, .2) inset; }
.rpl .rp-verdict.rp-fail .rp-stamp { color: #ff8b73; box-shadow: 0 0 60px -14px rgba(255, 110, 90, .45); }
@keyframes rpl-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.6); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
.rpl .rp-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem 1.2rem; margin: 0; font-size: .86rem; animation: rpl-in .5s .35s var(--ease) both; }
.rpl .rp-facts dt { color: var(--ash); } .rpl .rp-facts dd { margin: 0; color: var(--white); }
.rpl .rp-digest { margin: 0; font: 400 .72rem/1.4 var(--mono); color: var(--ash); overflow-wrap: anywhere; }
.rpl .rp-digest code { color: var(--smoke); }
.rpl-foot { display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; border-top: 1px solid var(--hair); }
.rpl-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: var(--ember); color: var(--ink);
  font: 700 .72rem/1 var(--sans); box-shadow: 0 0 22px -4px var(--ember); transition: transform .2s var(--ease); }
.rpl-play:hover { transform: scale(1.08); }
.rpl-track { flex: 1; display: flex; gap: 3px; min-width: 0; }
.rpl-track .rpl-seg { flex: 1; height: 16px; padding: 5px 0; border: 0; background: none; cursor: pointer; }
.rpl-track .rpl-seg i { display: block; height: 6px; border-radius: 3px; background: var(--hair-2); transition: background .3s; }
.rpl-track .rpl-seg.done i { background: var(--ember-lo); }
.rpl-track .rpl-seg.on i { background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.rpl-track .rpl-seg.end { flex: .6; }
.rpl-count { font: 400 .74rem/1 var(--mono); color: var(--ash); min-width: 6.5rem; text-align: right; }
.rpl-speed { font: 500 .74rem/1 var(--mono); color: var(--smoke); background: none; border: 1px solid var(--hair-2); border-radius: 6px; padding: .35rem .5rem; cursor: pointer; }
/* compact, in the home page's hero */
.rpl[data-mode=hero] .rpl-body { grid-template-columns: minmax(0, 1fr); height: 380px; }
.rpl[data-mode=hero] .rpl-rail { display: none; }
.rpl[data-mode=hero] .rpl-tags { display: none; }
@media (max-width: 760px) {
  .rpl-body { grid-template-columns: minmax(0, 1fr); height: 420px; }
  .rpl-rail { display: none; }
  .rpl-tags { display: none; }
  .rpl .rp-boxes { grid-template-columns: 1fr; gap: .7rem; } .rpl .rp-flow { display: none; }
  .rpl[data-mode=hero] .rpl-body { height: 340px; }
}

/* the race: four attempts on one real clock */
.race { display: grid; gap: .9rem; }
.race-clock { display: flex; align-items: baseline; gap: .8rem; }
.race-clock b { font: 600 clamp(2.4rem, 6vw, 3.6rem)/1 var(--display); letter-spacing: -.04em; color: var(--white); font-variant-numeric: tabular-nums; min-width: 4ch; }
.race-clock span { color: var(--ash); font: 400 .8rem/1 var(--mono); }
.lane { display: grid; grid-template-columns: 190px minmax(0, 1fr) 150px; align-items: center; gap: 1rem; }
.lane .who { font: 500 .92rem/1.2 var(--sans); color: var(--smoke); }
.lane .lt { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .04); }
.lane .lt > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--ember-lo), var(--ember)); box-shadow: 0 0 16px -2px rgba(255, 106, 43, .55); }
.lane.fin .lt > i { background: linear-gradient(90deg, var(--ember-lo), var(--ember-hi)); }
.lane .ticks { position: absolute; inset: 0; }
.lane .ticks span { position: absolute; top: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ink); opacity: .55; }
.lane .ticks span.no { background: #ff8b73; opacity: 1; }
.lane .res { font: 500 .8rem/1.2 var(--mono); opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .4s var(--ease); }
.lane.fin .res { opacity: 1; transform: none; }
.lane .res.ok { color: #8fe0b0; } .lane .res.bad { color: #ff8b73; }
.race-note { margin: .3rem 0 0; color: var(--ash); font-size: .82rem; }
.race .btn { justify-self: start; }
@media (max-width: 760px) { .lane { grid-template-columns: minmax(0, 1fr); gap: .35rem; } }