.nav-container{background:var(--glass-background-strong);-webkit-backdrop-filter:blur(var(--glass-blur-strong));border:1px solid var(--glass-border);box-shadow:var(--shadow-lg);transition:all var(--transition-base)var(--ease-smooth)}@supports not ((-webkit-backdrop-filter:blur(16px)) or (backdrop-filter:blur(16px))){.nav-container{background:rgb(var(--color-surface))}}.nav-link{color:rgb(var(--color-text-primary));font-size:var(--text-sm);font-weight:var(--font-semibold);padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-sm);transition:all var(--transition-fast)var(--ease-smooth);align-items:center;gap:var(--spacing-xs);text-decoration:none;display:inline-flex;position:relative}.nav-link:hover{color:rgb(var(--color-primary));background:rgba(var(--color-primary),.05);transform:scale(1.05)}.nav-link:active{transform:scale(.98)}.nav-link:hover,.nav-link:active{will-change:transform}.nav-link-active{color:rgb(var(--color-primary));font-weight:var(--font-bold)}.nav-link-active:after{content:"";bottom:0;left:var(--spacing-md);right:var(--spacing-md);background:rgb(var(--color-primary));border-radius:var(--radius-full);height:2px;position:absolute}.nav-link:focus-visible,.nav-button:focus-visible,.mobile-menu-button:focus-visible{outline:2px solid rgb(var(--color-primary));outline-offset:2px;box-shadow:0 0 0 3px rgba(var(--color-primary),.3)}.nav-button{justify-content:center;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm)var(--spacing-lg);font-size:var(--text-sm);font-weight:var(--font-semibold);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)var(--ease-smooth);border:none;text-decoration:none;display:inline-flex}.nav-button-primary{background:var(--gradient-primary);color:rgb(var(--color-text-inverse));box-shadow:var(--shadow-primary)}.nav-button-primary:hover{box-shadow:var(--shadow-lg);will-change:transform;transform:translateY(-2px)}.nav-button-primary:active{transform:translateY(0)}.nav-button-secondary{color:rgb(var(--color-primary));border:1px solid rgb(var(--color-primary));background:0 0}.nav-button-secondary:hover{background:rgba(var(--color-primary),.1);transform:translateY(-1px)}.nav-button-secondary:active{transform:translateY(0)}.nav-button-ghost{color:rgb(var(--color-text-primary));background:0 0}.nav-button-ghost:hover{background:rgba(var(--color-primary),.05);color:rgb(var(--color-primary))}.mobile-menu-button{padding:var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;color:rgb(var(--color-text-primary));transition:all var(--transition-fast)var(--ease-smooth);touch-action:manipulation;background:0 0;border:none;justify-content:center;align-items:center;min-width:44px;min-height:44px;display:inline-flex}.mobile-menu-button:hover{background:rgba(var(--color-primary),.1);color:rgb(var(--color-primary))}.mobile-menu-button:active{transform:scale(.95)}.mobile-menu-overlay{-webkit-backdrop-filter:blur(var(--blur-sm));z-index:var(--z-modal-backdrop);opacity:0;transition:opacity var(--transition-base)var(--ease-smooth);will-change:opacity;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;background:#00000080;position:fixed;inset:0}.mobile-menu-overlay.active{opacity:1}.mobile-menu-panel{background:var(--glass-background-strong);width:100%;max-width:320px;-webkit-backdrop-filter:blur(var(--glass-blur-strong));border-left:1px solid var(--glass-border);box-shadow:var(--shadow-2xl);z-index:var(--z-modal);transition:transform var(--transition-base)var(--ease-smooth);will-change:transform;touch-action:pan-y;pointer-events:auto;flex-direction:column;min-width:256px;display:flex;position:fixed;top:0;bottom:0;right:0;overflow:hidden auto;transform:translate(100%)}@media (max-width:374px){.mobile-menu-panel{min-width:240px;max-width:280px}}@media (min-width:375px) and (max-width:424px){.mobile-menu-panel{min-width:256px;max-width:300px}}.mobile-menu-panel.active{transform:translate(0)}.mobile-menu-panel,.mobile-menu-overlay{backface-visibility:hidden;perspective:1000px;transform:translateZ(0)}@supports not ((-webkit-backdrop-filter:blur(16px)) or (backdrop-filter:blur(16px))){.mobile-menu-panel{background:rgb(var(--color-surface));border-left:2px solid rgba(var(--color-border),.5)}.mobile-menu-overlay{-webkit-backdrop-filter:none;background:#000000bf}}@supports not ((-webkit-backdrop-filter:blur(16px))){.mobile-menu-panel{background:rgb(var(--color-surface))}.mobile-menu-overlay{-webkit-backdrop-filter:none;background:#000000bf}}.mobile-menu-header{padding:var(--spacing-lg);border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;display:flex}.mobile-menu-close{padding:var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;color:rgb(var(--color-text-primary));transition:all var(--transition-fast)var(--ease-smooth);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.mobile-menu-close:hover{background:rgba(var(--color-error),.1);color:rgb(var(--color-error))}.mobile-menu-nav{padding:var(--spacing-lg);gap:var(--spacing-xs);flex-direction:column;display:flex}.mobile-menu-nav .nav-link{width:100%;padding:var(--spacing-md);font-size:var(--text-base);justify-content:flex-start}.mobile-menu-nav .nav-button{width:100%;margin-top:var(--spacing-sm);justify-content:center}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.mobile-menu-panel-enter{animation:slideInRight var(--transition-base)var(--ease-smooth)}.mobile-menu-panel-exit{animation:slideOutRight var(--transition-base)var(--ease-smooth)}.mobile-menu-overlay-enter{animation:fadeIn var(--transition-fast)var(--ease-smooth)}.mobile-menu-overlay-exit{animation:fadeOut var(--transition-fast)var(--ease-smooth)}.modern-footer{background:var(--glass-background);-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--glass-border);color:rgb(var(--color-text-secondary));transition:all var(--transition-base)var(--ease-smooth);contain:layout style;margin-top:auto}@supports not ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px))){.modern-footer{background:rgb(var(--color-surface));position:relative}}.modern-footer>div{padding:var(--spacing-2xl)var(--spacing-xl)}.footer-grid{gap:var(--spacing-xl);margin-bottom:var(--spacing-2xl);grid-template-columns:1fr;display:grid}@media (min-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.footer-grid{grid-template-columns:repeat(3,1fr)}}.footer-section{gap:var(--spacing-md);flex-direction:column;display:flex}.footer-logo{transition:transform var(--transition-fast)var(--ease-out);width:fit-content;min-height:44px;padding:var(--spacing-xs);align-items:center;display:inline-flex}.footer-logo:hover{transform:scale(1.05)}.footer-logo:active{transform:scale(.98)}.footer-logo:focus-visible{outline:2px solid rgb(var(--color-primary));outline-offset:2px;border-radius:var(--radius-sm)}.footer-tagline{color:rgb(var(--color-text-secondary));font-size:var(--text-sm);margin-top:var(--spacing-sm);max-width:280px;line-height:1.6}.footer-heading{font-size:var(--text-sm);font-weight:var(--font-semibold);color:rgb(var(--color-text-primary));text-transform:uppercase;letter-spacing:.05em}.footer-links{gap:var(--spacing-sm);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.footer-link{color:rgb(var(--color-text-secondary));font-size:var(--text-sm);transition:all var(--transition-fast)var(--ease-smooth);align-items:center;gap:var(--spacing-xs);width:fit-content;min-height:44px;padding:var(--spacing-sm)var(--spacing-xs);text-decoration:none;display:inline-flex}.footer-link:hover{color:rgb(var(--color-primary));will-change:transform;transform:translate(4px)}.footer-link:focus-visible{outline:2px solid rgb(var(--color-primary));outline-offset:2px;box-shadow:0 0 0 3px rgba(var(--color-primary),.3);border-radius:var(--radius-xs)}.footer-text{color:rgb(var(--color-text-secondary));font-size:var(--text-sm);max-width:280px;line-height:1.6}.footer-bottom{border-top:1px solid var(--glass-border);padding-top:var(--spacing-lg);margin-top:var(--spacing-lg)}.footer-copyright{color:rgb(var(--color-text-secondary));font-size:var(--text-xs);text-align:center;margin:0}@media (max-width:767px){.mobile-menu-panel{padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0);padding-right:env(safe-area-inset-right,0)}.mobile-menu-overlay{-webkit-backdrop-filter:blur(var(--blur-sm))}.mobile-menu-panel{-webkit-backdrop-filter:blur(var(--blur-md))}.modern-footer>div{padding:var(--spacing-xl)var(--spacing-lg)}.footer-grid{gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.modern-footer{-webkit-backdrop-filter:blur(var(--blur-sm))}.footer-links{gap:var(--spacing-md)}.footer-link{padding:var(--spacing-md)var(--spacing-sm)}}@media (min-width:768px) and (max-width:1023px){.footer-grid{gap:var(--spacing-xl)}.modern-footer>div{padding:var(--spacing-2xl)var(--spacing-lg)}}@media (min-width:1280px){.modern-footer>div{padding:var(--spacing-2xl)var(--spacing-xl)}.footer-grid{gap:var(--spacing-2xl)}}.nav-logo{transition:transform var(--transition-fast)var(--ease-out);align-items:center;display:inline-flex}.nav-logo:hover{transform:scale(1.05)}.nav-logo:active{transform:scale(.98)}.nav-logo:focus-visible{outline:2px solid rgb(var(--color-primary));outline-offset:2px;border-radius:var(--radius-sm)}.nav-welcome{color:rgb(var(--color-text-secondary));font-size:var(--text-sm);font-weight:var(--font-medium);padding:var(--spacing-sm)var(--spacing-md)}.nav-welcome-username{color:rgb(var(--color-primary));font-weight:var(--font-semibold)}@media (max-width:767px){.nav-container,.mobile-menu-panel{-webkit-backdrop-filter:blur(var(--blur-md))}.mobile-menu-overlay{-webkit-backdrop-filter:blur(var(--blur-sm))}}@media (max-width:767px) and (orientation:landscape){.mobile-menu-panel{-webkit-overflow-scrolling:touch;max-width:280px;overflow-y:auto}}@media (max-width:374px){.mobile-menu-panel{max-width:calc(100vw - 48px)}}@media (prefers-reduced-motion:reduce){.nav-link,.nav-button,.mobile-menu-button,.mobile-menu-panel,.mobile-menu-overlay,.footer-link,.nav-logo{transition:none!important;animation:none!important}.nav-link:hover,.nav-button:hover,.footer-link:hover,.nav-logo:hover{transform:none}.mobile-menu-panel-enter,.mobile-menu-panel-exit,.mobile-menu-overlay-enter,.mobile-menu-overlay-exit{animation:none!important}}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{background:rgb(var(--color-primary));color:rgb(var(--color-text-inverse));padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-sm);z-index:var(--z-tooltip);transition:top var(--transition-fast)var(--ease-smooth);text-decoration:none;position:absolute;top:-100px;left:0}.skip-link:focus{top:var(--spacing-sm)}.modern-header{z-index:var(--z-sticky);background:var(--glass-background-strong);-webkit-backdrop-filter:blur(var(--glass-blur-strong));border-bottom:1px solid var(--glass-border);box-shadow:var(--shadow-lg);transition:all var(--transition-base)var(--ease-smooth);contain:layout style;will-change:backdrop-filter,box-shadow;position:sticky;top:0;left:0;right:0}.modern-header:before{content:"";background:var(--gradient-background);opacity:.05;pointer-events:none;z-index:-1;position:absolute;inset:0}@supports not ((-webkit-backdrop-filter:blur(16px)) or (backdrop-filter:blur(16px))){.modern-header{background:rgb(var(--color-surface))}}.modern-header nav{padding:var(--spacing-lg)var(--spacing-xl)}@media (max-width:767px){.modern-header nav{padding:var(--spacing-md)var(--spacing-lg)}.modern-header{-webkit-backdrop-filter:blur(var(--blur-md))}}@media (min-width:768px) and (max-width:1023px){.modern-header nav{padding:var(--spacing-lg)var(--spacing-lg)}}
body{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}#main-content{padding-top:0}header{color:#fff;background:#333;padding:10px 0}header nav{justify-content:center;display:flex}header nav a{color:#fff;margin:0 15px;text-decoration:none}header nav a:hover{text-decoration:underline}main{padding:0 20px 20px}