/* Local AI Slides: localai.com's cookie banner, for every page (React pages and the static HTML
   talks). Literal colours, because the HTML talks don't share the site's tokens:
   ink #05070a, graphite #0e1116, paper 246,244,238, amber #e8842a / 232,132,42. */

/* ---- Cookie banner (lai-localai-home components/CookieConsent.module.css) ---- */

.lai-consent {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 2147482000;
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  padding: 22px 22px 20px;
  background: #0e1116;
  border: 1px solid rgba(232, 132, 42, 0.22);
  box-shadow: 0 24px 60px -26px rgba(5, 7, 10, 0.92), 0 0 0 1px rgba(246, 244, 238, 0.03);
  color: #f6f4ee;
  font-family: var(--font-sans, Inter), Inter, system-ui, sans-serif;
  text-align: left;
  animation: lai-consent-in 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}
@keyframes lai-consent-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.lai-consent.is-instant { animation: none; opacity: 1; transform: none; }
.lai-consent__eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  font-family: var(--font-mono, "IBM Plex Mono"), "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 132, 42, 0.88);
}
.lai-consent__prompt { margin-right: 6px; color: rgba(232, 132, 42, 0.7); }
.lai-consent__title {
  margin: 0 0 8px;
  font-family: var(--font-display, "Space Grotesk"), "Space Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #f6f4ee;
}
.lai-consent__body { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: rgba(246, 244, 238, 0.82); }
.lai-consent__link {
  color: #f6f4ee;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(232, 132, 42, 0.55);
  border: 0;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
.lai-consent__link:hover, .lai-consent__link:focus-visible { color: #e8842a; text-decoration-color: #e8842a; }
.lai-consent__link:focus-visible { outline: 2px solid #e8842a; outline-offset: 2px; border-radius: 2px; }
.lai-consent__actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
.lai-consent__reject, .lai-consent__accept {
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--font-mono, "IBM Plex Mono"), "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
}
.lai-consent__reject {
  flex: 0 0 auto;
  padding: 0 18px;
  border: 1px solid rgba(246, 244, 238, 0.24);
  background: transparent;
  color: rgba(246, 244, 238, 0.82);
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}
.lai-consent__reject:hover { border-color: rgba(246, 244, 238, 0.5); background: rgba(246, 244, 238, 0.04); color: #f6f4ee; }
.lai-consent__accept {
  flex: 1 1 auto;
  padding: 0 22px;
  background: #e8842a;
  color: #05070a;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), filter 200ms ease, box-shadow 300ms ease;
}
.lai-consent__accept:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 32px -16px rgba(232, 132, 42, 0.6); }
.lai-consent__reject:focus-visible { outline: 2px solid #e8842a; outline-offset: 3px; }
.lai-consent__accept:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

@media (max-width: 768px) {
  .lai-consent {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 20px clamp(16px, 5vw, 22px) calc(18px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0 0;
    border-top-color: rgba(232, 132, 42, 0.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lai-consent { animation: none; }
  .lai-consent__accept, .lai-consent__reject { transition: none; }
  .lai-consent__accept:hover { transform: none; }
}

/* ---- Navigation: localai.com's top bar and lo-ai: nav palette (lai-localai-home 24beaba,
   components/SiteNav.module.css), ported with laiNav- class names and literal colours; the
   section wipe, login link and performance-mode row are left out. This site always uses the
   solid sub-page bar, sticky rather than fixed so pages need no offset. ---- */

.laiNav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 44;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Slightly more vertical padding so the bar keeps its height even though the
     goto chip shrank — the bar reads a touch taller, not smaller. */
  padding: 16px 26px;
  font-family: var(--font-mono, "IBM Plex Mono"), "IBM Plex Mono", monospace;
  color: rgba(246, 244, 238, 0.72);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 320ms ease,
    border-color 320ms ease,
    padding-top 320ms ease;
  pointer-events: none;
}

.laiNav-bar > * {
  pointer-events: auto;
}

.laiNav-barPage {
  /* Same swap as .laiNav-barSolid: solid fill instead of `backdrop-filter: blur()`.
     Sub-pages keep this bar permanently fixed over scrolling content, so the
     live blur was the costliest of the two. Pushed to 0.96 so the dark graphite
     reads cleanly over BOTH the dark /about console AND the light PAPER /blog
     canvas without the blur. */
  background: rgba(5, 7, 10, 0.96);
  border-bottom-color: rgba(246, 244, 238, 0.08);
}

.laiNav-barPage .laiNav-wordmark {
  opacity: 0.92;
  transform: none;
  pointer-events: auto;
}

@media (min-width: 769px) {
  .laiNav-bar {
    /* Over the hero, center the chip on the hero BRAND's centerline (not its top)
       so the logo + "nav" chip read as on the SAME level. The brand sits at
       --brand-top and is --brand-logo-h (68px) tall → its center is --brand-top +
       34. The chip is 36px tall (taller than the 30px nav wordmark, so it sets
       the flex line height) and centers at padding-top + 18, so
       padding-top = --brand-top + 16 puts the chip center exactly on the brand
       center. (16 = (68 − 36) / 2 — re-derive if the chip height changes.) */
    padding: calc(clamp(30px, calc(3vw + 6px), 48px) + 16px) clamp(30px, calc(3vw + 6px), 48px) 14px;
    transition:
      background-color 320ms ease,
      border-color 320ms ease,
      padding-top 320ms ease;
  }
  .laiNav-bar.laiNav-barPage {
    padding-top: 13px;
    padding-bottom: 13px;
  }
}

.laiNav-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.92;
  transition:
    opacity 280ms ease,
    transform 280ms ease;
}

.laiNav-wordmarkImg {
  display: block;
  height: 30px;
  width: auto;
}

.laiNav-wordmark:hover,
.laiNav-wordmark:focus-visible {
  opacity: 1;
  outline: none;
}

.laiNav-barRight {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.laiNav-paletteHint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Taller + roomier than the old 28px pill so it carries enough weight to sit
     beside the brand lockup without reading as flimsy. Centering tracks this
     height — see the `.laiNav-bar` padding-top in the breakpoint blocks (chip ≥ nav
     wordmark height, so the bar line height == this chip height on desktop). */
  height: 36px;
  padding: 0 15px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* The site's primary navigation entry — given the same CUT-CORNER bracket
     language as the hero buttons (top-right + bottom-left clipped), scaled down,
     so it matches the terminal aesthetic instead of being the lone rounded pill.
     The 1px amber frame is an INSET shadow (a plain border + clip-path loses its
     line on the cut diagonals; an inset shadow is clipped to the cut shape, so
     the frame hugs every edge). The soft outer glow is a `filter: drop-shadow`
     (an OUTER box-shadow would be clipped away by clip-path; drop-shadow follows
     the clipped silhouette) and still breathes via the pulse. */
  color: #e8842a;
  background: rgba(232, 132, 42, 0.1);
  border: none;
  border-radius: 0;
  clip-path: polygon(
    0 0,
    calc(100% - 9px) 0,
    100% 9px,
    100% 100%,
    9px 100%,
    0 calc(100% - 9px)
  );
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - 9px) 0,
    100% 9px,
    100% 100%,
    9px 100%,
    0 calc(100% - 9px)
  );
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(232, 132, 42, 0.6);
  /* Static base glow on the chip itself. The PULSING glow lives on ::before so
     we never animate `filter` — animating filter forever pins a CPU core on
     Windows even while the page is idle. */
  filter: drop-shadow(0 0 5px rgba(232, 132, 42, 0.26));
  transition:
    color 200ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease,
    filter 200ms ease;
}

.laiNav-paletteHint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: inherit;
  -webkit-clip-path: inherit;
  background: rgba(232, 132, 42, 0.1);
  filter: drop-shadow(0 0 10px rgba(232, 132, 42, 0.5));
  opacity: 0.44;
  pointer-events: none;
  animation: laiNav-navHintPulse 3000ms cubic-bezier(0.45, 0, 0.55, 1) 1400ms infinite;
}

@keyframes laiNav-navHintPulse {
  0%,
  100% {
    opacity: 0.44;
  }
  50% {
    opacity: 1;
  }
}

.laiNav-paletteHint:hover,
.laiNav-paletteHint:focus-visible {
  color: #e8842a;
  background: rgba(232, 132, 42, 0.16);
  box-shadow: inset 0 0 0 1px rgba(232, 132, 42, 0.9);
  filter: drop-shadow(0 0 11px rgba(232, 132, 42, 0.55));
  outline: none;
}

.laiNav-paletteHint:hover::before,
.laiNav-paletteHint:focus-visible::before {
  animation: none;
  opacity: 1;
}

.laiNav-paletteHintPrompt {
  color: #e8842a;
  font-weight: 700;
  opacity: 0.8;
}

.laiNav-paletteHintLabel {
  color: #e8842a;
}

.laiNav-paletteHint:hover .laiNav-paletteHintLabel,
.laiNav-paletteHint:focus-visible .laiNav-paletteHintLabel {
  color: #e8842a;
}

.laiNav-paletteHintKbd {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px 5px;
  font-family: inherit;
  font-size: 0.7rem;
  color: rgba(246, 244, 238, 0.58);
  background: rgba(5, 7, 10, 0.45);
  border: 1px solid rgba(246, 244, 238, 0.12);
  border-radius: 4px;
}

.laiNav-paletteBackdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14vh 20px 20px;
  background: rgba(5, 7, 10, 0.78);
  backdrop-filter: blur(3px);
  animation: laiNav-navFade 160ms ease both;
}

.laiNav-palette {
  width: min(540px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono, "IBM Plex Mono"), "IBM Plex Mono", monospace;
  color: #f6f4ee;
  background: rgba(14, 17, 22, 0.98);
  border: 1px solid rgba(246, 244, 238, 0.14);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 28px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: laiNav-navRise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.laiNav-paletteChrome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  background: rgba(5, 7, 10, 0.55);
  border-bottom: 1px solid rgba(246, 244, 238, 0.1);
}

.laiNav-paletteChromeDots {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.laiNav-paletteChromeDots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(246, 244, 238, 0.22);
  background: rgba(246, 244, 238, 0.08);
}

.laiNav-paletteChromeDots span:nth-child(3) {
  border-color: rgba(232, 132, 42, 0.55);
  background: rgba(232, 132, 42, 0.28);
}

.laiNav-paletteChromeTitle {
  justify-self: center;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(246, 244, 238, 0.5);
}

.laiNav-paletteChromeClose {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  padding: 0;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1;
  color: rgba(246, 244, 238, 0.55);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.laiNav-paletteChromeClose:hover,
.laiNav-paletteChromeClose:focus-visible {
  color: #e8842a;
  background: rgba(232, 132, 42, 0.12);
  border-color: rgba(232, 132, 42, 0.5);
  outline: none;
}

.laiNav-palettePrompt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(246, 244, 238, 0.1);
  font-size: 0.94rem;
}

.laiNav-palettePromptUser {
  color: #e8842a;
  font-weight: 600;
  white-space: nowrap;
}

.laiNav-palettePromptVerb {
  color: rgba(246, 244, 238, 0.55);
}

.laiNav-paletteInput {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.94rem;
  color: #f6f4ee;
  background: transparent;
  border: none;
  outline: none;
  caret-color: transparent;
}

.laiNav-paletteInput::placeholder {
  color: rgba(246, 244, 238, 0.32);
}

.laiNav-paletteCaret {
  width: 8px;
  height: 1.05em;
  margin-left: -4px;
  background: #e8842a;
  animation: laiNav-navBlink 1.05s steps(1) infinite;
}

.laiNav-paletteList {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.laiNav-paletteGroup {
  display: flex;
  flex-direction: column;
}

.laiNav-paletteGroup + .laiNav-paletteGroup {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(246, 244, 238, 0.08);
}

.laiNav-paletteGroupHeader {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 9px 12px 6px;
}

.laiNav-paletteGroupTag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(232, 132, 42, 0.85);
}

.laiNav-paletteGroupHint {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: rgba(246, 244, 238, 0.36);
}

.laiNav-paletteRows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.laiNav-paletteRow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  color: rgba(246, 244, 238, 0.7);
  background: transparent;
  border: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid rgba(246, 244, 238, 0.05);
  border-radius: 0;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}

.laiNav-paletteRows li:last-child .laiNav-paletteRow {
  border-bottom-color: transparent;
}

.laiNav-paletteRowHot {
  color: #f6f4ee;
  background: rgba(232, 132, 42, 0.1);
  border-top-color: rgba(232, 132, 42, 0.28);
  border-bottom-color: rgba(232, 132, 42, 0.28);
}

.laiNav-paletteRowPointer {
  width: 0.9em;
  color: #e8842a;
  text-align: center;
}

.laiNav-paletteRowLabel {
  flex: 1;
  letter-spacing: 0.01em;
}

.laiNav-paletteRowEnter {
  width: 1em;
  color: #e8842a;
  text-align: right;
}

.laiNav-paletteRowPage {
  align-items: flex-start;
  padding-top: 11px;
  padding-bottom: 11px;
}

.laiNav-paletteRowIcon {
  width: 1.1em;
  margin-top: 1px;
  color: rgba(107, 114, 128, 0.85);
  text-align: center;
}

.laiNav-paletteRowHot .laiNav-paletteRowIcon {
  color: #e8842a;
}

.laiNav-paletteRowMain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.laiNav-paletteRowDesc {
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: rgba(246, 244, 238, 0.46);
}

.laiNav-paletteRowHot .laiNav-paletteRowDesc {
  color: rgba(246, 244, 238, 0.66);
}

.laiNav-paletteRowRoute {
  align-self: center;
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: rgba(246, 244, 238, 0.42);
  background: rgba(5, 7, 10, 0.45);
  border: 1px solid rgba(246, 244, 238, 0.1);
  border-radius: 3px;
}

.laiNav-paletteRowHot .laiNav-paletteRowRoute {
  color: #e8842a;
  border-color: rgba(232, 132, 42, 0.4);
  background: rgba(232, 132, 42, 0.08);
}

.laiNav-paletteEmpty {
  margin: 0;
  padding: 16px 12px;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: rgba(107, 114, 128, 0.85);
}

.laiNav-paletteEmptyPrompt {
  color: rgba(246, 244, 238, 0.34);
  font-weight: 600;
}

.laiNav-paletteEmptyText {
  color: rgba(107, 114, 128, 0.95);
}

.laiNav-paletteFooter {
  display: flex;
  gap: 18px;
  padding: 11px 16px;
  background: rgba(5, 7, 10, 0.35);
  border-top: 1px solid rgba(246, 244, 238, 0.1);
  font-size: 0.72rem;
  color: rgba(246, 244, 238, 0.44);
}

.laiNav-paletteFooter span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.laiNav-paletteFooter kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  padding: 1px 4px;
  font-family: inherit;
  font-size: 0.7rem;
  color: rgba(246, 244, 238, 0.66);
  background: rgba(5, 7, 10, 0.55);
  border: 1px solid rgba(246, 244, 238, 0.14);
  border-radius: 3px;
}

@keyframes laiNav-navFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes laiNav-navRise {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes laiNav-navBlink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  /* Over the hero: inset enough to sit INSIDE the hero console frame,
  AND center
     the chip on the BRAND's centerline so the logo + chip read level. The mobile
     brand sits at --brand-top (30) and is 56px tall → center at 58; the chip line
     is 44px and centers at padding-top + 22,
  so padding-top = --brand-top + 6
     lands the chip center on 58. (6 = (56 − 44) / 2.) */
  .laiNav-bar {
    padding: calc(clamp(30px, calc(3vw + 6px), 48px) + 6px) 24px 11px;
  }
  /* Condense to a compact bar once scrolled / on sub-pages (no frame to clear),
  .laiNav-bar.laiNav-barPage {
    padding-top: 11px;
    padding-bottom: 11px;
  }
  /* The wordmark is the primary "home" affordance on sub-pages — give its link a
     ≥44px touch target on phones (the 30px logo stays centered inside it). */
  .laiNav-wordmark {
    min-height: 44px;
  }
  /* Login stays VISIBLE on phones (it is the only in-bar path to sign-in — the
     NAV chip collapses to a hamburger and the palette carries no external link) {
    height: 40px;
    padding: 0 13px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }
  /* On phones the labeled "› nav ⌘K" chip is dropped in favour of a HAMBURGER:
     a compact cut-corner amber square (the same bracket frame + breathing glow as
     the desktop chip) with three amber ticks. No ⌘K (no keyboard) and no word —
     the icon reads as "menu" and leaves more room beside the brand. Opens the
     same command palette on tap. */
  .laiNav-paletteHintPrompt,
  .laiNav-paletteHintLabel,
  .laiNav-paletteHintKbd {
    display: none;
  }
  .laiNav-paletteHint {
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
    /* Three centered horizontal ticks (the hamburger), drawn as background bars so
       no extra markup is needed; they sit clear of the 9px corner cuts. */
    background-image:
      linear-gradient(#e8842a, #e8842a),
      linear-gradient(#e8842a, #e8842a),
      linear-gradient(#e8842a, #e8842a);
    background-repeat: no-repeat;
    background-size: 18px 2px;
    background-position:
      center calc(50% - 6px),
      center 50%,
      center calc(50% + 6px);
  }
  .laiNav-paletteBackdrop {
    padding: 0;
    background: rgba(5, 7, 10, 0.94);
    backdrop-filter: none;
  }
  .laiNav-palette {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border: none;
    border-radius: 0;
  }
  /* Taller title bar + a full-size ✕ so the only exit from the full-screen
     mobile palette is an unmissable,
  comfortable tap target. */
  .laiNav-paletteChrome {
    height: 52px;
    padding: 0 10px 0 16px;
  }
  .laiNav-paletteChromeClose {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
    color: rgba(246, 244, 238, 0.72);
  }
  .laiNav-palettePrompt {
    padding: 18px 16px;
  }
  .laiNav-paletteRow {
    padding: 15px 14px;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .laiNav-bar,
  .laiNav-wordmark,
  .laiNav-paletteHint {
    transition-duration: 120ms;
  }
  /* No breathing pulse under reduced motion — the static amber chip is already
     clearly visible. The pulse now lives on the ::before glow layer,
  so hold it
     at a calm steady opacity rather than letting it animate. */
  .laiNav-paletteHint::before {
    animation: none;
    opacity: 0.7;
  }
  .laiNav-paletteBackdrop,
  .laiNav-palette {
    animation: none;
  }
  .laiNav-paletteCaret {
    animation: none;
    opacity: 1;
  }
}

/* slides.localai.com: sticky, so the page flows under nothing. Talk pages show only the button. */
.laiNav-bar { position: sticky; }
.laiNav-paletteRow { text-decoration: none; }
/* Contrast: localai.com's secondary palette text (hints, descriptions, routes, footer) is below
   WCAG AA on graphite; lifted just enough to pass. (localai.com has the same shortfall.) */
.laiNav-paletteGroupHint,
.laiNav-paletteRowDesc,
.laiNav-paletteRowRoute,
.laiNav-paletteFooter span { color: rgba(246, 244, 238, 0.58); }
/* Talk pages: their header is light, but localai.com's chip always sits on its dark bar. */
.top .laiNav-paletteHint { background-color: #05070a; }
.top .laiNav-paletteHint:hover, .top .laiNav-paletteHint:focus-visible { background-color: #1a120a; }