.navBar{padding:18px 20px;display:flex;justify-content:center}.navLinks{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:999px;background:var(--nav-bg);border:1px solid var(--nav-border);box-shadow:var(--nav-shadow);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);position:relative;overflow:hidden}.navLinks:after{content:"";position:absolute;inset:1px;border-radius:inherit;background:var(--nav-sheen);opacity:.65;pointer-events:none}.navLink{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;padding:8px 10px;border-radius:999px;transition:transform .5s cubic-bezier(.2,.8,.2,1),background-color .5s ease,color .5s ease,box-shadow .5s ease;position:relative;transform:translateZ(0);z-index:1}.navLink:hover,.navLink:focus-visible{transform:scale(1.04);background-color:var(--nav-hover);color:var(--text)}.navLink.active{background-color:var(--nav-active);box-shadow:inset 0 0 0 1px #ffffff1f}.navIcon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}.navIcon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.themeToggle{background:transparent;border:none;cursor:pointer}.navLabel{font-size:14px;letter-spacing:.2px;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transform:translateY(2px);transition:max-width .5s ease,opacity .5s ease,transform .5s ease}.navLink:hover .navLabel,.navLink:focus-visible .navLabel{max-width:140px;opacity:1;transform:translateY(0);transition-delay:.14s}.navLink.active .navLabel{max-width:140px;opacity:1;transform:translateY(0)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text)}body.theme-dark{--bg: radial-gradient( circle at 20% 10%, #2a2a2a 0%, #141414 45%, #0f0f0f 100% );--text: #f3f3f3;--text-muted: rgba(255, 255, 255, .72);--title-shadow: 0 8px 40px rgba(0, 0, 0, .6);--card-bg: linear-gradient(180deg, rgba(40, 40, 40, .9) 0%, rgba(18, 18, 18, .95) 100%);--card-border: rgba(255, 255, 255, .12);--card-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);--chip-bg: rgba(255, 255, 255, .06);--chip-border: rgba(255, 255, 255, .18);--nav-bg: linear-gradient(180deg, rgba(36, 36, 36, .68) 0%, rgba(18, 18, 18, .78) 100%);--nav-border: rgba(255, 255, 255, .18);--nav-hover: rgba(255, 255, 255, .1);--nav-active: rgba(255, 255, 255, .18);--nav-shadow: 0 12px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1);--nav-sheen: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, .22), transparent 45%);--arrow-bg: linear-gradient(180deg, #222 0%, #141414 100%);--arrow-border: rgba(255, 255, 255, .2);--arrow-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06)}body.theme-light{--bg: radial-gradient(circle at 20% 10%, #ffffff 0%, #f2f2f2 55%, #e9e9e9 100%);--text: #111111;--text-muted: rgba(0, 0, 0, .65);--title-shadow: 0 8px 30px rgba(0, 0, 0, .2);--card-bg: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(235, 235, 235, .95) 100%);--card-border: rgba(0, 0, 0, .12);--card-shadow: 0 18px 40px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .6);--chip-bg: rgba(0, 0, 0, .04);--chip-border: rgba(0, 0, 0, .18);--nav-bg: linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(235, 235, 235, .82) 100%);--nav-border: rgba(0, 0, 0, .12);--nav-hover: rgba(0, 0, 0, .08);--nav-active: rgba(0, 0, 0, .14);--nav-shadow: 0 12px 30px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .75);--nav-sheen: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, .7), transparent 45%);--arrow-bg: linear-gradient(180deg, #f7f7f7 0%, #e9e9e9 100%);--arrow-border: rgba(0, 0, 0, .2);--arrow-shadow: 0 10px 30px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .6)}
