/* Shared by the React pages and the imported UX Laws pages. */
.bottom-nav{position:fixed;z-index:80;left:50%;transform:translateX(-50%);bottom:max(20px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(650px,calc(100% - 32px));padding:6px;gap:3px;border-radius:999px;background:linear-gradient(145deg,#fffaf39c,#fff5e75c);border:1px solid #ffffffc7;box-shadow:inset 0 1px 1px #ffffffeb,inset 0 -1px 1px #ffffff4a,0 8px 32px #4b210d20;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);font-family:'General Sans Variable',Arial,sans-serif}
.bottom-nav a,.bottom-nav a[aria-current=page]{box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:0;height:46px;padding:0 8px;border:1px solid transparent;border-radius:999px;font-size:14px;font-weight:500;line-height:1.2;text-align:center;text-decoration:none;color:#583825;text-shadow:0 1px 4px #ffffff80}
.bottom-nav a:hover{background:#ffffff45}
.bottom-nav a[aria-current=page]{background:linear-gradient(135deg,#c65013 0%,#b73b0a 55%,#963008 100%);border-color:#ffe2c99c;box-shadow:inset 0 1px 1px #ffffff8f,0 3px 12px #84300830;color:#fffaf6;text-shadow:0 1px 3px #8f400742}
.bottom-nav a:focus-visible{outline:3px solid #f28a4d;outline-offset:3px}
@media(max-width:600px){.bottom-nav{bottom:max(12px,env(safe-area-inset-bottom));padding:5px;gap:1px}.bottom-nav a,.bottom-nav a[aria-current=page]{height:44px;padding:0 3px;font-size:12px}}
@media(max-width:360px){.bottom-nav{width:calc(100% - 20px)}.bottom-nav a,.bottom-nav a[aria-current=page]{font-size:11px}}
@supports not (backdrop-filter:blur(1px)){.bottom-nav{background:#fff3e8f5}}