#moderaDock{position:fixed;left:50%;transform:translateX(-50%);bottom:max(4px,calc(env(safe-area-inset-bottom,0px) - 9px));z-index:900;display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(30,20,10,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.2) inset}
#moderaDock[hidden]{display:none}
#moderaDock button{min-height:44px;padding:0 18px;border:0;border-radius:999px;font:inherit;font-size:15px;font-weight:800;color:#fff;background:rgba(255,255,255,.14);cursor:pointer;touch-action:manipulation;white-space:nowrap}
#moderaDock button:active{background:rgba(255,255,255,.3);transform:translateY(1px)}
#moderaDock button span{font-size:20px;line-height:1;margin-right:4px;vertical-align:-1px}
/* Override the screen repair stylesheet's 24px !important padding. Reserve the dock and iOS safe area inside the scrollable content. */
html.hasDock body #mainApp>.screen.active:not(#home):not(#tools){padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
html.hasDock body #mainApp>.screen.active:not(#home):not(#tools) :is(button,a,input,select,textarea){scroll-margin-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
/* Phones: the dock steps aside while the keyboard is open (the page keeps the same bottom space, so nothing jumps). */
@media (pointer:coarse){html.mr-typing #moderaDock{display:none!important}}
.hasDock #moderaSocialBack{display:none!important}
html.nativeNav #moderaDock{display:none!important}
html.nativeNav #moderaSocialBack{display:none!important}
@media print{#moderaDock{display:none}}