/* Fonts — ALL self-hosted from the embedded theme/fonts/ pool (served at
   /_hyperbob9/theme/fonts/ — buildThemeCSS rewrites the /_hyperbob9/theme/fonts/ urls).
   No page ever contacts fonts.googleapis.com: a pre-auth login page must not
   phone a third party, and brand rendering must not depend on egress.

   The generated section declares the UI mono (IBM Plex Mono), the logo lockup
   faces (Bitcount Grid Double + the raised Teko "9" — shell.css and authpage.go
   reference the families but do not declare them), and the theme-picker preset
   fonts, with Google's unicode-range subsetting preserved verbatim so browsers
   still download only the subsets a page renders. Regenerate with
   ops/mirror-google-fonts.py; app-only families live in fonts-pool.css. */

/* BEGIN GENERATED FONTS — ops/mirror-google-fonts.py; do not edit by hand */
/* IBM Plex Mono — cyrillic-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w400-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Mono — cyrillic */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w400-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Mono — vietnamese */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w400-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Mono — latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w400-latin-ext.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;
}
/* IBM Plex Mono — latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w400-latin.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;
}
/* IBM Plex Mono — cyrillic-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w500-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Mono — cyrillic */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w500-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Mono — vietnamese */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w500-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Mono — latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w500-latin-ext.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;
}
/* IBM Plex Mono — latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w500-latin.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;
}
/* IBM Plex Mono — cyrillic-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w600-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Mono — cyrillic */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w600-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Mono — vietnamese */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w600-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Mono — latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w600-latin-ext.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;
}
/* IBM Plex Mono — latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/ibm-plex-mono-w600-latin.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;
}
/* Bitcount Grid Double — latin-ext */
@font-face {
  font-family: "Bitcount Grid Double";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/bitcount-grid-double-w400-latin-ext.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;
}
/* Bitcount Grid Double — latin */
@font-face {
  font-family: "Bitcount Grid Double";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/bitcount-grid-double-w400-latin.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;
}
/* Bitcount Grid Double — latin-ext */
@font-face {
  font-family: "Bitcount Grid Double";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/bitcount-grid-double-w700-latin-ext.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;
}
/* Bitcount Grid Double — latin */
@font-face {
  font-family: "Bitcount Grid Double";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/bitcount-grid-double-w700-latin.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;
}
/* Teko — devanagari */
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/teko-w400-devanagari.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* Teko — latin-ext */
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/teko-w400-latin-ext.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;
}
/* Teko — latin */
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/teko-w400-latin.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;
}
/* Teko — devanagari */
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/teko-w700-devanagari.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* Teko — latin-ext */
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/teko-w700-latin-ext.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;
}
/* Teko — latin */
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/teko-w700-latin.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;
}
/* Architects Daughter — latin-ext */
@font-face {
  font-family: "Architects Daughter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/architects-daughter-w400-latin-ext.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;
}
/* Architects Daughter — latin */
@font-face {
  font-family: "Architects Daughter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/architects-daughter-w400-latin.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;
}
/* Comic Neue — latin */
@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/comic-neue-w400-latin.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;
}
/* Comic Neue — latin */
@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/comic-neue-w700-latin.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;
}
/* IM Fell English — latin */
@font-face {
  font-family: "IM Fell English";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/im-fell-english-w400i-latin.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;
}
/* IM Fell English — latin */
@font-face {
  font-family: "IM Fell English";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/im-fell-english-w400-latin.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;
}
/* La Belle Aurore — latin-ext */
@font-face {
  font-family: "La Belle Aurore";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/la-belle-aurore-w400-latin-ext.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;
}
/* La Belle Aurore — latin */
@font-face {
  font-family: "La Belle Aurore";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/la-belle-aurore-w400-latin.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;
}
/* Montserrat — cyrillic-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w400-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Montserrat — cyrillic */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w400-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Montserrat — vietnamese */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w400-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Montserrat — latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w400-latin-ext.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;
}
/* Montserrat — latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w400-latin.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;
}
/* Montserrat — cyrillic-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w500-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Montserrat — cyrillic */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w500-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Montserrat — vietnamese */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w500-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Montserrat — latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w500-latin-ext.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;
}
/* Montserrat — latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w500-latin.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;
}
/* Montserrat — cyrillic-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w600-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Montserrat — cyrillic */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w600-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Montserrat — vietnamese */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w600-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Montserrat — latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w600-latin-ext.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;
}
/* Montserrat — latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/montserrat-w600-latin.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;
}
/* Orbitron — latin */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/orbitron-w400-latin.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;
}
/* Orbitron — latin */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/orbitron-w500-latin.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;
}
/* Orbitron — latin */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/orbitron-w600-latin.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;
}
/* Poppins — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w400-devanagari.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* Poppins — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w400-latin-ext.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;
}
/* Poppins — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w400-latin.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;
}
/* Poppins — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w500-devanagari.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* Poppins — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w500-latin-ext.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;
}
/* Poppins — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w500-latin.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;
}
/* Poppins — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w600-devanagari.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* Poppins — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w600-latin-ext.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;
}
/* Poppins — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w600-latin.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;
}
/* Poppins — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w700-devanagari.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* Poppins — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w700-latin-ext.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;
}
/* Poppins — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/poppins-w700-latin.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;
}
/* Shadows Into Light — latin-ext */
@font-face {
  font-family: "Shadows Into Light";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/shadows-into-light-w400-latin-ext.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;
}
/* Shadows Into Light — latin */
@font-face {
  font-family: "Shadows Into Light";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/shadows-into-light-w400-latin.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;
}
/* Space Grotesk — vietnamese */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w400-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Space Grotesk — latin-ext */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w400-latin-ext.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;
}
/* Space Grotesk — latin */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w400-latin.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;
}
/* Space Grotesk — vietnamese */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w500-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Space Grotesk — latin-ext */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w500-latin-ext.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;
}
/* Space Grotesk — latin */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w500-latin.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;
}
/* Space Grotesk — vietnamese */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w600-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Space Grotesk — latin-ext */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w600-latin-ext.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;
}
/* Space Grotesk — latin */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w600-latin.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;
}
/* Space Grotesk — vietnamese */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w700-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Space Grotesk — latin-ext */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w700-latin-ext.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;
}
/* Space Grotesk — latin */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/space-grotesk-w700-latin.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;
}
/* Uncial Antiqua — latin-ext */
@font-face {
  font-family: "Uncial Antiqua";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/uncial-antiqua-w400-latin-ext.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;
}
/* Uncial Antiqua — latin */
@font-face {
  font-family: "Uncial Antiqua";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/uncial-antiqua-w400-latin.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;
}
/* UnifrakturMaguntia — latin */
@font-face {
  font-family: "UnifrakturMaguntia";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_hyperbob9/theme/fonts/unifrakturmaguntia-w400-latin.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;
}
/* END GENERATED FONTS */

@font-face {
  font-family: "ChicagoFLF";
  src: url("/_hyperbob9/theme/fonts/ChicagoFLF.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ChicagoFLF";
  src: url("/_hyperbob9/theme/fonts/ChicagoFLF.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ChicagoFLF";
  src: url("/_hyperbob9/theme/fonts/ChicagoFLF.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ChicagoFLF";
  src: url("/_hyperbob9/theme/fonts/ChicagoFLF.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Alias to match UI label. */
@font-face {
  font-family: "Chicago FLF";
  src: url("/_hyperbob9/theme/fonts/ChicagoFLF.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chicago FLF";
  src: url("/_hyperbob9/theme/fonts/ChicagoFLF.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chicago FLF";
  src: url("/_hyperbob9/theme/fonts/ChicagoFLF.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chicago FLF";
  src: url("/_hyperbob9/theme/fonts/ChicagoFLF.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Times New Roman";
  src: url("/_hyperbob9/theme/fonts/TimesNewRoman-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Times New Roman";
  src: url("/_hyperbob9/theme/fonts/TimesNewRoman-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Times New Roman";
  src: url("/_hyperbob9/theme/fonts/TimesNewRoman-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Times New Roman";
  src: url("/_hyperbob9/theme/fonts/TimesNewRoman-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Garamond";
  src: url("/_hyperbob9/theme/fonts/Garamond-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Garamond";
  src: url("/_hyperbob9/theme/fonts/Garamond-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Garamond";
  src: url("/_hyperbob9/theme/fonts/Garamond-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Garamond";
  src: url("/_hyperbob9/theme/fonts/Garamond-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Design tokens (colors, typography, layout, radius) */

:root {
  /* -----------------------------------------------------------------------
     Color constants (use vars everywhere; no raw literals in component CSS)
     -------------------------------------------------------------------- */
  --hb-transparent: transparent;
  --hb-color-black: #000;
  --hb-color-white: #fff;
  /* Used for “text on accent” buttons (keeps contrast consistent in both themes). */
  --hb-color-ink-on-accent: #0a0a0a;

  /* -----------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------- */
  --hb-font-system: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --hb-font-times: "Times New Roman", Times, serif;
  --hb-font-comic: "Comic Sans MS", "Comic Sans", "Comic Neue", cursive, var(--hb-font-system);
  --hb-font-architectsdaughter: "Architects Daughter", cursive, var(--hb-font-system);
  /* If installed locally, this will pick it up. To bundle it, add an @font-face in 00-fonts.css. */
  --hb-font-chicagoflf: "Chicago FLF", "ChicagoFLF", "Chicago", var(--hb-font-system);
  --hb-font-orbitron: "Orbitron", var(--hb-font-system);
  /* Google Fonts uses UnifrakturMaguntia; expose it under the UI label “UltraFraktur”. */
  --hb-font-ultrafraktur: "UnifrakturMaguntia", "UnifrakturCook", serif;
  --hb-font-uncial: "Uncial Antiqua", serif;
  --hb-font-imfell: "IM Fell English", "IM FELL English", serif;
  --hb-font-shadowsintolight: "Shadows Into Light", cursive, var(--hb-font-system);
  --hb-font-labelleaurore: "La Belle Aurore", cursive, var(--hb-font-system);
  --hb-font-montserrat: "Montserrat", var(--hb-font-system);
  --hb-font-poppins: "Poppins", var(--hb-font-system);
  --hb-font-spacegrotesk: "Space Grotesk", var(--hb-font-system);

  /* Font weight tokens (let specific fonts downshift heavy weights). */
  --hb-weight-regular: 400;
  --hb-weight-medium: 500;
  --hb-weight-semibold: 600;

  /* User-configurable UI font size (px number, applied to `body`). */
  --hb-font-size-px: 14;

  /* Font-face-specific visual scaling.
     Some display/script faces render noticeably smaller at the same `font-size`.
     This multiplier scales text only (icons/layout still key off `rem` + `--hb-font-size-px`). */
  --hb-font-face-scale: 1;

  /* Normalize perceived font size across faces (x-height normalization).
     Tuned to roughly match system UI fonts at typical sizes. */
  --hb-font-size-adjust: 0.52;

  /* Equalised UI TEXT size (unitless px number) = user size × per-face optical scale.
     Use this for any explicit `font-size` on themed UI TEXT so display faces
     (handwriting/blackletter, --hb-font-face-scale > 1) reach the same optical size
     as `body`. Keep the RAW --hb-font-size-px for fixed layout metrics (bar heights,
     padding, icon boxes) so geometry stays stable across face scaling.
     Pattern: `font-size: calc(var(--hb-font-size-ui) * <ratio> * 1px)`. */
  --hb-font-size-ui: calc(var(--hb-font-size-px) * var(--hb-font-face-scale));

  /* Shared icon sizing (scales with UI font size, but does NOT depend on local `font-size`).
     Some icon containers set `font-size: 0` to hide fallback glyphs; using `em` would collapse to 0px. */
  /* Chevron sizing (dropdown + tree + folds).
     Slightly larger than the raw Notion 10px-on-14px ratio so the stroke-only SVG chevrons
     stay crisp and legible across browsers. Cap to keep them fitting in fixed bars. */
  --hb-chevron-size: min(calc(var(--hb-font-size-px) * 0.8571px), 1.1429rem);
  /* Icon buttons should scale with font size, but must still fit inside fixed-height
     bars (topbar/tab bars use stable `rem` to prevent layout reflow). */
  --hb-icon-button-size: min(calc(var(--hb-font-size-px) * 2px), 2.2857rem);
  --hb-icon-size: min(calc(var(--hb-font-size-px) * 1.1429px), 1.4286rem);
  --hb-shell-agent-topbar-height: 2.4286rem;

  /* Shared menu/list row sizing (dropdowns, history list). */
  /* IMPORTANT: menu geometry must be stable across per-font face scaling.
     These sizes follow the user-selected UI size (`--hb-font-size-px`) but NOT `--hb-font-face-scale`. */
  --hb-menu-row-height: calc(var(--hb-font-size-px) * 1.5714px);
  /* Menu items follow the global UI font size (body). */
  --hb-menu-row-font-size: 1em;
  /* Keep text vertically compact inside fixed-height rows. */
  --hb-menu-row-line-height: 1;
  --hb-menu-row-radius: calc(var(--hb-font-size-px) * 0.3357px);
  --hb-menu-row-pad-x: calc(var(--hb-font-size-px) * 0.45px);
  --hb-menu-row-gap: calc(var(--hb-font-size-px) * 0.45px);
  --hb-dropdown-trigger-height: calc(var(--hb-font-size-px) * 2px);
  --hb-dropdown-trigger-radius: calc(var(--hb-font-size-px) * 0.2857px);
  --hb-dropdown-trigger-pad-x: calc(var(--hb-font-size-px) * 0.4286px);
  --hb-dropdown-trigger-pad-y: calc(var(--hb-font-size-px) * 0.2857px);
  --hb-dropdown-context-row-height: calc(var(--hb-font-size-px) * 1.7143px);
  --hb-dropdown-context-icon-size: calc(var(--hb-font-size-px) * 1px);
  /* Popup menu widths scale with the selected UI font size. Use a font-size-derived
     character proxy instead of `ch` so fonts with unusual digit widths do not change
     the menu geometry independently of the theme size control. */
  --hb-dropdown-width-unit: calc(var(--hb-font-size-px) * 0.5714px);
  --hb-dropdown-width-sm: calc(var(--hb-dropdown-width-unit) * 12);
  --hb-dropdown-width-md: calc(var(--hb-dropdown-width-unit) * 20);
  --hb-dropdown-width-lg: calc(var(--hb-dropdown-width-unit) * 34);
  --hb-dropdown-width-xl: calc(var(--hb-dropdown-width-unit) * 80);
  --hb-dropdown-context-min-width: calc(var(--hb-font-size-px) * 10px);
  --hb-dropdown-context-wide-min-width: calc(var(--hb-font-size-px) * 11px);
  /* Tick size must match the current UI font size (including any per-face scaling) so all dropdowns
     render identical tickmarks across browsers and across the 3 scaled fonts. */
  --hb-menu-row-tick-font-size: 1em;
  /* Minimum whitespace between the end of the row content and the ✓. */
  --hb-menu-row-tick-gap: 10px;
  /* Distance from the right edge to the ✓. */
  --hb-menu-row-tick-inset: 0.75em;
  /* Total padding-right reserved for the ✓ (glyph + gap + inset). */
  --hb-menu-row-tick-reserve: calc(var(--hb-menu-row-tick-font-size) + var(--hb-menu-row-tick-gap) + var(--hb-menu-row-tick-inset));

  /* Menu/list active background. */
  --hb-menu-row-active-bg: var(--hb-ui-contrast-active-bg);

  /* -----------------------------------------------------------------------
     Shared button highlight tokens (must follow selected theme palette)
     -------------------------------------------------------------------- */
  /* Active/selected button highlights (topbar toggles, etc). */
  --hb-ui-active-border: color-mix(in srgb, var(--hb-theme-button-highlight-color) 26%, var(--hb-theme-bg));
  --hb-ui-active-fg: var(--hb-theme-button-highlight-color);

  /* Active/selected “object” highlights (doc rows, etc). */
  --hb-ui-object-bg: var(--hb-ui-active-bg);
  --hb-ui-object-border: color-mix(in srgb, var(--hb-theme-object-highlight-color) 18%, var(--hb-theme-bg));
  --hb-ui-object-fg: var(--hb-theme-object-highlight-color);

  /* Shared “details” sizing (tool args/results, type pills). */
  --hb-detail-font-size: 0.72em;

  /* Shared timestamp styling (agent + history). */
  --hb-message-timestamp-font-size: 0.85em;
  --hb-message-timestamp-line-height: 0.9em;

  --font-sans: var(--hb-font-system);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Mono fonts render visually larger than sans at the same px size; scale them down
     so mixed mono/sans UI feels optically consistent. */
  --hb-mono-scale: 0.85;
  /* Monospace should track the selected UI base size, but must not inherit per-font face scaling. */
  --hb-mono-font-size: calc(var(--hb-font-size-px) * var(--hb-mono-scale) * 1px);

  /* Legacy alias used by some agent styles. */
  --font-family: var(--font-mono);

  /* -----------------------------------------------------------------------
     Layout + motion
     -------------------------------------------------------------------- */
  --sidebar-width: 15.7143rem; /* 220px @ 14px base */
  --theme-transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;

  /* -----------------------------------------------------------------------
     Radius scale (use these; avoid ad-hoc values)
     -------------------------------------------------------------------- */
  --radius-2xs: 0.1429rem; /* 2px */
  --radius-xs: 0.2143rem;  /* 3px */
  --radius-sm: 0.2857rem;  /* 4px */
  --radius-md: 0.4286rem;  /* 6px */
  --radius-lg: 0.5714rem;  /* 8px */
  --radius-xl: 0.7143rem;  /* 10px */
  --radius-2xl: 0.8571rem; /* 12px */
  --radius-pill: 9999px;

  /* -----------------------------------------------------------------------
     Scrollbars
     -------------------------------------------------------------------- */
  /* HALF the classic width — the platform-wide scrollbar default for every
     themed app (02-base.css applies it globally with !important). */
  --scrollbar-size: 0.5rem;
  --scrollbar-track: var(--hb-transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--text-primary) 22%, var(--hb-transparent));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--text-primary) 32%, var(--hb-transparent));
  --scrollbar-corner: var(--hb-transparent);

  /* -----------------------------------------------------------------------
     Theme palette (semantic)

     THEMES MUST DEFINE ONLY THESE BASE COLORS:
       - --hb-theme-bg
       - --hb-theme-contrast-bg
       - --hb-theme-bg-highlight
       - --hb-theme-ink
       - --hb-theme-contrast-ink
       - --hb-theme-ink-deactivated
       - --hb-theme-ink-highlight
       - --hb-theme-accent

     Per-theme status colors (not shown in swatches):
       - --hb-theme-success
       - --hb-theme-warning
     -------------------------------------------------------------------- */
  --hb-theme-bg: #fbfbfc;
  --hb-theme-contrast-bg: #f3f4f6;
  --hb-theme-ink: #111827;
  --hb-theme-contrast-ink: #111827;
  --hb-theme-ink-deactivated: #6b7280;
  /* Classic Light highlight green (active/selected text + tint source). */
  --hb-theme-ink-highlight: #22c55e;
  --hb-theme-accent: #10b981;
  /* Background of highlighted rows/selected pills; explicit so it can stay pleasant even when `ink-highlight` is dark. */
  --hb-theme-bg-highlight: color-mix(in srgb, var(--hb-theme-ink-highlight) 14%, var(--hb-theme-bg));

  --hb-theme-success: #16a34a;
  --hb-theme-warning: #f59e0b;

  /* Legacy aliases (derived from the theme palette). */
  --hb-color-bg: var(--hb-theme-bg);
  --hb-color-contrast-bg: var(--hb-theme-contrast-bg);
  --hb-color-ink: var(--hb-theme-ink);
  --hb-color-contrast-ink: var(--hb-theme-contrast-ink);
  --hb-color-ink-deactivated: var(--hb-theme-ink-deactivated);
  --hb-color-ink-highlight: var(--hb-theme-ink-highlight);
  --hb-color-accent: var(--hb-theme-accent);
  --hb-color-accent-2: color-mix(in srgb, var(--hb-theme-accent) 55%, var(--hb-theme-ink-highlight));
  --hb-color-success: var(--hb-theme-success);
  --hb-color-warning: var(--hb-theme-warning);
  /* Use a single theme status color for all danger/warning/error states. */
  --hb-color-danger: var(--hb-theme-warning);

  /* Drives native form controls + scrollbar treatment in Safari. */
  --hb-color-scheme: light;
  --hb-theme-stroke: var(--hb-theme-ink);

  /* Interaction ink sources. */
  --hb-theme-button-highlight-color: var(--hb-theme-ink-highlight);
  --hb-theme-object-highlight-color: var(--hb-theme-ink-highlight);

  /* Agent submit should be the primary accent by default. */
  --hb-theme-agent-submit: var(--hb-theme-accent);
  /* Inside the submit button, use the theme background (not ink) for the icon/fg. */
  --hb-theme-agent-submit-fg: var(--hb-theme-bg);
  --hb-theme-agent-submit-hover: color-mix(in srgb, var(--hb-theme-agent-submit) 86%, var(--hb-color-black) 14%);

  /* Derived interaction backgrounds (all highlightable elements should use these). */
  --hb-ui-active-bg: var(--hb-theme-bg-highlight);
  --hb-ui-hover-bg: color-mix(in srgb, var(--hb-ui-active-bg) 72%, var(--hb-theme-bg));
  --hb-ui-pressed-bg: color-mix(in srgb, var(--hb-ui-active-bg) 86%, var(--hb-theme-bg));

  /* Derived interaction backgrounds against contrast surfaces (dropdowns, inputs, etc). */
  --hb-ui-contrast-hover-bg: color-mix(in srgb, var(--hb-ui-active-bg) 72%, var(--hb-theme-contrast-bg));
  --hb-ui-contrast-active-bg: color-mix(in srgb, var(--hb-ui-active-bg) 86%, var(--hb-theme-contrast-bg));
  --hb-ui-contrast-pressed-bg: color-mix(in srgb, var(--hb-ui-active-bg) 94%, var(--hb-theme-contrast-bg));

  /* Derived shell surfaces */
  --bg-app: var(--hb-theme-bg);
  --bg-panel: var(--hb-theme-bg);
  --bg-sidebar: var(--hb-theme-bg);
  --bg-row: var(--hb-ui-hover-bg);
  --bg-row-hover: var(--hb-ui-active-bg);
  --bg-input: var(--hb-theme-contrast-bg);

  --bg-hover: var(--bg-row-hover);
  --bg-secondary: var(--hb-theme-contrast-bg);

  /* Derived text */
  --text-primary: var(--hb-theme-ink);
  --text-secondary: var(--hb-theme-ink-deactivated);
  --text-muted: var(--hb-theme-ink-deactivated);
  --text-label: color-mix(in srgb, var(--hb-theme-ink-deactivated) 72%, var(--hb-theme-bg) 28%);
  --text-tertiary: var(--text-muted);
  --text-disabled: color-mix(in srgb, var(--text-label) 82%, var(--hb-theme-bg) 18%);

  /* Derived accent */
  --accent: var(--hb-theme-accent);
  --accent-bright: color-mix(in srgb, var(--hb-theme-accent) 55%, var(--hb-theme-ink-highlight));
  --accent-bg: var(--hb-ui-hover-bg);

  /* Derived borders */
  --border: color-mix(in srgb, var(--hb-theme-ink) 18%, var(--hb-transparent));
  --border-strong: color-mix(in srgb, var(--hb-theme-ink) 28%, var(--hb-transparent));

  /* Native <select> chevron (SVG buttons use inline icons).
     Cannot be expressed with CSS vars inside the SVG, so we swap it by scheme. */
  --hb-topbar-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9a97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* -----------------------------------------------------------------------
     Highlight/status colors (allowed: do not need to come from palette)
     -------------------------------------------------------------------- */
  --success: var(--hb-color-success);
  --warning: var(--hb-theme-warning);
  --error: var(--hb-theme-warning);
  --info: var(--hb-color-ink-highlight);

  /* Markdown code styling (theme-aware) */
  /* Inline code is a “highlight”, not an error/warning. */
  --code-inline-bg: color-mix(in srgb, var(--hb-theme-ink-highlight) 14%, var(--bg-panel));
  --code-inline-text: color-mix(in srgb, var(--hb-theme-ink-highlight) 82%, var(--text-primary) 18%);
  --code-block-bg: color-mix(in srgb, var(--text-primary) 6%, var(--bg-panel));
  --code-block-text: var(--text-primary);
  --code-block-border: var(--hb-transparent);

  /* Text selection (must use theme palette; contrast surfaces get overridden by panes). */
  --hb-selection-bg: color-mix(in srgb, var(--hb-theme-ink-highlight) 26%, var(--bg-panel));
  --hb-selection-bg-contrast: color-mix(in srgb, var(--hb-theme-ink-highlight) 26%, var(--hb-color-contrast-bg));
  --hb-selection-ink: var(--text-primary);

  /* Source (Highlight.js) token colors (theme-derived only; no fixed literals).
     Surfaces + ink can be overridden per-pane (Tree/Source use contrast). */
  --hb-hljs-surface: var(--bg-panel);
  --hb-hljs-ink: var(--text-primary);
  --hb-hljs-fg: var(--hb-hljs-ink);
  --hb-hljs-muted: color-mix(in srgb, var(--hb-hljs-ink) 60%, var(--hb-hljs-surface));
  --hb-hljs-comment: color-mix(in srgb, var(--hb-hljs-ink) 45%, var(--hb-hljs-surface));

  --hb-hljs-keyword: color-mix(in srgb, var(--hb-theme-ink-highlight) 90%, var(--hb-hljs-ink) 10%);
  --hb-hljs-attr: color-mix(in srgb, var(--accent) 78%, var(--hb-hljs-ink) 22%);
  --hb-hljs-string: color-mix(in srgb, var(--accent) 76%, var(--hb-hljs-ink) 24%);
  --hb-hljs-number: color-mix(in srgb, var(--warning) 80%, var(--hb-hljs-ink) 20%);
  --hb-hljs-literal: color-mix(in srgb, var(--success) 78%, var(--hb-hljs-ink) 22%);
  --hb-hljs-built_in: color-mix(in srgb, var(--accent) 55%, var(--hb-theme-ink-highlight));
  --hb-hljs-title: color-mix(in srgb, var(--hb-theme-ink-highlight) 55%, var(--accent));
  --hb-hljs-tag: color-mix(in srgb, var(--hb-theme-ink-highlight) 70%, var(--hb-hljs-ink) 30%);
  --hb-hljs-regexp: color-mix(in srgb, var(--error) 80%, var(--hb-hljs-ink) 20%);

  --hb-hljs-params: color-mix(in srgb, var(--hb-hljs-fg) 88%, var(--hb-hljs-muted) 12%);
  --hb-hljs-subst: var(--hb-hljs-fg);
  --hb-hljs-addition: var(--success);
  --hb-hljs-deletion: var(--error);
  --hb-hljs-bg-addition: color-mix(in srgb, var(--success) 14%, var(--hb-hljs-surface));
  --hb-hljs-bg-deletion: color-mix(in srgb, var(--error) 12%, var(--hb-hljs-surface));
  --hb-hljs-key-schema: color-mix(in srgb, var(--hb-hljs-attr) 82%, var(--hb-hljs-keyword) 18%);
  --hb-hljs-key-form: color-mix(in srgb, var(--hb-hljs-keyword) 72%, var(--hb-hljs-attr) 28%);
  --hb-hljs-key-meta: color-mix(in srgb, var(--hb-hljs-muted) 92%, var(--hb-hljs-attr) 8%);
  /* Embedded JS/CSS-in-string highlight: solid tint (very light). */
  --hb-hljs-embed-bg: color-mix(in srgb, var(--hb-hljs-string) 10%, var(--hb-hljs-surface));
  --hb-hljs-embed-border: color-mix(in srgb, var(--hb-hljs-string) 18%, var(--border));
  --hb-hljs-embed-label-bg: color-mix(in srgb, var(--hb-hljs-string) 14%, var(--hb-hljs-surface));
  --hb-hljs-embed-label-fg: color-mix(in srgb, var(--hb-hljs-string) 70%, var(--hb-hljs-ink) 30%);

  /* -----------------------------------------------------------------------
     Theme preset swatches (for the Theme selector UI)
     -------------------------------------------------------------------- */
  /* NOTE: swatch UI renders:
     - capsule background = `bg`
     - capsule border = `ink`
     - 5 dots = `contrast-bg`, `bg-highlight`, `accent`, `ink-highlight`, `ink-deactivated` */

  --hb-preset-classic-light-bg: #fbfbfc;
  --hb-preset-classic-light-contrast-bg: #f3f4f6;
  --hb-preset-classic-light-bg-highlight: color-mix(in srgb, var(--hb-preset-classic-light-ink-highlight) 14%, var(--hb-preset-classic-light-bg));
  --hb-preset-classic-light-ink: #111827;
  --hb-preset-classic-light-contrast-ink: #111827;
  --hb-preset-classic-light-ink-deactivated: #6b7280;
  --hb-preset-classic-light-ink-highlight: #22c55e;
  --hb-preset-classic-light-accent: #10b981;
  --hb-preset-classic-light-success: #16a34a;
  --hb-preset-classic-light-warning: #f59e0b;

  /* Classic Dark: shift bg from near-black to deep navy. */
  --hb-preset-classic-dark-bg: #0b1a33;
  --hb-preset-classic-dark-contrast-bg: #0d203f;
  --hb-preset-classic-dark-bg-highlight: color-mix(in srgb, var(--hb-preset-classic-dark-ink-highlight) 14%, var(--hb-preset-classic-dark-bg));
  --hb-preset-classic-dark-ink: #e5e7eb;
  --hb-preset-classic-dark-contrast-ink: #e5e7eb;
  --hb-preset-classic-dark-ink-deactivated: #94a3b8;
  --hb-preset-classic-dark-ink-highlight: #60a5fa;
  --hb-preset-classic-dark-accent: #34d399;
  --hb-preset-classic-dark-success: #22c55e;
  --hb-preset-classic-dark-warning: #fbbf24;

  --hb-preset-happy-hues-17-bg: #fef6e4;
  /* Contrast surface: same hue as bg, just slightly darker. */
  --hb-preset-happy-hues-17-contrast-bg: #F7EFDE;
  --hb-preset-happy-hues-17-bg-highlight: color-mix(in srgb, var(--hb-preset-happy-hues-17-ink-highlight) 14%, var(--hb-preset-happy-hues-17-bg));
  --hb-preset-happy-hues-17-ink: #001858;
  --hb-preset-happy-hues-17-contrast-ink: #001858;
  --hb-preset-happy-hues-17-ink-deactivated: #3d4b7a;
  /* Highlight ink must be usable as both foreground (selected) and as a tint source. */
  --hb-preset-happy-hues-17-ink-highlight: #0f766e;
  /* Accent: keep the original pink but make it more muted/tasteful. */
  --hb-preset-happy-hues-17-accent: #C46D9D;
  --hb-preset-happy-hues-17-success: #2cb67d;
  --hb-preset-happy-hues-17-warning: #f97316;

  --hb-preset-happy-hues-10-bg: #004643;
  --hb-preset-happy-hues-10-contrast-bg: #003c3a;
  --hb-preset-happy-hues-10-bg-highlight: color-mix(in srgb, var(--hb-preset-happy-hues-10-ink-highlight) 14%, var(--hb-preset-happy-hues-10-bg));
  --hb-preset-happy-hues-10-ink: #fffffe;
  --hb-preset-happy-hues-10-contrast-ink: #fffffe;
  --hb-preset-happy-hues-10-ink-deactivated: #abd1c6;
  --hb-preset-happy-hues-10-ink-highlight: #f9bc60;
  --hb-preset-happy-hues-10-accent: #e16162;
  --hb-preset-happy-hues-10-success: #2cb67d;
  --hb-preset-happy-hues-10-warning: #f9bc60;

  /* HyperBob landing palette (use exact colors).
     Source: `hyperbob_server/docs/hyperbob_landing.json` CSS.
     - bg: #A8626C
     - ink: #843245 (landing title ink; too low-contrast for dense app UI)
     - paper: #E8E0D4 (landing input “paper”)
     - brass: #C9B99A
     - black: #1A1A1A */
  --hb-preset-happy-hues-4-bg: #A8626C;
  /* Contrast surface: subtle shade variation (avoid the light “paper” look, keep text readable). */
  --hb-preset-happy-hues-4-contrast-bg: #8F5761;
  /* Highlight background: slightly stronger tint so active rows read clearly. */
  --hb-preset-happy-hues-4-bg-highlight: color-mix(in srgb, var(--hb-preset-happy-hues-4-ink-highlight) 18%, var(--hb-preset-happy-hues-4-bg));
  /* Dense app UI needs higher contrast than the landing hero: use a light ink on the dark bg. */
  --hb-preset-happy-hues-4-ink: #F7EEE8;
  /* Contrast surfaces in this theme are still dark; use light ink. */
  --hb-preset-happy-hues-4-contrast-ink: #F7EEE8;
  /* Deactivated ink: lighter for readability on the dark rose bg. */
  --hb-preset-happy-hues-4-ink-deactivated: #E3CDD1;
  /* Highlight ink: use the landing “brass” (avoid the garish green). */
  --hb-preset-happy-hues-4-ink-highlight: #C9B99A;
  /* Accent: landing “paper” (primary actions like submit). */
  --hb-preset-happy-hues-4-accent: #E8E0D4;
  --hb-preset-happy-hues-4-success: #55FFB6;
  /* Warning: muted apricot so it doesn't clash against the rose background. */
  --hb-preset-happy-hues-4-warning: #FFCC66;

  /* -----------------------------------------------------------------------
     Shared interaction + elevation tokens
     -------------------------------------------------------------------- */
  --hb-focus-ring: color-mix(in srgb, var(--hb-theme-ink-highlight) 55%, var(--hb-transparent));
  --hb-focus-ring-strong: color-mix(in srgb, var(--hb-theme-ink-highlight) 65%, var(--hb-transparent));
  --hb-focus-ring-danger: color-mix(in srgb, var(--error) 65%, var(--hb-transparent));
  --hb-disabled-bg: color-mix(in srgb, var(--border-strong) 55%, var(--bg-panel));
  --hb-accent-hover: color-mix(in srgb, var(--accent) 70%, var(--hb-color-black) 30%);
  --hb-success-hover: color-mix(in srgb, var(--success) 85%, var(--hb-color-black) 15%);
  --hb-error-hover: color-mix(in srgb, var(--error) 85%, var(--hb-color-black) 15%);

  /* Popover/menu shadow (used for dropdowns, etc). */
  --hb-shadow-popover:
    color-mix(in srgb, var(--hb-color-black) 5%, var(--hb-transparent)) 0 0 0 0.0714rem,
    color-mix(in srgb, var(--hb-color-black) 10%, var(--hb-transparent)) 0 0.2143rem 0.4286rem,
    color-mix(in srgb, var(--hb-color-black) 20%, var(--hb-transparent)) 0 0.6429rem 1.7143rem;
  --hb-shadow-soft: 0 0.2857rem 0.8571rem color-mix(in srgb, var(--hb-color-black) 50%, var(--hb-transparent));

  /* Agent scroll fade overlay (embedded agent UI). */
  --hb-agent-scroll-fade-bg: linear-gradient(
    to top,
    var(--bg-panel) 0%,
    color-mix(in srgb, var(--bg-panel) 92%, var(--hb-transparent)) 30%,
    color-mix(in srgb, var(--bg-panel) 70%, var(--hb-transparent)) 55%,
    color-mix(in srgb, var(--bg-panel) 35%, var(--hb-transparent)) 78%,
    var(--hb-transparent) 100%
  );

  /* -----------------------------------------------------------------------
     Tree view palette (type pills + meta cards)
     -------------------------------------------------------------------- */
  /* Tree type accents must be derived from the semantic palette (no fixed literals). */
  --hb-tree-type-object: var(--hb-color-accent-2);
  --hb-tree-type-array: var(--hb-color-ink-highlight);
  --hb-tree-type-string: var(--hb-color-accent);
  --hb-tree-type-number: var(--hb-color-warning);
  --hb-tree-type-boolean: var(--hb-color-success);
  --hb-tree-type-null: var(--hb-color-ink-deactivated);
  --hb-tree-type-enum: color-mix(in srgb, var(--hb-color-accent-2) 55%, var(--hb-color-accent));

  --hb-tree-type-object-bg: color-mix(in srgb, var(--hb-tree-type-object) 18%, var(--hb-transparent));
  --hb-tree-type-object-border: color-mix(in srgb, var(--hb-tree-type-object) 25%, var(--hb-transparent));

  --hb-tree-type-array-bg: color-mix(in srgb, var(--hb-tree-type-array) 18%, var(--hb-transparent));
  --hb-tree-type-array-border: color-mix(in srgb, var(--hb-tree-type-array) 25%, var(--hb-transparent));

  --hb-tree-type-string-bg: color-mix(in srgb, var(--hb-tree-type-string) 15%, var(--hb-transparent));
  --hb-tree-type-string-border: color-mix(in srgb, var(--hb-tree-type-string) 22%, var(--hb-transparent));

  --hb-tree-type-number-bg: color-mix(in srgb, var(--hb-tree-type-number) 15%, var(--hb-transparent));
  --hb-tree-type-number-border: color-mix(in srgb, var(--hb-tree-type-number) 22%, var(--hb-transparent));

  --hb-tree-type-boolean-bg: color-mix(in srgb, var(--hb-tree-type-boolean) 15%, var(--hb-transparent));
  --hb-tree-type-boolean-border: color-mix(in srgb, var(--hb-tree-type-boolean) 22%, var(--hb-transparent));

  --hb-tree-type-null-bg: color-mix(in srgb, var(--hb-tree-type-null) 12%, var(--hb-transparent));
  --hb-tree-type-null-border: color-mix(in srgb, var(--hb-tree-type-null) 20%, var(--hb-transparent));

  --hb-tree-type-enum-bg: color-mix(in srgb, var(--hb-tree-type-enum) 15%, var(--hb-transparent));
  --hb-tree-type-enum-border: color-mix(in srgb, var(--hb-tree-type-enum) 22%, var(--hb-transparent));

  --hb-tree-danger-fg: color-mix(in srgb, var(--error) 60%, var(--hb-transparent));
  --hb-tree-danger-bg: color-mix(in srgb, var(--error) 10%, var(--hb-transparent));

  --hb-tree-meta-bg: color-mix(in srgb, var(--hb-tree-type-object) 4%, var(--hb-transparent));
  --hb-tree-meta-border: color-mix(in srgb, var(--hb-tree-type-object) 12%, var(--hb-transparent));

  --hb-tree-meta-code-fg: color-mix(in srgb, var(--hb-color-ink-highlight) 65%, var(--hb-color-accent-2) 35%);
  --hb-tree-meta-code-bg: color-mix(in srgb, var(--hb-tree-meta-code-fg) 10%, var(--hb-transparent));
  --hb-tree-meta-code-border: color-mix(in srgb, var(--hb-tree-meta-code-fg) 20%, var(--hb-transparent));

  --hb-tree-meta-path-bg: color-mix(in srgb, var(--accent) 12%, var(--hb-transparent));
  --hb-tree-meta-path-border: color-mix(in srgb, var(--accent) 25%, var(--hb-transparent));
  --hb-tree-meta-inline-bg: color-mix(in srgb, var(--hb-tree-type-number) 10%, var(--hb-transparent));
  --hb-tree-meta-inline-border: color-mix(in srgb, var(--hb-tree-type-number) 20%, var(--hb-transparent));

  --hb-tree-pre-bg: color-mix(in srgb, var(--hb-color-black) 30%, var(--hb-transparent));

  /* -----------------------------------------------------------------------
     Annotate + history palette (theme-aware)
     -------------------------------------------------------------------- */
  --hb-annotate-surface: var(--bg-panel);
  --hb-annotate-text: var(--text-primary);
  --hb-annotate-muted: var(--text-secondary);
  --hb-annotate-muted-2: var(--text-muted);
  --hb-annotate-border: color-mix(in srgb, var(--border) 80%, var(--hb-transparent));
  --hb-annotate-shadow:
    0 4px 24px color-mix(in srgb, var(--hb-color-black) 30%, var(--hb-transparent)),
    0 0 0 1px color-mix(in srgb, var(--text-primary) 10%, var(--hb-transparent));
  --hb-annotate-chip: color-mix(in srgb, var(--text-primary) 6%, var(--hb-transparent));
  --hb-annotate-chip-hover: color-mix(in srgb, var(--text-primary) 10%, var(--hb-transparent));

  /* Marker colors */
  --hb-annotate-marker-default: var(--hb-color-ink-highlight);
  --hb-annotate-marker-multi: var(--hb-color-success);
  --hb-annotate-marker-danger: var(--hb-color-danger);

  /* Scale annotate UI proportionally with the shell icon buttons / global font sizing.
     --hb-annotate-rem is the annotate layer's OWN rem base (the 14px design base the
     themed reset pins on <html>): the annotate UI overlays ARBITRARY app frames, and a
     non-themed app keeps its own root font-size, so a literal `rem` in annotate CSS
     would size the same pill differently per pane. Every annotate length that was
     authored in rem multiplies this token instead — one skin, identical in every pane. */
  --hb-annotate-rem: 14px;
  --hb-annotate-ui-scale: calc(var(--hb-font-size-px) / 14);
  --hb-annotate-control-size: calc(2 * var(--hb-annotate-rem) * var(--hb-annotate-ui-scale));
  --hb-annotate-toolbar-pad: calc(0.375 * var(--hb-annotate-rem) * var(--hb-annotate-ui-scale));
  --hb-annotate-toolbar-height: calc(var(--hb-annotate-control-size) + (var(--hb-annotate-toolbar-pad) * 2));
  --hb-annotate-toolbar-radius: calc(var(--hb-annotate-toolbar-height) / 2);
  --hb-annotate-icon-size: calc(1.1429 * var(--hb-annotate-rem) * 1.15 * var(--hb-annotate-ui-scale));
  --hb-annotate-settings-min-row: calc(24px * var(--hb-annotate-ui-scale));

  /* Agent panel palette (dark) */
  --agent-bg: var(--bg-app);
  --agent-surface: var(--hb-color-contrast-bg);
  --agent-border: color-mix(in srgb, var(--border) 80%, var(--hb-transparent));
  --agent-border-strong: var(--border-strong);
  --agent-text: var(--text-primary);
  --agent-text-secondary: var(--text-secondary);
  --agent-text-muted: var(--text-muted);
  --agent-accent: var(--accent);
  --agent-accent-hover: var(--hb-accent-hover);
  --agent-user-pill: var(--hb-color-contrast-bg);

  /* Agent floating controls (theme-aware) */
  /* Floating controls (scroll-to-bottom handle, etc).
     Must NOT use accent — use ink/bg so arrows can “punch through” consistently. */
  --agent-float-btn-bg: var(--hb-theme-ink);
  --agent-float-btn-fg: var(--hb-theme-bg);
  --agent-float-btn-border: color-mix(in srgb, var(--hb-theme-bg) 55%, var(--hb-transparent));
  --agent-float-btn-ring: var(--agent-border);
}

/* -------------------------------------------------------------------------
   Scheme-based overrides (not user-toggled; derived from selected theme)
   ---------------------------------------------------------------------- */
html[data-hb-scheme="dark"] {
  --hb-color-scheme: dark;
  --hb-theme-stroke: var(--hb-color-black);
  /* Native <select> chevron */
  --hb-topbar-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* Annotate shadow: a little heavier on dark backgrounds. */
  --hb-annotate-shadow:
    0 4px 24px color-mix(in srgb, var(--hb-color-black) 30%, var(--hb-transparent)),
    0 0 0 1px color-mix(in srgb, var(--text-primary) 10%, var(--hb-transparent));
}

html[data-hb-scheme="light"] {
  --hb-color-scheme: light;
  --hb-theme-stroke: var(--hb-theme-ink);
  /* Annotate shadow: match light elevation. */
  --hb-annotate-shadow:
    0 4px 24px color-mix(in srgb, var(--hb-color-black) 12%, var(--hb-transparent)),
    0 0 0 1px color-mix(in srgb, var(--hb-color-black) 6%, var(--hb-transparent));
}

/* -------------------------------------------------------------------------
   Theme presets (semantic palette)
   ---------------------------------------------------------------------- */
html[data-hb-theme="classic-light"] {
  /* PAPER pair (operator direction 2026-07-05, "follow the landing page"):
     paper = the theme's LIGHTEST NEUTRAL (its "card/paper" tone — ink in
     light-ink themes, bg in dark-ink themes), paper-ink = the opposite pole.
     Existing preset colors only; used by WM chrome for the active-tab card so
     it renders the landing-page cream-card look in every theme without
     per-theme forks in app CSS. */
  --hb-theme-paper: var(--hb-preset-classic-light-bg);
  --hb-theme-paper-ink: var(--hb-preset-classic-light-ink);
  --hb-theme-bg: var(--hb-preset-classic-light-bg);
  --hb-theme-contrast-bg: var(--hb-preset-classic-light-contrast-bg);
  --hb-theme-bg-highlight: var(--hb-preset-classic-light-bg-highlight);
  --hb-theme-ink: var(--hb-preset-classic-light-ink);
  --hb-theme-contrast-ink: var(--hb-preset-classic-light-contrast-ink);
  --hb-theme-ink-deactivated: var(--hb-preset-classic-light-ink-deactivated);
  /* ROLE REORDER (operator-approved 2026-07-05, colors unchanged): ink-highlight
     and success SWAPPED. The palette holds three near-identical greens; the old
     hover-text green (#22c55e) was ~2.2:1 on white — the darker #16a34a reads
     (~3.3:1) while the brighter green suits success badges. */
  --hb-theme-ink-highlight: var(--hb-preset-classic-light-success);
  --hb-theme-accent: var(--hb-preset-classic-light-accent);
  --hb-theme-success: var(--hb-preset-classic-light-ink-highlight);
  --hb-theme-warning: var(--hb-preset-classic-light-warning);
}

html[data-hb-theme="classic-dark"] {
  /* PAPER pair (operator direction 2026-07-05, "follow the landing page"):
     paper = the theme's LIGHTEST NEUTRAL (its "card/paper" tone — ink in
     light-ink themes, bg in dark-ink themes), paper-ink = the opposite pole.
     Existing preset colors only; used by WM chrome for the active-tab card so
     it renders the landing-page cream-card look in every theme without
     per-theme forks in app CSS. */
  --hb-theme-paper: var(--hb-preset-classic-dark-ink);
  --hb-theme-paper-ink: var(--hb-preset-classic-dark-bg);
  --hb-theme-bg: var(--hb-preset-classic-dark-bg);
  --hb-theme-contrast-bg: var(--hb-preset-classic-dark-contrast-bg);
  --hb-theme-bg-highlight: var(--hb-preset-classic-dark-bg-highlight);
  --hb-theme-ink: var(--hb-preset-classic-dark-ink);
  --hb-theme-contrast-ink: var(--hb-preset-classic-dark-contrast-ink);
  --hb-theme-ink-deactivated: var(--hb-preset-classic-dark-ink-deactivated);
  /* ROLE REORDER (operator-approved 2026-07-05, colors unchanged): accent and
     ink-highlight SWAPPED. Blue (#60a5fa) as the accent matches the navy hue
     family (pinstripe/links/logo read intentional), and the old mint accent
     stops colliding with success green; mint hover-text is high-contrast. */
  --hb-theme-ink-highlight: var(--hb-preset-classic-dark-accent);
  --hb-theme-accent: var(--hb-preset-classic-dark-ink-highlight);
  --hb-theme-success: var(--hb-preset-classic-dark-success);
  --hb-theme-warning: var(--hb-preset-classic-dark-warning);
}

html[data-hb-theme="happy-hues-17"] {
  /* PAPER pair (operator direction 2026-07-05, "follow the landing page"):
     paper = the theme's LIGHTEST NEUTRAL (its "card/paper" tone — ink in
     light-ink themes, bg in dark-ink themes), paper-ink = the opposite pole.
     Existing preset colors only; used by WM chrome for the active-tab card so
     it renders the landing-page cream-card look in every theme without
     per-theme forks in app CSS. */
  --hb-theme-paper: var(--hb-preset-happy-hues-17-bg);
  --hb-theme-paper-ink: var(--hb-preset-happy-hues-17-ink);
  --hb-theme-bg: var(--hb-preset-happy-hues-17-bg);
  --hb-theme-contrast-bg: var(--hb-preset-happy-hues-17-contrast-bg);
  --hb-theme-bg-highlight: var(--hb-preset-happy-hues-17-bg-highlight);
  --hb-theme-ink: var(--hb-preset-happy-hues-17-ink);
  --hb-theme-contrast-ink: var(--hb-preset-happy-hues-17-contrast-ink);
  --hb-theme-ink-deactivated: var(--hb-preset-happy-hues-17-ink-deactivated);
  --hb-theme-ink-highlight: var(--hb-preset-happy-hues-17-ink-highlight);
  --hb-theme-accent: var(--hb-preset-happy-hues-17-accent);
  --hb-theme-success: var(--hb-preset-happy-hues-17-success);
  --hb-theme-warning: var(--hb-preset-happy-hues-17-warning);
}

html[data-hb-theme="happy-hues-10"] {
  /* PAPER pair (operator direction 2026-07-05, "follow the landing page"):
     paper = the theme's LIGHTEST NEUTRAL (its "card/paper" tone — ink in
     light-ink themes, bg in dark-ink themes), paper-ink = the opposite pole.
     Existing preset colors only; used by WM chrome for the active-tab card so
     it renders the landing-page cream-card look in every theme without
     per-theme forks in app CSS. */
  --hb-theme-paper: var(--hb-preset-happy-hues-10-ink);
  --hb-theme-paper-ink: var(--hb-preset-happy-hues-10-bg);
  --hb-theme-bg: var(--hb-preset-happy-hues-10-bg);
  --hb-theme-contrast-bg: var(--hb-preset-happy-hues-10-contrast-bg);
  --hb-theme-bg-highlight: var(--hb-preset-happy-hues-10-bg-highlight);
  --hb-theme-ink: var(--hb-preset-happy-hues-10-ink);
  --hb-theme-contrast-ink: var(--hb-preset-happy-hues-10-contrast-ink);
  --hb-theme-ink-deactivated: var(--hb-preset-happy-hues-10-ink-deactivated);
  /* ROLE REORDER (operator-approved 2026-07-05, colors unchanged): accent := the
     theme's signature gold (was the red — which read ALARMING on every focused
     pinstripe/pill), warning := the red (MORE semantic than gold-as-warning, and
     it kills the old warning==ink-highlight collision where hover text looked
     like a warning). accent==ink-highlight gold pairing is harmonious. */
  --hb-theme-ink-highlight: var(--hb-preset-happy-hues-10-ink-highlight);
  --hb-theme-accent: var(--hb-preset-happy-hues-10-ink-highlight);
  --hb-theme-success: var(--hb-preset-happy-hues-10-success);
  --hb-theme-warning: var(--hb-preset-happy-hues-10-accent);
}

html[data-hb-theme="happy-hues-4"] {
  /* PAPER pair (operator direction 2026-07-05, "follow the landing page"):
     paper = the theme's LIGHTEST NEUTRAL (its "card/paper" tone — ink in
     light-ink themes, bg in dark-ink themes), paper-ink = the opposite pole.
     Existing preset colors only; used by WM chrome for the active-tab card so
     it renders the landing-page cream-card look in every theme without
     per-theme forks in app CSS. */
  --hb-theme-paper: var(--hb-preset-happy-hues-4-ink);
  --hb-theme-paper-ink: var(--hb-preset-happy-hues-4-bg);
  --hb-theme-bg: var(--hb-preset-happy-hues-4-bg);
  --hb-theme-contrast-bg: var(--hb-preset-happy-hues-4-contrast-bg);
  --hb-theme-bg-highlight: var(--hb-preset-happy-hues-4-bg-highlight);
  --hb-theme-ink: var(--hb-preset-happy-hues-4-ink);
  --hb-theme-contrast-ink: var(--hb-preset-happy-hues-4-contrast-ink);
  --hb-theme-ink-deactivated: var(--hb-preset-happy-hues-4-ink-deactivated);
  /* ROLE REORDER (operator-approved 2026-07-05, colors unchanged): accent and
     ink-highlight SWAPPED. The old accent (#E8E0D4) was near-identical to ink
     (#F7EEE8) — functionally invisible as an accent; the theme's distinctive
     tan (#C9B99A) now carries accent duty, cream becomes hover brightening. */
  --hb-theme-ink-highlight: var(--hb-preset-happy-hues-4-accent);
  --hb-theme-accent: var(--hb-preset-happy-hues-4-ink-highlight);
  --hb-theme-success: var(--hb-preset-happy-hues-4-success);
  --hb-theme-warning: var(--hb-preset-happy-hues-4-warning);
}

/* Font family presets (set by JS via `data-hb-font` on <html>) */
html[data-hb-font="system"] {
  --font-sans: var(--hb-font-system);
}
html[data-hb-font="times"] {
  --font-sans: var(--hb-font-times);
}
html[data-hb-font="comic"] {
  --font-sans: var(--hb-font-comic);
}
html[data-hb-font="architectsdaughter"] {
  --font-sans: var(--hb-font-architectsdaughter);
}
html[data-hb-font="chicagoflf"] {
  --font-sans: var(--hb-font-chicagoflf);
  /* ChicagoFLF reads heavy; downshift the weights we use across the UI. */
  --hb-weight-regular: 300;
  --hb-weight-medium: 400;
  --hb-weight-semibold: 500;
}
html[data-hb-font="orbitron"] {
  --font-sans: var(--hb-font-orbitron);
}
html[data-hb-font="ultrafraktur"] {
  --font-sans: var(--hb-font-ultrafraktur);
  --hb-font-face-scale: 1.2;
}
html[data-hb-font="uncial"] {
  --font-sans: var(--hb-font-uncial);
}
html[data-hb-font="imfell"] {
  --font-sans: var(--hb-font-imfell);
}
html[data-hb-font="shadowsintolight"] {
  --font-sans: var(--hb-font-shadowsintolight);
  --hb-font-face-scale: 1.485;
}
html[data-hb-font="labelleaurore"] {
  --font-sans: var(--hb-font-labelleaurore);
  --hb-font-face-scale: 1.15;
}
html[data-hb-font="montserrat"] {
  --font-sans: var(--hb-font-montserrat);
}
html[data-hb-font="poppins"] {
  --font-sans: var(--hb-font-poppins);
}
html[data-hb-font="spacegrotesk"] {
  --font-sans: var(--hb-font-spacegrotesk);
}

/* Font size presets (set by JS via `data-hb-font-size` on <html>) */
html[data-hb-font-size="10"] { --hb-font-size-px: 10; }
html[data-hb-font-size="11"] { --hb-font-size-px: 11; }
html[data-hb-font-size="12"] { --hb-font-size-px: 12; }
html[data-hb-font-size="13"] { --hb-font-size-px: 13; }
html[data-hb-font-size="14"] { --hb-font-size-px: 14; }
html[data-hb-font-size="15"] { --hb-font-size-px: 15; }
html[data-hb-font-size="16"] { --hb-font-size-px: 16; }
html[data-hb-font-size="18"] { --hb-font-size-px: 18; }

/* Base + reset (shell only) */

html {
  /* Keep `rem` stable so UI font-size changes don't resize the shell layout or embedded apps. */
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  /* Use system scrollbars (Safari) but keep them theme-aware via `color-scheme`. */
  color-scheme: var(--hb-color-scheme);
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Hard-lock the shell to the viewport (no outer scrolling). */
html[data-hb-surface="shell"] {
  height: 100%;
  overflow: hidden;
}

/* ChicagoFLF has a strong “bold” look; avoid synthetic emboldening when UI asks for 500/600. */
html[data-hb-font="chicagoflf"] {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  /* User-selectable UI font size (applies to shell UI, not `.hb-doc-root`). */
  font-size: calc(var(--hb-font-size-px) * var(--hb-font-face-scale) * 1px);
  /* Normalize x-height across font choices. */
  font-size-adjust: var(--hb-font-size-adjust);
  background: var(--bg-app);
  color: var(--text-primary);
  /* Keep *pixel* line spacing stable when we apply per-face font scaling. */
  line-height: calc(1.5 / var(--hb-font-face-scale));
  width: 100%;
  min-height: 100%;
  margin: 0;
  transition: var(--theme-transition);
}

/* Shell controls scrolling; panels handle their own overflow. */
html[data-hb-surface="shell"] body,
body[data-hb-surface="shell"] {
  height: 100%;
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Text selection (theme-derived)
   -------------------------------------------------------------------------- */

/* PLATFORM-WIDE (2026-07-30): scoped to `html[data-hb-themed]`, NOT #app-shell.
   #app-shell exists only in the hyperbob agent app, so every OTHER themed app
   (outliner, hyperfile2, hyperbench, monitor, …) had NO ::selection author rule
   and painted the browser's UA default. On the dark presets (classic-dark navy,
   happy-hues-10 green) `color-scheme: dark` makes that default a translucent
   blue-gray that blends into a same-hue page background (measured on linvm
   Chromium: #355479 over #0B1A33, #325D7D over #004643) — drag selections were
   effectively invisible. The theme tokens (--hb-selection-bg = 26% ink-highlight
   over the panel bg) hue-shift the highlight on every preset instead.
   `:where()` keeps specificity at bare ::selection so an app can still override. */
:where(html[data-hb-themed]) ::selection {
  background: var(--hb-selection-bg);
  color: var(--hb-selection-ink);
}

:where(html[data-hb-themed]) ::-moz-selection {
  background: var(--hb-selection-bg);
  color: var(--hb-selection-ink);
}

/* Selections INSIDE form controls sit on the contrast surface (--bg-input), so
   they take the contrast tint. NOTE: no descendant combinator — the ::selection
   of an input's editable text targets the control element itself; the old
   spelling with a space before the pseudo-element matched nothing (inputs have
   no element children). */
:where(html[data-hb-themed]) :where(input, textarea)::selection {
  background: var(--hb-selection-bg-contrast);
}

:where(html[data-hb-themed]) :where(input, textarea)::-moz-selection {
  background: var(--hb-selection-bg-contrast);
}

/* Contrast surfaces (dropdowns, tree/source panes, agent UI) should use the contrast selection tint. */
#app-shell :where(#tab-tree, #tab-source, .task-dropdown-menu, .hb-history-panel, .agent-root) ::selection,
#app-shell :where(#tab-tree, #tab-source, .task-dropdown-menu, .hb-history-panel, .agent-root) ::-moz-selection {
  background: var(--hb-selection-bg-contrast);
}

/* -----------------------------------------------------------------------------
   Shared SVG chevrons (cross-browser)
   -------------------------------------------------------------------------- */

/* Use inline SVG chevrons everywhere (no CSS masks) so Safari/Chrome/Firefox render identically.
   Rotation is controlled by the parent component (tree/fold/etc). */
.hb-chevron {
  width: var(--hb-chevron-size);
  height: var(--hb-chevron-size);
  flex-shrink: 0;
  display: block;
}

.hb-chevron path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Form controls don't inherit `font-size-adjust` from `body` (UA stylesheet resets it to
   `none` on native controls in every engine, not just Firefox). Force it so controls
   (buttons, selects, inputs) visually match non-controls.
   Scoped to `html[data-hb-themed]` so it covers BOTH the monolith shell (#app-shell) AND
   every standalone themed hyperbob9 app (meta_gl3, hyperfile2, pdf_viewer, …) — those roots
   are NOT #app-shell, so the old #app-shell-only scoping left their controls un-equalised.
   `:where()` keeps specificity 0 so an app can still opt a control out. */
:where(html[data-hb-themed]) :where(button, input, select, textarea) {
  font-size-adjust: var(--hb-font-size-adjust);
}

/* Do not affect embedded HyperBob app typography; apps should control their own layout and sizing. */
.hb-doc-root,
.hb-doc-root * {
  font-size-adjust: none;
}

/* Reset (shell only) - excludes .hb-doc-root and .agent-root descendants */
:where(#app-shell) :where(*):not(:where(.hb-doc-root)):not(:where(.hb-doc-root *)):not(:where(.agent-root *)) {
  box-sizing: border-box;
  margin: 0;
}
:where(#app-shell) :where(*):not(:where(.hb-doc-root)):not(:where(.hb-doc-root *)):not(:where(.agent-root *))::before,
:where(#app-shell) :where(*):not(:where(.hb-doc-root)):not(:where(.hb-doc-root *)):not(:where(.agent-root *))::after {
  box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   Small shared utilities (explicit local helpers; not Tailwind)
   -------------------------------------------------------------------------- */

/* Hide-only utility for shell UI (must not affect app DOM under .hb-doc-root). */
:where(#app-shell) :where(.hidden):not(.hb-doc-root):not(.hb-doc-root *) {
  display: none !important;
}

/* Preserve formatting for multi-line server errors. */
:where(.hb-prewrap) {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Generic error block for Meta GL embedding / loader failures. */
#app-shell .hb-gl-error {
  padding: 0.5714rem;
  color: var(--error);
  font-family: var(--font-sans);
}

/* Remove background effects */
.bg-grid,
.bg-glow {
  display: none;
}

/* -----------------------------------------------------------------------------
   Scrollbars (shell panels)
   -------------------------------------------------------------------------- */

/* PLATFORM-WIDE scrollbar treatment for every themed app (this stylesheet is
   injected into each data-hb-themed page, including app iframes): HALF the
   classic width (--scrollbar-size: 0.5rem) and theme-colored thumb/track.
   !important on purpose — this OVERRIDES any app-local or vendor scrollbar
   styling so every scrollable surface (panes, lists, tab-strip/header
   overflow) renders the same thin themed bar.

   ENGINE SPLIT (Safari fix, 2026-07-16): setting the STANDARD properties
   (scrollbar-width/scrollbar-color) makes an engine DISABLE ::-webkit-scrollbar
   styling. Blink then paints the standard props correctly — but WebKit 18.2+'s
   standard-property painting is partial on macOS overlay scrollbars, so Safari
   suppressed our working webkit rules and rendered near-default light bars on
   dark themes. So: the standard props go ONLY to engines with no
   ::-webkit-scrollbar support (Firefox); WebKit AND Blink take the
   pseudo-element plane below, which both have rendered identically for years.
   Firefox has no exact width control; `thin` is its half-width analogue. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track) !important;
  }
}

::-webkit-scrollbar {
  width: var(--scrollbar-size) !important;
  height: var(--scrollbar-size) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
  border-radius: calc(var(--scrollbar-size) / 2) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover) !important;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track) !important;
}

::-webkit-scrollbar-corner {
  background: var(--scrollbar-corner) !important;
}

/* IMPORTANT: do not reserve scrollbar gutter on the outer view panel.
   It creates a permanent ~15px blank strip on the right in overlay-scrollbar UIs. */
#app-shell .view-panel {
  scrollbar-gutter: auto;
}