body{margin:0;background:#0E2240;font-family:'Barlow',system-ui,sans-serif;color:#1F2937;-webkit-font-smoothing:antialiased}
a{color:#0E2240}a:hover{color:#C4CBD5}
.nav-item{position:relative}
.nav-item>.dd{display:none;position:absolute;top:100%;left:0;min-width:220px;background:#081529;border:1px solid rgba(255,255,255,0.12);padding:8px 0;z-index:20;flex-direction:column}
.nav-item:hover>.dd,.nav-item:focus-within>.dd{display:flex}
.nav-item>.dd a{color:#D5DAE3;text-decoration:none;padding:10px 18px;font-size:15px;font-weight:500;display:block}
.nav-item>.dd a:hover{background:#163058;color:#FFFFFF}
@keyframes shine{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.shine{background-size:200% auto;animation:shine 7s linear infinite}
@media (prefers-reduced-motion: reduce){.shine{animation:none}}
@keyframes noteFloat{0%{transform:translate(0,0) rotate(-6deg);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate(28px,-140px) rotate(8deg);opacity:0}}
@media (prefers-reduced-motion: reduce){.note{animation:none !important;opacity:.35}}

/* Mobile: stack the inline repeat() grids (the calendar month grid scrolls in its own box instead), shrink headings, flatten nav dropdowns */
@media (max-width: 900px) {
  [style*="grid-template-columns: repeat"]:not([style*="min-width: 900px"]) { grid-template-columns: minmax(0, 1fr) !important; }
  h1 { font-size: 44px !important; line-height: 1.05 !important; }
  h2 { font-size: 34px !important; line-height: 1.1 !important; min-width: 0 !important; }
  .nav-item > .dd { position: static; min-width: 0; }
}