/* Reused from LENGOWeb/LENGOWeb-wug/src/styles/chrome.css. */
.lx-glass { position: relative; isolation: isolate; border-radius: 999px; background: var(--g-tint);
  -webkit-backdrop-filter: blur(var(--g-blur)) var(--g-tone); backdrop-filter: blur(var(--g-blur)) var(--g-tone);
  box-shadow: inset 0 -1px 1px var(--g-depth), var(--g-shadow); transition: background-color .35s, box-shadow .35s; }
.lx-glass.lx-bent { -webkit-backdrop-filter: var(--g-lens) var(--g-tone); backdrop-filter: var(--g-lens) var(--g-tone); }
.lx-glass::before, .lx-lens::before, .lx-nav .lx-right .lx-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, var(--g-rim), var(--g-rim-2) 28%, transparent 50%, var(--g-rim-2) 78%, var(--g-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lx-glass::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(var(--g-sheen), transparent 60%); }
/* The light on the glass (glass.js keeps --x, --y on the pointer and --a at how lit it is): a glint on the rim where the
   light falls, a fainter one diagonally across, and a glow inside. */
.lx-sheen { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; --x: 24%; --y: 0%; --a: 0; }
.lx-sheen::before, .lx-sheen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lx-sheen::before { padding: 1.5px; opacity: calc(.35 + .65 * var(--a));
  background: radial-gradient(72px 44px at var(--x) var(--y), var(--g-spec), transparent), radial-gradient(72px 44px at calc(100% - var(--x)) calc(100% - var(--y)), var(--g-rim-2), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lx-sheen::after { opacity: var(--a); background: radial-gradient(64px circle at var(--x) var(--y), var(--g-glow), transparent); }
/* Pressed, dragged and springing back: glass.js moves the capsule by transform alone, so nothing else may animate it. */
.lx-liquid { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.lx-liquid, .lx-liquid img { -webkit-user-drag: none; }
.lx-nav .lx-btn.lx-liquid { transition: filter .2s var(--ease-out); }
/* SVG filters: the refraction maps (glass.js) and the night grade of scenes (Nav.astro). */
.lx-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.lx-logo { display: inline-flex; flex: none; align-items: center; gap: 9px; font: 700 19px var(--rounded); letter-spacing: .03em; color: var(--ink); text-decoration: none; }
.lx-logo img { width: 30px; height: 30px; border-radius: 8px; }
.lx-nav .lx-logo { grid-column: 1; justify-self: start; height: 44px; padding: 0 15px 0 6px; color: var(--label); }
.lx-nav .lx-logo img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.lx-links, .lx-links-glass { grid-column: 2; grid-row: 1; }
.lx-links-glass { align-self: stretch; margin-block: 9px; }
.lx-links { z-index: 1; display: flex; gap: 2px; align-items: center; height: 44px; padding: 0 4px; }
.lx-links > a, .lx-links > div > button { display: inline-flex; align-items: center; height: 36px; font: 500 15px var(--font); color: var(--label); text-decoration: none; padding: 0 14px; border-radius: 999px; background: none; border: 0; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .35s; }
.lx-links > a:hover, .lx-links > div > button:hover, .lx-links [aria-expanded="true"] { background: var(--g-hover); }
.lx-links a[aria-current="page"], .lx-links .on > button { font-weight: 600; background: var(--g-sel); box-shadow: 0 1px 3px var(--g-sel-shadow); }
/* glass.js: one lens marks the current page and follows the pointer, so the items wear no capsules of their own. */
.lx-nav.lx-lensed .lx-links > :is(a, div > button) { background: none; box-shadow: none; }
.lx-dd > button::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-inline-start: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
/* The lens (glass.js) shares the links' cell. At rest it sits under the labels on the current page; picked up it rises
   above them as a clear drop (--lift 0 → 1) and the label under it grows, as in an iOS tab bar. glass.js moves it in physical
   pixels, so it is laid out left to right in every language: in Arabic its rim, wider than the resting lens, would otherwise
   hang off the page's left edge and let the page scroll sideways. */
.lx-lens { position: absolute; grid-column: 2; grid-row: 1; left: 0; top: 50%; z-index: 0; width: 0; height: 36px; margin-top: -18px; border-radius: 999px; pointer-events: none; opacity: 0; direction: ltr;
  --lift: 0; box-shadow: 0 calc(1px + var(--lift) * 8px) calc(3px + var(--lift) * 20px) var(--g-sel-shadow); }
.lx-lens::before { z-index: 1; padding: calc(1px + var(--lift) * .5px); opacity: calc(.55 + var(--lift) * .45); }
.lx-lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--g-sel); opacity: calc(1 - var(--lift) * .82); }
.lx-lens.is-up { z-index: 2; -webkit-backdrop-filter: saturate(150%) brightness(1.06); backdrop-filter: saturate(150%) brightness(1.06); }
.lx-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.lx-tools { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 3px; }
.lx-icon { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-2); background: none; border: 0; cursor: pointer; transition: background-color .2s, color .35s; }
.lx-icon:hover { background: var(--fill); color: var(--ink); }
.lx-nav .lx-icon { color: var(--label); }
.lx-nav .lx-icon:hover { background: var(--g-hover); color: var(--label); }
.lx-icon svg { width: 19px; height: 19px; }
.lx-nav .lx-burger { width: 44px; height: 44px; }
.lx-burger { display: none; }
/* The download button is the glass's prominent kind: the brand fill, with the same rim and light. */
.lx-nav .lx-right .lx-btn { position: relative; isolation: isolate; height: 44px; padding: 0 20px; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px rgba(203,69,114,.28); }
.lx-nav .lx-right .lx-btn::before { --g-rim: rgba(255,255,255,.7); --g-rim-2: rgba(255,255,255,.16); }
.lx-nav .lx-right .lx-btn .lx-sheen { --g-spec: rgba(255,255,255,.9); --g-glow: rgba(255,255,255,.28); }