/* The page frame: skip link, header, notice, main, footer. Local classes built only from --xlx-* tokens;
   the synced design-system files are never edited. Light and dark both resolve through the tokens. */

.frame-skip-link {
  position: absolute;
  left: -9999px;
}

.frame-skip-link:focus {
  left: var(--xlx-space-4);
  top: var(--xlx-space-4);
  z-index: 100;
}

/* ---------- Header ---------- */
/* The brand is the one place text truncates, so a long brand never pushes the navigation off screen. */
.frame-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  font-size: var(--xlx-text-lg);
  font-weight: 700;
  color: var(--xlx-fg);
  text-decoration: none;
}

.xlx a.frame-brand,
.xlx a.frame-brand:hover {
  color: var(--xlx-fg);
}

.frame-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-nav {
  display: flex;
  align-items: center;
  gap: var(--xlx-space-5);
}

.frame-menu-toggle {
  display: none;
}

/* Below 860px the navigation collapses behind the menu button into a full-width panel. */
@media (max-width: 860px) {
  .frame-menu-toggle {
    display: inline-flex;
  }

  .frame-nav {
    display: none;
  }

  .frame-nav.is-open {
    display: flex;
    position: absolute;
    top: 4rem;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--xlx-space-2);
    padding: var(--xlx-space-4);
    background-color: var(--xlx-bg-raised);
    box-shadow: var(--xlx-shadow-lg);
    border-bottom: 1px solid var(--xlx-glass-border);
  }
}

.frame-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Notice ---------- */
.frame-notice-region {
  width: 100%;
  max-width: 80rem;
  margin: var(--xlx-space-4) auto 0;
  padding: 0 var(--xlx-space-4);
  box-sizing: border-box;
}

@media (min-width: 40rem) {
  .frame-notice-region {
    padding: 0 var(--xlx-space-6);
  }
}

@media (min-width: 64rem) {
  .frame-notice-region {
    padding: 0 var(--xlx-space-8);
  }
}

.frame-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--xlx-space-3);
  padding: var(--xlx-space-4);
  border-radius: var(--xlx-radius-md);
  border: 1px solid var(--xlx-warning-border);
  background-color: var(--xlx-warning-bg);
  color: var(--xlx-warn-fg);
}

.frame-notice p {
  margin: 0;
  color: inherit;
}

.frame-notice-body {
  display: flex;
  flex-direction: column;
  gap: var(--xlx-space-2);
  min-width: 0;
}

.frame-notice-title {
  font-weight: 600;
}

.frame-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xlx-space-2);
}

/* ---------- Main ---------- */
.frame-main {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: var(--xlx-space-8) 0 var(--xlx-space-12);
}

.frame-page-header {
  margin-bottom: var(--xlx-space-6);
}

.frame-page-header h1 {
  margin: 0;
}

.frame-page-header p {
  margin: var(--xlx-space-2) 0 0;
  font-size: var(--xlx-text-lg);
}

/* Empty, not-found and error states: icon, one-line title, one concrete next step. */
.frame-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--xlx-space-3);
  padding: var(--xlx-space-8) var(--xlx-space-4);
  border-radius: var(--xlx-radius-lg);
  text-align: center;
}

.frame-state h1 {
  margin: 0;
}

.frame-state p {
  margin: 0;
}

.frame-state-icon {
  color: var(--xlx-brand);
}

/* ---------- Footer ---------- */
/* Its own frosted surface, like the header: the backdrop photo is darkest at the bottom, where light-theme text
   would otherwise sit unreadable on the mountains. */
.frame-footer {
  background-color: var(--xlx-glass-strong);
  backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  border-top: 1px solid var(--xlx-border-subtle);
  padding: var(--xlx-space-6) 0;
  color: var(--xlx-fg-muted);
  font-size: var(--xlx-text-sm);
}

.frame-footer p {
  margin: var(--xlx-space-1) 0;
  color: var(--xlx-fg-muted);
}

/* ---------- Account position ---------- */
.frame-account-actions {
  display: flex;
  align-items: center;
  gap: var(--xlx-space-2);
  flex-wrap: wrap;
}

.frame-account-status {
  color: var(--xlx-fg-2);
  font-size: var(--xlx-text-sm);
}

.frame-account {
  position: relative;
}

.frame-account-button {
  max-width: 100%;
}

.frame-account-name {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--xlx-space-2));
  min-width: 14rem;
  padding: var(--xlx-space-2);
  border-radius: var(--xlx-radius-md);
  /* Menus are solid, not glass: page content showing through made the items hard to read. */
  background-color: var(--xlx-bg-raised);
  border: 1px solid var(--xlx-border);
  box-shadow: var(--xlx-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--xlx-space-1);
  z-index: 60;
}

.frame-menu button {
  display: flex;
  align-items: center;
  gap: var(--xlx-space-2);
  padding: var(--xlx-space-2) var(--xlx-space-3);
  border-radius: var(--xlx-radius-sm);
  color: var(--xlx-fg-2);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.frame-menu button:hover,
.frame-menu button:focus-visible {
  color: var(--xlx-fg);
  background-color: var(--xlx-surface-2);
}

@media (max-width: 860px) {
  .frame-account-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .frame-menu {
    position: static;
    min-width: 0;
  }
}
/* Towweb base layer. Built only from the Xilyxis tokens and primitives in ./xds (synced, never edited here).
   Light and dark both resolve through the tokens; nothing here names a color directly. */

/* typography.css (the editorial display and reading faces) is deliberately not imported: Towweb is all chrome,
   which the design system sets in --xlx-font-sans. */

/* =========================================================================
   Xilyxis Design System — Core tokens
   Colors, typography, spacing, radii, shadows, glass effects.

   Light + dark variants. Default: dark (matches current marketing site).
   Toggle by setting [data-theme="light"] on <html> or any ancestor.
   ========================================================================= */

/* ---------- Fonts ----------
   The webfonts are self-hosted beside this file (fonts/, Latin + Latin
   Extended, SIL OFL 1.1): served from the app's own origin, so a
   Content-Security-Policy of 'self' admits them and no page view reaches a
   third party. Each family falls back to the system stack in its token below.
   ------------------------------------------------------------------- */

/* Self-hosted webfonts for the Xilyxis design system (Latin + Latin Extended).
   Generated from Google Fonts' css2 stylesheet; every file is served from the
   app's own origin, so the Content-Security-Policy stays 'self' and no page view
   reaches a third party. The families are licensed under the SIL Open Font
   License 1.1 (see OFL.txt). Regenerate rather than hand-edit. */

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-italic-400-latin-ext-B7_fu1kp.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-italic-400-latin-BqAiT5Ww.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-italic-500-latin-ext-xMSC0T8m.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-italic-500-latin-As4cCeDr.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-normal-400-latin-ext-BmRBH3aV.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-normal-400-latin-DMJ8VG8y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-normal-500-latin-ext-CAhNIIs5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-normal-500-latin-DSY6xOcd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-normal-600-latin-ext-D38SheWl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-normal-600-latin-BgSNZQsw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/inter-normal-400-latin-ext-DO1Apj_S.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/inter-normal-400-latin-Dx4kXJAl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/inter-normal-400-latin-ext-DO1Apj_S.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/inter-normal-400-latin-Dx4kXJAl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/inter-normal-400-latin-ext-DO1Apj_S.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/inter-normal-400-latin-Dx4kXJAl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/inter-normal-400-latin-ext-DO1Apj_S.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/inter-normal-400-latin-Dx4kXJAl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/inter-normal-400-latin-ext-DO1Apj_S.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/inter-normal-400-latin-Dx4kXJAl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/jetbrains-mono-normal-400-latin-ext-DIC32ArD.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/jetbrains-mono-normal-400-latin-6fWv1k7M.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/jetbrains-mono-normal-400-latin-ext-DIC32ArD.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/jetbrains-mono-normal-400-latin-6fWv1k7M.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/jetbrains-mono-normal-400-latin-ext-DIC32ArD.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/jetbrains-mono-normal-400-latin-6fWv1k7M.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/libre-caslon-text-italic-400-latin-ext-BHleWajS.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/libre-caslon-text-italic-400-latin-snTzlHlN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/libre-caslon-text-normal-400-latin-ext-C9ASObbr.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/libre-caslon-text-normal-400-latin-CfldDPV-.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/libre-caslon-text-normal-700-latin-ext-VERgVPZd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/libre-caslon-text-normal-700-latin-D1WVYPaO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/literata-italic-400-700-latin-ext--EJQ9LTF.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/literata-italic-400-700-latin-Ckc1vdjp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/literata-normal-400-700-latin-ext--vWOuwpV.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/literata-normal-400-700-latin-Cedbco83.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/source-serif-4-italic-400-700-latin-ext-BhUEwDRF.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/source-serif-4-italic-400-700-latin-BOLXpvkj.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/source-serif-4-normal-400-700-latin-ext-HoL-AExg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/source-serif-4-normal-400-700-latin-BpEBLj1O.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* ============ Brand ============ */
  --xlx-brand:            #A3DAFF;   /* primary — light cyan / sky blue */
  --xlx-brand-dark:       #7BC4F2;   /* primary hover */
  --xlx-brand-light:      #C2EEFF;   /* accents, borders */
  --xlx-brand-ink:        #0B1220;   /* foreground when on brand fill */
  --xlx-brand-rgb:        163, 218, 255;   /* raw RGB for rgba() usage */
  --xlx-brand-dark-rgb:   123, 196, 242;   /* --xlx-brand-dark raw RGB */

  /* ============ Neutral scale (Tailwind gray) ============ */
  --xlx-gray-50:   #f9fafb;
  --xlx-gray-100:  #f3f4f6;
  --xlx-gray-200:  #e5e7eb;
  --xlx-gray-300:  #d1d5db;
  --xlx-gray-400:  #9ca3af;
  --xlx-gray-500:  #6b7280;
  --xlx-gray-600:  #4b5563;
  --xlx-gray-700:  #374151;
  --xlx-gray-800:  #1f2937;
  --xlx-gray-900:  #111827;
  --xlx-gray-950:  #0b1220;

  /* ============ Semantic status ============ */
  --xlx-success:             #6EE7B7;
  --xlx-warning:             #FBBF24;
  --xlx-danger:              #FECACA;
  --xlx-info:                #A3DAFF;
  --xlx-success-rgb:         110, 231, 183; /* raw RGB for rgba() usage */
  --xlx-warning-rgb:         251, 191, 36;  /* raw RGB for rgba() usage */
  --xlx-danger-rgb:          254, 202, 202; /* raw RGB for rgba() usage */
  --xlx-neutral-muted-rgb:   156, 163, 175; /* raw RGB for rgba() usage */

  /* Status TEXT and status FILL are different tokens, because they pull in
     opposite directions: text wants a tone that stands off the background
     (light at night, deep in daylight), while a solid fill under white ink
     wants a deep tone in every theme. `--xlx-danger` was once both and passed
     as neither at night (white on #F87171 is 2.77:1). The fills below are
     theme-invariant: white ink clears 4.5:1 on each in any theme. */
  --xlx-danger-fill:  #B91C1C;         /* danger button / solid danger surface */
  --xlx-danger-ink:   #ffffff;         /* foreground on --xlx-danger-fill */
  --xlx-success-fill: #166534;         /* solid success surface (e.g. a done step) */
  --xlx-success-ink:  #ffffff;         /* foreground on --xlx-success-fill */
  --xlx-overlay:    var(--xlx-scrim);  /* modal/dialog backdrop */

  /* ============ Spacing scale (4px base) ============ */
  --xlx-space-0:   0;
  --xlx-space-1:   0.25rem;   /*  4 */
  --xlx-space-2:   0.5rem;    /*  8 */
  --xlx-space-3:   0.75rem;   /* 12 */
  --xlx-space-4:   1rem;      /* 16 */
  --xlx-space-5:   1.25rem;   /* 20 */
  --xlx-space-6:   1.5rem;    /* 24 */
  --xlx-space-7:   1.75rem;   /* 28 */
  --xlx-space-8:   2rem;      /* 32 */
  --xlx-space-10:  2.5rem;    /* 40 */
  --xlx-space-12:  3rem;      /* 48 */
  --xlx-space-16:  4rem;      /* 64 */
  --xlx-space-20:  5rem;      /* 80 */

  /* ============ Radii ============ */
  --xlx-radius-sm:   0.375rem;  /*  6 — small tags/chips */
  --xlx-radius-md:   0.5rem;    /*  8 — buttons, inputs */
  --xlx-radius-lg:   0.75rem;   /* 12 — cards, header */
  --xlx-radius-xl:   1rem;      /* 16 — big panels */
  --xlx-radius-2xl:  1.5rem;    /* 24 — hero cards */
  --xlx-radius-full: 9999px;

  /* ============ Motion ============ */
  --xlx-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --xlx-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --xlx-duration-1:  150ms;
  --xlx-duration-2:  200ms;
  --xlx-duration-3:  300ms;

  /* ============ Font families ============ */
  --xlx-font-sans:  'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
  --xlx-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --xlx-font-system: system-ui, Avenir, Helvetica, Arial, sans-serif; /* legacy match */

  /* Book-writing app stack — additive, opt-in.
     Use on the manuscript surface itself; UI chrome stays on --xlx-font-sans. */
  --xlx-font-reading:    'Literata', Charter, 'Iowan Old Style', Georgia, serif;        /* long-form body */
  --xlx-font-editorial:  'Source Serif 4', 'Source Serif Pro', Georgia, Cambria, serif; /* alt manuscript */
  --xlx-font-chapter:    'Libre Caslon Text', 'Libre Caslon', Georgia, serif;           /* chapter display */
  --xlx-font-draft:      'IBM Plex Mono', ui-monospace, 'Courier Prime', Courier, monospace; /* typewriter draft */

  /* ============ Type scale ============ */
  --xlx-text-xs:   0.75rem;   /* 12 */
  --xlx-text-sm:   0.875rem;  /* 14 */
  --xlx-text-base: 1rem;      /* 16 */
  --xlx-text-lg:   1.125rem;  /* 18 */
  --xlx-text-xl:   1.25rem;   /* 20 */
  --xlx-text-2xl:  1.5rem;    /* 24 */
  --xlx-text-3xl:  1.875rem;  /* 30 */
  --xlx-text-4xl:  2.25rem;   /* 36 */
  --xlx-text-5xl:  3rem;      /* 48 */
  --xlx-text-6xl:  3.75rem;   /* 60 */

  --xlx-leading-tight: 1.15;
  --xlx-leading-snug:  1.35;
  --xlx-leading-base:  1.55;
  --xlx-leading-loose: 1.75;

  --xlx-tracking-tight:  -0.02em;
  --xlx-tracking-normal:  0;
  --xlx-tracking-wide:    0.02em;
  --xlx-tracking-caps:    0.12em;
}

/* =========================================================================
   DARK THEME (default — matches current marketing site)
   ========================================================================= */
:root,
[data-theme="dark"] {
  --xlx-bg:              #0b1220;                          /* page background (slightly deeper than gray-900 for depth) */
  --xlx-bg-raised:       #111827;                          /* gray-900 */
  --xlx-surface:         #1f2937;                          /* gray-800 — opaque cards */
  --xlx-surface-2:       #374151;                          /* gray-700 — hover on surface */
  --xlx-surface-muted:   rgba(31, 41, 55, 0.5);            /* translucent feature tiles */

  --xlx-fg:              #ffffff;                          /* headings, emphasized */
  --xlx-fg-1:            #e5e7eb;                          /* high-contrast body */
  --xlx-fg-2:            #d1d5db;                          /* body */
  --xlx-fg-muted:        #aab1bc;                          /* descriptions */
  --xlx-fg-subtle:       #6b7280;                          /* placeholder, disabled */

  --xlx-border:          #374151;                          /* standard divider */
  --xlx-border-subtle:   #1f2937;                          /* barely-there lines */
  --xlx-border-strong:   #4b5563;                          /* focused borders */

  /* Glass — the signature treatment */
  --xlx-glass:           rgba(255, 255, 255, 0.08);
  --xlx-glass-strong:    rgba(255, 255, 255, 0.14);
  --xlx-glass-border:    rgba(255, 255, 255, 0.18);
  --xlx-glass-border-hi: rgba(255, 255, 255, 0.28);
  --xlx-glass-blur:      16px;                              /* slightly stronger than legacy 12px */
  --xlx-glass-saturate:  140%;

  /* Shadows */
  --xlx-shadow-sm:  0 1px 2px  rgba(0, 0, 0, 0.25);
  --xlx-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.30);
  --xlx-shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.38);
  --xlx-shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.45);
  --xlx-shadow-glow: 0 0 0 1px rgba(163, 218, 255, 0.25), 0 8px 30px rgba(163, 218, 255, 0.18);

  /* Scrim — full-screen darkening overlay */
  --xlx-scrim:      rgba(0, 0, 0, 0.60);
  --xlx-scrim-soft: rgba(0, 0, 0, 0.20);

  --xlx-danger-bg:    rgba(248, 113, 113, 0.12);
  --xlx-warning-bg:   rgba(251, 191, 36, 0.10);
  --xlx-warning-border: rgba(251, 191, 36, 0.28);
  --xlx-warn-bg:      rgba(251, 191, 36, 0.10);
  --xlx-warn-fg:      #FBBF24;
  --xlx-info-bg:      rgba(96, 165, 250, 0.10);
  --xlx-info-fg:      #60A5FA;
  --xlx-audit:          #a78bfa;
  --xlx-audit-bg:       rgba(167, 139, 250, 0.12);
  --xlx-audit-border:   rgba(167, 139, 250, 0.28);

  /* Accent — secondary violet, distinct from brand blue; used for category/icon badges */
  --xlx-accent:         #c084fc;   /* violet-400 — secondary accent */

  /* Focus ring */
  --xlx-ring:       0 0 0 2px var(--xlx-bg), 0 0 0 4px var(--xlx-brand-dark);

  /* Selection highlight — used for click-to-select outline rings in preview/audit surfaces */
  --xlx-selection:            #f472b6;               /* pink-400 — distinct from brand/accent */
  --xlx-selection-glow:       rgba(244, 114, 182, 0.18);

  /* Workspace panel overlays — used by .ws-* chrome in app.css */
  --xlx-ws-layer-deep:    rgba(0, 0, 0, 0.30);
  --xlx-ws-layer-mid:     rgba(0, 0, 0, 0.22);
  --xlx-ws-layer-subtle:  rgba(0, 0, 0, 0.18);
  --xlx-ws-shimmer:       rgba(255, 255, 255, 0.02);
  --xlx-ws-shimmer-md:    rgba(255, 255, 255, 0.06);
  --xlx-ws-shimmer-hi:    rgba(255, 255, 255, 0.10);
}

/* =========================================================================
   LIGHT THEME — new, for the "extendable" case
   Keeps the same brand primary but inverts the neutral stack.
   Glass sits on top of a soft off-white rather than a photo background.
   ========================================================================= */
[data-theme="light"] {
  /* Brand shifts deeper in light mode so links/icons meet contrast on white */
  --xlx-brand:           #16639A;   /* deep sky — 5.3:1 as text on every light surface, 6.4:1 under white */
  --xlx-brand-dark:      #114E7A;   /* hover */
  --xlx-brand-light:     #A3DAFF;   /* accent / surface tint */
  --xlx-brand-ink:       #ffffff;   /* foreground when on brand fill */
  --xlx-brand-rgb:       22, 99, 154;    /* raw RGB of --xlx-brand, for tints */
  --xlx-brand-dark-rgb:  17, 78, 122;    /* raw RGB of --xlx-brand-dark */

  --xlx-bg:              #EEF2F7;
  --xlx-bg-raised:       #ffffff;
  --xlx-surface:         #ffffff;
  --xlx-surface-2:       #E4EBF3;
  --xlx-surface-muted:   rgba(17, 24, 39, 0.05);

  --xlx-fg:              #0b1220;
  --xlx-fg-1:            #111827;
  --xlx-fg-2:            #1f2937;
  --xlx-fg-muted:        #334155;
  --xlx-fg-subtle:       #475569;

  --xlx-border:          #D1D9E2;
  --xlx-border-subtle:   #E4EBF3;
  --xlx-border-strong:   #A3B2C2;

  /* Glass on light: lower opacity + stronger borders so the backdrop blur reads */
  --xlx-glass:           rgba(255, 255, 255, 0.50);
  --xlx-glass-strong:    rgba(255, 255, 255, 0.70);
  --xlx-glass-border:    rgba(17, 24, 39, 0.18);
  --xlx-glass-border-hi: rgba(17, 24, 39, 0.28);
  --xlx-glass-blur:      20px;
  --xlx-glass-saturate:  180%;

  --xlx-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.08);
  --xlx-shadow-md:  0 4px 14px rgba(15, 23, 42, 0.12);
  --xlx-shadow-lg:  0 14px 36px rgba(15, 23, 42, 0.16);
  --xlx-shadow-xl:  0 28px 70px rgba(15, 23, 42, 0.22);
  --xlx-shadow-glow: 0 0 0 1px rgba(30, 127, 184, 0.40), 0 8px 30px rgba(30, 127, 184, 0.30);

  /* Scrim — full-screen darkening overlay (lighter in light mode) */
  --xlx-scrim:      rgba(15, 23, 42, 0.55);
  --xlx-scrim-soft: rgba(15, 23, 42, 0.12);

  --xlx-danger-bg:    rgba(220, 38, 38, 0.10);
  --xlx-warning-bg:   rgba(251, 191, 36, 0.08);
  --xlx-warning-border: rgba(251, 191, 36, 0.24);
  /* Status text — deepened for daylight. The base `:root` values are the dark
     theme's 400-weight tones, which fall to ~2.3:1 on cream and white. These
     reach 4.5:1 on every light surface, including small badge text sitting on
     its own 15% tint (`rgba(var(--xlx-*-rgb), 0.15)`). Solid fills use the
     invariant `--xlx-*-fill` tokens instead. */
  --xlx-success:        #166534;
  --xlx-warning:        #92400E;
  --xlx-danger:         #A61B1B;
  --xlx-success-rgb:    22, 101, 52;
  --xlx-warning-rgb:    146, 64, 14;
  --xlx-danger-rgb:     166, 27, 27;
  --xlx-warn-bg:      rgba(251, 191, 36, 0.08);
  --xlx-warn-fg:      #B45309;
  --xlx-info-bg:      rgba(37, 99, 235, 0.08);
  --xlx-info-fg:      #1D4ED8;
  --xlx-audit:          #7c3aed;
  --xlx-audit-bg:       rgba(124, 58, 237, 0.10);
  --xlx-audit-border:   rgba(124, 58, 237, 0.24);

  /* Accent — secondary violet; meets contrast on light backgrounds */
  --xlx-accent:         #7c3aed;   /* violet-700 — secondary accent */

  --xlx-ring:       0 0 0 2px var(--xlx-bg), 0 0 0 4px var(--xlx-brand-dark);

  /* Selection highlight — light mode (deeper shade for contrast on white) */
  --xlx-selection:            #db2777;               /* pink-600 — readable on light */
  --xlx-selection-glow:       rgba(219, 39, 119, 0.14);

  /* Workspace panel overlays — light mode */
  --xlx-ws-layer-deep:    rgba(0, 0, 0, 0.08);
  --xlx-ws-layer-mid:     rgba(0, 0, 0, 0.05);
  --xlx-ws-layer-subtle:  rgba(0, 0, 0, 0.04);
  --xlx-ws-shimmer:       rgba(0, 0, 0, 0.025);
  --xlx-ws-shimmer-md:    rgba(0, 0, 0, 0.04);
  --xlx-ws-shimmer-hi:    rgba(0, 0, 0, 0.05);
}

/* =========================================================================
   Semantic element defaults — opt-in via class="xlx"
   Use on a root wrapper so these don't leak into other systems on the page.
   ========================================================================= */
.xlx,
.xlx * {
  box-sizing: border-box;
}

.xlx {
  font-family: var(--xlx-font-sans);
  color: var(--xlx-fg-2);
  background-color: transparent;
  font-size: var(--xlx-text-base);
  line-height: var(--xlx-leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.xlx h1, .xlx .h1 {
  font-size: clamp(var(--xlx-text-4xl), 4vw + 1rem, var(--xlx-text-6xl));
  font-weight: 700;
  letter-spacing: var(--xlx-tracking-tight);
  line-height: var(--xlx-leading-tight);
  color: var(--xlx-fg);
  margin: 0 0 var(--xlx-space-6) 0;
}

.xlx h2, .xlx .h2 {
  font-size: var(--xlx-text-3xl);
  font-weight: 700;
  letter-spacing: var(--xlx-tracking-tight);
  line-height: var(--xlx-leading-snug);
  color: var(--xlx-fg);
  margin: 0 0 var(--xlx-space-4) 0;
}

.xlx h3, .xlx .h3 {
  font-size: var(--xlx-text-xl);
  font-weight: 700;
  line-height: var(--xlx-leading-snug);
  color: var(--xlx-fg);
  margin: 0 0 var(--xlx-space-3) 0;
}

.xlx h4, .xlx .h4 {
  font-size: var(--xlx-text-lg);
  font-weight: 600;
  color: var(--xlx-fg-1);
  margin: 0 0 var(--xlx-space-2) 0;
}

.xlx p, .xlx .body {
  font-size: var(--xlx-text-base);
  color: var(--xlx-fg-2);
  line-height: var(--xlx-leading-base);
  margin: 0 0 var(--xlx-space-4) 0;
}

.xlx .lead {
  font-size: var(--xlx-text-xl);
  color: var(--xlx-fg-2);
  line-height: var(--xlx-leading-snug);
}

.xlx .small,
.xlx small {
  font-size: var(--xlx-text-sm);
  color: var(--xlx-fg-muted);
}

.xlx .eyebrow {
  font-size: var(--xlx-text-xs);
  letter-spacing: var(--xlx-tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--xlx-brand);
}

.xlx code, .xlx .mono {
  font-family: var(--xlx-font-mono);
  font-size: 0.95em;
}

.xlx a {
  color: var(--xlx-brand);
  text-decoration: none;
  transition: color var(--xlx-duration-2) var(--xlx-ease);
}
.xlx a:hover { color: var(--xlx-brand-light); }

/* Brand word — used in the hero ("XILYXIS") */
.xlx .brand {
  color: var(--xlx-brand);
}

/* =========================================================================
   LINEN PALETTE — alternate color scheme
   Orthogonal to light/dark. Activate by setting [data-palette="linen"] on
   <html> (or any ancestor). Default palette = "blue" (the stack above).

   Philosophy: the book-writing aesthetic — cream paper, warm ink, oxblood
   accent. In dark mode we invert to deep espresso backgrounds with a warm
   cream foreground and a lifted terracotta accent for AA contrast.
   ========================================================================= */

/* ---------- Linen LIGHT (default pairing) ---------- */
[data-palette="linen"],
[data-palette="linen"][data-theme="light"] {
  /* Accent — warm oxblood */
  --xlx-brand:           #7a2e1f;   /* primary — oxblood */
  --xlx-brand-dark:      #5c2216;   /* hover — deeper */
  --xlx-brand-light:     #c7b8a0;   /* soft accent — warm taupe */
  --xlx-brand-ink:       #fbfaf7;   /* foreground when on brand fill */
  --xlx-brand-rgb:       122, 46, 31;
  --xlx-brand-dark-rgb:  92, 34, 22;

  /* Surfaces — cream & paper */
  --xlx-bg:              #eeeae0;   /* page — warm cream */
  --xlx-bg-raised:       #fbfaf7;   /* paper */
  --xlx-surface:         #ffffff;   /* chrome — pure white cards */
  --xlx-surface-2:       #f5f3ee;   /* paper-2 — hover/recessed */
  --xlx-surface-muted:   rgba(20, 24, 31, 0.04);

  /* Ink scale */
  --xlx-fg:              #14181f;   /* headings */
  --xlx-fg-1:            #2b323c;   /* high-contrast body */
  --xlx-fg-2:            #4b5563;   /* body */
  --xlx-fg-muted:        #5f6571;   /* descriptions */
  --xlx-fg-subtle:       #8a8577;   /* warm-tinted disabled */

  /* Rules — warm, slightly desaturated */
  --xlx-border:          #d9d4c7;   /* rule-2 */
  --xlx-border-subtle:   #e6e2d8;   /* rule */
  --xlx-border-strong:   #c7b8a0;   /* brand-light doubles as strong rule */

  /* Glass — warm cream instead of cool white */
  --xlx-glass:           rgba(251, 250, 247, 0.60);
  --xlx-glass-strong:    rgba(251, 250, 247, 0.80);
  --xlx-glass-border:    rgba(20, 24, 31, 0.14);
  --xlx-glass-border-hi: rgba(20, 24, 31, 0.24);
  --xlx-glass-blur:      20px;
  --xlx-glass-saturate:  160%;

  /* Shadows — softer, warm-tinted */
  --xlx-shadow-sm:  0 1px 2px  rgba(20, 24, 31, 0.06);
  --xlx-shadow-md:  0 4px 14px rgba(20, 24, 31, 0.09);
  --xlx-shadow-lg:  0 16px 40px rgba(20, 24, 31, 0.12);
  --xlx-shadow-xl:  0 28px 70px rgba(20, 24, 31, 0.16);
  --xlx-shadow-glow: 0 0 0 1px rgba(122, 46, 31, 0.30), 0 8px 30px rgba(122, 46, 31, 0.22);

  --xlx-ring:       0 0 0 2px var(--xlx-bg), 0 0 0 4px var(--xlx-brand);

  /* Scrim — warm-tinted overlay for linen light */
  --xlx-scrim:      rgba(20, 24, 31, 0.55);
  --xlx-scrim-soft: rgba(20, 24, 31, 0.12);

  /* Warning status — amber on warm cream */
  --xlx-warn-bg:    rgba(251, 191, 36, 0.08);
  --xlx-warn-fg:    #92400E;

  /* Semantic status — warm terracotta tones on cream */
  --xlx-danger-bg:      rgba(180, 30, 30, 0.10);
  --xlx-warning-bg:     rgba(180, 100, 20, 0.10);
  --xlx-warning-border: rgba(180, 100, 20, 0.25);
  /* Status text — deepened for daylight. The base `:root` values are the dark
     theme's 400-weight tones, which fall to ~2.3:1 on cream and white. These
     reach 4.5:1 on every light surface, including small badge text sitting on
     its own 15% tint (`rgba(var(--xlx-*-rgb), 0.15)`). Solid fills use the
     invariant `--xlx-*-fill` tokens instead. */
  --xlx-success:        #166534;
  --xlx-warning:        #92400E;
  --xlx-danger:         #A61B1B;
  --xlx-success-rgb:    22, 101, 52;
  --xlx-warning-rgb:    146, 64, 14;
  --xlx-danger-rgb:     166, 27, 27;
  --xlx-audit:          #8b3e2f;
  --xlx-audit-bg:       rgba(139, 62, 47, 0.10);
  --xlx-audit-border:   rgba(139, 62, 47, 0.24);

  /* Accent — warm slate, distinct from oxblood brand; complements linen palette */
  --xlx-accent:         #4d6b7a;   /* warm slate — secondary accent on cream */

  /* Info status — warm slate, distinct from oxblood brand */
  --xlx-info:       #4d6b7a;
  --xlx-info-bg:    rgba(77, 107, 122, 0.10);
  --xlx-info-fg:    #4d6b7a;
}

/* ---------- Linen DARK — inverted, warm espresso ---------- */
[data-palette="linen"][data-theme="dark"] {
  /* Accent — terracotta lifted for AA contrast on dark ink */
  --xlx-brand:           #e8a990;   /* primary — lifted terracotta */
  --xlx-brand-dark:      #c9826a;   /* hover — muted rust */
  --xlx-brand-light:     #f5d9c8;   /* soft accent — warm sand */
  --xlx-brand-ink:       #1a1410;   /* foreground when on brand fill */
  --xlx-brand-rgb:       232, 169, 144;
  --xlx-brand-dark-rgb:  201, 130, 106;

  /* Surfaces — deep espresso with warm undertone */
  --xlx-bg:              #17130f;   /* page — warm near-black */
  --xlx-bg-raised:       #1f1a15;   /* raised — espresso */
  --xlx-surface:         #2a231c;   /* cards — cocoa */
  --xlx-surface-2:       #3a3128;   /* hover */
  --xlx-surface-muted:   rgba(232, 169, 144, 0.06);

  /* Foreground — warm cream */
  --xlx-fg:              #faf4ea;   /* headings */
  --xlx-fg-1:            #ede4d2;   /* high-contrast body */
  --xlx-fg-2:            #d9cdb5;   /* body */
  --xlx-fg-muted:        #a89a80;   /* descriptions */
  --xlx-fg-subtle:       #75685a;   /* disabled */

  /* Rules — warm dividers */
  --xlx-border:          #3a3128;
  --xlx-border-subtle:   #2a231c;
  --xlx-border-strong:   #5a4d3f;

  /* Glass — warm-tinted translucency */
  --xlx-glass:           rgba(250, 244, 234, 0.06);
  --xlx-glass-strong:    rgba(250, 244, 234, 0.12);
  --xlx-glass-border:    rgba(250, 244, 234, 0.16);
  --xlx-glass-border-hi: rgba(250, 244, 234, 0.26);
  --xlx-glass-blur:      16px;
  --xlx-glass-saturate:  140%;

  /* Shadows — deeper, for depth against warm bg */
  --xlx-shadow-sm:  0 1px 2px  rgba(0, 0, 0, 0.32);
  --xlx-shadow-md:  0 4px 14px rgba(0, 0, 0, 0.40);
  --xlx-shadow-lg:  0 14px 36px rgba(0, 0, 0, 0.50);
  --xlx-shadow-xl:  0 28px 70px rgba(0, 0, 0, 0.60);
  --xlx-shadow-glow: 0 0 0 1px rgba(232, 169, 144, 0.30), 0 8px 30px rgba(232, 169, 144, 0.22);

  --xlx-ring:       0 0 0 2px var(--xlx-bg), 0 0 0 4px var(--xlx-brand);

  /* Scrim — warm-tinted overlay for linen dark */
  --xlx-scrim:      rgba(23, 19, 15, 0.60);
  --xlx-scrim-soft: rgba(23, 19, 15, 0.20);

  /* Warning status — amber on warm espresso */
  --xlx-warn-bg:    rgba(251, 191, 36, 0.10);
  --xlx-warn-fg:    #FBBF24;

  /* Semantic status — lifted terracotta tones on espresso */
  --xlx-danger-bg:      rgba(200, 60, 60, 0.14);
  --xlx-warning-bg:     rgba(200, 140, 60, 0.12);
  --xlx-warning-border: rgba(200, 140, 60, 0.28);
  /* Status text — the base dark tones, restated. The light pairing above is
     also selected by bare `[data-palette="linen"]`, which matches at night too,
     so without these its daylight values would win here. */
  --xlx-success:        #6EE7B7;
  --xlx-warning:        #FBBF24;
  --xlx-danger:         #FECACA;
  --xlx-success-rgb:    110, 231, 183;
  --xlx-warning-rgb:    251, 191, 36;
  --xlx-danger-rgb:     254, 202, 202;
  --xlx-audit:          #d4846a;
  --xlx-audit-bg:       rgba(212, 132, 106, 0.12);
  --xlx-audit-border:   rgba(212, 132, 106, 0.28);

  /* Accent — warm slate, distinct from terracotta brand; secondary accent on espresso */
  --xlx-accent:         #8faab8;   /* warm slate — secondary accent */

  /* Info status — warm slate, distinct from terracotta brand */
  --xlx-info:       #8faab8;
  --xlx-info-bg:    rgba(143, 170, 184, 0.12);
  --xlx-info-fg:    #8faab8;
}
/* =========================================================================
   Xilyxis Design System — Components
   Reusable class-based primitives. Load AFTER colors_and_type.css.

   All components sit inside a .xlx wrapper so they pick up theme tokens.
   ========================================================================= */

/* ---------- App background (Mt. Rainier silhouette, fixed) --------------- */
.xlx-bg-hero {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--xlx-bg);
  background-image:
    /* Dark overlay keeps contrast over the photo */
    linear-gradient(180deg, rgba(11, 18, 32, 0.45) 0%, rgba(11, 18, 32, 0.70) 100%),
    url('/assets/mt-rainier-silhouette.webp');
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

[data-palette="linen"][data-theme="dark"] .xlx-bg-hero,
[data-palette="linen"]:not([data-theme="light"]) .xlx-bg-hero {
  background-image:
    linear-gradient(180deg, rgba(23, 19, 15, 0.55) 0%, rgba(23, 19, 15, 0.88) 100%),
    url('/assets/mt-rainier-silhouette.webp');
}
[data-palette="linen"][data-theme="light"] .xlx-bg-hero {
  background-image:
    linear-gradient(180deg, rgba(238, 234, 224, 0.60) 0%, rgba(238, 234, 224, 0.25) 100%),
    url('/assets/mt-rainier-silhouette.webp');
}

[data-theme="light"] .xlx-bg-hero {
  background-image:
    linear-gradient(180deg, rgba(238, 242, 247, 0.55) 0%, rgba(238, 242, 247, 0.15) 100%),
    url('/assets/mt-rainier-silhouette.webp');
}

/* Subtle aurora — optional enhancement, adds color to dark hero areas */
.xlx-bg-aurora::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(163, 218, 255, 0.18), transparent 60%),
    radial-gradient(35% 45% at 80% 20%, rgba(123, 196, 242, 0.14), transparent 60%),
    radial-gradient(45% 50% at 60% 90%, rgba(194, 238, 255, 0.10), transparent 60%);
  pointer-events: none;
  filter: blur(40px);
}

/* ========================== Glass surfaces ============================== */
.xlx-glass {
  background-color: var(--xlx-glass);
  backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  border: 1px solid var(--xlx-glass-border);
  box-shadow: var(--xlx-shadow-md);
  border-radius: var(--xlx-radius-lg);
}

.xlx-glass-strong {
  background-color: var(--xlx-glass-strong);
  backdrop-filter: blur(calc(var(--xlx-glass-blur) * 1.25)) saturate(var(--xlx-glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--xlx-glass-blur) * 1.25)) saturate(var(--xlx-glass-saturate));
  border: 1px solid var(--xlx-glass-border-hi);
  box-shadow: var(--xlx-shadow-lg);
  border-radius: var(--xlx-radius-xl);
}

/* Inner highlight — gives glass a glossy top edge. Apply with class="xlx-glass xlx-glass-gloss" */
.xlx-glass-gloss {
  position: relative;
  overflow: hidden;
}
.xlx-glass-gloss::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: overlay;
}

/* ============================== Buttons ================================= */
.xlx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--xlx-radius-md);
  font-family: inherit;
  font-size: var(--xlx-text-base);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--xlx-duration-1) var(--xlx-ease),
              background-color var(--xlx-duration-2) var(--xlx-ease),
              color var(--xlx-duration-2) var(--xlx-ease),
              border-color var(--xlx-duration-2) var(--xlx-ease),
              box-shadow var(--xlx-duration-2) var(--xlx-ease);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.xlx-btn:focus-visible { outline: none; box-shadow: var(--xlx-ring); }
.xlx-btn:active       { transform: translateY(1px); }
.xlx-btn:disabled     { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Sizes */
.xlx-btn-sm { padding: 0.375rem 0.875rem; font-size: var(--xlx-text-sm); border-radius: var(--xlx-radius-sm); }
.xlx-btn-md { padding: 0.625rem 1.25rem; font-size: var(--xlx-text-base); }
.xlx-btn-lg { padding: 0.875rem 1.75rem; font-size: var(--xlx-text-lg); }

/* Variants */
.xlx-btn-primary {
  background-color: var(--xlx-brand);
  color: var(--xlx-brand-ink);
}
.xlx-btn-primary:hover {
  background-color: var(--xlx-brand-light);
  box-shadow: var(--xlx-shadow-glow);
}

.xlx-btn-secondary {
  background-color: transparent;
  border-color: var(--xlx-brand);
  color: var(--xlx-brand);
}
.xlx-btn-secondary:hover {
  background-color: var(--xlx-brand);
  color: var(--xlx-brand-ink);
}

.xlx-btn-ghost {
  background-color: transparent;
  color: var(--xlx-fg-2);
}
.xlx-btn-ghost:hover {
  background-color: var(--xlx-surface-2);
  color: var(--xlx-fg);
}

[data-theme="light"] .xlx-btn-ghost:hover {
  background-color: var(--xlx-surface-muted);
}

.xlx-btn-glass {
  background-color: var(--xlx-glass);
  backdrop-filter: blur(var(--xlx-glass-blur));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur));
  border-color: var(--xlx-glass-border);
  color: var(--xlx-fg);
}
.xlx-btn-glass:hover {
  background-color: var(--xlx-glass-strong);
  border-color: var(--xlx-glass-border-hi);
}

.xlx-btn-danger {
  background-color: var(--xlx-danger-fill);
  color: var(--xlx-danger-ink);
}
.xlx-btn-danger:hover { filter: brightness(1.1); }

/* ============================== Cards =================================== */
.xlx-card {
  background-color: var(--xlx-glass);
  backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  border: 1px solid var(--xlx-glass-border);
  box-shadow: var(--xlx-shadow-md);
  border-radius: var(--xlx-radius-lg);
  padding: var(--xlx-space-5);
  transition: transform var(--xlx-duration-3) var(--xlx-ease-out),
              background-color var(--xlx-duration-3) var(--xlx-ease),
              border-color var(--xlx-duration-3) var(--xlx-ease),
              box-shadow var(--xlx-duration-3) var(--xlx-ease);
}
.xlx-card:hover {
  transform: translateY(-4px);
  background-color: var(--xlx-glass-strong);
  border-color: var(--xlx-glass-border-hi);
  box-shadow: var(--xlx-shadow-lg);
}

.xlx-card-solid {
  background-color: var(--xlx-surface);
  border: 1px solid var(--xlx-border);
  border-radius: var(--xlx-radius-lg);
  padding: var(--xlx-space-6);
  box-shadow: var(--xlx-shadow-sm);
  transition: all var(--xlx-duration-3) var(--xlx-ease);
}
.xlx-card-solid:hover {
  background-color: var(--xlx-bg-raised);
  border-color: var(--xlx-border-strong);
  box-shadow: var(--xlx-shadow-md);
}

/* Feature tile — used inside sections as a lighter-weight card */
.xlx-tile {
  background-color: var(--xlx-surface-muted);
  border: 1px solid var(--xlx-border-subtle);
  border-radius: var(--xlx-radius-md);
  padding: var(--xlx-space-4);
}

/* ============================== Inputs ================================== */
.xlx-input, .xlx-select, .xlx-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background-color: var(--xlx-surface);
  border: 1px solid var(--xlx-border);
  border-radius: var(--xlx-radius-md);
  color: var(--xlx-fg);
  font-family: inherit;
  font-size: var(--xlx-text-base);
  line-height: var(--xlx-leading-snug);
  transition: border-color var(--xlx-duration-2) var(--xlx-ease),
              box-shadow var(--xlx-duration-2) var(--xlx-ease),
              background-color var(--xlx-duration-2) var(--xlx-ease);
}
.xlx-input::placeholder,
.xlx-textarea::placeholder { color: var(--xlx-fg-muted); }

.xlx-input:focus,
.xlx-select:focus,
.xlx-textarea:focus {
  outline: none;
  border-color: var(--xlx-brand);
  box-shadow: 0 0 0 3px rgba(163, 218, 255, 0.18);
}

.xlx-label {
  display: block;
  font-size: var(--xlx-text-sm);
  font-weight: 500;
  color: var(--xlx-fg-1);
  margin-bottom: var(--xlx-space-2);
}

.xlx-hint {
  font-size: var(--xlx-text-sm);
  color: var(--xlx-fg-muted);
  margin-top: var(--xlx-space-2);
}

/* ============================== Badges ================================== */
.xlx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--xlx-radius-full);
  font-size: var(--xlx-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background-color: var(--xlx-surface-muted);
  color: var(--xlx-fg-1);
  border: 1px solid var(--xlx-border-subtle);
}
.xlx-badge-glass {
  background-color: var(--xlx-glass-strong);
  color: var(--xlx-fg);
  border-color: var(--xlx-glass-border-hi);
  backdrop-filter: blur(var(--xlx-glass-blur));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur));
}
.xlx-badge-brand   { background: var(--xlx-brand); color: var(--xlx-brand-ink); border-color: transparent; }
.xlx-badge-success { background: rgba(var(--xlx-success-rgb), 0.15); color: var(--xlx-success); border-color: rgba(var(--xlx-success-rgb), 0.35); }
.xlx-badge-warning { background: rgba(var(--xlx-warning-rgb), 0.15); color: var(--xlx-warning); border-color: rgba(var(--xlx-warning-rgb), 0.35); }
.xlx-badge-danger  { background: rgba(var(--xlx-danger-rgb), 0.15); color: var(--xlx-danger);  border-color: rgba(var(--xlx-danger-rgb), 0.35); }

/* ============================== Nav / Header =========================== */
.xlx-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--xlx-glass);
  backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  border-bottom: 1px solid var(--xlx-glass-border);
}

.xlx-header-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--xlx-space-6);
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.xlx-nav-link {
  position: relative;
  color: var(--xlx-fg-2);
  font-weight: 500;
  padding: 0.25rem 0;
  text-decoration: none;
  transition: color var(--xlx-duration-2) var(--xlx-ease);
}
.xlx-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--xlx-brand);
  transition: width var(--xlx-duration-2) var(--xlx-ease);
}
.xlx-nav-link:hover { color: var(--xlx-fg); }
.xlx-nav-link:hover::after,
.xlx-nav-link.is-active::after { width: 100%; }
.xlx-nav-link.is-active { color: var(--xlx-fg); }

/* ============================== Container =============================== */
.xlx-container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--xlx-space-4);
  padding-right: var(--xlx-space-4);
}
@media (min-width: 640px) {
  .xlx-container { padding-left: var(--xlx-space-6); padding-right: var(--xlx-space-6); }
}
@media (min-width: 1024px) {
  .xlx-container { padding-left: var(--xlx-space-8); padding-right: var(--xlx-space-8); }
}
.xlx-container-sm { max-width: 42rem; }
.xlx-container-md { max-width: 56rem; }
.xlx-container-lg { max-width: 72rem; }
.xlx-container-xl { max-width: 80rem; }

/* ============================== Divider ================================= */
.xlx-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--xlx-border) 50%, transparent 100%);
  border: 0;
  margin: var(--xlx-space-8) 0;
}

/* ============================== Kbd ===================================== */
.xlx-kbd {
  display: inline-block;
  font-family: var(--xlx-font-mono);
  font-size: 0.8em;
  padding: 0.125rem 0.375rem;
  background-color: var(--xlx-surface);
  border: 1px solid var(--xlx-border);
  border-bottom-width: 2px;
  border-radius: var(--xlx-radius-sm);
  color: var(--xlx-fg-1);
}

/* =================== Spin animation utility ============================== */
.xlx-spin {
  animation: xlx-spin 1s linear infinite;
}

@keyframes xlx-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .xlx-spin { animation: none; }
}

/* =================== Focus-ring helper for any element ================== */
.xlx-focusable:focus-visible {
  outline: none;
  box-shadow: var(--xlx-ring);
  border-radius: var(--xlx-radius-md);
}
html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--xlx-font-sans);
  color: var(--xlx-fg);
  background-color: var(--xlx-bg);
  /* A word moves to the next line before it breaks; only a string too long for any line breaks inside. */
  overflow-wrap: break-word;
}

button,
input,
select,
textarea {
  font: inherit;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--xlx-brand);
  outline-offset: 2px;
}

/* colors_and_type.css colors every link inside .xlx (.xlx a, specificity 0,1,1), which outranks the button and nav
   classes (0,1,0) when they are applied to <a>. Restore each variant's own colors for links. */
.xlx a.xlx-btn-primary,
.xlx a.xlx-btn-primary:hover {
  color: var(--xlx-brand-ink);
}

.xlx a.xlx-btn-secondary {
  color: var(--xlx-brand);
}

.xlx a.xlx-btn-ghost,
.xlx a.xlx-nav-link {
  color: var(--xlx-fg-2);
}

.xlx a.xlx-btn-ghost:hover,
.xlx a.xlx-nav-link:hover,
.xlx a.xlx-nav-link.active {
  color: var(--xlx-fg);
}

/* All motion respects the visitor's reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}