@layer demo{.relay-demo{--relay-track:#edf4ff;--relay-lane:#bbcee8;--relay-paper:#fffaf0;scroll-margin-top:calc(8px - var(--space-24))}[data-theme=dark] .relay-demo{--relay-track:#172b46;--relay-lane:#3b577a;--relay-paper:#2b2830}.relay-demo .demo-heading{padding:6px 12px}.relay-demo .demo-heading strong{font-size:1rem}.relay-scene{background:var(--color-surface-subtle);font-size:.8125rem}.relay-action{background:var(--color-info-bg);min-height:54px;color:var(--color-info);padding:6px 12px}.relay-action b,.relay-action span{display:block}.relay-action b{font-size:.8125rem}.relay-action span{font-size:.75rem}.relay-scene[data-branch=trim] .relay-action{color:var(--color-warning);background:var(--color-warning-bg)}.relay-course{padding:8px 16px 20px}.relay-course-caption{color:var(--color-text-secondary);justify-content:space-between;font-size:.75rem;display:flex}.relay-track{height:clamp(112px,100dvh - 435px,174px);margin-top:4px;position:relative}.relay-lanes{background:var(--relay-track);border:1px solid var(--relay-lane);border-radius:80px;flex-direction:column;justify-content:space-evenly;display:flex;position:absolute;inset:28px 0 26px}.relay-lanes i{border-bottom:1px dashed var(--relay-lane)}.relay-runner{left:var(--station);width:72px;transition:left var(--relay-time) ease-in-out;position:absolute;bottom:32px;transform:translate(-50%)}.relay-runner svg{width:100%;color:var(--color-text);display:block;overflow:visible}.relay-limb{fill:none;stroke:#c88b62;stroke-width:7px;stroke-linecap:round;stroke-linejoin:round}.relay-shoe{stroke:var(--color-info);stroke-width:7px;stroke-linecap:round}.relay-jersey{fill:#2563eb;stroke:#1e40af;stroke-width:1.5px}.relay-baton{fill:#f59e0b;stroke:#92400e;stroke-width:1.5px}.relay-runner[data-moving=true] .relay-athlete{animation:relay-stride var(--relay-time) ease-in-out}.relay-runner[data-moving=true] .relay-leg-front{transform-origin:45px 68px;animation:relay-leg var(--relay-time) ease-in-out}.relay-runner[data-moving=true] .relay-leg-back{transform-origin:45px 68px;animation:relay-leg var(--relay-time) ease-in-out reverse}.relay-scene[data-phase=extend] .relay-pass,.relay-scene[data-phase=trim] .relay-pass{transform-origin:54px 40px;animation:relay-handover var(--relay-time) ease-out}.relay-stations{grid-template-columns:repeat(6,1fr);display:grid;position:absolute;inset:auto 0 0}.relay-station{text-align:center;position:relative}.relay-station>span{white-space:nowrap;font:.6875rem var(--font-ui);color:var(--color-text-muted);position:absolute;bottom:35px;left:50%;transform:translate(-50%)}.relay-station[data-current=true]>span{color:var(--color-info);background:var(--color-info-bg);z-index:1;bottom:-19px}.relay-station>b{background:var(--color-surface);border:1px solid var(--color-border-control);width:32px;font:600 1rem/30px var(--font-mono);border-radius:6px;margin:auto;display:block}.relay-station[data-current=true]>b{color:var(--color-info);background:var(--color-info-bg);border:2px solid var(--color-info);line-height:28px}.relay-station[data-old=true]>b{color:var(--color-warning);background:var(--color-warning-bg);border-style:dashed;border-color:var(--color-warning)}.relay-station[data-old=true]>span{color:var(--color-warning)}.relay-handoff{border-top:1px solid var(--color-border-subtle);margin:6px 12px;padding-top:6px}.relay-equation{justify-content:space-between;align-items:center;gap:5px;font-size:.75rem;display:flex}.relay-equation strong{color:var(--color-info);font-size:.6875rem}.relay-scene[data-branch=trim] .relay-equation strong{color:var(--color-warning)}.relay-length{align-items:center;gap:12px;margin-top:6px;display:flex}.relay-length>span{flex-direction:column;flex:0 0 92px;font-size:.6875rem;display:flex}.relay-length b{font:600 .875rem var(--font-mono)}.relay-demo em{font-style:normal}.relay-baton-cells{flex:1;gap:3px;display:flex}.relay-baton-cells span{text-align:center;border:1px dashed var(--color-border-control);height:25px;color:var(--color-info);background:var(--color-surface);transition:background var(--relay-time), transform var(--relay-time);font:600 .875rem/23px var(--font-mono);border-radius:4px;flex:1}.relay-baton-cells span[data-filled=true]{background:var(--color-info-bg);border:1px solid var(--color-info);transform:translateY(-2px)}.relay-desk{grid-template-columns:minmax(0,1fr) 110px;gap:10px;padding:0 12px 10px;display:grid}.relay-ledger{background:var(--relay-paper);border:1px solid var(--color-border-control);box-shadow:inset 3px 0 var(--color-hash);border-radius:4px 9px 9px 4px;padding:5px 8px}.relay-ledger strong{font-size:.75rem;display:block}.relay-ledger>div{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.relay-ledger span{white-space:nowrap;text-align:center;font:.75rem/26px var(--font-mono);border-radius:4px}.relay-ledger span[data-current=true]{background:var(--color-hash-bg);color:var(--color-hash);outline:1px solid var(--color-hash)}.relay-ledger[data-writing=true] span[data-current=true]{animation:relay-write var(--relay-time) ease-in-out}.relay-record{background:var(--color-success-bg);border:1px solid var(--color-success);color:var(--color-success);border-radius:8px;padding:4px 8px}.relay-record>span{align-items:center;gap:3px;font-size:.6875rem;display:flex}.relay-record svg{flex-shrink:0;width:15px;height:17px}.relay-record strong{font:.75rem var(--font-mono);display:block}.relay-record b{margin-left:8px;font-size:1.5rem}.relay-record[data-updating=true] b{animation:relay-write var(--relay-time) ease-out;display:inline-block}.relay-controls{border-top:1px solid var(--color-border-subtle);padding:8px 12px}.relay-transport{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.relay-transport button{white-space:nowrap;padding:4px 2px;font-size:.8125rem}.relay-control-meta{color:var(--color-text-secondary);justify-content:space-between;align-items:center;margin-top:4px;font-size:.75rem;display:flex}.relay-control-meta label{align-items:center;gap:8px;display:flex}.relay-control-meta select{min-height:44px;padding:4px 8px;font-size:.75rem}@keyframes relay-stride{25%,75%{transform:translateY(-5px)}50%{transform:translateY(0)}}@keyframes relay-leg{30%{transform:rotate(28deg)}70%{transform:rotate(-20deg)}}@keyframes relay-handover{40%{transform:rotate(-25deg)}75%{transform:rotate(10deg)}}@keyframes relay-write{50%{transform:translateY(-3px)}}@media (width<=480px){.relay-course{padding-inline:12px}.relay-track{height:98px}.relay-runner{width:52px}.relay-transport button{font-size:.75rem}.relay-desk{grid-template-columns:minmax(0,1fr) 86px;gap:8px}.relay-ledger{padding-inline:6px}.relay-ledger>div{gap:0}.relay-ledger span{font-size:.6875rem;line-height:22px}.relay-record{align-content:center}.relay-length{gap:6px}.relay-length>span{flex-basis:80px}}@media (height<=600px){.relay-demo .demo-heading{padding-block:4px}.relay-action{min-height:50px;padding-block:4px}.relay-course{padding-top:4px;padding-bottom:16px}.relay-handoff{margin-block:4px;padding-top:4px}.relay-desk{padding-bottom:8px}.relay-controls{padding-block:4px}}@media (prefers-reduced-motion:reduce){.relay-demo *,.relay-demo :before,.relay-demo :after{transition:none!important;animation:none!important}}}