html{scroll-behavior:smooth}.quick-nav{position:fixed;z-index:20;right:24px;top:50%;transform:translateY(-50%);width:124px;padding:12px 8px;border:1px solid #ffffffdf;border-radius:20px;background:#ffffffd9;backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 8px 32px #1f365514,inset 0 1px 0 #fff;display:flex;flex-direction:column;gap:5px}.quick-nav-title{font-size:11px;color:#8a97aa;letter-spacing:1px;padding:4px 10px 8px}.quick-nav a{display:flex;align-items:center;gap:9px;border-radius:12px;padding:11px 10px;text-decoration:none;color:#65748b;font-size:12px;white-space:nowrap;transition:background .2s,color .2s,transform .2s}.quick-nav svg{width:20px;height:20px;flex-shrink:0}.nav-short{display:none}.quick-nav a:hover{color:#2955c7;background:#edf2fc}.quick-nav a[aria-current]{color:#2854d1;background:#e9efff;box-shadow:inset 0 1px 0 #fff;font-weight:600}.quick-nav a:active{transform:scale(.95)}#now,#convert,#timezone,#formats,#arithmetic,#difference{scroll-margin-top:24px;outline:none}#toast{z-index:30}
/* Mobile browser tap overlays are rectangular; use our rounded active state instead. */
.quick-nav,.quick-nav a,.quick-nav a *{-webkit-tap-highlight-color:transparent}.quick-nav a{user-select:none;-webkit-user-select:none;touch-action:manipulation}.quick-nav a:focus:not(:focus-visible){outline:none}.quick-nav a:focus-visible{outline:3px solid #91afff;outline-offset:2px}
/* Reserve the navigation gutter symmetrically so the content center never shifts. */
@media(min-width:901px){main{width:calc(100% - 320px);margin-inline:auto}}
@media(max-width:900px){body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}.quick-nav{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 24px);max-width:550px;padding:6px;flex-direction:row;gap:2px;border-radius:26px;background:#ffffffbf;box-shadow:0 9px 32px #20385820,inset 0 1px 1px #fff}.quick-nav-title,.nav-label{display:none}.nav-short{display:block;font-size:10px;line-height:1.4}.quick-nav a{flex:1;min-width:0;flex-direction:column;gap:5px;padding:9px 0 7px;border-radius:20px;font-size:10px}.quick-nav svg{width:21px;height:21px}.quick-nav a[aria-current]{background:#dce7ffab;box-shadow:inset 0 1px 1px #fff9}.quick-nav a:hover{background:#e5edff99}#toast{bottom:calc(100px + env(safe-area-inset-bottom,0px))}.modal-open .quick-nav{visibility:hidden}}
@media(hover:none){.quick-nav a:hover:not([aria-current]){color:#65748b;background:transparent}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.quick-nav a{transition:none}}