/* Floating dock: appears once the big header scrolls away, so the menu is always one glance away.
   Desktop: a glass pill at the top with a sliding active marker and a reading-progress edge.
   Phone: the same pill sits at the bottom, within thumb reach. ⌘K / Ctrl+K / "/" opens a jump-to palette. */
.dock{position:fixed;left:50%;top:14px;z-index:60;transform:translate(-50%,-140%);opacity:0;pointer-events:none;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease;
  display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;
  background:color-mix(in srgb,var(--band) 74%,transparent);border:1px solid var(--band-line);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);color:var(--band-ink);max-width:calc(100vw - 24px)}
.dock.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.dock::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--band-accent),var(--band-amber));transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:.9}
.dock-mark{font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:15px;color:var(--band-ink);text-decoration:none;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--band-tint2);flex:0 0 auto}
.dock-mark span{color:var(--band-accent)}
.dock-links{position:relative;display:flex;align-items:center;gap:2px}
.dock-links a{position:relative;z-index:1;padding:8px 13px;border-radius:999px;font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--band-muted);text-decoration:none;white-space:nowrap;transition:color .2s}
.dock-links a:hover{color:var(--band-ink)}
.dock-links a.on{color:var(--band-ink)}
.dock-pill{position:absolute;z-index:0;top:0;height:100%;border-radius:999px;background:var(--band-tint2);box-shadow:inset 0 0 0 1px var(--band-line);
  transition:left .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),opacity .2s;opacity:0}
.dock-pill.on{opacity:1}
.dock-sep{width:1px;height:22px;background:var(--band-line);margin:0 4px}
.dock-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:999px;border:0;cursor:pointer;
  font:500 12px var(--f-mono);color:var(--band-ink);background:var(--band-tint2);transition:background .2s,box-shadow .2s}
.dock-btn:hover{box-shadow:inset 0 0 0 1px var(--band-accent)}
.dock-btn kbd{font:500 11px var(--f-mono);padding:2px 6px;border-radius:5px;border:1px solid var(--band-line);color:var(--band-muted)}
.dock-btn.icon{width:36px;padding:0;justify-content:center}
.dock-btn svg{width:16px;height:16px}
.dock-now{display:none;font:500 12px var(--f-mono);color:var(--band-ink);padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.dock-now i{font-style:normal;color:var(--band-muted)}
@media (max-width:1020px){.dock-links a{padding:8px 9px;font-size:11px}}
/* Phone: the pill is swapped for a native-style bottom tab bar (see .tabs below) */
@media (max-width:860px){.dock{display:none!important}}
@media (prefers-reduced-motion:reduce){.dock,.dock-pill{transition:opacity .2s}}

/* jump-to palette */
.jump{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;
  background:rgba(5,9,16,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.jump.open{display:flex;animation:jfade .18s ease}
@keyframes jfade{from{opacity:0}}
.jump-box{width:min(620px,100%);max-height:72vh;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  background:var(--band);border:1px solid var(--band-line);box-shadow:0 40px 100px -30px rgba(0,0,0,.8);color:var(--band-ink);animation:jpop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes jpop{from{transform:translateY(-8px) scale(.98);opacity:0}}
.jump-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--band-line)}
.jump-in svg{width:18px;height:18px;color:var(--band-muted);flex:0 0 auto}
.jump-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--band-ink);font:500 16px var(--f-body)}
.jump-in input::placeholder{color:var(--band-muted)}
.jump-in kbd{font:500 11px var(--f-mono);padding:2px 6px;border-radius:5px;border:1px solid var(--band-line);color:var(--band-muted)}
.jump-list{overflow-y:auto;padding:8px;list-style:none;margin:0}
.jump-g{font:500 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--band-muted);padding:10px 10px 6px}
.jump-list a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;color:var(--band-ink);text-decoration:none;font-size:15px}
.jump-list a small{margin-left:auto;font:500 11px var(--f-mono);color:var(--band-muted);white-space:nowrap}
.jump-list a .ji{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--band-tint2);color:var(--band-accent);font:600 12px var(--f-mono);flex:0 0 auto}
.jump-list a.sel{background:var(--band-tint2);box-shadow:inset 0 0 0 1px var(--band-accent)}
.jump-empty{padding:24px;text-align:center;color:var(--band-muted);font-size:14px}
.jump-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--band-line);font:500 11px var(--f-mono);color:var(--band-muted)}
.jump-foot kbd{font:inherit;padding:1px 5px;border-radius:4px;border:1px solid var(--band-line);margin-right:4px}
@media (max-width:860px){.jump{align-items:flex-end;padding:16px}.jump-box{max-height:80vh}.jump-foot{display:none}}
.topnav a.topnav-k{border:1px solid var(--band-line);border-radius:6px;padding:1px 7px;letter-spacing:.02em;text-transform:none}
.topnav a.topnav-k:hover{border-color:var(--band-accent)}
@media (max-width:860px){.topnav a.topnav-k{display:none}}
.dock-btn,.dock-btn .lbl{white-space:nowrap}
@media (max-width:860px){.totop{display:none!important}}
@media (max-width:560px){.jump-list a small{display:none}}

/* ---------- phone tab bar ----------
   Solid, full width, thumb height. Hides while you read down the page, comes back the moment you scroll up. */
.tabs{display:none}
@media (max-width:860px){
  .tabs{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:60;
    display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;height:62px;padding:5px;border-radius:20px;
    background:var(--band);border:1px solid var(--band-line);color:var(--band-muted);
    box-shadow:0 14px 34px -10px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.18);
    transform:translateY(0);transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
  .tabs.tuck{transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom,0px)));opacity:0;pointer-events:none}
  .tabs a,.tabs button{-webkit-tap-highlight-color:transparent;appearance:none;background:none;border:0;margin:0;padding:0;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;
    color:inherit;text-decoration:none;font:600 10px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;border-radius:14px}
  .tabs .ti{width:46px;height:28px;border-radius:999px;display:grid;place-items:center;transition:background .25s,color .25s}
  .tabs svg{width:20px;height:20px}
  .tabs .on{color:var(--band-ink)}
  .tabs .on .ti{background:var(--band-tint2);color:var(--band-accent);box-shadow:inset 0 0 0 1px var(--band-line)}
  .tabs a:active .ti,.tabs button:active .ti{transform:scale(.92)}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){.tabs{transition:opacity .2s}.tabs.tuck{transform:none}}