:root{--bar-height:96px;--cast-width:44px;--bar-background:#f6f1e7d9;--bar-shadow:0 -8px 24px #1f1c1814}@media (prefers-color-scheme:dark){:root{--bar-background:#17150fd9;--bar-shadow:0 -8px 24px #00000059}}@media (width<=560px){:root{--bar-height:80px;--cast-width:34px}}body:has(.parade){padding-block-end:calc(var(--bar-height) + 2rem)}.end-mark{text-align:center;color:var(--ink-soft);letter-spacing:.4em;margin:3rem 0}.parade{height:var(--bar-height);z-index:10;background:var(--bar-background);backdrop-filter:blur(10px);border-block-start:1px solid var(--rule);box-shadow:var(--bar-shadow);position:fixed;inset:auto 0 0;overflow-x:clip}.stage{position:absolute;inset:0 24px}.track,.fill{border-radius:2px;height:2px;position:absolute;inset-block-end:18px;inset-inline-start:0}.track{background:var(--rule);inset-inline-end:0}.fill{background:var(--accent);transform-origin:0;will-change:transform;width:100%;transform:scaleX(0)}.slot{width:var(--cast-width);height:calc(var(--cast-width) * 1.18 + 20px);cursor:pointer;color:var(--ink);transform:translateX(var(--x,-80px));transition:transform var(--move,0s) linear;will-change:transform;background:0 0;border:0;margin-inline-start:calc(var(--cast-width) / -2);padding:0;position:absolute;inset-block-end:13px;inset-inline-start:0}.slot:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}.dot{border:2px solid var(--rule);background:var(--paper);border-radius:50%;width:12px;height:12px;margin-inline-start:-6px;transition:border-color .3s,background .3s,transform .2s,opacity .3s;position:absolute;inset-block-end:0;inset-inline-start:50%}.slot:hover .dot,.slot:focus-visible .dot{border-color:var(--accent);transform:scale(1.25)}.slot.passed .dot{border-color:var(--accent);background:var(--accent)}.slot.offstage .dot{opacity:0}.hop{height:calc(var(--cast-width) * 1.18);opacity:0;pointer-events:none;transition:opacity .25s;position:absolute;inset-block-end:10px;inset-inline:0}.slot.in .hop,.slot:hover .hop,.slot:focus-visible .hop{opacity:1}.slot:not(.in):hover .hop,.slot:not(.in):focus-visible .hop{opacity:.85}.art{width:100%;height:100%;display:block}.art.facing-left{transform:scaleX(-1)}.art svg{filter:drop-shadow(0 2px 1.5px #0003);transform-origin:50% 100%;width:100%;height:100%;overflow:visible}.legs line{stroke-width:2.2px}.label{font-family:var(--sans);white-space:nowrap;color:var(--paper);background:var(--ink);opacity:0;pointer-events:none;border-radius:6px;padding:.25rem .55rem;font-size:.75rem;transition:opacity .15s;position:absolute;inset-block-end:calc(100% + 6px);inset-inline-start:50%;transform:translate(-50%)}.slot:hover .label,.slot:focus-visible .label{opacity:1}.replay-row{max-width:calc(40rem + 32px);margin:0 auto 2rem;padding-inline:16px}.replay{font-family:var(--sans);border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:999px;padding:.5rem 1rem;font-size:.9rem}.replay:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media (prefers-reduced-motion:reduce){.replay-row{display:none}}@media print{.parade,.replay-row{display:none}}span[id^=cast-]:focus{outline:none}span[id^=cast-].flash{background:color-mix(in srgb, var(--accent) 30%, transparent)}@media (prefers-reduced-motion:no-preference){span[id^=cast-]{transition:background-color .6s}.hop{transition:transform var(--hop-duration,.46s) cubic-bezier(.28, 1.6, .5, 1), opacity .18s ease;transform:translateY(70%)scale(.6)}.slot.in .hop,.slot:hover .hop,.slot:focus-visible .hop{transform:none}.slot:hover .art svg,.slot:focus-visible .art svg{animation:.9s ease-out look-at-me}.torso{transition:transform .42s cubic-bezier(.4,0,.2,1)}.thigh,.shin{transition:transform .3s}.walking .thigh{animation:.62s ease-in-out infinite thigh}.walking .shin{animation:.62s ease-in-out infinite shin}.walking .leg-back .thigh,.walking .leg-back .shin{animation-delay:-310ms}.walking .torso{animation:.31s ease-in-out infinite alternate stride}.bow .torso{transform:rotate(40deg)}.bow .thigh{transform:rotate(-9deg)}.bow .shin{transform:rotate(16deg)}@keyframes thigh{0%,to{transform:rotate(-26deg)}50%{transform:rotate(22deg)}}@keyframes shin{0%,to{transform:rotate(3deg)}45%{transform:rotate(8deg)}62%{transform:rotate(52deg)}82%{transform:rotate(22deg)}}@keyframes stride{to{transform:translateY(-1.4px)}}}