:root {
  --bg: #fbf7ef; --ink: #22201c; --muted: #6b665c; --accent: #e4572e; --track: #c9e4a5; --line: #e2dccf;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1c1b19; --ink: #f1ede4; --muted: #a39e93; --accent: #ff7a50; --track: #2f4a24; --line: #3a3833; }
}
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 760px; padding: 16px; background: var(--bg); color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, sans-serif; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
h1 { font-size: 1.5rem; margin: .5rem 0; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
label { display: block; margin: .5rem 0; }
input:not([type=radio]), textarea { display: block; width: 100%; padding: .5rem; font: inherit;
  border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; }
button { font: inherit; padding: .5rem 1rem; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
button.link, #signout { background: none; color: var(--muted); text-decoration: underline; padding: .5rem 0; }
#login > button { display: block; width: 100%; margin: .5rem 0; }
fieldset { border: 1px solid var(--line); border-radius: 6px; }
fieldset label { margin: .25rem 0; }
#msg { color: var(--accent); }
#feed { list-style: none; padding: 0; }
#feed li { padding: .4rem 0; border-bottom: 1px solid var(--line); }

/* The race: one lane per person, runner placed by running total. */
.lane { position: relative; height: 92px; margin: 6px 0; border-radius: 8px;
  background: repeating-linear-gradient(90deg, var(--track) 0 40px, transparent 40px 42px), var(--track);
  border-right: 6px dashed var(--ink); }
.runner { position: absolute; top: 4px; width: 40px; transition: left 1s ease-out; animation: bob .35s infinite alternate; }
.face { width: 30px; height: 30px; margin: 0 auto -2px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--bg); border: 2px solid var(--ink); font-weight: 700; font-size: 14px; position: relative; z-index: 1; }
.face img { width: 100%; height: 100%; object-fit: cover; }
.body { display: block; width: 40px; height: 46px; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.limb { transform-origin: 20px 22px; animation: swing .35s infinite alternate ease-in-out; }
.limb.b { animation-direction: alternate-reverse; }
line.limb:nth-of-type(2), line.limb:nth-of-type(3) { transform-origin: 20px 6px; }
.who { position: absolute; right: 10px; bottom: 4px; font-size: .85rem; color: var(--ink); }
@keyframes swing { from { transform: rotate(-35deg); } to { transform: rotate(35deg); } }
@keyframes bob { to { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .runner, .limb { animation: none; } }