.trot{--trot-run: 2.4s;--trot-ease: cubic-bezier(.35, .05, .25, 1);display:flex;flex-direction:column;gap:8px;width:min(100%,760px);min-height:100dvh;margin:0 auto;padding:10px 14px 0}.trot-hud{display:flex;align-items:center;justify-content:space-between}.trot-hud__round{color:#fff;font-weight:600;text-shadow:0 2px 0 var(--sky-deep)}.trot-card{padding:10px 16px 12px;border-radius:var(--radius-m);background:var(--cream);text-align:center;box-shadow:0 6px #2b23501f}.trot-card__kicker{color:var(--tang-deep);font-size:.82rem;font-weight:700}.trot-card__moment{display:grid;place-items:center;min-height:2.3em;font-size:clamp(1.15rem,4.6vw,1.6rem);font-weight:600;line-height:1.15;text-wrap:balance}.trot-time{display:flex;align-items:center;gap:8px;min-height:22px}.trot.is-reveal .trot-time{display:none}.trot-time__track{flex:1;height:12px;overflow:hidden;border-radius:999px;background:#fff9}.trot-time__fill{display:block;width:0;height:100%;border-radius:inherit;background:var(--mint)}.trot-time__track.is-urgent .trot-time__fill{background:var(--coral)}.trot-time__text{min-width:2ch;color:#fff;font-weight:700;text-align:right;text-shadow:0 2px 0 var(--sky-deep)}.trot-scene{position:relative;flex:1 1 0;min-height:180px;max-height:420px;overflow:hidden;border-radius:var(--radius-l);background:var(--sky-bottom);box-shadow:var(--shadow-card);container-type:size}.trot-far,.trot-world{position:absolute;top:0;left:0;height:100%;transition:transform var(--trot-run) var(--trot-ease);will-change:transform}.trot-far{aspect-ratio:20 / 3}.trot-world{aspect-ratio:10 / 1}.trot-far svg,.trot-near svg{display:block;width:100%;height:100%}.trot-near{position:absolute;inset:0}.trot-mill,.trot-wheel{animation:trot-turn 16s linear infinite}.trot-mill{animation-duration:9s}.trot-smoke{animation:trot-smoke 5s ease-in-out infinite alternate}@keyframes trot-turn{to{transform:rotate(360deg)}}@keyframes trot-smoke{to{transform:translate(10px,-5px);opacity:.7}}.trot-sign{position:absolute;bottom:30.5%;left:calc(var(--at) * 100% + 1.1%);z-index:2;display:flex;flex-direction:column;align-items:center;width:0;height:19%}.trot-sign:first-of-type{left:6%}.trot-sign:after{content:"";flex:1;width:5px;background:#8a5a33}.trot-sign span{flex:none;padding:1px 9px;border:2px solid #8a5a33;border-radius:8px;background:var(--cream);color:var(--ink);font-size:.74rem;font-weight:600;white-space:nowrap}.trot-finish{position:absolute;bottom:0;left:97%;z-index:1;width:1.6%;height:31%;background:repeating-conic-gradient(var(--ink) 0 25%,#fff 0 50%) 0 0 / 16px 16px}.trot-finish:before{content:"";position:absolute;bottom:100%;left:50%;width:6px;height:130%;margin-left:-3px;border-radius:3px 3px 0 0;background:#fff}.trot-finish span{position:absolute;bottom:230%;left:50%;padding:2px 10px;border-radius:10px;background:var(--coral);color:#fff;font-size:.8rem;font-weight:700;white-space:nowrap;transform:translate(-50%);box-shadow:0 3px 0 var(--coral-deep)}.trot-racers{position:absolute;inset:0;z-index:3;margin:0;padding:0;list-style:none}.trot-racer{--racer: calc(clamp(40px, 27cqh, 92px) * var(--crowd, 1));--size: calc(var(--racer) * (.84 + .16 * var(--lane, .5)));position:absolute;bottom:calc(1.5% + (1 - var(--lane, .5)) * 24%);left:calc(var(--p, 0) * 93% + var(--stagger, 0) * var(--racer) * .62 + 6px);display:flex;flex-direction:column;align-items:center;width:calc(var(--size) * 1.55);transition:left var(--trot-run) var(--trot-ease)}.trot-racer__tag{display:flex;align-items:center;gap:4px;max-width:130%;margin-bottom:-2px;padding:0 6px;border-radius:999px;background:#2b2350b8;color:#fff;font-size:.66rem;font-weight:600;line-height:1.45;white-space:nowrap}.trot-racer.is-you .trot-racer__tag{background:var(--sun);color:var(--ink)}.trot-racer__name{overflow:hidden;max-width:62px;text-overflow:ellipsis}.trot-racer__score{font-weight:700;opacity:.8}.trot-racer__check{display:none;color:var(--mint);font-weight:700}.trot-racer.is-you .trot-racer__check{color:var(--mint-deep)}.trot-racer.is-locked .trot-racer__check{display:inline}.trot-racer__gain{position:absolute;top:-20px;z-index:3;padding:0 7px;border-radius:999px;font-size:.82rem;font-weight:700;white-space:nowrap;animation:trot-gain .5s cubic-bezier(.3,1.6,.6,1)}@keyframes trot-gain{0%{opacity:0;transform:translateY(10px) scale(.7)}}.trot-rig{position:relative;width:100%;aspect-ratio:140 / 90;color:var(--buddy);animation:trot-idle 1.1s ease-in-out infinite}.trot-racer:nth-child(2n) .trot-rig{animation-delay:-.4s}.trot-racer:nth-child(3n) .trot-rig{animation-delay:-.8s}.trot-rig__vehicle{position:absolute;inset:0}.trot-rig__vehicle svg{display:block;width:100%;height:100%;overflow:visible}.trot-rig .wheel{transform-box:view-box}.trot-rig__face{position:absolute;bottom:22%;left:18%;width:54%;aspect-ratio:1}.trot-rig[data-era=steam] .trot-rig__face{left:3%}.trot-rig[data-era=modern] .trot-rig__face{left:24%;bottom:18%}.trot-rig__face .avatar{display:block;width:100%;height:100%}.trot-rig__face .buddy{position:absolute;top:50%;left:50%;width:150%;transform:translate(-50%,-60%)}.trot-racer.is-away .trot-rig{opacity:.45}.trot-racer.is-running .trot-rig{animation:trot-gallop .26s ease-in-out infinite}.trot-racer.is-running .wheel{animation:trot-turn .42s linear infinite}.trot-racer.is-running:after{content:"";position:absolute;right:92%;bottom:2%;width:calc(var(--size) * .9);height:calc(var(--size) * .28);border-radius:999px;background:radial-gradient(closest-side,rgb(255 255 255 / .8),transparent);animation:trot-dust .38s ease-out infinite}.trot-rig.is-changing{animation:trot-change .46s cubic-bezier(.3,1.6,.6,1)}@keyframes trot-idle{50%{transform:translateY(-2px)}}@keyframes trot-gallop{25%{transform:translateY(-5px) rotate(-2.5deg)}75%{transform:translateY(-1px) rotate(2deg)}}@keyframes trot-dust{0%{opacity:.9;transform:translate(14px) scale(.5)}to{opacity:0;transform:translate(-16px) scale(1.2)}}@keyframes trot-change{0%{transform:scale(.6)}}.heat--bullseye{background:var(--ink);color:var(--sun)}.heat--scorching{background:var(--coral);color:#fff}.heat--hot{background:var(--tang);color:var(--ink)}.heat--warm{background:var(--sun);color:var(--ink)}.heat--chilly{background:#bfe9ff;color:var(--ink)}.heat--freezing,.heat--none{background:#e2dff0;color:var(--ink-soft)}.trot-count{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#2b235059;color:#fff;text-align:center}.trot-count[hidden]{display:none}.trot-count__big{font-size:clamp(3.4rem,34cqh,7rem);font-weight:700;line-height:1;text-shadow:0 5px 0 rgb(43 35 80 / .5)}.trot-count__small{font-size:1.1rem;font-weight:600}.trot-ribbon{position:relative;display:flex;flex:none;height:12px;margin:12px 16px 8px 10px;border-radius:999px;box-shadow:0 2px #2b235024}.trot-ribbon__era{flex:1}.trot-ribbon__era:first-child{border-radius:999px 0 0 999px}.trot-ribbon__era:nth-child(5){border-radius:0 999px 999px 0}.trot-ribbon__era--ancient{background:#efb978}.trot-ribbon__era--medieval{background:var(--mint)}.trot-ribbon__era--voyages{background:#59b6d8}.trot-ribbon__era--steam{background:#a79cca}.trot-ribbon__era--modern{background:#544b98}.trot-ribbon__dot{position:absolute;top:50%;left:calc(var(--p, 0) * 100%);display:block;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--buddy);transition:left var(--trot-run) var(--trot-ease)}.trot-ribbon__dot.is-you{z-index:2;box-shadow:0 0 0 3px var(--sun)}.trot-ribbon__dot .avatar{display:block;width:100%;height:100%;border-radius:50%}.trot-ribbon__dot .avatar.is-dressed{transform:none}.trot-dock{position:sticky;bottom:0;z-index:25;margin:0 -14px;padding:8px 14px calc(10px + env(safe-area-inset-bottom));border-radius:var(--radius-m) var(--radius-m) 0 0;background:#fffffff5;box-shadow:0 -6px 18px #2b23501a}.trot-dock.is-answering{background:var(--sun)}.trot-dock__status{min-height:1.35em;margin-bottom:6px;font-weight:600;text-align:center}.trot-dock__status[hidden]{display:none}.trot-entry{display:flex;flex-direction:column;gap:8px;max-width:460px;margin:0 auto}.trot-entry[hidden]{display:none}.trot-entry.shake{animation:trot-shake .32s}@keyframes trot-shake{25%{transform:translate(-7px)}50%{transform:translate(6px)}75%{transform:translate(-3px)}}.trot-display{display:flex;justify-content:center;gap:6px}.trot-digit{display:grid;place-items:center;width:44px;height:50px;border-radius:var(--radius-s);background:var(--ink);color:#fff;font-size:1.8rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;box-shadow:inset 0 -4px #00000040}.trot-digit:not(.is-filled){background:#2b235029;box-shadow:inset 0 3px #2b235014}.trot-digit.is-filled{animation:trot-digit .16s cubic-bezier(.3,1.6,.6,1)}@keyframes trot-digit{0%{transform:scale(.8)}}.trot-pad{display:grid;grid-template-columns:repeat(5,1fr) 1.5fr;gap:6px}.trot-key{--face: var(--paper);--edge: #cfcbe2;height:46px;padding:0;border:0;border-radius:var(--radius-s);background:var(--face);color:var(--ink);font:inherit;font-size:1.3rem;font-weight:700;box-shadow:0 4px 0 var(--edge);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.trot-key:active:not(:disabled){box-shadow:0 1px 0 var(--edge);transform:translateY(3px)}.trot-key:disabled{opacity:.55;cursor:default}.trot-key--erase{--face: #efedf7}.trot-key--go{--face: var(--coral);--edge: var(--coral-deep);color:#fff;font-size:1rem}.trot-toast{position:absolute;bottom:calc(100% + 8px);left:50%;width:max-content;max-width:calc(100% - 28px);padding:6px 14px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;text-align:center;transform:translate(-50%)}.trot-toast[hidden]{display:none}.trot-reveal{display:flex;flex-direction:column;gap:6px}.trot-reveal[hidden]{display:none}.trot-truth{display:flex;align-items:baseline;justify-content:center;gap:8px;animation:trot-truth .52s cubic-bezier(.3,1.6,.6,1)}@keyframes trot-truth{0%{opacity:0;transform:scale(.6)}}.trot-truth__label,.trot-truth__era{color:var(--ink-soft);font-size:.9rem;font-weight:600}.trot-truth__year{color:var(--coral-deep);font-size:2.1rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.05}.trot-ruler{padding:46px 18px 0}.trot-ruler__line{position:relative;height:6px;border-radius:999px;background:#e2dff0}.trot-pin{position:absolute;bottom:calc(100% + 3px + var(--row, 0) * 15px);left:calc(var(--at) * 1%);width:30px;height:30px;margin-left:-15px;animation:trot-pin .42s cubic-bezier(.3,1.6,.6,1) backwards;animation-delay:.3s}.trot-pin .avatar{display:block;width:100%;height:100%}.trot-pin.is-you{z-index:3;filter:drop-shadow(0 0 2px var(--sun)) drop-shadow(0 0 2px var(--sun))}@keyframes trot-pin{0%{opacity:0;transform:translateY(-14px)}}.trot-ruler__truth{position:absolute;top:-5px;left:calc(var(--at) * 1%);z-index:4;width:4px;height:16px;margin-left:-2px;border-radius:2px;background:var(--coral);box-shadow:0 0 0 2px #fff}.trot-ruler__ends{display:flex;justify-content:space-between;margin-top:3px;color:var(--ink-soft);font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums}.trot-results,.trot-standing{display:flex;flex-direction:column;gap:2px;width:100%;margin:0;padding:0;list-style:none}.trot-results{max-height:26dvh;overflow-y:auto}.trot-standing{padding:12px;border-radius:var(--radius-l)}.trot-result{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 4px;border-radius:var(--radius-s)}.trot-result.is-you{background:#ffc23347}.trot-result .avatar{flex:none;width:34px;height:34px}.trot-result__who{display:flex;flex:1 0 74px;flex-direction:column;min-width:0;max-width:100%;color:var(--ink-soft);font-size:.78rem;line-height:1.15}.trot-result__who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trot-result__who strong{color:var(--ink);font-size:1rem;font-variant-numeric:tabular-nums}.trot-result__notes{display:flex;flex:0 1 auto;flex-wrap:wrap;min-width:0;align-items:center;justify-content:flex-end;gap:1px 6px;font-size:.74rem;line-height:1.2;text-align:right}.trot-result__off{color:var(--ink-soft)}.trot-result__off:empty{display:none}.trot-result__nearest{color:var(--mint-deep);font-weight:700}.trot-result__gain{flex:none;min-width:2.2em;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}.trot-chip{flex:none;padding:0 7px;border-radius:999px;font-weight:600;white-space:nowrap}.trot-title{font-size:clamp(2.1rem,8vw,3.2rem)}.trot-hero{width:min(74vw,40dvh,340px)}.trot-hero .trot-rig{animation:trot-gallop .7s ease-in-out infinite}@media(max-height:800px){.trot-scene{min-height:150px}.trot-results{max-height:17dvh}.trot-truth__year{font-size:1.7rem}.trot-card{padding-block:6px 8px}}@media(min-width:720px){.trot-dock{margin:0}.trot-card__moment{min-height:1.3em}.trot-racer__tag{font-size:.74rem}.trot-racer__name{max-width:84px}}@media(prefers-reduced-motion:reduce){.trot-mill,.trot-wheel,.trot-smoke,.trot-rig,.trot-racer.is-running .trot-rig,.trot-racer.is-running .wheel,.trot-racer.is-running:after,.trot-hero .trot-rig{animation:none}.trot-far,.trot-world,.trot-racer,.trot-ribbon__dot{transition-duration:.4s}}
