.topbar{z-index:10;color:#fff;background:#0f1f33;align-items:center;gap:40px;padding:14px 32px;font-family:system-ui,Segoe UI,Roboto,sans-serif;display:flex;position:relative}.topbar:after{content:"";pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8'%3E%3Cpath d='M0 0 H48 V3 q-6 5 -12 0 t-12 0 t-12 0 t-12 0 Z' fill='%230f1f33'/%3E%3C/svg%3E") repeat-x;height:8px;position:absolute;top:100%;left:0;right:0}.logo{color:#fff;flex-shrink:0;align-items:center;gap:10px;text-decoration:none;display:flex}.logo-mark{width:34px;height:30px;overflow:visible}.logo-mark .cloud{fill:none;stroke:#c9d3dd;stroke-width:2px;stroke-linejoin:round}.logo-mark .drop{fill:#e9a23b}.logo-mark .wave{fill:none;stroke:#5cc8dc;stroke-width:2.2px;stroke-linecap:round}.logo-word{letter-spacing:-.3px;white-space:nowrap;font-size:20px;font-weight:800}.logo-to{color:#5cc8dc;margin:0 1px;font-family:Caveat,cursive;font-size:22px;font-weight:500}.nav-links{gap:28px;display:flex}.nav-links a{color:#b8c4d0;white-space:nowrap;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4 C20 1, 40 7, 60 3 S90 2, 98 4' fill='none' stroke='%235cc8dc' stroke-width='2.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100%/0% 6px no-repeat;padding:6px 0 9px;font-size:15px;font-weight:500;text-decoration:none}.nav-links a:hover{color:#fff;background-size:100% 6px}.nav-links a.active{color:#fff;background-size:100% 6px;font-weight:700}.topbar a:focus-visible{outline-offset:4px;border-radius:2px;outline:3px solid #5cc8dc}.topbar-right{color:#9fb0c1;white-space:nowrap;align-items:center;gap:10px;margin-left:auto;font-size:14px;display:flex}.live-dot{background:#5cc8dc;border-radius:50%;width:8px;height:8px;position:relative}.live-dot:after{content:"";opacity:0;border:2px solid #5cc8dc;border-radius:50%;position:absolute;inset:0}@media (prefers-reduced-motion:no-preference){.nav-links a{transition:background-size .35s ease-out,color .2s}.live-dot:after{animation:2.4s ease-out infinite live-ping}.logo:hover .drop{animation:.7s ease-in logo-drip}}@keyframes live-ping{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3)}}@keyframes logo-drip{50%{transform:translateY(4px)}}@media (max-width:900px){.topbar{flex-wrap:wrap;gap:6px 16px;padding:12px 16px 4px}.nav-links{scrollbar-width:none;order:3;gap:22px;width:calc(100% + 32px);margin:0 -16px;padding:0 16px;overflow-x:auto}.nav-links::-webkit-scrollbar{display:none}}
