/* Yellow top banner (#protocolBanner): the app ask on the homepage and main
   pages. Brand yellow, a mini readiness ring that fills and counts up as the
   banner slides in, and a black button that catches the light once.
   The pages' own inline banner rules are older; these win by the id. */
#protocolBanner.event-banner{display:flex;align-items:center;height:44px;border-radius:0 0 20px 20px;background:#FFE500;color:#111118;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0;box-shadow:0 1px 0 #0000001f;transition:transform .7s cubic-bezier(.16,1,.3,1)}
html body nav#nav.with-banner{top:44px}

#protocolBanner #protocolBannerLink{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:12px;width:auto;height:100%;padding:0 16px;color:#111118;text-decoration:none}

/* The widget: a mini version of the app's daily ring. */
#protocolBanner .tb-ring{background:#111118;border-radius:50%;position:relative;flex:none;width:30px;height:30px;display:grid;place-items:center}
#protocolBanner .tb-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#protocolBanner .tb-ring circle{fill:none;stroke-width:2.6;stroke-linecap:round}
#protocolBanner .tb-ring .t1{stroke:#3a2a1c}#protocolBanner .tb-ring .t2{stroke:#173129}#protocolBanner .tb-ring .t3{stroke:#2b1a40}#protocolBanner .tb-ring .t4{stroke:#3a2310}
#protocolBanner .tb-ring .f{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1)}
#protocolBanner .tb-ring .f1{stroke:#F7B93E;transition-delay:.45s}#protocolBanner .tb-ring .f2{stroke:#62F58A;transition-delay:.6s}#protocolBanner .tb-ring .f3{stroke:#C463FA;transition-delay:.75s}#protocolBanner .tb-ring .f4{stroke:#F08A2E;transition-delay:.9s}
#protocolBanner.is-visible .f1{stroke-dashoffset:28}#protocolBanner.is-visible .f2{stroke-dashoffset:84}#protocolBanner.is-visible .f3{stroke-dashoffset:12}#protocolBanner.is-visible .f4{stroke-dashoffset:4}

#protocolBanner .tb-copy{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
#protocolBanner .tb-k{font:700 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
#protocolBanner .tb-k i{font-style:normal;display:inline-block;margin-left:6px;padding:2px 5px;border-radius:999px;background:#111118;color:#FFE500;letter-spacing:.1em;opacity:0;transform:translateY(3px);transition:opacity .4s 1.5s,transform .5s cubic-bezier(.16,1,.3,1) 1.5s}
#protocolBanner.is-visible .tb-k i{opacity:1;transform:none}
#protocolBanner .tb-t{font-size:12.5px;font-weight:600;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#protocolBanner .tb-btn{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px 0 10px;border-radius:999px;background:#111118;color:#FFE500;font-size:13px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
#protocolBanner .tb-btn img{width:12px;height:auto}
#protocolBanner .tb-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#fff0 30%,#ffffff59 50%,#fff0 70%);transform:translateX(-120%)}
#protocolBanner.is-visible .tb-btn::after{animation:tb-shine 1.1s cubic-bezier(.4,0,.2,1) 1.9s both}
#protocolBannerLink:hover .tb-btn{transform:translateY(-1px);box-shadow:0 6px 14px -6px #111118b3}
#protocolBannerLink:focus-visible{outline:none}
#protocolBannerLink:focus-visible .tb-btn{outline:3px solid #111118;outline-offset:3px}
@keyframes tb-shine{to{transform:translateX(120%)}}

#protocolBanner .event-banner__alt{flex:none;display:flex;align-items:center;width:auto;height:100%;padding:0 48px 0 4px;color:#111118;font-size:12px;font-weight:600;text-decoration:underline;text-decoration-color:#11111859;text-underline-offset:3px;white-space:nowrap;opacity:.75}
#protocolBanner .event-banner__alt:hover{opacity:1;text-decoration-color:#111118}
#protocolBanner .event-banner__close{position:absolute;right:12px;top:50%;width:26px;height:26px;padding:0;display:grid;place-items:center;border-radius:50%;transform:translateY(-50%);color:#111118;opacity:.55;font-size:18px}
#protocolBanner .event-banner__close:hover{opacity:1;background:#1111181a}

@media(max-width:768px){
  #protocolBanner.event-banner{top:auto;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));height:54px;border-radius:18px;z-index:930;transform:translateY(calc(100% + 40px));box-shadow:0 14px 34px -10px #000a,0 0 0 1px #0002}
  #protocolBanner.event-banner.is-visible{transform:none}
  html.ub-pop-open #protocolBanner.event-banner.is-visible{transform:translateY(calc(100% + 40px))}
  html body nav#nav.with-banner{top:0}
  #protocolBanner #protocolBannerLink{justify-content:flex-start;gap:10px;padding:0 46px 0 14px}
  #protocolBanner .tb-ring{width:28px;height:28px}
  #protocolBanner .tb-t,#protocolBanner .event-banner__alt{display:none}
  #protocolBanner .tb-copy{flex:1}
  #protocolBanner .tb-k{font-size:0;letter-spacing:0}
  #protocolBanner .tb-k i{margin:0;padding:3px 8px;font-size:10.5px}
  #protocolBanner .tb-btn{height:28px;padding:0 12px 0 9px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  #protocolBanner.event-banner,#protocolBanner *,#protocolBanner *::after{transition:none!important;animation:none!important}
}