/* Shared primary header. Based on the approved home page; scoped away from demo navigation. */
body > nav.site-header{--bg:#08090a;--panel2:#0a0b0d;--line:#292e33;--line2:#373d44;--text:#f2f2f0;--muted:#90979d;--faint:#92989e;--accent:#a6a8ff;--accent-rgb:166,168,255}
html[data-theme="light"] body > nav.site-header{--bg:#f1ece3;--panel2:#e8e2d6;--line:#d8d1c3;--line2:#c7bfae;--text:#26221d;--muted:rgba(38,34,29,.6);--faint:#70685e;--accent:#5b5ee6;--accent-rgb:91,94,230}
.announcement{view-transition-name: vezza-announcement;}
body > nav.site-header{view-transition-name: vezza-navigation;}
body > nav.site-header .brand{view-transition-name: vezza-brand;}
.announcement{height: 30px; display: flex; align-items: center; justify-content: center; background: rgb(12, 13, 15); border-bottom: 1px solid rgb(21, 23, 26); font: 8px "Space Mono", monospace; letter-spacing: 0.23em; color: rgb(85, 91, 97); position: relative; z-index: 202;}
body > nav.site-header{position: sticky; top: 0px; z-index: 200; background: rgba(8, 9, 10, 0.92); backdrop-filter: blur(18px); border-bottom: 1px solid rgb(21, 23, 26);}
body > nav.site-header .nav-inner{height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0px 40px;}
body > nav.site-header .brand{display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); font: 11px "Space Mono", monospace; letter-spacing: 0.22em;}
body > nav.site-header .brand img{height: 31px; width: auto; mix-blend-mode: screen;}
body > nav.site-header .navlinks{display: flex; align-items: center; gap: 25px; list-style: none;}
body > nav.site-header .navlinks a{font: 9px "Space Mono", monospace; letter-spacing: 0.13em; color: rgb(104, 110, 116); text-decoration: none;}
body > nav.site-header .navlinks a:hover{color: rgb(221, 221, 221);}
body > nav.site-header .nav-cta{padding: 10px 18px; border-radius: 2px; background: rgb(215, 217, 220) !important; color: rgb(8, 9, 10) !important;}
body > nav.site-header .menu{display: none; background: none; border: 0px; font: 10px "Space Mono", monospace; letter-spacing: 0.15em; cursor: pointer;}
@media (max-width: 860px) {body > nav.site-header .nav-inner{padding: 0px 20px;}
body > nav.site-header .menu{display: block;}
body > nav.site-header .navlinks{display: none; position: absolute; top: 62px; left: 0px; right: 0px; background: rgb(10, 11, 13); border-bottom: 1px solid rgb(30, 33, 36); padding: 20px; flex-wrap: wrap; justify-content: center;}
body > nav.site-header .navlinks.open{display: flex;}
.announcement{text-align: center; padding: 0px 10px;}}
@media (max-width: 520px) {.announcement{height: 38px;}
body > nav.site-header .brand span{display: none;}
body > nav.site-header .navlinks{gap: 16px;}
body > nav.site-header .navlinks li:last-child{width: 100%; text-align: center;}}
body > nav.site-header .theme-slot{display: flex; align-items: center;}
body > nav.site-header .theme-control{display: flex; align-items: center; gap: 7px;}
body > nav.site-header .theme-control > span{font: 7px "Space Mono", monospace; letter-spacing: 0.14em; color: rgb(85, 91, 97);}
body > nav.site-header .theme-control select{appearance: none; border: 1px solid rgb(41, 45, 49); border-radius: 3px; background: linear-gradient(45deg, transparent 50%, currentcolor 50%) calc(100% - 10px) 50% / 3px 3px no-repeat, linear-gradient(135deg, currentcolor 50%, transparent 50%) calc(100% - 7px) 50% / 3px 3px rgb(17, 19, 21); color: rgb(166, 170, 174); padding: 7px 22px 7px 8px; font: 8px "Space Mono", monospace; letter-spacing: 0.08em; cursor: pointer;}
body > nav.site-header .theme-control select:focus-visible{outline: 2px solid var(--accent); outline-offset: 3px;}
html[data-theme="light"] .announcement{background: rgb(232, 226, 214); border-color: rgb(216, 209, 195); color: rgba(38, 34, 29, 0.55);}
html[data-theme="light"] body > nav.site-header {background: rgba(241, 236, 227, 0.92); border-color: rgb(216, 209, 195);}
html[data-theme="light"] body > nav.site-header .brand img{filter: invert(1); mix-blend-mode: multiply;}
html[data-theme="light"] body > nav.site-header .navlinks a{color: rgba(38, 34, 29, 0.62);}
html[data-theme="light"] body > nav.site-header .navlinks a:hover{color: rgb(38, 34, 29);}
html[data-theme="light"] body > nav.site-header .nav-cta{background: rgb(91, 94, 230) !important; color: rgb(255, 255, 255) !important;}
html[data-theme="light"] body > nav.site-header .theme-control > span{color: rgba(38, 34, 29, 0.5);}
html[data-theme="light"] body > nav.site-header .theme-control select{background-color: rgb(248, 244, 236); border-color: rgb(199, 191, 174); color: rgb(91, 94, 230);}
@media (max-width: 860px) {html[data-theme="light"] body > nav.site-header .navlinks{background: rgb(241, 236, 227); border-color: rgb(216, 209, 195);}
body > nav.site-header .theme-slot{order: 4;}
body > nav.site-header .navlinks .theme-slot{width: 100%; justify-content: center;}
body > nav.site-header .theme-control > span{display: none;}}
body > nav.site-header .nav-inner{width: min(1160px, 100%); max-width: 1160px; margin-inline: auto; padding-inline: 40px; gap: 24px;}
body > nav.site-header .navlinks{gap: 24px;}
body > nav.site-header .navlinks a{display: inline-flex; align-items: center; min-height: 44px; font: 500 9px "Space Mono", monospace; letter-spacing: 0.12em;}
body > nav.site-header .brand{font: 500 11px "Space Mono", monospace; letter-spacing: 0.2em;}
body > nav.site-header .nav-cta{padding: 0px 17px; min-height: 38px !important;}
@media (max-width: 940px) {body > nav.site-header .nav-inner{width: 100%; padding-inline: 24px;}
body > nav.site-header .menu{display: block;}
body > nav.site-header .navlinks{display: none; position: absolute; top: 62px; left: 0px; right: 0px; padding: 18px 24px; border-bottom: 1px solid var(--line); background: var(--bg); flex-wrap: wrap; justify-content: center;}
body > nav.site-header .navlinks.open{display: flex;}
body > nav.site-header .theme-slot{width: 100%; display: flex; justify-content: center;}}
@media (max-width: 620px) {body > nav.site-header .nav-inner{padding-inline: 20px;}}
@media (max-width: 940px) {body > nav.site-header .menu{position: relative; padding: 0px 12px; color: var(--text); transition: border-color 0.2s, color 0.2s; border: 1px solid var(--line) !important; border-radius: 999px !important;}
body > nav.site-header .menu::before{content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent);}
body > nav.site-header .menu[aria-expanded="true"]{color: var(--accent); border-color: var(--accent) !important;}
body > nav.site-header .navlinks.open{z-index: 205; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100% - 28px, 600px); left: 50%; right: auto; top: 72px; padding: 42px 14px 14px; border: 1px solid var(--line2); border-radius: 14px; background: color-mix(in srgb,var(--bg) 96%,transparent); box-shadow: rgba(0, 0, 0, 0.42) 0px 28px 80px; transform: translateX(-50%); animation: 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running mobileMenuIn;}
body > nav.site-header .navlinks.open::before{content: "VEZZA / NAVIGATION"; position: absolute; left: 18px; top: 17px; color: var(--faint); font: 500 7px "Space Mono", monospace; letter-spacing: 0.16em;}
body > nav.site-header .navlinks.open li{min-width: 0px;}
body > nav.site-header .navlinks.open li:nth-child(n+4):not(.theme-slot){grid-column: 1 / -1;}
body > nav.site-header .navlinks.open a:not(.nav-cta){width: 100%; min-height: 48px; justify-content: center; padding: 0px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--muted); text-align: center;}
body > nav.site-header .navlinks.open li:nth-child(-n+3) a{min-height: 58px; color: var(--text);}
body > nav.site-header .navlinks.open li:nth-child(-n+3) a[aria-current="true"], body > nav.site-header .navlinks.open li:nth-child(-n+3) a:hover{border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb,91,94,230),.08);}
body > nav.site-header .navlinks.open .theme-slot{grid-column: 1 / -1; width: 100%; padding: 7px 4px;}
body > nav.site-header .navlinks.open .theme-control{width: 100%; justify-content: space-between;}
body > nav.site-header .navlinks.open .theme-control > span{display: block;}
body > nav.site-header .navlinks.open .theme-control select{min-width: 120px;}
body > nav.site-header .navlinks.open .nav-cta{width: 100%; justify-content: center; min-height: 52px !important;}
body > nav.site-header .navlinks.open li:last-child{grid-column: 1 / -1; width: 100%;}}
@media (max-width: 620px) {body > nav.site-header .navlinks.open{top: 68px; width: calc(100% - 20px);}
body > nav.site-header .navlinks.open a:not(.nav-cta){font-size: 8px; letter-spacing: 0.08em;}}
@media (max-width: 940px) {body > nav.site-header .menu{display: inline-flex; align-items: center; justify-content: center; padding: 0px 13px 0px 28px !important;}
body > nav.site-header .menu::before{position: absolute; left: 12px; top: 50%; display: block; margin: 0px; transform: translateY(-50%);}}
body > nav.site-header .theme-native{position: absolute !important; width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; border: 0px !important;}
body > nav.site-header .theme-control{position: relative;}
body > nav.site-header .theme-control > span{display: none;}
body > nav.site-header .theme-switch{--theme-index: 0; position: relative; display: grid; grid-template-columns: repeat(3, 30px); padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); isolation: isolate;}
body > nav.site-header .theme-switch::before{content: ""; position: absolute; z-index: -1; left: 3px; top: 3px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); box-shadow: rgba(0, 0, 0, 0.24) 0px 4px 14px; transform: translateX(calc(var(--theme-index)*30px)); transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s;}
body > nav.site-header .theme-switch[data-active="light"]{--theme-index: 1;}
body > nav.site-header .theme-switch[data-active="dark"]{--theme-index: 2;}
body > nav.site-header .theme-switch button{width: 30px; height: 30px; display: grid; place-items: center; border: 0px; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;}
body > nav.site-header .theme-switch button i{font: 400 12px "Space Mono", monospace;}
body > nav.site-header .theme-switch button b{display: none;}
body > nav.site-header .theme-switch button[aria-pressed="true"]{color: rgb(255, 255, 255);}
body > nav.site-header .theme-switch button:focus-visible{outline: 2px solid var(--accent); outline-offset: 3px;}
@media (max-width: 940px) {body > nav.site-header .navlinks.open .theme-control{display: grid; grid-template-columns: auto 1fr; gap: 14px;}
body > nav.site-header .navlinks.open .theme-control > span{display: block;}
body > nav.site-header .navlinks.open .theme-switch{justify-self: end; grid-template-columns: repeat(3, minmax(62px, 1fr)); width: min(100%, 250px); border-radius: 9px;}
body > nav.site-header .navlinks.open .theme-switch::before{width: calc(33.3333% - 2px); border-radius: 6px; transform: translateX(calc(var(--theme-index)*100%));}
body > nav.site-header .navlinks.open .theme-switch button{width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px;}
body > nav.site-header .navlinks.open .theme-switch button b{display: block; font: 600 7px "Space Mono", monospace; letter-spacing: 0.08em;}}
body > nav.site-header .theme-switch::before{z-index: 0;}
body > nav.site-header .theme-switch button{position: relative; z-index: 1;}
body > nav.site-header .theme-control{view-transition-name: vezza-theme;}
html[data-theme-choice="auto"] body > nav.site-header .theme-switch{--theme-index: 0;}
html[data-theme-choice="light"] body > nav.site-header .theme-switch{--theme-index: 1;}
html[data-theme-choice="dark"] body > nav.site-header .theme-switch{--theme-index: 2;}

html:not([data-theme="light"]) .announcement{color: rgb(146, 153, 159); border-color: rgb(38, 42, 46);}
html:not([data-theme="light"]) body > nav.site-header .navlinks a{color: rgb(150, 157, 163);}
body > nav.site-header .menu{min-width: 44px; min-height: 44px;}
body > nav.site-header .navlinks a:not(.nav-cta){display: inline-flex; align-items: center; min-height: 44px;}
body > nav.site-header .navlinks [data-nav-mode][aria-current="true"]{color: rgb(166, 168, 255);}
html[data-theme="light"] body > nav.site-header .navlinks [data-nav-mode][aria-current="true"]{color: rgb(91, 94, 230);}
@media (max-width: 940px) {body > nav.site-header .navlinks{z-index: 205; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100% - 28px, 600px); left: 50%; right: auto; top: 72px; padding: 42px 14px 14px; border: 1px solid var(--line2); border-radius: 14px; background: color-mix(in srgb,var(--bg) 96%,transparent); box-shadow: rgba(0, 0, 0, 0.42) 0px 28px 80px; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -8px) scale(0.985); transition: opacity 0.2s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility linear 0.3s; display: grid !important;}
body > nav.site-header .navlinks.open{opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0px) scale(1); animation: auto ease 0s 1 normal none running none; transition-delay: 0s;}}
@media (max-width: 620px) {body > nav.site-header .navlinks{top: 68px; width: calc(100% - 20px);}}
body > nav.site-header .navlinks a[aria-current="page"]:not(.nav-cta){color:var(--accent)}
body > nav.site-header .theme-switch button[aria-pressed="true"]{color:#08090a}
html[data-theme="light"] body > nav.site-header .theme-switch button[aria-pressed="true"]{color:#fff}
body > nav.site-header .theme-native{display:none}
body > nav.site-header :is(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(min-width:521px){body > nav.site-header .brand span{display:inline}}
@media(max-width:940px){
  body:before{content:"";position:fixed;z-index:190;inset:0;background:rgba(5,6,7,.58);backdrop-filter:blur(7px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility 0s linear .24s}
  body.menu-open:before{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  body > nav.site-header .navlinks{max-height:calc(100dvh - 116px);overflow-y:auto;overscroll-behavior:contain}
}
@media(prefers-reduced-motion:reduce){
  body > nav.site-header *,body > nav.site-header *:before,body:before{animation:none!important;transition:none!important}
}