/* Apex site navigation for the practice apps (matches the main site header) */
.sitenav{--gut:clamp(1.25rem,4vw,2.5rem);position:sticky;top:0;z-index:10000;background:rgba(12,12,12,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(215,226,234,.2);color:#d7e2ea;font-family:Kanit,Manrope,Arial,sans-serif;display:none}
.sitenav *{box-sizing:border-box}
.sitenav .in{width:100%;max-width:min(1400px,100vw - 40px);margin-inline:auto;padding:.75rem var(--gut);display:flex;align-items:center;gap:18px;min-height:4.25rem}
.sitenav .logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:#d7e2ea;white-space:nowrap;flex:none}
.sitenav .logo img{width:34px;height:34px;border-radius:8px;display:block}
.sitenav .logo b{font:800 1.1rem/1.4 Kanit,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.sitenav .logo i{font:500 11px/1.4 Kanit,sans-serif;font-style:normal;letter-spacing:1px;text-transform:uppercase;color:rgba(215,226,234,.62)}
.sitenav .nav{display:flex;align-items:center;gap:5px;margin-inline:auto}
.sitenav .nav a{white-space:nowrap;padding:10px 8px;border-radius:999px;font:500 15px/1.4 Kanit,sans-serif;letter-spacing:.2px;text-transform:uppercase;color:#d7e2ea;text-decoration:none;transition:color .2s,background-color .2s}
.sitenav .nav a:hover{background:rgba(155,73,189,.05);border-radius:8px;color:#c887e9}
.sitenav .nav a[aria-current]{color:#fff;background:rgba(255,255,255,.08)}
.sitenav .nav .navacct{border:1px solid rgba(165,117,183,.4);border-radius:30px;padding-inline:14px}
.sitenav .cta{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:2.6rem;padding:3px 4px 3px 16px;border-radius:999px;font:500 12px/1 Kanit,sans-serif;letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:#fff;background:linear-gradient(135deg,#b600a8,#6d28d9 60%,#ea6a0c);outline:2px solid #fff;outline-offset:-3px}
.sitenav .cta::after{content:"→";display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:rgba(255,255,255,.2);font-size:.95rem;letter-spacing:0}
.sitenav .burger{display:none;background:none;border:1px solid rgba(215,226,234,.2);color:#d7e2ea;border-radius:50%;width:2.75rem;height:2.75rem;position:relative;cursor:pointer;flex:none;padding:0}
.sitenav .burger span{position:absolute;left:50%;top:50%;width:1.05rem;height:2px;background:currentColor;border-radius:2px;transition:transform .24s}
.sitenav .burger span:nth-child(1){transform:translate(-50%,-4px)}.sitenav .burger span:nth-child(2){transform:translate(-50%,4px)}
.sitenav .burger[aria-expanded=true] span:nth-child(1){transform:translate(-50%,0) rotate(45deg)}.sitenav .burger[aria-expanded=true] span:nth-child(2){transform:translate(-50%,0) rotate(-45deg)}
@media(min-width:1061px) and (max-width:1279px){.sitenav .nav a{font-size:14px;padding:10px 5px}.sitenav .nav{gap:3px}.sitenav .logo i{display:none}.sitenav .in{gap:12px}}
@media(max-width:1060px){
  .sitenav .burger{display:block;margin-left:.25rem}
  .sitenav .cta{margin-left:auto}
  .sitenav .nav{position:absolute;inset:100% 0 auto 0;height:calc(100dvh - 4.25rem);background:#0c0c0c;border-top:1px solid rgba(215,226,234,.15);flex-direction:column;align-items:stretch;gap:.25rem;margin:0;padding:1.5rem var(--gut) 2rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .24s,visibility 0s linear .24s;overflow:auto}
  .sitenav .nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .24s,visibility 0s}
  .sitenav .nav a{font-size:clamp(1.6rem,6vw,2.2rem);font-weight:800;letter-spacing:-.03em;padding:.7rem 0;border-bottom:1px solid rgba(215,226,234,.2);border-radius:0;background:none!important;text-transform:none;color:#d7e2ea}
  .sitenav .nav .navacct{border:0;border-bottom:1px solid rgba(215,226,234,.2);border-radius:0;padding-inline:0}
}
@media(max-width:700px){.sitenav .logo i{display:none}}
@media(max-width:380px){.sitenav .cta{display:none}.sitenav .burger{margin-left:auto}}