.chrome-navigation { position: fixed; z-index: 5; left: 50%; top: 52%; transform: translate(-50%,-50%); display: flex; gap: clamp(28px,9vw,140px); width: min(760px,94vw); justify-content: center; }
.chrome-button { border: 0; background: transparent; color: #e9edf2; padding: 16px 0; width: min(280px,40vw); cursor: pointer; font: 14px/1.5 system-ui,sans-serif; letter-spacing: .32em; text-align: center; transition: filter .35s, transform .35s; }
.chrome-art { display: block; width: 100%; aspect-ratio: 1.65; background-image: url('navigation-chrome.png'); background-size: 200% auto; background-position: left 40%; background-repeat: no-repeat; margin-bottom: 26px; mix-blend-mode: screen; animation: chrome-float 6s ease-in-out infinite, chrome-shimmer 9s ease-in-out infinite; }
.socials-art { background-position: right 40%; animation-delay: -3s,-4s; }
.chrome-button:hover { filter: brightness(1.25); transform: scale(1.045); }
.chrome-button:active { transform: scale(.97); }
.chrome-button:focus-visible { outline: 1px solid #dbe5f4; outline-offset: 8px; border-radius: 12px; }
@keyframes chrome-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes chrome-shimmer { 0%,35%,75%,100% { filter: brightness(.92); } 55% { filter: brightness(1.2); } }
body.entering .chrome-navigation, body.entered .chrome-navigation, body.returning .chrome-navigation { visibility: hidden; }
.destination-dialog { width: min(440px,90vw); max-height: 85svh; overflow: auto; border: 1px solid #555b66; border-radius: 16px; background: #08090cf5; color: #e9edf2; padding: 36px 28px 28px; box-shadow: 0 0 50px #b2c4e21a; }
.destination-dialog::backdrop { background: #000b; backdrop-filter: blur(8px); }
.destination-dialog h2 { margin: 0 0 24px; font: 20px system-ui,sans-serif; letter-spacing: .2em; }
.dialog-close { position: absolute; right: 10px; top: 6px; background: transparent; border: 0; color: #d9e1eb; font: 30px system-ui; cursor: pointer; width: 44px; height: 44px; }
.destination-links { display: grid; gap: 10px; }
.destination-links a, .destination-links button { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 18px 14px; border: 1px solid #343942; border-radius: 8px; background: #ffffff05; color: #edf0f6; text-decoration: none; cursor: pointer; text-align: left; font: 16px system-ui,sans-serif; }
.destination-links span { color: #aeb8c7; font-size: 14px; }
.destination-links a:hover, .destination-links button:hover { background: #ffffff12; border-color: #9ca8b9; }
.destination-dialog :focus-visible { outline: 2px solid #dbe5f4; outline-offset: 3px; }
@media(max-width:600px) { .chrome-navigation { top: 54%; gap: 20px; } .chrome-art { margin-bottom: 22px; } .chrome-button { font-size: 14px; letter-spacing: .2em; } }
@media(max-height:450px) { .chrome-navigation { top: 64%; } .chrome-button { width: 170px; padding: 0; } .chrome-art { margin-bottom: 8px; } }
@media(prefers-reduced-motion:reduce) { .chrome-art { animation: none; } .chrome-button { transition: none; } }


.chrome-button { display: block; text-decoration: none; } .socials-art { clip-path: inset(0 0 0 8%); }