.harpnav{z-index:40;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));filter:drop-shadow(0 12px 18px #2e1a0c52)drop-shadow(0 2px 3px #2e1a0c59);grid-template-columns:repeat(5,minmax(0,1fr));height:74px;padding:0 12px;display:grid;position:fixed}@media (min-width:768px){.harpnav{display:none}}.hn-layer{pointer-events:none;position:absolute;left:0;right:0}.hn-top{background:repeating-linear-gradient(90deg,#ffffff17 0 1px,#00000008 1px 3px),linear-gradient(#fdfdfc 0%,#d9dcdf 32%,#b4b8bd 60%,#e7e9eb 80%,#a3a7ad 100%);border-radius:20px 20px 3px 3px/18px 18px 3px 3px;height:27px;top:0;box-shadow:inset 0 1px #ffffffe6,inset 0 -1px #00000038}.hn-top:before,.hn-top:after{content:"";background:radial-gradient(circle at 35% 35%,#fff,#8c9096 70%);border-radius:50%;width:6px;height:6px;margin-top:-3px;position:absolute;top:50%;box-shadow:0 1px 1px #00000059}.hn-top:before{left:7px}.hn-top:after{right:7px}.hn-comb{background:linear-gradient(#e2bd86 0%,#c9995c 55%,#a97a42 100%);height:37px;top:27px}.hn-bot{background:linear-gradient(#8f939a 0%,#eef0f1 40%,#a4a8ae 100%);border-radius:3px 3px 14px 14px/3px 3px 10px 10px;height:10px;bottom:0}.hn-tab{color:inherit;-webkit-tap-highlight-color:transparent;grid-template-rows:27px 37px 10px;justify-items:center;text-decoration:none;display:grid;position:relative}.hn-tab:focus-visible{outline:2px solid var(--ocean);outline-offset:-2px;border-radius:8px}.hn-label{font:700 11px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:#2c2e33b8;text-shadow:0 1px #ffffffbf;white-space:nowrap;align-self:center;transition:color .3s}.hn-slot{background:#140e0a;border-radius:5px;align-self:center;place-items:center;width:min(46px,86%);height:27px;transition:background .35s,box-shadow .35s,transform .15s;display:grid;position:relative;box-shadow:inset 0 4px 5px #000000d9,0 1px #fff0d24d}.hn-slot svg{fill:none;stroke:#f4e6cdd1;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:19px;height:19px;transition:stroke .3s,opacity .3s}.hn-tab:active .hn-slot{transform:scale(.93)}.hn-tab[aria-current=page] .hn-label{color:var(--dirt)}.hn-tab[aria-current=page] .hn-slot{background:radial-gradient(circle at 50% 42%, #ffe2b4 0%, #f4a066 calc(30% + 20% * var(--breath,.35)), #8c4632 100%);box-shadow:0 0 calc(6px + 16px * var(--breath,.35)) calc(1px + 3px * var(--breath,.35)) rgb(240 150 90/calc(.35 + .45 * var(--breath,.35))), inset 0 1px 2px #ffffff80}.hn-tab[aria-current=page] .hn-slot svg{stroke:#3a1a0c}.hn-rec{opacity:0;background:radial-gradient(circle,#e9dcc4 0 2.5px,#1a1414 3px 4px,#0000 4.5px),repeating-radial-gradient(circle,#0b0a0a 0 1px,#1c1818 1px 2px);border-radius:50%;width:19px;height:19px;transition:opacity .3s,transform .3s;animation:1.8s linear infinite hn-spin;position:absolute;transform:scale(.6);box-shadow:0 0 0 1px #f4e6cd99}.harpnav.playing .hn-tab[data-tab=music] .hn-rec{opacity:1;transform:none}.harpnav.playing .hn-tab[data-tab=music] .hn-slot svg{opacity:0}@keyframes hn-spin{to{transform:rotate(360deg)}}@media (max-width:380px){.hn-label{letter-spacing:.01em}.harpnav{padding:0 14px}}@media (prefers-reduced-motion:reduce){.hn-rec{animation-duration:6s}}