/* The floating pill and the language switch, shared by every page. Edit it here, nowhere else. */
/* ---------- floating pill nav ---------- */
.hud{
  position:fixed; top:14px; left:0; right:0; z-index:90;
  display:flex; justify-content:center; padding:0 var(--pad); pointer-events:none;
}
/* "liquid glass" like the iPhone dock: a see-through tint, a strong blur that also boosts the
   colours of whatever scrolls underneath, a bright specular rim on top and a soft inner glow */
.pill{
  position:relative; isolation:isolate;
  pointer-events:auto; display:flex; align-items:center; gap:clamp(14px, 2.4vw, 34px);
  padding:7px 7px 7px 22px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--text) 20%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, var(--text) 15%, transparent), color-mix(in srgb, var(--text) 4%, transparent));
  -webkit-backdrop-filter:blur(22px) saturate(1.9) brightness(1.1);
  backdrop-filter:blur(22px) saturate(1.9) brightness(1.1);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 38%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--ink) 35%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--text) 6%, transparent),
    0 14px 40px var(--shade);
}
.pill::before{            /* soft highlight that catches the light at the upper left */
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(120% 150% at 18% -40%, color-mix(in srgb, var(--text) 24%, transparent), transparent 58%);
}
.pill .logo{ font-weight:800; font-size:20px; letter-spacing:-.02em; }
.pill .logo b{ color:var(--accent); font-weight:800; }
.pill .pl{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb, var(--text) 74%, transparent); transition:color .25s ease; }
.pill .pl:hover, .pill .pl.is-here{ color:var(--text); }
.pill .mark{              /* small light bar above the pill that follows the current section */
  position:absolute; left:0; top:-9px; width:22px; height:3px; border-radius:3px; pointer-events:none;
  background:var(--text); opacity:0; box-shadow:0 0 10px color-mix(in srgb, var(--text) 55%, transparent);
}
.pill .mark.ready{ transition:transform .5s var(--ease), opacity .3s ease; }
.pill a.k{
  background:var(--text); color:var(--ink); padding:11px 20px; border-radius:999px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; transition:background .25s ease;
}
.pill a.k:hover{ background:var(--accent); }
.lang{ display:flex; gap:2px; padding:3px; border-radius:999px; background:color-mix(in srgb, var(--text) 9%, transparent); }
.lang button{
  display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%;
  background:none; cursor:pointer; transition:background .25s ease;
}
.lang svg{
  width:20px; height:20px; border-radius:50%; display:block;
  opacity:.45; filter:saturate(.55); transition:opacity .25s ease, filter .25s ease, transform .25s var(--ease);
}
.lang button:hover svg{ opacity:.85; filter:none; }
.lang button[aria-pressed="true"]{ background:color-mix(in srgb, var(--text) 20%, transparent); }
.lang button[aria-pressed="true"] svg{ opacity:1; filter:none; }
.lang button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }