@media screen {
  .handover-sound-toggle.secondary {display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:6px}
  .handover-sound-toggle svg {display:block;width:21px;height:21px}
  .handover-sound-toggle .sound-slash {display:none}
  .handover-sound-toggle[aria-pressed="false"] {opacity:.72}
  .handover-sound-toggle[aria-pressed="false"] .sound-waves {display:none}
  .handover-sound-toggle[aria-pressed="false"] .sound-slash {display:block}
  .handover-sound-mobile.secondary {display:none}
  .handover-motion {--handover-size:48px;--handover-travel:clamp(96px,38vw,176px);position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;pointer-events:none;animation:handover-confirmation 2s linear both}
  .handover-motion-card {width:min(100%,380px);padding:22px 24px 20px;background:#101820;border:1px solid #4b665d;border-radius:12px;box-shadow:0 18px 54px #0008;color:#e0e6ed;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
  .handover-motion.is-checkout {--handover-color:#89c7ff;--handover-glow:#89c7ff30}
  .handover-motion.is-return {--handover-color:#00ff41;--handover-glow:#00ff4130}
  .handover-motion-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:ui-monospace,Consolas,monospace}
  .handover-motion-kicker {font-size:.69rem;letter-spacing:.1em;color:#a0aab5}
  .handover-motion-code {font-size:.95rem;color:#e0e6ed;white-space:nowrap}
  .handover-motion-lane {position:relative;width:calc(var(--handover-travel) + var(--handover-size));height:68px;margin:16px auto 0}
  .handover-motion-line {position:absolute;left:calc(var(--handover-size)/2);right:calc(var(--handover-size)/2);top:calc(10px + var(--handover-size)/2 - 1px);height:2px;background:linear-gradient(90deg,#00ff4170,#89c7ff70)}
  .handover-motion-node {position:absolute;top:calc(10px + var(--handover-size)/2 - 5px);width:10px;height:10px;border-radius:50%;background:#00ff41;box-shadow:0 0 0 4px #101820}
  .handover-motion-node-start {left:calc(var(--handover-size)/2 - 5px)}
  .handover-motion-node-end {right:calc(var(--handover-size)/2 - 5px);background:#89c7ff}
  .handover-motion-key {position:absolute;top:10px;left:0;display:grid;place-items:center;width:var(--handover-size);height:var(--handover-size);border:1px solid var(--handover-color);border-radius:9px;background:#17262e;color:var(--handover-color);box-shadow:0 4px 12px #0003,0 0 10px var(--handover-glow);transform:translateX(var(--handover-travel));animation:handover-out .64s .12s cubic-bezier(.4,0,.2,1) both}
  .handover-motion.is-return .handover-motion-key {transform:translateX(0);animation-name:handover-in}
  .handover-motion-key svg {display:block;width:28px;height:28px;fill:currentColor}
  .handover-motion-labels {display:flex;justify-content:space-between;width:calc(var(--handover-travel) + var(--handover-size));margin:5px auto 0;font:.65rem ui-monospace,Consolas,monospace;letter-spacing:.05em;color:#a0aab5}
  .handover-motion-labels span {display:flex;justify-content:center;width:var(--handover-size);white-space:nowrap}
  .handover-motion-result {min-height:2.8em;margin:18px 0 0;text-align:center;color:var(--handover-color);font-size:.875rem;line-height:1.4;font-weight:650;overflow-wrap:anywhere}
  .handover-motion.is-static,.handover-motion.is-static .handover-motion-key {animation:none}
  @keyframes handover-out {from {transform:translateX(0)} to {transform:translateX(var(--handover-travel))}}
  @keyframes handover-in {from {transform:translateX(var(--handover-travel))} to {transform:translateX(0)}}
  /* End at zero opacity and hold it until removal; no reset to the start frame. */
  @keyframes handover-confirmation {0% {opacity:0;transform:translateY(6px);animation-timing-function:ease-out} 8%,88% {opacity:1;transform:translateY(0)} 100% {opacity:0;transform:translateY(0)}}
}
@media screen and (max-width:760px) {
  .handover-motion {--handover-size:44px;padding:16px}
  .handover-motion-card {padding:20px}
  .handover-motion-key svg {width:26px;height:26px}
  .mobile-menu {display:flex;align-items:center;gap:8px}
  .mobile-menu .handover-sound-mobile.secondary {display:grid}
  .staff-toolbar .handover-sound-desktop.secondary {display:none}
}
@media (prefers-reduced-motion:reduce) {.handover-motion,.handover-motion .handover-motion-key {animation:none}}