/* Compact floating dock. Grey brightness is calibrated per source asset;
   preserve clay detail instead of flattening contrast. No icon shadows. */
.phone .nav.clay-nav{position:absolute;left:12px;right:12px;bottom:14px;width:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:16px 4px 8px;margin:0;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none;isolation:isolate;z-index:10;pointer-events:none;--nav-fill:#E3E4E7;--nav-muted:#53545B}
.clay-nav a{position:relative;display:grid;grid-template-rows:40px 18px;row-gap:0;justify-items:center;align-content:start;min-width:0;min-height:58px;padding:0;color:var(--nav-muted);background:transparent;border-radius:12px;font-size:14px;font-weight:800;line-height:18px;text-decoration:none;-webkit-tap-highlight-color:transparent;pointer-events:auto}
.clay-nav a[data-nav-kind=home]{--nav-accent:#00F5FF;--gray-brightness:.96}
.clay-nav a[data-nav-kind=discover]{--nav-accent:var(--exchange-ink);--gray-brightness:1.34}
.clay-nav a[data-nav-kind=missions]{--nav-accent:var(--missions-ink);--gray-brightness:1.71}
.clay-nav a[data-nav-kind=portfolio]{--nav-accent:#983900;--gray-brightness:1.24}
.clay-nav a[data-nav-kind=profile]{--nav-accent:#90FE00;--gray-brightness:.825}
.clay-nav a .nav-art{position:absolute;top:0;left:50%;width:36px;height:36px;margin-left:-18px;transform:none;transform-origin:50% 80%;filter:grayscale(1) brightness(var(--gray-brightness)) contrast(.85);opacity:1;transition:transform 420ms cubic-bezier(.2,.8,.2,1),filter 180ms ease;pointer-events:none}
.clay-nav .nav-art>.clay-icon{width:100%;height:100%}
.clay-nav .clay-icon>img{display:block;width:100%;height:100%;object-fit:contain;filter:none;box-shadow:none;image-rendering:auto}
.clay-nav a[aria-current=page],.clay-nav a.is-selecting{color:var(--nav-accent);background:transparent}
.clay-nav a[aria-current=page] .nav-art,.clay-nav a.is-selecting .nav-art{width:58px;height:58px;margin-left:-29px;transform:translateY(-23px) rotate(-4deg);filter:none}
.clay-nav a.is-leaving .nav-art{width:36px;height:36px;margin-left:-18px;transform:none;filter:grayscale(1) brightness(var(--gray-brightness)) contrast(.85)}
.clay-nav a.is-leaving{color:var(--nav-muted)}
.clay-nav a.is-selecting .nav-art{animation:clay-dock-pop 420ms cubic-bezier(.2,.8,.2,1) both}
.clay-nav .nav-label{grid-row:2;position:relative;z-index:1;align-self:start;white-space:nowrap;padding:0;line-height:18px}
.clay-nav a[aria-current=page] .nav-label:after,.clay-nav a.is-selecting .nav-label:after{content:"";display:block;width:16px;height:3px;border-radius:5px;background:currentColor;position:absolute;bottom:-5px;left:calc(50% - 8px)}
.clay-nav a.is-leaving .nav-label:after{display:none}
.clay-nav a:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
.clay-nav:before{content:"";position:absolute;inset:16px 0 0;background:var(--nav-fill);border-radius:22px;z-index:-1;box-shadow:none;pointer-events:none;transition:background-color 250ms ease}
.phone .clay-nav[data-active=home]{--nav-fill:#0B1220;--nav-muted:#C4C7CF}
.phone .clay-nav[data-active=discover]{--nav-fill:#FFE600}
.phone .clay-nav[data-active=missions]{--nav-fill:#C2FF5A}
.phone .clay-nav[data-active=portfolio]{--nav-fill:#FFF0DD}
.phone .clay-nav[data-active=profile]{--nav-fill:#8400FF;--nav-muted:#ECE4F5}
.phone:has(.clay-nav):after{display:none}
.phone:has(.clay-nav) main{padding-bottom:116px;scroll-padding-bottom:116px}
@keyframes clay-dock-pop{0%{transform:translateY(-3px) rotate(0) scale(.6)}55%{transform:translateY(-28px) rotate(-8deg) scale(1.04)}100%{transform:translateY(-23px) rotate(-4deg) scale(1)}}
@media(max-width:699px){.phone .nav.clay-nav{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:12px;right:12px}}
/* Material options are opt-in previews; the common proportions apply everywhere. */
.phone .clay-nav[data-finish=glass]{--nav-fill:#EEF0F3;--nav-muted:#353840}
.clay-nav[data-finish=glass]:before{border-radius:999px;background:linear-gradient(155deg,#FFFFFFE3,#FFFFFFCC 52%,#E9EEF5CF);border:1px solid #FFFFFFE6;backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 #A6B3C436,0 6px 20px #0B122014}
.clay-nav[data-finish=glass] a[data-nav-kind=home]{--nav-accent:#00526A}
.clay-nav[data-finish=glass] a[data-nav-kind=profile]{--nav-accent:#244900}
.clay-nav[data-finish=glass] a[data-nav-kind=discover]{--nav-accent:#8A0057}
.clay-nav[data-finish=glass] a[data-nav-kind=missions]{--nav-accent:#5700A8}
.clay-nav[data-finish=glass] a[data-nav-kind=portfolio]{--nav-accent:#7A3000}
.clay-nav[data-finish=glass][data-active=none]:before{background:linear-gradient(135deg,#F5F5F5D6,#E5E5E5C7);backdrop-filter:blur(22px) grayscale(1);-webkit-backdrop-filter:blur(22px) grayscale(1)}
.phone .clay-nav[data-finish=clay][data-active=profile]{--nav-fill:#4C0099}
.clay-nav[data-finish=clay]:before{background:linear-gradient(155deg,color-mix(in srgb,var(--nav-fill) 74%,white),var(--nav-fill) 46%,color-mix(in srgb,var(--nav-fill) 92%,black));border-radius:24px;border:1px solid #FFFFFF40;box-shadow:inset 2px 3px 3px #FFFFFF80,inset -2px -4px 4px #0B122026,0 4px 0 color-mix(in srgb,var(--nav-fill) 72%,black)}
.phone .clay-nav[data-finish=light]{--nav-fill:#E7E8EB;--nav-muted:#51545C}
.phone .clay-nav[data-finish=dark]{--nav-fill:#292B30;--nav-muted:#CED0D6}
.clay-nav[data-finish=light]:before{border:1px solid #D4D5DA}
.clay-nav[data-finish=dark]:before{border:1px solid #44464C}
.clay-nav[data-finish=light] a[data-nav-kind=home]{--nav-accent:#006477}
.clay-nav[data-finish=light] a[data-nav-kind=profile]{--nav-accent:#396400}
.clay-nav[data-finish=dark] a[data-nav-kind=home]{--nav-accent:#00F5FF}
.clay-nav[data-finish=dark] a[data-nav-kind=discover]{--nav-accent:#FF75CE}
.clay-nav[data-finish=dark] a[data-nav-kind=missions]{--nav-accent:#CFAAFF}
.clay-nav[data-finish=dark] a[data-nav-kind=portfolio]{--nav-accent:#FFB56C}
.clay-nav[data-finish=dark] a[data-nav-kind=profile]{--nav-accent:#90FE00}
@media(prefers-reduced-motion:reduce){.clay-nav a .nav-art{transition:none!important;animation:none!important}.clay-nav:before{transition:none}}