.bottom-nav { display:none; }
@media(max-width:760px) {
 body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
 .bottom-nav { display:grid; }
}
.bottom-nav {
 --nav-inset:max(10px,env(safe-area-inset-right),env(safe-area-inset-left)); --nav-position:0;
 position:fixed; z-index:21; inset:auto 0 0; align-items:center; grid-template-columns:repeat(5,minmax(0,1fr));
 height:calc(68px + env(safe-area-inset-bottom)); padding:4px var(--nav-inset) calc(4px + env(safe-area-inset-bottom));
 background:#06111bf5; border:0; box-shadow:0 -14px 32px #020a12c7;
}
@supports(backdrop-filter:blur(1px)) {
 .bottom-nav { background:#06111bed; backdrop-filter:blur(14px) saturate(1.25); }
}
.bottom-nav .nav-link {
 display:grid; place-items:center; min-width:44px; min-height:48px; padding:8px; margin:0;
 border:0; border-radius:0; background:transparent; color:#f4edda; text-decoration:none; cursor:pointer;
}
.bottom-nav .nav-link .icon { width:28px; height:28px; }
.bottom-nav .nav-link.active,.bottom-nav .nav-link[aria-current=page] { color:var(--accent); background:transparent; filter:none; }
.bottom-nav .nav-link .icon { filter:brightness(0) invert(83%); }
.bottom-nav .nav-link.active .icon,.bottom-nav .nav-link[aria-current=page] .icon { filter:brightness(0) saturate(100%) invert(89%) sepia(37%) saturate(663%) hue-rotate(94deg); }
.bottom-nav .nav-link:hover { color:#9cf8ec; background:transparent; }
.bottom-nav::after {
 content:""; position:absolute; pointer-events:none; left:var(--nav-inset); bottom:calc(5px + env(safe-area-inset-bottom));
 width:calc((100% - 2 * var(--nav-inset)) / 5); height:2px; opacity:0;
 background:linear-gradient(var(--accent),var(--accent)) center / 18px 2px no-repeat;
 transform:translateX(calc(var(--nav-position) * 100%)); transition:transform .22s ease-out,opacity .12s;
}
.bottom-nav:has([aria-current=page])::after { opacity:.75; }
.bottom-nav:has([data-nav=browse][aria-current=page]) { --nav-position:1; }
.bottom-nav:has([data-nav=surprise][aria-current=page]) { --nav-position:2; }
.bottom-nav:has([data-nav=library][aria-current=page]) { --nav-position:3; }
.bottom-nav:has([data-nav=profile][aria-current=page]) { --nav-position:4; }
@media(prefers-reduced-motion:reduce) { .bottom-nav::after { transition:none; } }
.bottom-nav .nav-link:focus-visible { outline:3px solid #9cf8ec; outline-offset:-3px; }
.bottom-nav .random-nav { transform:translateY(-5px); }
.bottom-nav .random-nav:active .wordmark-swords,.bottom-nav .random-nav.is-launching .wordmark-swords { filter:hue-rotate(230deg) saturate(1.8); }
.bottom-nav .random-nav.is-launching .wordmark-swords { animation:random-pulse .35s ease-out; }
@keyframes random-pulse { 50% { transform:scale(1.1); } }
@media(prefers-reduced-motion:reduce) { .bottom-nav .random-nav.is-launching .wordmark-swords { animation:none; } }
.wordmark-swords { display:block; width:52px; height:52px; background:url('/brand/canonical/wordmark.png') -127.469px -71.097px / 408.177px 204.088px no-repeat; image-rendering:pixelated; }
.bottom-nav .random-nav::after { display:none; }
body.playing { padding-bottom:0; }
body.playing .bottom-nav,body.drawer-open .bottom-nav { display:none; }