@keyframes ttNavArrive{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .topbar nav{top:70px;padding:18px 22px 22px;gap:0;border:1px solid rgba(255,255,255,.14);border-top:0;background:linear-gradient(145deg,rgba(18,55,45,.98),rgba(10,35,28,.98));box-shadow:0 26px 55px rgba(0,0,0,.38);backdrop-filter:blur(18px)}
  .topbar nav.open{display:flex}
  .topbar nav a{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:center;min-height:67px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.11);color:#fff;font-size:clamp(18px,5vw,22px);font-weight:650;letter-spacing:-.02em;opacity:1;transition:padding .24s,background .24s,color .24s}
  .topbar nav a:last-child{border-bottom:0}
  .topbar nav a:before{color:#f46c31;font-size:9px;font-weight:800;letter-spacing:.08em}
  .topbar nav a:nth-child(1):before{content:"01"}.topbar nav a:nth-child(2):before{content:"02"}.topbar nav a:nth-child(3):before{content:"03"}.topbar nav a:nth-child(4):before{content:"04"}
  .topbar nav a:after{display:grid;width:31px;height:31px;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#f46c31;content:"→";font-size:16px;transition:transform .24s,background .24s,color .24s}
  .topbar nav a:hover,.topbar nav a:focus-visible{padding-left:17px;background:rgba(255,255,255,.07);color:#fff;outline:0}
  .topbar nav a:hover:after,.topbar nav a:focus-visible:after{transform:translateX(4px) rotate(-12deg);background:#f46c31;color:#fff}
  .topbar nav.open a{animation:ttNavArrive .38s both cubic-bezier(.16,1,.3,1)}
  .topbar nav.open a:nth-child(2){animation-delay:.05s}.topbar nav.open a:nth-child(3){animation-delay:.1s}.topbar nav.open a:nth-child(4){animation-delay:.15s}
}
@media(max-width:420px){.topbar nav{padding-inline:14px}.topbar nav a{min-height:63px;font-size:19px}}
@media(prefers-reduced-motion:reduce){.topbar nav.open a{animation:none}.topbar nav a,.topbar nav a:after{transition:none}}