:root { --site-ink:#eaf0ff; --site-muted:#a4aec5; --site-line:#303a51; --site-accent:#8ce8f3; }
.site-nav { position:relative; z-index:20; display:flex; align-items:center; justify-content:flex-end; gap:16px; min-height:58px; padding:8px 20px; background:#10151f; border-bottom:1px solid #344155; font:600 14px/1.3 "Segoe UI",system-ui,sans-serif; color:var(--site-ink); }
.site-nav a { color:inherit; text-decoration:none; }
.site-mark { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; letter-spacing:.09em; }
.site-mark b { color:#8ce8f3; font-weight:400; }
.site-symbol { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,#7d4eff,#1ec4d8); color:white; font-size:22px; }
.site-nav-links { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.site-nav-links a { padding:9px 13px; border-radius:8px; color:#b5bfd3; }
.site-nav-links a:hover, .site-nav-links a.selected { color:white; background:#263149; }
body:has(.site-nav) { overflow:auto; }
body:has(.site-nav) .app { height:calc(100dvh - 58px); min-height:590px; }
@media (max-width:800px) { .site-nav { padding:9px 12px; } .site-nav-links { width:100%; } .site-nav-links a { padding:8px; } body:has(.site-nav) .app { height:calc(100dvh - 105px); min-width:850px; } body:has(.site-nav) { overflow:auto; } }