@keyframes hugo-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes hugo-peek{0%,8%{transform:translateY(150px) rotate(0)}22%{transform:translateY(-14px) rotate(-3deg)}30%{transform:translateY(0) rotate(0)}48%{transform:translateY(0) rotate(5deg)}60%{transform:translateY(0) rotate(-4deg)}72%{transform:translateY(0) rotate(0)}86%,100%{transform:translateY(150px) rotate(0)}}
@keyframes hugo-peek-lg{0%,8%{transform:translateY(200px) rotate(0)}22%{transform:translateY(-14px) rotate(-3deg)}30%{transform:translateY(0) rotate(0)}48%{transform:translateY(0) rotate(5deg)}60%{transform:translateY(0) rotate(-4deg)}72%{transform:translateY(0) rotate(0)}86%,100%{transform:translateY(200px) rotate(0)}}
@keyframes hugo-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Switch — the Konto notification toggles (a visually hidden checkbox with
   role=switch, followed by the track). Visuals key off :checked so a tap
   animates at once; the server only decides the initial state. The track
   ignores pointer events so taps land on the (transparent) input on top. */
.hugo-switch{position:relative;display:inline-block;width:52px;height:32px;flex:none}
.hugo-switch__input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.hugo-switch__track{pointer-events:none;display:block;width:52px;height:32px;border-radius:999px;background:var(--cocoa-200,#D4C9BC);transition:background-color .2s ease}
.hugo-switch__thumb{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(43,26,18,.25);transition:transform .22s var(--ease-out,cubic-bezier(.2,.8,.2,1)),width .15s ease}
.hugo-switch__input:checked+.hugo-switch__track{background:var(--green-500,#1E8A4C)}
.hugo-switch__input:checked+.hugo-switch__track .hugo-switch__thumb{transform:translateX(20px)}
/* iOS-style stretch while pressed; the checked thumb grows leftwards so its right edge stays put. */
.hugo-switch__input:active+.hugo-switch__track .hugo-switch__thumb{width:30px}
.hugo-switch__input:active:checked+.hugo-switch__track .hugo-switch__thumb{transform:translateX(16px)}
.hugo-switch__input:focus-visible+.hugo-switch__track{box-shadow:var(--ring-focus,0 0 0 3px rgba(232,99,43,.35))}
@media (prefers-reduced-motion:reduce){.hugo-switch__track,.hugo-switch__thumb{transition:none}}