/* arcroad site navigation. One component on every page. No overlay, no dimming: a small panel on
   desktop (hover or keyboard), and on phones the sub-links slide into the same row. */
.sn{--sn-fg:#E8EAED;--sn-mut:#9AA0A6;--sn-acc:var(--accent,#E8A87C);display:flex;align-items:center;gap:2px;font-size:14px;line-height:1.2;position:relative;z-index:30}
.sn-home{font-weight:600;letter-spacing:-.01em;color:var(--sn-fg);text-decoration:none;padding:8px 12px 8px 0;margin-right:6px}
.sn-i{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;font:inherit;color:var(--sn-mut);padding:8px 12px;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:color .12s ease,background-color .12s ease}
.sn-i:hover,.sn-g:hover>.sn-i,.sn-g.open>.sn-i,.sn-g:focus-within>.sn-i{color:var(--sn-fg);background:rgba(255,255,255,.05)}
.sn-i[aria-current],.sn-g.cur>.sn-i,.sn-home[aria-current]{color:var(--sn-fg)}
.sn-g.cur>.sn-i{box-shadow:inset 0 -1px 0 var(--sn-acc);border-radius:0}
button.sn-i::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .14s ease;opacity:.7}
.sn-g.open>button.sn-i::after{transform:translateY(0) rotate(-135deg)}
.sn-i:focus-visible,.sn-p a:focus-visible,.sn-home:focus-visible,.sn-pay:focus-visible{outline:2px solid var(--sn-acc);outline-offset:2px}
.sn-g{position:relative;display:flex;align-items:center}
.sn-p{position:absolute;top:100%;left:50%;min-width:304px;margin-top:8px;padding:6px;background:#0E1116;border:1px solid rgba(255,255,255,.09);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.38);opacity:0;visibility:hidden;transform:translate(-50%,-4px);transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
.sn-p::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.sn-g:hover>.sn-p,.sn-g:focus-within>.sn-p,.sn-g.open>.sn-p{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.sn-g.shut>.sn-p{opacity:0;visibility:hidden}
.sn-p a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;transition:background-color .12s ease}
.sn-p a b{display:block;font-weight:500;font-size:14px;color:var(--sn-fg)}
.sn-p a span{display:block;font-size:12.5px;color:#8B939C;margin-top:3px;white-space:normal}
.sn-p a:hover{background:rgba(255,255,255,.05)}
.sn-p a[aria-current] b{color:var(--sn-acc)}
.sn-pay{margin-left:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--sn-acc);color:var(--sn-acc);text-decoration:none;white-space:nowrap;transition:background-color .12s ease,color .12s ease}
.sn-pay:hover{background:var(--sn-acc);color:#0B0D10}
.sn.inline{margin-bottom:28px}
header .sn{margin-left:auto}
@media (max-width:720px){
  .sn,header .sn{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%;margin-left:0}
  .sn::-webkit-scrollbar{display:none}
  .sn.inline{margin-left:-12px;margin-right:-12px;padding-inline:12px}
  .sn-p,.sn-g:hover>.sn-p,.sn-g:focus-within>.sn-p{position:static;display:none;min-width:0;margin:0;padding:0;background:none;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none}
  .sn-p::before{display:none}
  .sn-g.open>.sn-p{display:flex;align-items:center;gap:0;animation:sn-in .16s ease}
  .sn-p a{padding:8px 10px;white-space:nowrap}
  .sn-p a span{display:none}
  .sn-p a b{font-weight:400;color:#C9CDD2}
  .sn-i,.sn-p a,.sn-home,.sn-pay{min-height:44px;display:inline-flex;align-items:center}
}
@keyframes sn-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sn *,.sn *::after{transition:none!important;animation:none!important}}
