/* Self-hosted variable fonts, woff2 only, latin and latin-ext subsets.
   Files come from the @fontsource-variable packages (OFL licensed):
   Albert Sans (weight axis, upright and italic), Bricolage Grotesque
   (weight and optical size axes), Spline Sans Mono (weight axis, upright and
   italic). Nothing here is fetched from the internet, so the type does not
   change under a page when a CDN does. Regenerate by copying the latin files
   out of the packages and rewriting the family names and paths. */

/* albert-sans-latin-ext-wght-normal */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  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;
}
/* albert-sans-latin-wght-normal */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-wght-normal.woff2) format('woff2-variations');
  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;
}
/* albert-sans-latin-ext-wght-italic */
@font-face {
  font-family: 'Albert Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-ext-wght-italic.woff2) format('woff2-variations');
  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;
}
/* albert-sans-latin-wght-italic */
@font-face {
  font-family: 'Albert Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-wght-italic.woff2) format('woff2-variations');
  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;
}
/* bricolage-grotesque-latin-ext-opsz-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/user/themes/kahuna-site/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2-variations');
  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;
}
/* bricolage-grotesque-latin-opsz-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/user/themes/kahuna-site/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations');
  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;
}
/* spline-sans-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  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;
}
/* spline-sans-mono-latin-wght-normal */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-wght-normal.woff2) format('woff2-variations');
  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;
}
/* spline-sans-mono-latin-ext-wght-italic */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-ext-wght-italic.woff2) format('woff2-variations');
  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;
}
/* spline-sans-mono-latin-wght-italic */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-wght-italic.woff2) format('woff2-variations');
  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;
}
/* YetiSearch Simple Modal CSS
   Lightweight typeahead with grouped results
   Uses shared theme variables from yetisearch-pro-theme.css
*/

/* Modal container */
.ys-simple-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.ys-simple-modal[aria-hidden="true"] {
  display: none;
}

/* Backdrop */
.ys-simple-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ys-overlay-bg);
  backdrop-filter: var(--ys-overlay-blur);
  -webkit-backdrop-filter: var(--ys-overlay-blur);
}

/* Dialog */
.ys-simple-dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 16px;
  background: var(--ys-panel-bg);
  border: 1px solid var(--ys-border);
  border-radius: 12px;
  box-shadow: var(--ys-dialog-shadow);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
}

/* Input wrapper */
.ys-simple-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ys-border);
  flex-shrink: 0;
}

.ys-simple-search-icon {
  width: 20px;
  height: 20px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
}

.ys-simple-input-wrapper input {
  flex: 1;
  background: var(--ys-input-bg);
  border: 1px solid var(--ys-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ys-input-text);
  outline: none;
}
.ys-simple-input-wrapper input:focus {
  border-color: var(--ys-accent, var(--ys-border));
}

.ys-simple-input-wrapper input::placeholder {
  color: var(--ys-input-placeholder);
}

.ys-simple-shortcut {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ys-simple-shortcut kbd,
.ys-simple-command kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--ys-kbd-bg);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--ys-kbd-text);
}

/* Results area */
.ys-simple-results {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--ys-scrollbar-thumb) var(--ys-scrollbar-track);
}

.ys-simple-results::-webkit-scrollbar {
  width: 8px;
}

.ys-simple-results::-webkit-scrollbar-track {
  background: var(--ys-scrollbar-track);
}

.ys-simple-results::-webkit-scrollbar-thumb {
  background: var(--ys-scrollbar-thumb);
  border-radius: 4px;
}

.ys-simple-results::-webkit-scrollbar-thumb:hover {
  background: var(--ys-scrollbar-thumb-hover);
}

/* Results header */
.ys-simple-results-header {
  padding: 8px 16px;
  font-size: 0.875rem;
  color: var(--ys-text-secondary);
  border-bottom: 1px solid var(--ys-border);
  background: var(--ys-panel-bg);
  position: sticky;
  top: 0;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Loading state */
.ys-simple-loading {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
}

.ys-simple-spinner {
  width: 24px;
  height: 24px;
  margin: 0 auto 12px;
  animation: ys-simple-spin 1s linear infinite;
  color: var(--ys-accent);
}

.ys-simple-spinner-track {
  opacity: 0.25;
}

.ys-simple-spinner-head {
  opacity: 0.75;
}

@keyframes ys-simple-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Empty state */
.ys-simple-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
  opacity: 1;
  transition: opacity 0.1s ease;
}

.ys-simple-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--ys-text-muted);
}

.ys-simple-empty-hint {
  font-size: 0.875rem;
  margin-top: 4px;
}

.ys-suggestion-link {
  color: var(--ys-accent);
  text-decoration: underline;
  cursor: pointer;
}

.ys-suggestion-link:hover {
  color: var(--ys-accent-hover);
}

/* Type more */
.ys-simple-type-more {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Results list */
.ys-simple-results-list {
  padding: 8px 0;
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Group */
.ys-simple-group {
  margin-bottom: 8px;
}

.ys-simple-group:last-child {
  margin-bottom: 0;
}

.ys-simple-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ys-text-secondary);
  background: var(--ys-panel-bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.ys-simple-group-icon {
  width: 16px;
  height: 16px;
}

/* Result item */
.ys-simple-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ys-simple-result:hover {
  background: var(--ys-result-hover);
}

.ys-simple-result.selected {
  background: var(--ys-result-selected-bg);
  box-shadow: inset 0 0 0 1px var(--ys-result-selected-ring);
}

.ys-simple-result-icon {
  width: 20px;
  height: 20px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.ys-simple-result-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ys-simple-result-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ys-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ys-simple-result-title mark {
  background: var(--ys-highlight-bg);
  color: var(--ys-highlight-text);
  border-radius: 2px;
  padding: 0 2px;
}

.ys-simple-result-breadcrumb {
  font-size: 0.75rem;
  color: var(--ys-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ys-simple-result-snippet {
  font-size: 0.75rem;
  color: var(--ys-text-muted);
  margin-top: 2px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ys-simple-result-snippet mark {
  background: var(--ys-highlight-bg);
  color: var(--ys-highlight-text);
  border-radius: 2px;
  padding: 0 2px;
}

.ys-simple-result-arrow {
  width: 16px;
  height: 16px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
  align-self: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ys-simple-result:hover .ys-simple-result-arrow,
.ys-simple-result.selected .ys-simple-result-arrow {
  opacity: 1;
}

/* Footer */
.ys-simple-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--ys-border);
  font-size: 0.75rem;
  color: var(--ys-text-secondary);
  flex-shrink: 0;
}

.ys-simple-commands {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ys-simple-command {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ys-simple-command kbd + kbd {
  margin-left: 2px;
}

.ys-simple-powered-by a {
  color: var(--ys-accent);
  text-decoration: none;
}

.ys-simple-powered-by a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
  .ys-simple-modal {
    padding-top: 5vh;
  }

  .ys-simple-dialog {
    margin: 0 8px;
    max-height: 90vh;
  }

  .ys-simple-footer {
    flex-direction: column;
    gap: 8px;
  }

  .ys-simple-commands {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
  font-family: Inter;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: OpenSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/open-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: Geom;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/geom-variable.woff2') format('woff2');
}
@font-face {
  font-family: NunitoSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/nunito-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: UbuntuSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/ubuntu-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: WorkSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/work-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: PublicSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/public-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: Quicksand;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/quicksand-variable.woff2') format('woff2');
}
@font-face {
  font-family: JetBrainsMono;
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/jetbrains-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: FiraCode;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/fireacode-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: IntelOneMono;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/intelone-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: AtkinsonHyperlegibleMono;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/atkins-hyper-legible-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: Inconsolata;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/inconsolata-variable.woff2') format('woff2');
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.6);
}
.dark * {
  scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
}
.dark *::-webkit-scrollbar-thumb {
  background: rgba(75, 85, 99, 0.5);
}
.dark *::-webkit-scrollbar-thumb:hover {
  background: rgba(75, 85, 99, 0.7);
}
.prose {
  max-width: none;
  font-size: var(--text-base);
  h1, h2, h3, h4, h5, h6 {
    position: relative;
    scroll-margin-top: calc(var(--spacing) * 24);
    .anchor-link {
      position: absolute;
      left: calc(var(--spacing) * -6);
      color: var(--color-gray-400);
      text-decoration-line: none;
      opacity: 0%;
      transition-property: opacity;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary);
        }
      }
    }
    &:hover .anchor-link {
      opacity: 100%;
    }
  }
  h1 {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  h2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  h3 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  h4 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  a {
    color: var(--color-primary);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary-hover);
      }
    }
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-primary-dark);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary-dark-hover);
        }
      }
    }
  }
  ul {
    margin-block: calc(var(--spacing) * 4);
    list-style-type: disc;
    padding-left: calc(var(--spacing) * 6);
  }
  ol {
    margin-block: calc(var(--spacing) * 4);
    list-style-type: decimal;
    padding-left: calc(var(--spacing) * 6);
  }
  li {
    margin-block: calc(var(--spacing) * 1);
  }
  blockquote:not(:has(.md-alert)) {
    margin-block: calc(var(--spacing) * 4);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-primary);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-style: italic;
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
  }
  .md-alert {
    margin-block: calc(var(--spacing) * 4);
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-style: normal;
  }
  .md-alert--note {
    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }
  .md-alert--tip {
    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }
  }
  .md-alert--important {
    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
    }
  }
  .md-alert--warning {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }
  .md-alert--caution {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }
  .md-alert-title {
    margin-top: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    svg {
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
    }
  }
  .md-alert-body {
    > *:first-child {
      margin-top: calc(var(--spacing) * 0);
    }
    > *:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  table {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    display: block;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  thead {
    background-color: var(--color-gray-50);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
  }
  th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  td {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  .table-striped tr:nth-child(even) {
    background-color: var(--color-gray-50);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
      }
    }
  }
  .table-compact th {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .table-compact td {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  :not(pre) > code {
    border-radius: 0.25rem;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-family: var(--font-mono);
    color: var(--color-accent);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
    &:where(.dark, .dark *) {
      color: var(--color-accent-dark);
    }
    font-size: var(--helios-code-size, var(--text-sm));
  }
  h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
    font-size: inherit !important;
  }
  pre, pre code, pre[class*="language-"], code[class*="language-"] {
    font-family: var(--font-mono) !important;
    font-size: var(--helios-code-size, var(--text-sm)) !important;
  }
  hr {
    margin-block: calc(var(--spacing) * 8);
    border-color: var(--color-gray-200);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  img {
    border-radius: var(--radius-lg);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
.prose-lg {
  font-size: var(--text-lg);
}
.dark body {
  color: var(--color-gray-300);
}
.sidebar-nav {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }
  .nav-item {
    display: block;
    .nav-link {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 2);
      border-radius: var(--radius-md);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      color: var(--color-gray-700);
      &:where(.dark, .dark *) {
        color: var(--color-gray-300);
      }
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--color-gray-800);
          }
        }
      }
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            color: var(--color-white);
          }
        }
      }
    }
    .nav-link.active {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
      }
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-primary);
      &:where(.dark, .dark *) {
        color: var(--color-primary-dark);
      }
    }
    .nav-icon {
      height: calc(var(--spacing) * 5);
      width: calc(var(--spacing) * 5);
      flex-shrink: 0;
      color: var(--color-gray-400);
      &:where(.dark, .dark *) {
        color: var(--color-gray-500);
      }
    }
    .nav-link.active .nav-icon {
      color: var(--color-primary);
      &:where(.dark, .dark *) {
        color: var(--color-primary-dark);
      }
    }
    .nav-icon svg {
      height: 100%;
      width: 100%;
    }
    .nav-link-container {
      display: flex;
      align-items: center;
      border-radius: var(--radius-md);
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--color-gray-800);
          }
        }
      }
    }
    .nav-link-container.active {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
      }
    }
    .nav-link-container .nav-link {
      flex: 1;
      &:hover {
        @media (hover: hover) {
          background-color: transparent;
        }
      }
    }
    .nav-link-container.active .nav-link {
      background-color: transparent;
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-primary);
      &:where(.dark, .dark *) {
        color: var(--color-primary-dark);
      }
    }
    .nav-toggle-btn {
      display: flex;
      height: calc(var(--spacing) * 8);
      width: calc(var(--spacing) * 8);
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-md);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--color-gray-700);
          }
        }
      }
    }
    .nav-toggle {
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
      color: var(--color-gray-400);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    .nav-toggle.expanded {
      rotate: 90deg;
    }
  }
  .nav-children {
    margin-top: calc(var(--spacing) * 1);
    margin-left: calc(var(--spacing) * 4);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--color-gray-200);
    padding-left: calc(var(--spacing) * 2);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  .nav-section {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
  }
}
.mobile-nav-overlay {
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 40;
  background-color: color-mix(in srgb, #000 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.mobile-nav-panel {
  position: fixed;
  top: calc(var(--spacing) * 0);
  bottom: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 50;
  width: calc(var(--spacing) * 80);
  max-width: 85vw;
  background-color: var(--color-white);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-900);
  }
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.mobile-nav-panel.closed {
  --tw-translate-x: -100%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  a {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary-dark);
        }
      }
    }
  }
  .separator {
    color: var(--color-gray-400);
    &:where(.dark, .dark *) {
      color: var(--color-gray-600);
    }
  }
  .current {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
}
.prev-next-nav {
  margin-top: calc(var(--spacing) * 12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-200);
  padding-top: calc(var(--spacing) * 8);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  .nav-button {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-primary-dark);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    .label {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      --tw-tracking: var(--tracking-wide);
      letter-spacing: var(--tracking-wide);
      color: var(--color-gray-500);
      text-transform: uppercase;
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    .title {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
  }
  .nav-button.prev {
    text-align: left;
  }
  .nav-button.next {
    margin-left: auto;
    text-align: right;
  }
}
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: calc(infinity * 1px);
  padding: calc(var(--spacing) * 1);
  background-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-700);
  }
}
.theme-toggle-indicator {
  position: absolute;
  top: calc(var(--spacing) * 1);
  left: calc(var(--spacing) * 1);
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-white);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-500);
  }
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
  z-index: 0;
}
.theme-toggle-btn {
  position: relative;
  z-index: 10;
  display: flex;
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.theme-toggle-btn:hover {
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-200);
  }
}
.theme-toggle-btn-active {
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.toc-nav {
  .toc-link {
    padding-left: calc(var(--spacing) * 3);
    margin-left: -1px;
    &[data-active="true"] {
      border-color: var(--color-primary);
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-primary);
    }
  }
  ul ul .toc-link {
    padding-left: calc(var(--spacing) * 6);
  }
  ul ul ul .toc-link {
    padding-left: calc(var(--spacing) * 9);
  }
  ul ul ul ul .toc-link {
    padding-left: calc(var(--spacing) * 12);
  }
}
.htmx-indicator {
  opacity: 0%;
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.htmx-request .htmx-indicator {
  opacity: 100%;
}
.htmx-request.htmx-indicator {
  opacity: 100%;
}
.callout {
  margin-block: calc(var(--spacing) * 6);
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  padding-left: calc(var(--spacing) * 4);
  .callout-header {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    .callout-icon {
      height: calc(var(--spacing) * 5);
      width: calc(var(--spacing) * 5);
      flex-shrink: 0;
    }
    .callout-title {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-tracking: var(--tracking-wide);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
  }
  .callout-content {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    p:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
    code {
      background-color: color-mix(in srgb, #fff 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #000 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
        }
      }
    }
  }
  &.callout-note {
    border-color: var(--color-blue-500);
    .callout-header {
      color: var(--color-blue-700);
      &:where(.dark, .dark *) {
        color: var(--color-blue-400);
      }
    }
  }
  &.callout-tip {
    border-color: var(--color-green-500);
    .callout-header {
      color: var(--color-green-700);
      &:where(.dark, .dark *) {
        color: var(--color-green-400);
      }
    }
  }
  &.callout-warning {
    border-color: var(--color-amber-500);
    .callout-header {
      color: var(--color-amber-700);
      &:where(.dark, .dark *) {
        color: var(--color-amber-400);
      }
    }
  }
  &.callout-danger {
    border-color: var(--color-red-500);
    .callout-header {
      color: var(--color-red-700);
      &:where(.dark, .dark *) {
        color: var(--color-red-400);
      }
    }
  }
  &.callout-caution {
    border-color: var(--color-red-500);
    .callout-header {
      color: var(--color-red-700);
      &:where(.dark, .dark *) {
        color: var(--color-red-400);
      }
    }
  }
  &.callout-info {
    border-color: var(--color-purple-500);
    .callout-header {
      color: var(--color-purple-700);
      &:where(.dark, .dark *) {
        color: var(--color-purple-400);
      }
    }
  }
  &.callout-important {
    border-color: var(--color-purple-500);
    .callout-header {
      color: var(--color-purple-700);
      &:where(.dark, .dark *) {
        color: var(--color-purple-400);
      }
    }
  }
}
.callout-collapsible {
  cursor: pointer;
  .callout-header {
    -webkit-user-select: none;
    user-select: none;
    .expand-icon {
      margin-left: auto;
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  &[open] .expand-icon {
    rotate: 90deg;
  }
  .callout-content {
    padding-top: calc(var(--spacing) * 2);
  }
}
.api-method {
  display: inline-flex;
  align-items: center;
  border-radius: 0.25rem;
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  &.method-get {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-green-300);
    }
  }
  &.method-post {
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-blue-300);
    }
  }
  &.method-put {
    background-color: var(--color-amber-100);
    color: var(--color-amber-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-amber-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-amber-300);
    }
  }
  &.method-patch {
    background-color: var(--color-orange-100);
    color: var(--color-orange-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-orange-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-orange-300);
    }
  }
  &.method-delete {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-red-300);
    }
  }
}
.api-endpoint-card {
  margin-block: calc(var(--spacing) * 8);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  .endpoint-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
    .endpoint-path {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      .path-param {
        color: var(--color-primary);
      }
    }
  }
  .endpoint-description {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
  }
  .endpoint-body {
    padding: calc(var(--spacing) * 4);
  }
}
.api-params {
  margin-block: calc(var(--spacing) * 4);
  .params-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .params-table {
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    th {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      text-align: left;
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      --tw-tracking: var(--tracking-wide);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      background-color: var(--color-gray-50);
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        background-color: var(--color-gray-800);
      }
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    td {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--color-gray-200);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 3);
      vertical-align: top;
      &:where(.dark, .dark *) {
        border-color: var(--color-gray-700);
      }
    }
    .param-name {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    .param-type {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    .param-required {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-red-600);
      &:where(.dark, .dark *) {
        color: var(--color-red-400);
      }
    }
    .param-optional {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-400);
      &:where(.dark, .dark *) {
        color: var(--color-gray-500);
      }
    }
    .param-description {
      color: var(--color-gray-600);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    .param-default {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      code {
        border-radius: 0.25rem;
        background-color: var(--color-gray-100);
        padding-inline: calc(var(--spacing) * 1);
        &:where(.dark, .dark *) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
}
.api-examples {
  margin-block: calc(var(--spacing) * 6);
  .examples-tabs {
    display: flex;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    button {
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 2);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 2px;
      border-color: transparent;
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            color: var(--color-gray-300);
          }
        }
      }
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      &.active {
        border-color: var(--color-primary);
        color: var(--color-primary);
      }
    }
  }
  .example-panel {
    display: none;
    padding-top: calc(var(--spacing) * 4);
    &.active {
      display: block;
    }
  }
}
.api-responses {
  margin-block: calc(var(--spacing) * 4);
  .responses-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .response-item {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-block: calc(var(--spacing) * 2);
    &:first-child {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    .response-code {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      &.code-2xx {
        color: var(--color-green-600);
        &:where(.dark, .dark *) {
          color: var(--color-green-400);
        }
      }
      &.code-4xx {
        color: var(--color-amber-600);
        &:where(.dark, .dark *) {
          color: var(--color-amber-400);
        }
      }
      &.code-5xx {
        color: var(--color-red-600);
        &:where(.dark, .dark *) {
          color: var(--color-red-400);
        }
      }
    }
    .response-description {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--color-gray-600);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
  }
}
.api-nav-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  .api-method {
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
  }
}
.api-collection-sections section {
  scroll-margin-top: 5rem;
}
.api-collection-section > h2:first-child {
  margin-top: calc(var(--spacing) * 0);
}
kbd {
  font-family: var(--font-sans);
}
.search-modal {
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  @media (width >= 40rem) {
    padding-top: 15vh;
  }
  background-color: color-mix(in srgb, #000 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.search-dialog {
  margin-inline: calc(var(--spacing) * 4);
  width: 100%;
  max-width: var(--container-2xl);
  border-radius: var(--radius-xl);
  background-color: var(--color-white);
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-900);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  display: flex;
  max-height: 80vh;
  flex-direction: column;
}
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-200);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  flex-shrink: 0;
  .search-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    color: var(--color-gray-400);
  }
  input {
    flex: 1;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &::placeholder {
      color: var(--color-gray-400);
    }
    &:where(.dark, .dark *) {
      &::placeholder {
        color: var(--color-gray-500);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .search-shortcut {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    kbd {
      border-radius: 0.25rem;
      background-color: var(--color-gray-100);
      padding-inline: calc(var(--spacing) * 1.5);
      padding-block: calc(var(--spacing) * 0.5);
      font-family: var(--font-mono);
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        background-color: var(--color-gray-800);
      }
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
  }
}
.search-results {
  min-height: calc(var(--spacing) * 0);
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 4px;
    &:hover {
      background: rgba(156, 163, 175, 0.5);
    }
  }
  .dark & {
    scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
    &::-webkit-scrollbar-thumb {
      background: rgba(75, 85, 99, 0.5);
      &:hover {
        background: rgba(75, 85, 99, 0.7);
      }
    }
  }
  .search-results-header {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-800);
    }
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 10;
    background-color: var(--color-white);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
    }
    .search-query-text {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-700);
      &:where(.dark, .dark *) {
        color: var(--color-gray-300);
      }
    }
  }
  .search-empty {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    color: var(--color-gray-500);
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
    .empty-icon {
      margin-inline: auto;
      margin-bottom: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 12);
      width: calc(var(--spacing) * 12);
      color: var(--color-gray-300);
      &:where(.dark, .dark *) {
        color: var(--color-gray-600);
      }
    }
    .suggestion-link {
      cursor: pointer;
      color: var(--color-primary);
      text-decoration-line: underline;
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary-hover);
        }
      }
    }
  }
  .search-loading {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    .spinner {
      margin-inline: auto;
      margin-bottom: calc(var(--spacing) * 3);
      height: calc(var(--spacing) * 6);
      width: calc(var(--spacing) * 6);
      animation: var(--animate-spin);
      color: var(--color-primary);
    }
  }
  .search-results-list {
    padding-block: calc(var(--spacing) * 2);
  }
  .search-group {
    margin-bottom: calc(var(--spacing) * 2);
    &:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .search-group-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-gray-500);
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 5;
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-900) 95%, transparent);
      }
    }
    .group-icon {
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
    }
  }
  .search-result {
    margin-inline: calc(var(--spacing) * 2);
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
          }
        }
      }
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    &.selected {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: var(--color-primary);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
        }
      }
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
      }
    }
    .result-icon {
      margin-top: calc(var(--spacing) * 0.5);
      height: calc(var(--spacing) * 5);
      width: calc(var(--spacing) * 5);
      flex-shrink: 0;
      color: var(--color-gray-400);
    }
    .result-content {
      display: flex;
      min-width: calc(var(--spacing) * 0);
      flex: 1;
      flex-direction: column;
      gap: calc(var(--spacing) * 0.5);
    }
    .result-title {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      mark {
        border-radius: 0.25rem;
        background-color: var(--color-yellow-200);
        padding-inline: calc(var(--spacing) * 0.5);
        color: inherit;
        &:where(.dark, .dark *) {
          background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
          }
        }
      }
    }
    .result-breadcrumb {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
    .result-snippet {
      margin-top: calc(var(--spacing) * 0.5);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-600);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      --tw-leading: var(--leading-relaxed);
      line-height: var(--leading-relaxed);
      mark {
        border-radius: 0.25rem;
        background-color: var(--color-yellow-200);
        padding-inline: calc(var(--spacing) * 0.5);
        color: inherit;
        &:where(.dark, .dark *) {
          background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
          }
        }
      }
    }
    .result-arrow {
      margin-top: calc(var(--spacing) * 0.5);
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
      flex-shrink: 0;
      color: var(--color-gray-400);
      opacity: 0%;
      transition-property: opacity;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 150ms;
      transition-duration: 150ms;
    }
    &:hover .result-arrow, &.selected .result-arrow {
      opacity: 100%;
    }
  }
}
.search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  .search-commands {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    .command {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 1.5);
      kbd {
        border-radius: 0.25rem;
        background-color: var(--color-gray-100);
        padding-inline: calc(var(--spacing) * 1.5);
        padding-block: calc(var(--spacing) * 0.5);
        font-family: var(--font-mono);
        &:where(.dark, .dark *) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .search-powered-by {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    a {
      color: var(--color-primary);
      &:hover {
        @media (hover: hover) {
          text-decoration-line: underline;
        }
      }
    }
  }
}
.search-trigger {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  background-color: var(--color-gray-100);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-200);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  cursor: pointer;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  .search-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .search-placeholder {
    display: none;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    @media (width >= 40rem) {
      display: block;
    }
  }
  .search-kbd {
    display: none;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    @media (width >= 40rem) {
      display: flex;
    }
    kbd {
      border-radius: 0.25rem;
      background-color: var(--color-white);
      padding-inline: calc(var(--spacing) * 1.5);
      padding-block: calc(var(--spacing) * 0.5);
      font-family: var(--font-sans);
      &:where(.dark, .dark *) {
        background-color: var(--color-gray-900);
      }
    }
  }
}
.doc-card {
  margin-bottom: calc(var(--spacing) * 4);
  display: block;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  padding: calc(var(--spacing) * 6);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-card:last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-card[href] {
  cursor: pointer;
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-primary);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
}
.prose a.doc-card:hover {
  text-decoration-line: none;
}
.doc-card-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
  }
  padding: calc(var(--spacing) * 2);
  color: var(--color-primary);
}
.doc-grid {
  margin-block: calc(var(--spacing) * 6);
}
.doc-grid > .doc-card {
  margin-bottom: calc(var(--spacing) * 0);
  height: 100%;
}
ol.doc-steps {
  position: relative;
  margin-block: calc(var(--spacing) * 6);
  margin-left: calc(var(--spacing) * 4);
  list-style-type: none;
  border-left-style: var(--tw-border-style);
  border-left-width: 2px;
  border-color: var(--color-gray-200);
  padding-left: calc(var(--spacing) * 0);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-step {
  position: relative;
  padding-bottom: calc(var(--spacing) * 8);
  padding-left: calc(var(--spacing) * 8);
}
.doc-step:last-child {
  padding-bottom: calc(var(--spacing) * 0);
}
.doc-step-number {
  position: absolute;
  left: calc(var(--spacing) * -4);
  display: flex;
  height: calc(var(--spacing) * 8);
  width: calc(var(--spacing) * 8);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-primary);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}
.doc-step-content {
  padding-top: calc(var(--spacing) * 0.5);
}
.doc-step-content > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-step-content > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-tabs {
  margin-block: calc(var(--spacing) * 6);
}
.doc-tabs-nav {
  display: flex;
  gap: calc(var(--spacing) * 0);
  overflow-x: auto;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-tab-button {
  position: relative;
  margin-bottom: -1px;
  cursor: pointer;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 2px;
  border-color: transparent;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  color: var(--color-gray-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      color: var(--color-gray-900);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-200);
      }
    }
  }
}
.doc-tab-button.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  &:where(.dark, .dark *) {
    color: var(--color-primary);
  }
}
.doc-tab-button:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.doc-tab-button:focus-visible {
  border-radius: 0.25rem;
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  &:where(.dark, .dark *) {
    --tw-ring-offset-color: var(--color-gray-900);
  }
}
.doc-tabs-content {
  margin-top: calc(var(--spacing) * 0);
}
.doc-tab-panel {
  display: none;
  padding-block: calc(var(--spacing) * 4);
}
.doc-tab-panel.active {
  display: block;
}
.doc-tab-panel > .prose > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-tab-panel > .prose > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-file-tree {
  margin-block: calc(var(--spacing) * 6);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
  padding: calc(var(--spacing) * 4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
    }
  }
}
.doc-file-tree-list {
  margin: calc(var(--spacing) * 0);
  list-style-type: none;
  padding: calc(var(--spacing) * 0);
}
.doc-file-tree-list .doc-file-tree-list {
  margin: calc(var(--spacing) * 0);
  padding: calc(var(--spacing) * 0);
  padding-left: calc(var(--spacing) * 6);
}
.doc-file-tree-item {
  position: relative;
  margin: calc(var(--spacing) * 0);
  list-style-type: none;
  padding: calc(var(--spacing) * 0);
  padding-top: 2px;
  padding-bottom: 2px;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item::before {
  content: '';
  position: absolute;
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
  border-color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
  left: -12px;
  top: 0;
  bottom: -4px;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item:first-child::before {
  top: 0;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item:last-child::before {
  bottom: auto;
  height: 15px;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item::after {
  content: '';
  position: absolute;
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
  left: -12px;
  top: 13px;
  width: 10px;
}
.doc-file-tree-entry {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.doc-file-tree-icon {
  flex-shrink: 0;
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-file-tree-item.directory > .doc-file-tree-entry > .doc-file-tree-icon {
  color: var(--color-amber-500);
  &:where(.dark, .dark *) {
    color: var(--color-amber-400);
  }
}
.doc-file-tree-name {
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-300);
  }
}
.doc-file-tree-item.highlight > .doc-file-tree-entry > .doc-file-tree-name {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
.doc-file-tree-comment {
  margin-left: calc(var(--spacing) * 2);
  font-family: var(--font-sans);
  color: var(--color-gray-500);
  font-style: italic;
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-file-tree-item.placeholder > .doc-file-tree-entry {
  color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-file-tree-dots {
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
}
.doc-accordion {
  margin-block: calc(var(--spacing) * 6);
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
  overflow: hidden;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-700);
    }
  }
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-accordion-item {
  position: relative;
}
.doc-accordion-trigger {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 4);
  text-align: left;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-100);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
        }
      }
    }
  }
}
.doc-accordion-trigger:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.doc-accordion-trigger:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
  --tw-ring-inset: inset;
}
.doc-accordion-title {
  flex: 1;
}
.doc-accordion-chevron {
  margin-left: calc(var(--spacing) * 2);
  flex-shrink: 0;
  color: var(--color-gray-500);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-accordion-item.open > .doc-accordion-trigger > .doc-accordion-chevron {
  rotate: 180deg;
}
.doc-accordion-content {
  overflow: hidden;
  transition-property: max-height;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
  max-height: 0;
}
.doc-accordion-body {
  padding-inline: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 4);
}
.doc-accordion-body > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-accordion-body > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-button {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  text-decoration-line: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.doc-button-sm {
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.doc-button:not(.doc-button-sm):not(.doc-button-lg):not(.doc-button-xl) {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.doc-button-lg {
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 2.5);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.doc-button-xl {
  padding-inline: calc(var(--spacing) * 7);
  padding-block: calc(var(--spacing) * 3.5);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.doc-button:not(.doc-button-bordered) {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
}
.doc-button:not(.doc-button-bordered):hover {
  background-color: var(--color-primary-hover);
}
:is(.dark) .doc-button:not(.doc-button-bordered) {
  background-color: var(--color-primary-dark);
  color: var(--color-primary-dark-text);
}
:is(.dark) .doc-button:not(.doc-button-bordered):hover {
  background-color: var(--color-primary-dark-hover);
}
.doc-button:not(.doc-button-bordered).doc-button-blue {
  background-color: var(--color-blue-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-blue:hover {
  background-color: var(--color-blue-600);
}
.doc-button:not(.doc-button-bordered).doc-button-green {
  background-color: var(--color-green-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-green:hover {
  background-color: var(--color-green-600);
}
.doc-button:not(.doc-button-bordered).doc-button-yellow {
  background-color: var(--color-amber-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-yellow:hover {
  background-color: var(--color-amber-600);
}
.doc-button:not(.doc-button-bordered).doc-button-red {
  background-color: var(--color-red-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-red:hover {
  background-color: var(--color-red-600);
}
.doc-button:not(.doc-button-bordered).doc-button-purple {
  background-color: var(--color-purple-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-purple:hover {
  background-color: var(--color-purple-600);
}
.doc-button:not(.doc-button-bordered).doc-button-plain {
  background-color: var(--color-gray-200);
  color: var(--color-gray-800);
}
.doc-button:not(.doc-button-bordered).doc-button-plain:hover {
  background-color: var(--color-gray-300);
}
:is(.dark) .doc-button:not(.doc-button-bordered).doc-button-plain {
  background-color: var(--color-gray-700);
  color: var(--color-gray-200);
}
:is(.dark) .doc-button:not(.doc-button-bordered).doc-button-plain:hover {
  background-color: var(--color-gray-600);
}
.doc-button-bordered {
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
}
.doc-button-bordered:hover {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}
:is(.dark) .doc-button-bordered:hover {
  background-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary-dark) 10%, transparent);
  }
}
.doc-button-bordered.doc-button-blue {
  border-color: var(--color-blue-500);
  color: var(--color-blue-700);
}
.doc-button-bordered.doc-button-blue:hover {
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-blue {
  color: var(--color-blue-400);
}
.doc-button-bordered.doc-button-green {
  border-color: var(--color-green-500);
  color: var(--color-green-700);
}
.doc-button-bordered.doc-button-green:hover {
  background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-green {
  color: var(--color-green-400);
}
.doc-button-bordered.doc-button-yellow {
  border-color: var(--color-amber-500);
  color: var(--color-amber-700);
}
.doc-button-bordered.doc-button-yellow:hover {
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-yellow {
  color: var(--color-amber-400);
}
.doc-button-bordered.doc-button-red {
  border-color: var(--color-red-500);
  color: var(--color-red-700);
}
.doc-button-bordered.doc-button-red:hover {
  background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-red {
  color: var(--color-red-400);
}
.doc-button-bordered.doc-button-purple {
  border-color: var(--color-purple-500);
  color: var(--color-purple-700);
}
.doc-button-bordered.doc-button-purple:hover {
  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-purple {
  color: var(--color-purple-400);
}
.doc-button-bordered.doc-button-plain {
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}
.doc-button-bordered.doc-button-plain:hover {
  background-color: var(--color-gray-100);
}
:is(.dark) .doc-button-bordered.doc-button-plain {
  border-color: var(--color-gray-600);
  color: var(--color-gray-300);
}
:is(.dark) .doc-button-bordered.doc-button-plain:hover {
  background-color: var(--color-gray-800);
}
.doc-button-center {
  margin-block: calc(var(--spacing) * 4);
  display: flex;
  justify-content: center;
}
.doc-button-icon {
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  flex-shrink: 0;
}
.doc-button-lg .doc-button-icon {
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.doc-button-xl .doc-button-icon {
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.prose a.doc-button:hover {
  text-decoration-line: none;
}
.doc-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 0.5);
  vertical-align: baseline;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.doc-badge-sm {
  padding-inline: calc(var(--spacing) * 2);
  padding-block: 1px;
  font-size: 0.65rem;
}
.doc-badge-icon {
  height: calc(var(--spacing) * 3);
  width: calc(var(--spacing) * 3);
  flex-shrink: 0;
}
.doc-badge:not(.doc-badge-outline) {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
  }
  color: var(--color-primary);
}
:is(.dark) .doc-badge:not(.doc-badge-outline) {
  background-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary-dark) 20%, transparent);
  }
  color: var(--color-primary-dark);
}
.doc-badge:not(.doc-badge-outline).doc-badge-blue {
  background-color: var(--color-blue-100);
  color: var(--color-blue-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-blue {
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
  }
  color: var(--color-blue-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-green {
  background-color: var(--color-green-100);
  color: var(--color-green-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-green {
  background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
  }
  color: var(--color-green-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-yellow {
  background-color: var(--color-amber-100);
  color: var(--color-amber-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-yellow {
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
  }
  color: var(--color-amber-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-red {
  background-color: var(--color-red-100);
  color: var(--color-red-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-red {
  background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
  }
  color: var(--color-red-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-purple {
  background-color: var(--color-purple-100);
  color: var(--color-purple-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-purple {
  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
  }
  color: var(--color-purple-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-plain {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-plain {
  background-color: var(--color-gray-700);
  color: var(--color-gray-300);
}
.doc-badge-outline {
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: transparent;
}
.doc-badge-outline {
  border-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
  }
  color: var(--color-primary);
}
:is(.dark) .doc-badge-outline {
  border-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-primary-dark) 40%, transparent);
  }
  color: var(--color-primary-dark);
}
.doc-badge-outline.doc-badge-blue {
  border-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-blue-400) 50%, transparent);
  }
  color: var(--color-blue-700);
}
:is(.dark) .doc-badge-outline.doc-badge-blue {
  color: var(--color-blue-400);
}
.doc-badge-outline.doc-badge-green {
  border-color: color-mix(in srgb, oklch(79.2% 0.209 151.711) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-green-400) 50%, transparent);
  }
  color: var(--color-green-700);
}
:is(.dark) .doc-badge-outline.doc-badge-green {
  color: var(--color-green-400);
}
.doc-badge-outline.doc-badge-yellow {
  border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
  }
  color: var(--color-amber-700);
}
:is(.dark) .doc-badge-outline.doc-badge-yellow {
  color: var(--color-amber-400);
}
.doc-badge-outline.doc-badge-red {
  border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-red-400) 50%, transparent);
  }
  color: var(--color-red-700);
}
:is(.dark) .doc-badge-outline.doc-badge-red {
  color: var(--color-red-400);
}
.doc-badge-outline.doc-badge-purple {
  border-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-purple-400) 50%, transparent);
  }
  color: var(--color-purple-700);
}
:is(.dark) .doc-badge-outline.doc-badge-purple {
  color: var(--color-purple-400);
}
.doc-badge-outline.doc-badge-plain {
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}
:is(.dark) .doc-badge-outline.doc-badge-plain {
  border-color: var(--color-gray-600);
  color: var(--color-gray-300);
}
.doc-tooltip {
  position: relative;
  display: inline-flex;
}
.doc-tooltip-underline {
  cursor: help;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  --tw-border-style: dashed;
  border-style: dashed;
  border-color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
}
.doc-tooltip-highlight {
  cursor: help;
  border-radius: 0.25rem;
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
  padding-inline: calc(var(--spacing) * 0.5);
}
:is(.dark) .doc-tooltip-highlight {
  background-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary-dark) 15%, transparent);
  }
}
.doc-tooltip-plain {
  cursor: help;
}
.doc-tooltip-popup {
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  bottom: 100%;
  left: calc(1/2 * 100%);
  z-index: 50;
  margin-bottom: calc(var(--spacing) * 2);
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-900);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: var(--leading-snug);
  line-height: var(--leading-snug);
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
  color: var(--color-white);
  opacity: 0%;
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 150ms;
  transition-duration: 150ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
:is(.dark) .doc-tooltip-popup {
  background-color: var(--color-gray-700);
}
.doc-tooltip-popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(1/2 * 100%);
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-width: 5px;
  border-style: solid;
  border-color: var(--color-helios-gray-900, var(--color-zinc-900)) transparent transparent transparent;
}
:is(.dark) .doc-tooltip-popup::after {
  border-top-color: var(--color-helios-gray-700, var(--color-zinc-700));
}
.doc-tooltip:hover .doc-tooltip-popup, .doc-tooltip:focus-within .doc-tooltip-popup {
  visibility: visible;
  opacity: 100%;
}
.doc-video {
  position: relative;
  margin-block: calc(var(--spacing) * 6);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-black);
}
.doc-video iframe, .doc-video video {
  position: absolute;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  height: 100%;
  width: 100%;
}
.doc-video-16x9 {
  padding-bottom: 56.25%;
}
.doc-video-4x3 {
  padding-bottom: 75%;
}
.doc-video-1x1 {
  padding-bottom: 100%;
}
.doc-video-9x16 {
  padding-bottom: 177.78%;
  margin-inline: auto;
  max-width: var(--container-sm);
}
.doc-image {
  margin-block: calc(var(--spacing) * 6);
  text-align: center;
}
.doc-image-lightbox {
  display: inline-block;
  cursor: zoom-in;
}
.prose a.doc-image-lightbox:hover {
  text-decoration-line: none;
}
.doc-image-img {
  margin-bottom: calc(var(--spacing) * 0) !important;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-lg);
}
.doc-image-border {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
}
:is(.dark) .doc-image-border {
  border-color: var(--color-gray-600);
}
.doc-image-shadow {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
:is(.dark) .doc-image-shadow {
  box-shadow: 0 0 20px -3px var(--color-primary-dark, color-mix(in oklab, oklch(62.3% 0.214 259.815) 3000%, transparent)), 0 0 8px -4px var(--color-primary-dark, color-mix(in oklab, oklch(62.3% 0.214 259.815) 2000%, transparent));
}
.doc-image-caption {
  margin-top: calc(var(--spacing) * 2);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-lightbox-overlay {
  visibility: hidden;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, #000 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
  }
  opacity: 0%;
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.doc-lightbox-overlay.active {
  visibility: visible;
  opacity: 100%;
}
.doc-lightbox-close {
  position: absolute;
  top: calc(var(--spacing) * 4);
  right: calc(var(--spacing) * 4);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  padding: calc(var(--spacing) * 2);
  color: color-mix(in srgb, #fff 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-white);
    }
  }
}
.doc-lightbox-close svg {
  pointer-events: none;
}
.doc-lightbox-img {
  max-height: 90vh;
  max-width: 90vw;
  --tw-scale-x: 95%;
  --tw-scale-y: 95%;
  --tw-scale-z: 95%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
  border-radius: var(--radius-lg);
  object-fit: contain;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.doc-lightbox-overlay.active .doc-lightbox-img {
  --tw-scale-x: 100%;
  --tw-scale-y: 100%;
  --tw-scale-z: 100%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.doc-link-card {
  margin-block: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  padding: calc(var(--spacing) * 4);
  text-decoration-line: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-primary);
    }
  }
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
}
.prose a.doc-link-card:hover {
  text-decoration-line: none;
}
.doc-link-card-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding: calc(var(--spacing) * 2);
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-link-card-content {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  flex-direction: column;
}
.doc-link-card-title {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-gray-100);
  }
}
.doc-link-card-description {
  margin-top: calc(var(--spacing) * 0.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-link-card-arrow {
  flex-shrink: 0;
  color: var(--color-gray-400);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-link-card:hover .doc-link-card-arrow {
  color: var(--color-primary);
}
.doc-details {
  margin-block: calc(var(--spacing) * 6);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-details-summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  -webkit-user-select: none;
  user-select: none;
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-100);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
        }
      }
    }
  }
}
.doc-details-summary::-webkit-details-marker, .doc-details-summary::marker {
  display: none;
}
.doc-details-chevron {
  flex-shrink: 0;
  color: var(--color-gray-500);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-details[open] > .doc-details-summary > .doc-details-chevron {
  rotate: 90deg;
}
.doc-details-content {
  padding-inline: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 4);
}
.doc-details-content > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-details-content > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-kbd-group {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 0.5);
}
.doc-kbd {
  display: inline-flex;
  min-width: 1.5em;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-200);
  }
  border-bottom-width: 2px;
}
.doc-kbd-separator {
  margin-inline: 1px;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-copy {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 0.5);
  vertical-align: baseline;
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
}
.doc-copy-text {
  background-color: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-800);
  &:where(.dark, .dark *) {
    color: var(--color-gray-200);
  }
}
.doc-copy-btn {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  border-radius: 0.25rem;
  padding: calc(var(--spacing) * 0.5);
  color: var(--color-gray-400);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      color: var(--color-gray-700);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-300);
      }
    }
  }
}
.doc-copy-btn.copied {
  color: var(--color-green-500);
  &:where(.dark, .dark *) {
    color: var(--color-green-400);
  }
}
.contact-wrapper {
  display: grid;
  gap: calc(var(--spacing) * 12);
  @media (width >= 64rem) {
    gap: calc(var(--spacing) * 16);
  }
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .contact-wrapper {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }
}
.contact-intro {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.intro-content h2 {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  @media (width >= 40rem) {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
  margin-bottom: calc(var(--spacing) * 4);
  --tw-border-style: none !important;
  border-style: none !important;
  padding-bottom: calc(var(--spacing) * 0) !important;
}
.intro-content p {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}
.info-card {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 4);
  background-color: var(--color-gray-50);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
    }
  }
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
    }
  }
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.info-card:hover {
  border-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
  }
  &:where(.dark, .dark *) {
    border-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
    }
  }
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 12);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }
  color: var(--color-primary);
  &:where(.dark, .dark *) {
    color: var(--color-primary-dark);
  }
}
.info-icon svg {
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
}
.info-text {
  display: flex;
  flex-direction: column;
}
.info-label {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.info-value {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.contact-form-container {
  position: relative;
}
.contact-form {
  position: relative;
  padding: calc(var(--spacing) * 6);
  @media (width >= 40rem) {
    padding: calc(var(--spacing) * 8);
  }
  background-color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-900);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
    }
  }
  border-radius: var(--radius-2xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
    }
  }
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-900) 5%, transparent) var(--tw-shadow-alpha), transparent);
  }
  &:where(.dark, .dark *) {
    --tw-shadow-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  backdrop-filter: blur(20px);
}
.contact-form::before {
  content: '';
  position: absolute;
  inset-inline: calc(var(--spacing) * 0);
  top: calc(var(--spacing) * 0);
  height: calc(var(--spacing) * 1);
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  background: linear-gradient(90deg, var(--helios-color-primary), var(--helios-color-accent, var(--helios-color-primary)));
}
.contact-form .form-field {
  margin-bottom: calc(var(--spacing) * 6);
}
.contact-form .form-field:last-of-type {
  margin-bottom: calc(var(--spacing) * 8);
}
.contact-form .form-label {
  margin-bottom: calc(var(--spacing) * 2);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-300);
  }
}
.contact-form .form-label.required::after {
  content: ' *';
  color: var(--color-red-500);
  &:where(.dark, .dark *) {
    color: var(--color-red-400);
  }
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="url"], .contact-form select, .contact-form textarea {
  width: 100%;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  background-color: var(--color-gray-50);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  border-radius: var(--radius-xl);
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
  &::placeholder {
    color: var(--color-gray-400);
  }
  &:where(.dark, .dark *) {
    &::placeholder {
      color: var(--color-gray-500);
    }
  }
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form input[type="tel"]:focus, .contact-form input[type="url"]:focus, .contact-form select:focus, .contact-form textarea:focus {
  --tw-outline-style: none;
  outline-style: none;
  background-color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800) 80%, transparent);
    }
  }
  border-color: var(--color-primary);
  &:where(.dark, .dark *) {
    border-color: var(--color-primary);
  }
  box-shadow: 0 0 0 3px rgba(var(--tw-ring-color), 0.1), 0 0 20px -5px rgba(var(--tw-ring-color), 0.15);
  --tw-ring-color: var(--helios-color-primary);
}
.contact-form input[type="text"]:hover:not(:focus), .contact-form input[type="email"]:hover:not(:focus), .contact-form input[type="tel"]:hover:not(:focus), .contact-form input[type="url"]:hover:not(:focus), .contact-form select:hover:not(:focus), .contact-form textarea:hover:not(:focus) {
  border-color: var(--color-gray-300);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-600);
  }
}
.contact-form select {
  cursor: pointer;
  appearance: none;
  padding-right: calc(var(--spacing) * 10);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
}
.dark .contact-form select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-form .form-field.checkboxes {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}
.contact-form input[type="checkbox"] {
  margin-top: calc(var(--spacing) * 0.5);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-gray-300);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-600);
  }
  background-color: var(--color-gray-50);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  color: var(--color-primary);
  cursor: pointer;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.contact-form input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.contact-form input[type="checkbox"]:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
  }
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-outline-style: none;
  outline-style: none;
}
.contact-form .checkboxes label {
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.contact-form .buttons {
  margin-top: calc(var(--spacing) * 8);
}
.contact-form .submit-btn, .contact-form button[type="submit"] {
  width: 100%;
  @media (width >= 40rem) {
    width: auto;
  }
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 3.5);
  background-color: var(--color-primary);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary-hover);
    }
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-primary-dark);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary-dark-hover);
      }
    }
  }
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 0px;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 25%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.contact-form .submit-btn:hover, .contact-form button[type="submit"]:hover {
  --tw-translate-y: calc(var(--spacing) * -0.5);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 30%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.contact-form .submit-btn:active, .contact-form button[type="submit"]:active {
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.contact-form .submit-btn:focus, .contact-form button[type="submit"]:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-offset-color: var(--color-white);
  --tw-outline-style: none;
  outline-style: none;
  &:where(.dark, .dark *) {
    --tw-ring-offset-color: var(--color-gray-900);
  }
}
.notices {
  margin-bottom: calc(var(--spacing) * 6);
  border-radius: var(--radius-xl);
  padding: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.notices.success.green, .notices.green {
  background-color: var(--color-green-50);
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
    }
  }
  color: var(--color-green-800);
  &:where(.dark, .dark *) {
    color: var(--color-green-300);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-200);
  &:where(.dark, .dark *) {
    border-color: color-mix(in srgb, oklch(52.7% 0.154 150.069) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-green-700) 50%, transparent);
    }
  }
}
.notices.success.green p, .notices.green p {
  margin: calc(var(--spacing) * 0);
}
.notices.error.red, .notices.red {
  background-color: var(--color-red-50);
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
    }
  }
  color: var(--color-red-800);
  &:where(.dark, .dark *) {
    color: var(--color-red-300);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-200);
  &:where(.dark, .dark *) {
    border-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-700) 50%, transparent);
    }
  }
}
.notices.error.red p, .notices.red p {
  margin: calc(var(--spacing) * 0);
}
.contact-form .form-field.has-error input, .contact-form .form-field.has-error select, .contact-form .form-field.has-error textarea {
  border-color: var(--color-red-500);
  &:where(.dark, .dark *) {
    border-color: var(--color-red-400);
  }
}
.contact-form .form-field .text-danger, .contact-form .form-field .error {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-red-600);
  &:where(.dark, .dark *) {
    color: var(--color-red-400);
  }
}
.contact-form .submit-btn.loading, .contact-form button[type="submit"].loading {
  pointer-events: none;
  opacity: 75%;
}
.contact-form .submit-btn.loading::after, .contact-form button[type="submit"].loading::after {
  content: '';
  margin-left: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: color-mix(in srgb, #fff 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
  }
  border-top-color: var(--color-white);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.contact-form .input-group {
  position: relative;
}
.contact-form .input-group .input-icon {
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(var(--spacing) * 4);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
  pointer-events: none;
}
.contact-form .input-group input {
  padding-left: calc(var(--spacing) * 12);
}
.contact-form .form-field[data-grav-field="honeypot"] {
  position: absolute;
  left: calc(9999px * -1);
  height: calc(var(--spacing) * 0);
  overflow: hidden;
  opacity: 0%;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.contact-form {
  animation: fadeInUp 0.5s ease-out;
}
.contact-form .form-field {
  animation: fadeInUp 0.4s ease-out;
  animation-fill-mode: both;
}
.contact-form .form-field:nth-child(1) {
  animation-delay: 0.1s;
}
.contact-form .form-field:nth-child(2) {
  animation-delay: 0.15s;
}
.contact-form .form-field:nth-child(3) {
  animation-delay: 0.2s;
}
.contact-form .form-field:nth-child(4) {
  animation-delay: 0.25s;
}
.contact-form .form-field:nth-child(5) {
  animation-delay: 0.3s;
}
.contact-form .buttons {
  animation: fadeInUp 0.4s ease-out 0.35s both;
}
@media (max-width: 640px) {
  .contact-form {
    padding: calc(var(--spacing) * 5);
  }
  .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="url"], .contact-form select, .contact-form textarea {
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .contact-form .submit-btn, .contact-form button[type="submit"] {
    width: 100%;
    padding-block: calc(var(--spacing) * 4);
  }
}
.langswitcher-dropdown {
  position: relative;
}
.langswitcher-trigger {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-100);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
      }
    }
  }
  cursor: pointer;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.langswitcher-trigger--open {
  background-color: var(--color-gray-100);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
}
.langswitcher-current {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
}
.langswitcher-menu {
  position: absolute;
  top: 100%;
  right: calc(var(--spacing) * 0);
  margin-top: calc(var(--spacing) * 2);
  min-width: 180px;
  padding-block: calc(var(--spacing) * 1);
  background-color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  border-radius: var(--radius-xl);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  z-index: 50;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.langswitcher-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  text-decoration-line: none;
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-300);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
        }
      }
    }
  }
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.langswitcher-item--active {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-primary-dark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary-dark) 10%, transparent);
    }
  }
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.langswitcher-item-code {
  display: inline-flex;
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 7);
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-size: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.langswitcher-item--active .langswitcher-item-code {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
  color: var(--color-primary);
  &:where(.dark, .dark *) {
    background-color: var(--color-primary-dark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary-dark) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-primary-dark);
  }
}
.langswitcher-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: var(--helios-font-body, Inter, sans-serif);
    --font-mono: var(--helios-font-code, JetBrainsMono, monospace);
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-orange-900: oklch(40.8% 0.123 38.172);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-gray-50: var(--color-helios-gray-50, var(--color-zinc-50));
    --color-gray-100: var(--color-helios-gray-100, var(--color-zinc-100));
    --color-gray-200: var(--color-helios-gray-200, var(--color-zinc-200));
    --color-gray-300: var(--color-helios-gray-300, var(--color-zinc-300));
    --color-gray-400: var(--color-helios-gray-400, var(--color-zinc-400));
    --color-gray-500: var(--color-helios-gray-500, var(--color-zinc-500));
    --color-gray-600: var(--color-helios-gray-600, var(--color-zinc-600));
    --color-gray-700: var(--color-helios-gray-700, var(--color-zinc-700));
    --color-gray-800: var(--color-helios-gray-800, var(--color-zinc-800));
    --color-gray-900: var(--color-helios-gray-900, var(--color-zinc-900));
    --color-gray-950: var(--color-helios-gray-950, var(--color-zinc-950));
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% 0.001 286.375);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-300: oklch(87.1% 0.006 286.286);
    --color-zinc-400: oklch(70.5% 0.015 286.067);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-zinc-600: oklch(44.2% 0.017 285.786);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-zinc-900: oklch(21% 0.006 285.885);
    --color-zinc-950: oklch(14.1% 0.005 285.823);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-4xl: 56rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-primary: var(--helios-color-primary, #3B82F6);
    --color-primary-hover: var(--helios-color-primary-hover, #2563EB);
    --color-primary-text: var(--helios-color-primary-text, #ffffff);
    --color-primary-dark: var(--helios-color-primary-dark, #60A5FA);
    --color-primary-dark-hover: var(--helios-color-primary-dark-hover, #93C5FD);
    --color-primary-dark-text: var(--helios-color-primary-dark-text, #111827);
    --color-accent: var(--helios-color-accent, #8B5CF6);
    --color-accent-dark: var(--helios-color-accent-dark, #A78BFA);
    --spacing-sidebar: 280px;
    --spacing-toc: 240px;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-50 {
    z-index: 50;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .order-none {
    order: 0;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-lead);
      font-size: 1.25em;
      line-height: 1.6;
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }
    :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-links);
      text-decoration: underline;
      font-weight: 500;
    }
    :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-bold);
      font-weight: 600;
    }
    :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: decimal;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: decimal;
    }
    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: disc;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
      font-weight: 400;
      color: var(--tw-prose-counters);
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
      color: var(--tw-prose-bullets);
    }
    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.25em;
    }
    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-color: var(--tw-prose-hr);
      border-top-width: 1px;
      margin-top: 3em;
      margin-bottom: 3em;
    }
    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 500;
      font-style: italic;
      color: var(--tw-prose-quotes);
      border-inline-start-width: 0.25rem;
      border-inline-start-color: var(--tw-prose-quote-borders);
      quotes: "\201C""\201D""\2018""\2019";
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1em;
    }
    :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: open-quote;
    }
    :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: close-quote;
    }
    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 800;
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }
    :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 900;
      color: inherit;
    }
    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 700;
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }
    :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 800;
      color: inherit;
    }
    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }
    :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      line-height: 1.5;
    }
    :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      display: block;
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 500;
      font-family: inherit;
      color: var(--tw-prose-kbd);
      box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
      font-size: 0.875em;
      border-radius: 0.3125rem;
      padding-top: 0.1875em;
      padding-inline-end: 0.375em;
      padding-bottom: 0.1875em;
      padding-inline-start: 0.375em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-code);
      font-weight: 600;
      font-size: 0.875em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: "`";
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: "`";
    }
    :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.875em;
    }
    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.9em;
    }
    :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-pre-code);
      background-color: var(--tw-prose-pre-bg);
      overflow-x: auto;
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: 0.375rem;
      padding-top: 0.8571429em;
      padding-inline-end: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-inline-start: 1.1428571em;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      background-color: transparent;
      border-width: 0;
      border-radius: 0;
      padding: 0;
      font-weight: inherit;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: none;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: none;
    }
    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      width: 100%;
      table-layout: auto;
      margin-top: 2em;
      margin-bottom: 2em;
      font-size: 0.875em;
      line-height: 1.7142857;
    }
    :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-th-borders);
    }
    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      vertical-align: bottom;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-td-borders);
    }
    :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 0;
    }
    :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      vertical-align: baseline;
    }
    :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-top-width: 1px;
      border-top-color: var(--tw-prose-th-borders);
    }
    :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      vertical-align: top;
    }
    :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      text-align: start;
    }
    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-captions);
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }
    --tw-prose-body: oklch(37.3% 0.034 259.733);
    --tw-prose-headings: oklch(21% 0.034 264.665);
    --tw-prose-lead: oklch(44.6% 0.03 256.802);
    --tw-prose-links: oklch(21% 0.034 264.665);
    --tw-prose-bold: oklch(21% 0.034 264.665);
    --tw-prose-counters: oklch(55.1% 0.027 264.364);
    --tw-prose-bullets: oklch(87.2% 0.01 258.338);
    --tw-prose-hr: oklch(92.8% 0.006 264.531);
    --tw-prose-quotes: oklch(21% 0.034 264.665);
    --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-captions: oklch(55.1% 0.027 264.364);
    --tw-prose-kbd: oklch(21% 0.034 264.665);
    --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
    --tw-prose-code: oklch(21% 0.034 264.665);
    --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
    --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
    --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
    --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
    --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
    --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
    font-size: 1rem;
    line-height: 1.75;
    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5em;
      padding-inline-start: 1.625em;
    }
    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-top: 0.5714286em;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .prose-lg {
    font-size: 1.125rem;
    line-height: 1.7777778;
    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.2222222em;
      line-height: 1.4545455;
      margin-top: 1.0909091em;
      margin-bottom: 1.0909091em;
    }
    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.6666667em;
      margin-bottom: 1.6666667em;
      padding-inline-start: 1em;
    }
    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 2.6666667em;
      margin-top: 0;
      margin-bottom: 0.8333333em;
      line-height: 1;
    }
    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.6666667em;
      margin-top: 1.8666667em;
      margin-bottom: 1.0666667em;
      line-height: 1.3333333;
    }
    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.3333333em;
      margin-top: 1.6666667em;
      margin-bottom: 0.6666667em;
      line-height: 1.5;
    }
    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 0.4444444em;
      line-height: 1.5555556;
    }
    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      border-radius: 0.3125rem;
      padding-top: 0.2222222em;
      padding-inline-end: 0.4444444em;
      padding-bottom: 0.2222222em;
      padding-inline-start: 0.4444444em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
    }
    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8666667em;
    }
    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.875em;
    }
    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.75;
      margin-top: 2em;
      margin-bottom: 2em;
      border-radius: 0.375rem;
      padding-top: 1em;
      padding-inline-end: 1.5em;
      padding-bottom: 1em;
      padding-inline-start: 1.5em;
    }
    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.5555556em;
    }
    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.5555556em;
    }
    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.6666667em;
      margin-bottom: 0.6666667em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.4444444em;
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.4444444em;
    }
    :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }
    :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.3333333em;
    }
    :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.3333333em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }
    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }
    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.6666667em;
      padding-inline-start: 1.5555556em;
    }
    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 3.1111111em;
      margin-bottom: 3.1111111em;
    }
    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.5;
    }
    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0.75em;
      padding-bottom: 0.75em;
      padding-inline-start: 0.75em;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-top: 0.75em;
      padding-inline-end: 0.75em;
      padding-bottom: 0.75em;
      padding-inline-start: 0.75em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.5;
      margin-top: 1em;
    }
    :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .\!mt-3 {
    margin-top: calc(var(--spacing) * 3) !important;
  }
  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }
  .-mt-8 {
    margin-top: calc(var(--spacing) * -8);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .-ml-2 {
    margin-left: calc(var(--spacing) * -2);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-full {
    height: 100%;
  }
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .max-h-\[calc\(100vh-5rem\)\] {
    max-height: calc(100vh - 5rem);
  }
  .min-h-\[60vh\] {
    min-height: 60vh;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-0\.5 {
    width: calc(var(--spacing) * 0.5);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-\[var\(--helios-sidebar-width\)\] {
    width: var(--helios-sidebar-width);
  }
  .w-\[var\(--helios-toc-width\)\] {
    width: var(--helios-toc-width);
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-\[calc\(var\(--helios-content-width\)-var\(--helios-toc-width\)-2rem\)\] {
    max-width: calc(var(--helios-content-width) - var(--helios-toc-width) - 2rem);
  }
  .max-w-\[var\(--helios-content-width\)\] {
    max-width: var(--helios-content-width);
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-none {
    max-width: none;
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-7 {
    --tw-translate-x: calc(var(--spacing) * 7);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-14 {
    --tw-translate-x: calc(var(--spacing) * 14);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .list-none {
    list-style-type: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .space-y-0\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-gray-200 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-clip {
    overflow-x: clip;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .bg-primary {
    background-color: var(--color-primary);
  }
  .bg-primary\/10 {
    background-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }
  .bg-primary\/15 {
    background-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
    }
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/50 {
    background-color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }
  .text-center {
    text-align: center;
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .\!text-white {
    color: var(--color-white) !important;
  }
  .text-amber-500 {
    color: var(--color-amber-500);
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-green-700 {
    color: var(--color-green-700);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .text-primary {
    color: var(--color-primary);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .underline {
    text-decoration-line: underline;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-primary\/25 {
    --tw-shadow-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .ring-black\/5 {
    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-75 {
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .prose {
    --tw-prose-body: inherit;
    --tw-prose-headings: inherit;
    --tw-prose-invert-body: inherit;
    --tw-prose-invert-headings: inherit;
    --tw-prose-bold: inherit;
    --tw-prose-pre-code: var(--color-gray-200);
    --tw-prose-pre-bg: var(--color-gray-900);
    --tw-prose-code: var(--color-accent);
  }
  .group-hover\:text-primary {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .hover\:-translate-y-0\.5 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:border-primary {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
  .hover\:bg-gray-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .hover\:bg-gray-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .hover\:text-gray-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .hover\:text-primary {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .hover\:\!no-underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: none !important;
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:shadow-xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-primary\/30 {
    &:hover {
      @media (hover: hover) {
        --tw-shadow-color: var(--color-primary);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 30%, transparent) var(--tw-shadow-alpha), transparent);
        }
      }
    }
  }
  .focus\:not-sr-only {
    &:focus {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }
  .focus\:absolute {
    &:focus {
      position: absolute;
    }
  }
  .focus\:top-4 {
    &:focus {
      top: calc(var(--spacing) * 4);
    }
  }
  .focus\:left-4 {
    &:focus {
      left: calc(var(--spacing) * 4);
    }
  }
  .focus\:z-50 {
    &:focus {
      z-index: 50;
    }
  }
  .focus\:rounded-lg {
    &:focus {
      border-radius: var(--radius-lg);
    }
  }
  .focus\:bg-primary {
    &:focus {
      background-color: var(--color-primary);
    }
  }
  .focus\:px-4 {
    &:focus {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .focus\:py-2 {
    &:focus {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .focus\:text-white {
    &:focus {
      color: var(--color-white);
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:gap-4 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:py-16 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .sm\:pr-6 {
    @media (width >= 40rem) {
      padding-right: calc(var(--spacing) * 6);
    }
  }
  .sm\:text-4xl {
    @media (width >= 40rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .lg\:fixed {
    @media (width >= 64rem) {
      position: fixed;
    }
  }
  .lg\:inset-y-0 {
    @media (width >= 64rem) {
      inset-block: calc(var(--spacing) * 0);
    }
  }
  .lg\:z-30 {
    @media (width >= 64rem) {
      z-index: 30;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:flex-col {
    @media (width >= 64rem) {
      flex-direction: column;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:pr-8 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 8);
    }
  }
  .lg\:pl-\[var\(--helios-sidebar-width\)\] {
    @media (width >= 64rem) {
      padding-left: var(--helios-sidebar-width);
    }
  }
  .dark\:block {
    &:where(.dark, .dark *) {
      display: block;
    }
  }
  .dark\:hidden {
    &:where(.dark, .dark *) {
      display: none;
    }
  }
  .dark\:divide-gray-800 {
    &:where(.dark, .dark *) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-gray-800);
      }
    }
  }
  .dark\:border-gray-600 {
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-600);
    }
  }
  .dark\:border-gray-700 {
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  .dark\:border-gray-800 {
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-800);
    }
  }
  .dark\:bg-amber-900\/50 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-amber-900) 50%, transparent);
      }
    }
  }
  .dark\:bg-gray-700 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-700);
    }
  }
  .dark\:bg-gray-700\/50 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-700);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
      }
    }
  }
  .dark\:bg-gray-800 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
  }
  .dark\:bg-gray-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
    }
  }
  .dark\:bg-gray-900\/50 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
      }
    }
  }
  .dark\:bg-gray-950\/93 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-950) 93%, transparent);
      }
    }
  }
  .dark\:bg-green-900\/30 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
      }
    }
  }
  .dark\:bg-green-900\/50 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-900) 50%, transparent);
      }
    }
  }
  .dark\:bg-primary-dark {
    &:where(.dark, .dark *) {
      background-color: var(--color-primary-dark);
    }
  }
  .dark\:bg-primary\/15 {
    &:where(.dark, .dark *) {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
      }
    }
  }
  .dark\:bg-red-900\/50 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
      }
    }
  }
  .dark\:text-amber-300 {
    &:where(.dark, .dark *) {
      color: var(--color-amber-300);
    }
  }
  .dark\:text-gray-100 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-100);
    }
  }
  .dark\:text-gray-300 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-300);
    }
  }
  .dark\:text-gray-400 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
  }
  .dark\:text-green-300 {
    &:where(.dark, .dark *) {
      color: var(--color-green-300);
    }
  }
  .dark\:text-green-400 {
    &:where(.dark, .dark *) {
      color: var(--color-green-400);
    }
  }
  .dark\:text-primary-dark {
    &:where(.dark, .dark *) {
      color: var(--color-primary-dark);
    }
  }
  .dark\:text-red-300 {
    &:where(.dark, .dark *) {
      color: var(--color-red-300);
    }
  }
  .dark\:text-white {
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .dark\:ring-white\/10 {
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .dark\:prose-invert {
    &:where(.dark, .dark *) {
      --tw-prose-body: var(--tw-prose-invert-body);
      --tw-prose-headings: var(--tw-prose-invert-headings);
      --tw-prose-lead: var(--tw-prose-invert-lead);
      --tw-prose-links: var(--tw-prose-invert-links);
      --tw-prose-bold: var(--tw-prose-invert-bold);
      --tw-prose-counters: var(--tw-prose-invert-counters);
      --tw-prose-bullets: var(--tw-prose-invert-bullets);
      --tw-prose-hr: var(--tw-prose-invert-hr);
      --tw-prose-quotes: var(--tw-prose-invert-quotes);
      --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
      --tw-prose-captions: var(--tw-prose-invert-captions);
      --tw-prose-kbd: var(--tw-prose-invert-kbd);
      --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
      --tw-prose-code: var(--tw-prose-invert-code);
      --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
      --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
      --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
      --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
    }
  }
  .dark\:hover\:border-primary {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-primary);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-700 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-800 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-800\/50 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:text-white {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
}
[x-cloak] {
  display: none !important;
}
.error-code-gradient {
  font-size: clamp(10rem, 30vw, 16rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--helios-color-primary) 0%, var(--helios-color-accent) 50%, var(--helios-color-primary) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease-in-out infinite;
  user-select: none;
}
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@layer base {
  input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
    appearance: none;
    background-color: #fff;
    border-color: var(--color-helios-gray-500, var(--color-zinc-500));
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: oklch(54.6% 0.245 262.881);
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      border-color: oklch(54.6% 0.245 262.881);
    }
  }
  input::placeholder,textarea::placeholder {
    color: var(--color-helios-gray-500, var(--color-zinc-500));
    opacity: 1;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-date-and-time-value {
    min-height: 1.5em;
  }
  ::-webkit-date-and-time-value {
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
  }
  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    print-color-adjust: exact;
  }
  select:where([multiple]),select:where([size]:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    print-color-adjust: unset;
  }
  input:where([type='checkbox']),input:where([type='radio']) {
    appearance: none;
    padding: 0;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: oklch(54.6% 0.245 262.881);
    background-color: #fff;
    border-color: var(--color-helios-gray-500, var(--color-zinc-500));
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
  }
  input:where([type='checkbox']) {
    border-radius: 0px;
  }
  input:where([type='radio']) {
    border-radius: 100%;
  }
  input:where([type='checkbox']):focus,input:where([type='radio']):focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: oklch(54.6% 0.245 262.881);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  input:where([type='checkbox']):checked,input:where([type='radio']):checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  input:where([type='checkbox']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='radio']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  input:where([type='checkbox']):indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  input:where([type='file']) {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
  }
  input:where([type='file']):focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color;
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-space-y-reverse: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-duration: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-ease: initial;
      --tw-leading: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-divide-y-reverse: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}
/* YetiSearch Pro Theme Variables
   Shared color palette using Tailwind zinc scale
   Override these variables in your custom CSS for theming
*/

:root {
  /* ═══════════════════════════════════════════════════════════════
     LIGHT MODE (default)
     Using Tailwind zinc scale for neutral grays
     ═══════════════════════════════════════════════════════════════ */

  /* Core palette - Tailwind zinc */
  --ys-zinc-50: #fafafa;
  --ys-zinc-100: #f4f4f5;
  --ys-zinc-200: #e4e4e7;
  --ys-zinc-300: #d4d4d8;
  --ys-zinc-400: #a1a1aa;
  --ys-zinc-500: #71717a;
  --ys-zinc-600: #52525b;
  --ys-zinc-700: #3f3f46;
  --ys-zinc-800: #27272a;
  --ys-zinc-900: #18181b;
  --ys-zinc-950: #09090b;

  /* Accent color */
  --ys-accent: #3b82f6;
  --ys-accent-hover: #2563eb;
  --ys-accent-subtle: rgba(59, 130, 246, 0.1);
  --ys-accent-ring: rgba(59, 130, 246, 0.25);

  /* Semantic colors - Light mode */
  --ys-overlay-bg: rgba(0, 0, 0, 0.5);
  --ys-overlay-blur: blur(4px);

  --ys-dialog-bg: var(--ys-zinc-50);
  --ys-dialog-border: var(--ys-zinc-200);
  --ys-dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  --ys-panel-bg: #ffffff;
  --ys-panel-alt: var(--ys-zinc-100);

  --ys-text: var(--ys-zinc-900);
  --ys-text-secondary: var(--ys-zinc-600);
  --ys-text-muted: var(--ys-zinc-400);

  --ys-border: var(--ys-zinc-200);
  --ys-border-subtle: var(--ys-zinc-100);

  --ys-input-bg: transparent;
  --ys-input-text: var(--ys-zinc-900);
  --ys-input-placeholder: var(--ys-zinc-400);

  --ys-result-hover: var(--ys-zinc-100);
  --ys-result-selected-bg: var(--ys-accent-subtle);
  --ys-result-selected-ring: var(--ys-accent-ring);

  --ys-highlight-bg: #fef08a;
  --ys-highlight-text: inherit;

  --ys-kbd-bg: var(--ys-zinc-100);
  --ys-kbd-text: var(--ys-zinc-600);

  --ys-scrollbar-track: transparent;
  --ys-scrollbar-thumb: rgba(161, 161, 170, 0.3);
  --ys-scrollbar-thumb-hover: rgba(161, 161, 170, 0.5);

  /* Segment/toggle controls */
  --ys-segment-bg: transparent;
  --ys-segment-active-bg: var(--ys-zinc-800);
  --ys-segment-active-text: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   Triggered by data-theme="dark", class="dark", or data-ys-theme="dark"
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"],
.dark,
[data-ys-theme="dark"] {
  --ys-overlay-bg: rgba(0, 0, 0, 0.7);

  --ys-dialog-bg: var(--ys-zinc-900);
  --ys-dialog-border: var(--ys-zinc-700);

  --ys-panel-bg: var(--ys-zinc-900);
  --ys-panel-alt: var(--ys-zinc-800);

  --ys-text: var(--ys-zinc-100);
  --ys-text-secondary: var(--ys-zinc-400);
  --ys-text-muted: var(--ys-zinc-500);

  --ys-border: var(--ys-zinc-700);
  --ys-border-subtle: var(--ys-zinc-800);

  --ys-input-text: var(--ys-zinc-100);
  --ys-input-placeholder: var(--ys-zinc-500);

  --ys-result-hover: rgba(63, 63, 70, 0.5);
  --ys-result-selected-bg: rgba(59, 130, 246, 0.15);

  --ys-highlight-bg: rgba(234, 179, 8, 0.35);
  --ys-highlight-text: var(--ys-zinc-100);

  --ys-kbd-bg: var(--ys-zinc-800);
  --ys-kbd-text: var(--ys-zinc-400);

  --ys-scrollbar-thumb: rgba(82, 82, 91, 0.5);
  --ys-scrollbar-thumb-hover: rgba(82, 82, 91, 0.7);

  --ys-segment-active-bg: rgba(255, 255, 255, 0.12);
}
/* ==========================================================================
   KahunaCart brand layer
   --------------------------------------------------------------------------
   Loaded after Helios's compiled Tailwind bundle (build/css/site.css), so on
   equal specificity these rules win.

   Light-only by decision (2026-08-20). Palette taken from the logo SVG fills.

   Nothing here uses Tailwind utilities: Helios compiles Tailwind from its own
   source list, which does not scan this child theme, so any new utility class
   written in these templates would never make it into the bundle. Every style
   below is plain CSS on `kc-` prefixed classes.

   Classes are `kc-`. Custom properties are `--ks-`, and the two prefixes do
   not match on purpose: KahunaCart's own storefront stylesheet
   (plugin://kahunacart/assets/kahunacart.css) declares a `--kc-*` set on
   :root, and it loads after this file on every /shop route. When both used
   `--kc-`, its `--kc-card` and `--kc-mono` overwrote ours store-wide — cards
   went transparent and the mono face fell back to ui-monospace. Never
   introduce a `--kc-*` property here; the storefront owns that name.
   ========================================================================== */

:root {
    /* Brand palette */
    --ks-salt: #FCF6EA;         /* page ground */
    --ks-sand: #F6EAD7;         /* panels, surfaces */
    --ks-sand-soft: #F9F1E1;    /* half a step off Sand, for large tinted areas */
    --ks-sand-deep: #EFDFC4;
    --ks-koa: #2B1C0C;          /* text ink */
    --ks-koa-soft: #5C4A38;     /* secondary text */
    --ks-lagoon: #1A6F83;       /* brand primary, links */
    --ks-lagoon-deep: #14555F;
    --ks-lagoon-mist: #DDEAE8;
    --ks-board: #BC4C11;        /* action color: buttons and big display numbers only; cream text on it reads 4.7:1 */
    --ks-board-deep: #AC4610;
    --ks-amber: #9A6B00;        /* "partial" in the comparison matrix */
    --ks-line: #E4D5BC;
    --ks-card: #FFFCF4;

    /* Type */
    --ks-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", sans-serif;
    --ks-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
    --ks-mono: "Spline Sans Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Logo art */
    --ks-bus: url("/user/themes/kahuna-site/images/logo.svg");
    --ks-bus-noshadow: url("/user/themes/kahuna-site/images/logo-noshadow.svg");

    /* Chrome metrics */
    --ks-nav-h: 76px;
    --ks-docs-gap: 40px;        /* breathing room above/below the docs columns */

    /* Re-point Helios's own font variables at the brand faces so inherited
       documentation pages pick them up without touching the parent theme. */
    --helios-font-body: var(--ks-body);
    --helios-font-code: var(--ks-mono);
}

/* --------------------------------------------------------------------------
   Global ground
   -------------------------------------------------------------------------- */

.kc-body {
    margin: 0;
    background: var(--ks-salt);
    color: var(--ks-koa);
    font-family: var(--ks-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

/* Content links are Lagoon. `:where()` keeps this at element specificity so any
   component class below (buttons, nav items, footer links) wins without a fight. */
:where(.kc-body) a { color: var(--ks-lagoon); }
.kc-body a:focus-visible,
.kc-body button:focus-visible,
.kc-body summary:focus-visible {
    outline: 3px solid var(--ks-lagoon);
    outline-offset: 2px;
}

.kc-body h1,
.kc-body h2,
.kc-body h3,
.kc-body h4 {
    font-family: var(--ks-display);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.kc-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.kc-mono { font-family: var(--ks-mono); }

.kc-h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.06;
    margin: 0 0 14px;
}

.kc-kicker {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 12px;
}

.kc-intro {
    color: var(--ks-koa-soft);
    font-size: 17px;
    max-width: 62ch;
    margin: 0 0 40px;
}

.kc-intro.kc-intro-tight { margin-bottom: 8px; }
.kc-intro.kc-intro-flush { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.kc-btn {
    display: inline-block;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: 11px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.kc-btn:hover { background: var(--ks-board-deep); color: #FFF6EA; transform: translateY(-1px); }
.kc-btn-small { padding: 9px 18px; font-size: 14px; border-radius: 9px; }
.kc-btn-large { font-size: 16px; padding: 15px 30px; }
.kc-btn-ghost {
    background: transparent;
    color: var(--ks-koa);
    border: 1.5px solid var(--ks-koa);
}
.kc-btn-ghost:hover { background: var(--ks-sand); color: var(--ks-koa); transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Early access ribbon
   -------------------------------------------------------------------------- */

.kc-ribbon {
    background: var(--ks-lagoon-deep);
    color: #F6EAD7;
    font-size: 13.5px;
    text-align: center;
    padding: 9px 16px;
}
.kc-ribbon b { color: #FFD9A8; font-weight: 700; }
.kc-ribbon a { color: #F6EAD7; font-weight: 600; }

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.kc-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(252, 246, 234, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ks-line);
}
.kc-nav-in {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--ks-nav-h);
}
.kc-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    text-decoration: none;
    color: var(--ks-koa);
}
.kc-brand i {
    width: 60px;
    height: 60px;
    background: var(--ks-bus) center / contain no-repeat;
    display: block;
    flex: none;
}
.kc-brand b {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.015em;
}
.kc-brand b em { font-style: normal; color: var(--ks-board); }

.kc-nav-item {
    color: var(--ks-koa);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}
.kc-nav-item:hover { color: var(--ks-lagoon); }

/* A nav item with a menu under it. Hover or keyboard focus opens the menu; the
   padded bridge under the item keeps it open while the pointer travels down. */
.kc-nav-drop { position: relative; }
/* One more item on the row must not fold the CTA onto two lines. */
.kc-nav-in > .kc-btn { white-space: nowrap; }
.kc-nav-drop > .kc-nav-item { display: inline-flex; align-items: center; gap: 4px; }
.kc-nav-drop > .kc-nav-item svg { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.15s; }
.kc-nav-drop:hover > .kc-nav-item svg,
.kc-nav-drop:focus-within > .kc-nav-item svg { transform: rotate(180deg); }
.kc-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -12px;
    padding-top: 10px;
    z-index: 30;
    filter: drop-shadow(0 12px 24px rgba(43, 28, 12, 0.14));
}
.kc-nav-menu a {
    display: block;
    min-width: 190px;
    padding: 9px 14px;
    color: var(--ks-koa);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--ks-card);
    border-left: 1px solid var(--ks-line);
    border-right: 1px solid var(--ks-line);
}
.kc-nav-menu a:first-child { border-top: 1px solid var(--ks-line); border-radius: 12px 12px 0 0; padding-top: 12px; }
.kc-nav-menu a:last-child { border-bottom: 1px solid var(--ks-line); border-radius: 0 0 12px 12px; padding-bottom: 12px; }
.kc-nav-menu a:hover, .kc-nav-menu a:focus-visible { color: var(--ks-lagoon); background: var(--ks-sand-soft); }
.kc-nav-drop:hover .kc-nav-menu,
.kc-nav-drop:focus-within .kc-nav-menu { display: block; }

.kc-nav-burger {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    margin-left: -8px;
    color: var(--ks-koa);
    cursor: pointer;
}
.kc-nav-burger svg { width: 24px; height: 24px; display: block; }

.kc-nav-mobile { display: none; }
.kc-nav-mobile-in {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-top: 2px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.kc-nav-mobile-in::-webkit-scrollbar { display: none; }
.kc-nav-mobile-in a {
    color: var(--ks-koa-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* The inline links give way to the scrolling row earlier than the lockup and
   the bar height do, because the storefront's cart and account controls share
   this row — see the header section of css/kahuna-shop.css, which tightens the
   gap and drops the cart's label to buy the links another ~100px of runway
   before this breakpoint has to take over. */
@media (max-width: 1000px) {
    .kc-nav-item, .kc-nav-drop { display: none; }
    .kc-nav-mobile { display: block; border-top: 1px solid var(--ks-line); padding-top: 8px; }
}
@media (max-width: 900px) {
    .kc-brand i { width: 46px; height: 46px; }
    .kc-brand b { font-size: 21px; }
    .kc-nav-in { height: 64px; gap: 14px; }
}

/* Docs pages keep Helios's mobile sidebar trigger inside the brand bar. */
.kc-nav-docs .kc-nav-burger { display: none; }
@media (max-width: 1023px) {
    .kc-nav-docs .kc-nav-burger { display: block; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.kc-hero { position: relative; overflow: hidden; padding: 72px 0 84px; }
.kc-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
}
/* Pre-launch pill above the headline. The dot pulses so it reads as a live
   status rather than a label. */
.kc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 6px 14px 6px 11px;
    border: 1.5px solid var(--ks-board);
    border-radius: 999px;
    background: rgba(202, 84, 21, 0.08);
    color: var(--ks-board-deep);
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.kc-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ks-board);
    animation: kc-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes kc-badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
    .kc-badge-dot { animation: none; }
}

.kc-hero h1 {
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 800;
    line-height: 1.0;
    margin: 0 0 20px;
    max-width: 14ch;
}
.kc-hero h1 em { font-style: normal; color: var(--ks-lagoon); }
.kc-hero-sub { font-size: 18px; color: var(--ks-koa-soft); max-width: 46ch; margin: 0 0 30px; }
.kc-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.kc-ctas-center { justify-content: center; margin-top: 26px; }
.kc-trust {
    margin-top: 34px;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: var(--ks-koa-soft);
    letter-spacing: 0.03em;
}
.kc-trust b { color: var(--ks-koa); font-weight: 700; }
.kc-hero-art { position: relative; min-height: 340px; }

/* The bus: the outer box is positioned and pulls in; the body inside it is
   the picture and does the bouncing; the shadow sits on the sand. */
.kc-hero-bus {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(440px, 92%);
    aspect-ratio: 1;
}
/* The exhaust. A point at the tailpipe — the rear-left corner of the bus
   in this view — from which soft koa puffs rise and drift back. Each is a
   feathered disc; the motion is all in the keyframes below. */
.kc-hero-exhaust {
    position: absolute;
    left: 13%;
    top: 72%;
    width: 0;
    height: 0;
}
.kc-hero-exhaust i {
    position: absolute;
    left: -11px;
    top: -11px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(43, 28, 12, 0.16), rgba(43, 28, 12, 0));
    opacity: 0;
}

/* Two layers of ride: the body lifts, the picture inside it rocks. They
   run on different clocks so the motion never visibly repeats. */
.kc-hero-bus-body { position: absolute; inset: 0; }
.kc-hero-bus-img {
    position: absolute;
    inset: 0;
    background: var(--ks-bus-noshadow) center / contain no-repeat;
    transform-origin: 50% 78%;
}
.kc-hero-bus-shadow {
    position: absolute;
    inset: 0;
    fill: var(--ks-koa);
    /* the shadow shape's own centre in the logo's 1254-unit box */
    transform-origin: 49.2% 78.5%;
}

/* The sand. A patch of ripple lines under the bus, laid into its ground
   plane: the matrix maps the field's horizontal to the up-right axis of the
   drawing and its vertical to the down-right axis the bus drives along, so
   the ripples cross the road. The mask feathers the patch into the page. */
.kc-dunes {
    position: absolute;
    left: -12%;
    right: -12%;
    top: 40%;
    bottom: -18%;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 50% 46% at 52% 54%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 46% at 52% 54%, #000 35%, transparent 100%);
}
.kc-dunes-field {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%) matrix(0.914, -0.407, 0.914, 0.407, 0, 0);
    overflow: visible;
}
.kc-dune path { fill: none; stroke: var(--ks-koa); stroke-width: 2; stroke-linecap: round; opacity: 0.22; }

@media (max-width: 880px) {
    .kc-hero-grid { grid-template-columns: 1fr; }
    .kc-hero-art { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   Page hero (standalone pages such as /add-ons)
   -------------------------------------------------------------------------- */

.kc-page-hero { padding: 64px 0 28px; text-align: center; }
.kc-page-hero h1 {
    font-size: clamp(34px, 5.2vw, 54px);
    font-weight: 800;
    line-height: 1.04;
    margin: 0 0 16px;
}
.kc-page-hero h1 em { font-style: normal; color: var(--ks-lagoon); }
.kc-page-hero .kc-kicker { text-align: center; }
.kc-page-hero .kc-intro { margin: 0 auto; text-align: center; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .kc-hero h1,
    .kc-hero .kc-hero-sub,
    .kc-hero .kc-ctas,
    .kc-hero .kc-trust { animation: kc-rise 600ms ease both; }
    .kc-hero .kc-hero-sub { animation-delay: 80ms; }
    .kc-hero .kc-ctas { animation-delay: 160ms; }
    .kc-hero .kc-trust { animation-delay: 240ms; }
    .kc-hero-bus { animation: kc-pull-in 700ms cubic-bezier(0.22, 0.9, 0.36, 1) both; animation-delay: 120ms; }

    /* The drive. The bus faces down-right, so the ground rolls up-left:
       the field slides one line-spacing along its own vertical — which the
       matrix above lays along the road — and arrives at an identical frame,
       so the loop is invisible. The bounce is deliberately uneven, two lumps
       of different height per cycle, because a regular bob reads as a boat
       rather than a road; the shadow flattens and fades as the bus rises.
       Both start once the bus has pulled in. */
    .kc-dune { animation: kc-drift 3.4s linear infinite; }
    .kc-hero-bus-body { animation: kc-bounce 2.3s ease-in-out 820ms infinite; }
    .kc-hero-bus-img { animation: kc-rock 3.1s ease-in-out 820ms infinite; }
    .kc-hero-bus-shadow { animation: kc-bounce-shadow 2.3s ease-in-out 820ms infinite; }

    /* Puffs: born small at the pipe, swell as they rise and drift back
       (up and to the left, against the travel), thin out and go. Four of
       them on four different durations and offsets. */
    .kc-hero-exhaust i { animation: kc-puff ease-out infinite; }
    .kc-hero-exhaust i:nth-child(1) { animation-duration: 2.6s; animation-delay: 1.0s; }
    .kc-hero-exhaust i:nth-child(2) { animation-duration: 3.1s; animation-delay: 1.9s; }
    .kc-hero-exhaust i:nth-child(3) { animation-duration: 2.3s; animation-delay: 2.7s; --ks-puff-x: -34px; }
    .kc-hero-exhaust i:nth-child(4) { animation-duration: 3.5s; animation-delay: 3.6s; --ks-puff-x: -52px; }
    @keyframes kc-puff {
        0%   { transform: translate(0, 0) scale(0.35); opacity: 0; }
        12%  { opacity: 1; }
        100% { transform: translate(var(--ks-puff-x, -44px), -34px) scale(1.9); opacity: 0; }
    }

    @keyframes kc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes kc-pull-in { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
    @keyframes kc-drift { to { transform: translateY(-96px); } }
    /* The lift: three bumps of different heights at uneven spacing over
       2.3s. The rock runs on its own 3.1s clock with its own uneven beats,
       so the two only line up again every seventy-odd seconds — close
       enough to random that nobody will catch the loop. */
    @keyframes kc-bounce {
        0%, 100% { transform: translateY(0); }
        17%      { transform: translateY(-5px); }
        31%      { transform: translateY(-1px); }
        46%      { transform: translateY(-3px); }
        58%      { transform: translateY(-0.5px); }
        79%      { transform: translateY(-4px); }
        91%      { transform: translateY(-1.5px); }
    }
    @keyframes kc-rock {
        0%, 100% { transform: rotate(0deg); }
        21%      { transform: rotate(-0.8deg); }
        38%      { transform: rotate(0.3deg); }
        55%      { transform: rotate(0.7deg); }
        70%      { transform: rotate(-0.2deg); }
        86%      { transform: rotate(-0.5deg); }
    }
    /* The shadow answers the bounce: it shrinks a little and slides back
       along the road as the bus lifts off it, and settles as it lands. */
    @keyframes kc-bounce-shadow {
        0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
        17%      { transform: translate(-3px, -1px) scale(0.965); opacity: 0.82; }
        31%      { transform: translate(-0.5px, 0) scale(0.995); opacity: 0.97; }
        46%      { transform: translate(-2px, -0.5px) scale(0.98); opacity: 0.9; }
        58%      { transform: translate(-0.3px, 0) scale(0.997); opacity: 0.98; }
        79%      { transform: translate(-2.5px, -1px) scale(0.97); opacity: 0.85; }
        91%      { transform: translate(-1px, -0.3px) scale(0.99); opacity: 0.95; }
    }

    .kc-reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; }
    .kc-reveal.kc-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Stat band
   -------------------------------------------------------------------------- */

.kc-stats { background: var(--ks-lagoon-deep); color: #F6EAD7; }
.kc-stats-in {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 34px 0;
    text-align: center;
}
@media (max-width: 720px) { .kc-stats-in { grid-template-columns: repeat(2, 1fr); } }
.kc-stat .kc-num {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kc-stat .kc-lbl {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A8CBCB;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */

.kc-block { padding: 88px 0; }
.kc-block.kc-tight { padding-top: 64px; }

/* Anchor targets clear the sticky brand bar. */
.kc-body [id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   Plain content page (default template in the site shell)
   -------------------------------------------------------------------------- */

.kc-page .kc-wrap { max-width: 800px; }
.kc-page-head { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--ks-line); }
.kc-page-head h1 { font-size: clamp(32px, 4.6vw, 46px); font-weight: 800; line-height: 1.05; margin: 0 0 14px; }
.kc-page-head .kc-intro { margin-bottom: 0; }

.kc-prose { font-size: 16.5px; color: var(--ks-koa); }
.kc-prose h2 { font-size: 28px; font-weight: 800; margin: 40px 0 12px; }
.kc-prose h3 { font-size: 20px; font-weight: 700; margin: 30px 0 10px; }
.kc-prose p { margin: 0 0 18px; }
.kc-prose ul,
.kc-prose ol { margin: 0 0 18px; padding-left: 22px; }
.kc-prose li { margin-bottom: 8px; }
.kc-prose code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 6px; padding: 2px 6px; }
.kc-prose pre { background: var(--ks-koa); color: #E8DECF; border-radius: 12px; padding: 18px 20px; overflow-x: auto; }
.kc-prose pre code { background: none; padding: 0; color: inherit; }
.kc-prose blockquote { border-left: 3px solid var(--ks-board); margin: 0 0 18px; padding-left: 18px; color: var(--ks-koa-soft); }
/* A wide markdown table inside prose scrolls in its own box rather than pushing
   the page sideways. `display: block` is what makes overflow apply to a table. */
.kc-prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 18px; }
.kc-prose th,
.kc-prose td { border-bottom: 1px solid var(--ks-line); padding: 10px 12px; text-align: left; }
.kc-prose img { max-width: 100%; height: auto; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Feature / audience cards
   -------------------------------------------------------------------------- */

.kc-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kc-feat-grid.kc-pushed { margin-top: 36px; }
@media (max-width: 960px) { .kc-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kc-feat-grid { grid-template-columns: 1fr; } }

.kc-feat {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.kc-feat:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); }
.kc-feat .kc-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ks-lagoon-mist);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.kc-feat .kc-ic svg {
    width: 22px;
    height: 22px;
    stroke: var(--ks-lagoon-deep);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-feat h3 { font-size: 17.5px; font-weight: 700; margin: 0 0 8px; }
.kc-feat p { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Platform split
   -------------------------------------------------------------------------- */

.kc-platform {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}
.kc-plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .kc-plat-grid { grid-template-columns: 1fr; } }

.kc-plat-points { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.kc-ppoint { display: flex; gap: 14px; }
.kc-ppoint .kc-dot {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ks-lagoon);
    color: #F6EAD7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kc-ppoint .kc-dot svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-ppoint b { display: block; font-size: 15.5px; }
.kc-ppoint span { font-size: 14.5px; color: var(--ks-koa-soft); }

.kc-plat-card {
    background: var(--ks-lagoon-deep);
    color: #E8F0EE;
    border-radius: 20px;
    padding: 34px 32px;
    position: relative;
    overflow: hidden;
}
.kc-plat-card .kc-waves2 { position: absolute; right: -30px; bottom: -20px; width: 340px; opacity: 0.35; pointer-events: none; }
.kc-plat-card h3 { color: #fff; font-size: 22px; font-weight: 800; margin: 0 0 10px; position: relative; }
.kc-plat-card p { font-size: 14.5px; color: #BAD3D2; margin: 0 0 18px; position: relative; }
.kc-plat-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
.kc-pstat {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(246, 234, 215, 0.18);
    border-radius: 12px;
    padding: 14px 16px;
}
.kc-pstat .kc-n { font-family: var(--ks-display); font-weight: 800; font-size: 22px; color: #fff; }
.kc-pstat .kc-l {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #A8CBCB;
    margin-top: 3px;
}
.kc-plat-card .kc-gravlink {
    position: relative;
    display: inline-block;
    margin-top: 20px;
    color: #FFD9A8;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.kc-plat-card .kc-gravlink:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Admin mockup
   -------------------------------------------------------------------------- */

.kc-admin-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; }
@media (max-width: 880px) { .kc-admin-grid { grid-template-columns: 1fr; } }

.kc-admin-mock {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.10);
    font-size: 12px;
}
.kc-am-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
}
.kc-am-top i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.kc-am-top i:nth-child(1) { background: #CA5415; }
.kc-am-top i:nth-child(2) { background: #F6EAD7; border: 1px solid #E4D5BC; }
.kc-am-top i:nth-child(3) { background: #1A6F83; }
.kc-am-top .kc-url {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    color: var(--ks-koa-soft);
    background: var(--ks-salt);
    border-radius: 999px;
    padding: 2px 10px;
    margin-left: 6px;
}
.kc-am-body { display: grid; grid-template-columns: 132px 1fr; min-height: 300px; }
.kc-am-side { background: var(--ks-lagoon-deep); color: #BAD3D2; padding: 14px 0; }
.kc-am-side .kc-it { padding: 7px 16px; font-size: 11.5px; font-weight: 600; }
.kc-am-side .kc-it.kc-on {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-left: 3px solid var(--ks-board);
    padding-left: 13px;
}
.kc-am-main { padding: 16px 18px; }
.kc-am-h { font-family: var(--ks-display); font-weight: 700; font-size: 14px; margin: 0 0 12px; }
.kc-am-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kc-am-tile { background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 10px; padding: 10px 12px; }
.kc-am-tile .kc-v { font-family: var(--ks-mono); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.kc-am-tile .kc-k { font-size: 10px; color: var(--ks-koa-soft); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }
.kc-am-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ks-line);
    font-size: 11.5px;
}
.kc-am-row:last-child { border-bottom: 0; }
.kc-am-row .kc-id { font-family: var(--ks-mono); color: var(--ks-koa-soft); }
.kc-am-row .kc-who { font-weight: 600; }
.kc-am-row .kc-amt { font-family: var(--ks-mono); margin-left: auto; font-variant-numeric: tabular-nums; }

.kc-pill { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: 0.03em; }
.kc-pill-paid { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-pill-ship { background: #F3DEC9; color: #8A4A12; }
.kc-pill-refund { background: var(--ks-sand-deep); color: var(--ks-koa-soft); }

.kc-checks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kc-checks li { display: flex; gap: 11px; font-size: 15px; align-items: baseline; }
.kc-checks li::before { content: "\2713"; color: var(--ks-lagoon); font-weight: 800; flex: none; }

/* --------------------------------------------------------------------------
   Payment providers
   -------------------------------------------------------------------------- */

.kc-prov-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 800px) { .kc-prov-lanes { grid-template-columns: 1fr; } }

.kc-lane { background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 16px; padding: 22px; }
.kc-lane h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.kc-lane .kc-lane-sub { font-size: 13.5px; color: var(--ks-koa-soft); margin: 0 0 16px; }

.kc-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.kc-chip {
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
    border: 1px solid transparent;
}
.kc-chip.kc-addon { background: var(--ks-sand); color: var(--ks-koa); border-color: var(--ks-line); }
.kc-chip small { font-weight: 600; opacity: 0.75; margin-left: 5px; font-size: 11px; }

.kc-prov-note { font-size: 14px; color: var(--ks-koa-soft); max-width: 72ch; }
.kc-prov-note b { color: var(--ks-koa); }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.kc-pricing {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}
.kc-price-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items: stretch; }
@media (max-width: 840px) { .kc-price-grid { grid-template-columns: 1fr; } }

.kc-price-card {
    background: var(--ks-card);
    border: 2px solid var(--ks-koa);
    border-radius: 20px;
    padding: 32px;
    position: relative;
}
.kc-ea-flag {
    position: absolute;
    top: -14px;
    left: 28px;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 5px 14px;
    border-radius: 999px;
}
.kc-price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px; }
.kc-price-now {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 58px;
    letter-spacing: -0.03em;
    color: var(--ks-board);
    line-height: 1;
}
.kc-price-was { font-family: var(--ks-mono); font-size: 20px; color: var(--ks-koa-soft); text-decoration: line-through; }
.kc-price-per { font-size: 14px; color: var(--ks-koa-soft); }
.kc-price-card ul { list-style: none; margin: 20px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kc-price-card ul li { display: flex; gap: 11px; font-size: 15px; align-items: baseline; }
.kc-price-card ul li::before { content: "\2713"; color: var(--ks-lagoon); font-weight: 800; flex: none; }

.kc-renew-card {
    background: var(--ks-lagoon-deep);
    color: #E8F0EE;
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.kc-renew-card h3 { color: #fff; font-size: 19px; font-weight: 800; margin: 0 0 12px; }
.kc-renew-card p { font-size: 14.5px; color: #BAD3D2; margin: 0 0 14px; }
.kc-renew-card p b { color: #fff; }
.kc-renew-card p.kc-first { margin-top: 10px; }
.kc-renew-num { font-family: var(--ks-display); font-weight: 800; font-size: 40px; color: #fff; letter-spacing: -0.02em; }
.kc-renew-num small { font-size: 15px; font-weight: 600; color: #A8CBCC; letter-spacing: 0; }
.kc-always {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(246, 234, 215, 0.22);
    font-size: 13.5px;
    color: #FFD9A8;
    font-weight: 600;
}
.kc-addon-note { margin-top: 18px; font-size: 14.5px; color: var(--ks-koa-soft); max-width: 78ch; }
.kc-addon-note b { color: var(--ks-koa); }

/* --------------------------------------------------------------------------
   Try it right now
   --------------------------------------------------------------------------
   One centered callout built like a browser window, with the live demo
   address in the title bar so the URL is the first thing read.
   -------------------------------------------------------------------------- */

.kc-demo-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.10);
}

.kc-demo-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
}
.kc-demo-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; flex: none; }
.kc-demo-bar i:nth-child(1) { background: #CA5415; }
.kc-demo-bar i:nth-child(2) { background: #F6EAD7; border: 1px solid #E4D5BC; }
.kc-demo-bar i:nth-child(3) { background: #1A6F83; }

.kc-demo-url {
    flex: 1;
    margin-left: 8px;
    font-family: var(--ks-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ks-lagoon);
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 5px 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 140ms ease, color 140ms ease;
}
.kc-demo-url:hover { color: var(--ks-lagoon-deep); background: var(--ks-lagoon-mist); }

.kc-demo-in { padding: 40px 40px 36px; }
@media (max-width: 640px) { .kc-demo-in { padding: 30px 22px 28px; } }
.kc-demo-in .kc-kicker { margin-bottom: 10px; }
.kc-demo-intro { max-width: 68ch; }

.kc-demo-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 30px 0 34px;
}
@media (max-width: 820px) { .kc-demo-facts { grid-template-columns: 1fr; gap: 20px; } }

.kc-demo-fact .kc-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ks-lagoon);
    color: #F6EAD7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.kc-demo-fact .kc-dot svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-demo-fact b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.kc-demo-fact span { font-size: 14.5px; color: var(--ks-koa-soft); }

.kc-demo-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.kc-demo-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
}
.kc-demo-note svg {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: var(--ks-board);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.kc-faq { max-width: 780px; }
.kc-faq.kc-pushed { margin-top: 34px; }
.kc-faq details {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 13px;
    padding: 0 22px;
    margin-bottom: 10px;
}
.kc-faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 15.5px;
    padding: 17px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
.kc-faq summary::-webkit-details-marker { display: none; }
.kc-faq summary::after { content: "+"; font-family: var(--ks-mono); color: var(--ks-lagoon); font-size: 19px; }
.kc-faq details[open] summary::after { content: "\2013"; }
.kc-faq details p { margin: 0 0 18px; font-size: 14.5px; color: var(--ks-koa-soft); }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.kc-cta-final { text-align: center; padding: 96px 0 100px; position: relative; overflow: hidden; }
.kc-cta-final h2 { font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 14px; }
.kc-cta-final .kc-cta-sub { color: var(--ks-koa-soft); font-size: 17px; max-width: 52ch; margin: 0 auto 30px; }
.kc-cta-final .kc-waves3 { position: absolute; left: -80px; bottom: -30px; width: 480px; opacity: 0.4; pointer-events: none; }

/* --------------------------------------------------------------------------
   Newsletter band
   --------------------------------------------------------------------------
   Two columns on a sand ground: copy on the left, the inline email row on the
   right. The whole band is bracketed by hairlines so it reads as its own strip
   between the closing CTA and the footer.
   -------------------------------------------------------------------------- */

.kc-news {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
    padding: 64px 0;
}
.kc-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.kc-news-grid .kc-h2 { font-size: clamp(26px, 3.4vw, 36px); }
.kc-news-grid .kc-intro { font-size: 16px; max-width: 44ch; }

.kc-news-side { display: flex; flex-direction: column; justify-content: center; }

.kc-news-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}
.kc-news-input {
    flex: 1 1 240px;
    min-width: 0;
    font-family: var(--ks-body);
    font-size: 15px;
    color: var(--ks-koa);
    background: var(--ks-card);
    border: 1.5px solid var(--ks-line);
    border-radius: 11px;
    padding: 13px 16px;
}
.kc-news-input::placeholder { color: #A08A6E; }
.kc-news-input:focus {
    outline: none;
    border-color: var(--ks-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.16);
}
.kc-news-btn { flex: none; white-space: nowrap; }
.kc-news-btn[disabled] { opacity: 0.7; cursor: default; transform: none; }

.kc-news-promise {
    margin: 14px 0 0;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    letter-spacing: 0.03em;
    color: var(--ks-koa-soft);
}

.kc-news-msg {
    margin: 14px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ks-lagoon-deep);
}
.kc-news-msg span { font-family: var(--ks-mono); }
.kc-news-msg-error { color: #A32E12; }

/* Visually hidden, still read out. */
.kc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 860px) {
    .kc-news { padding: 52px 0; }
    .kc-news-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.kc-footer {
    background: var(--ks-koa);
    color: #C9B9A4;
    border-top: 5px solid var(--ks-board);
}
.kc-foot-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 40px; }
@media (max-width: 840px) { .kc-foot-in { grid-template-columns: 1fr 1fr; } }

.kc-foot-brand i {
    width: 88px;
    height: 88px;
    background: var(--ks-bus-noshadow) center / contain no-repeat;
    display: block;
    margin-bottom: 12px;
}
.kc-foot-brand b { font-family: var(--ks-display); font-weight: 800; font-size: 19px; color: #F6EAD7; display: block; }
.kc-foot-brand p { font-size: 13.5px; margin: 8px 0 0; max-width: 30ch; }

.kc-footer h3 {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #A08B74;
    margin: 6px 0 14px;
}
.kc-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.kc-footer ul a { color: #E8DECF; text-decoration: none; font-size: 14px; }
.kc-footer ul a:hover { color: #fff; text-decoration: underline; }

.kc-foot-base {
    border-top: 1px solid rgba(246, 234, 215, 0.14);
    padding-top: 20px;
    padding-bottom: 28px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
}
.kc-foot-base b { color: #E8DECF; font-weight: 600; }

/* --------------------------------------------------------------------------
   Documentation pages (Helios layout, KahunaCart skin)
   -------------------------------------------------------------------------- */

/* The branded bar above already carries the logo lockup, so the docs sidebar's
   own logo row is redundant. Helios's sidebar partial renders it as the first
   child of the sidebar root. */
.kc-docs-aside > div > div:first-child,
.kc-docs-mobile-panel > div > div:first-child { display: none; }

/* Helios pins the sidebar with `lg:fixed lg:inset-y-0`, which would run it under
   the brand bar and straight over the site footer. Make it a sticky flex child
   instead: it starts below the header and stops at the footer. */
.kc-docs-aside {
    background: var(--ks-salt);
    border-right-color: var(--ks-line);
}
@media (min-width: 1024px) {
    .kc-docs-aside {
        position: sticky;
        top: var(--ks-nav-h);
        height: calc(100vh - var(--ks-nav-h));
        align-self: flex-start;
        z-index: 20;
    }
    /* The content column no longer needs to clear a fixed sidebar. */
    .kc-docs-content { padding-left: 0; }
}

.kc-docs-shell {
    background: var(--ks-card);
    min-height: calc(100vh - var(--ks-nav-h));
}

/* The mobile sidebar drawer has to sit above the sticky brand bar (both are
   z-50 in Helios, and the bar renders later in the DOM). */
.mobile-nav-overlay { z-index: 55; }
.kc-docs-mobile-panel {
    z-index: 60;
    background: var(--ks-salt);
    padding-top: 12px;
}

/* Search trigger in the docs header */
.kc-nav-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 7px 14px;
    font-family: var(--ks-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    cursor: pointer;
    white-space: nowrap;
}
.kc-nav-search:hover { border-color: var(--ks-lagoon); color: var(--ks-koa); }
.kc-nav-search svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 900px) { .kc-nav-search span { display: none; } }

/* Helios sets the article column's vertical rhythm and pins the TOC rail with
   Tailwind utilities (`py-10`, `top-24`, `max-h-[calc(100vh-7rem)]`) that never
   reach the browser: Tailwind compiles from Helios's own source list, which does
   not scan this child theme. So the column rendered flush against the header and
   the footer, and the TOC's `position: sticky` sat at `top: auto` and never
   stuck. Both are set here in plain CSS instead. */
.kc-docs-main {
    color: var(--ks-koa);
    padding-top: var(--ks-docs-gap);
    padding-bottom: var(--ks-docs-gap);
}

.kc-docs-toc-rail {
    position: sticky;
    top: calc(var(--ks-nav-h) + var(--ks-docs-gap));
    max-height: calc(100vh - var(--ks-nav-h) - (var(--ks-docs-gap) * 2));
    overflow-y: auto;
}

/* The TOC panel carries its own 32px of top padding, which would push "ON THIS
   PAGE" below the breadcrumbs. Drop it and let both columns start on the gap. */
.kc-docs-toc-rail > div { padding-top: 0; }

.kc-docs-main h1,
.kc-docs-main h2,
.kc-docs-main h3,
.kc-docs-main h4,
.kc-docs-main h5,
.kc-docs-main h6 {
    font-family: var(--ks-display);
    letter-spacing: -0.02em;
    color: var(--ks-koa);
}
.kc-docs-main .prose a { color: var(--ks-lagoon); }
.kc-docs-main .prose a:hover { color: var(--ks-lagoon-deep); }
.kc-docs-main .prose code { color: var(--ks-lagoon-deep); }
.kc-docs-main .prose blockquote { border-left-color: var(--ks-board); }
.kc-docs-main .prose thead { border-bottom-color: var(--ks-line); }
.kc-docs-main .prose tbody tr { border-bottom-color: var(--ks-line); }

/* Inline code in the docs.
   ---------------------------------------------------------------------------
   @tailwindcss/typography draws a literal backtick either side of every inline
   `<code>` inside `.prose`, through `content: "`"` on ::before and ::after. On
   this site that reads as a typo: the code chip already has its own ground and
   its own face, so the quotes are noise the author never typed. The plugin's
   own selector is `:where(code):not(:where([class~="not-prose"], ...))`, which
   scores zero specificity, so one plain rule turns both off everywhere `.prose`
   is used: every docs page, and the plain `default` template too. */
.prose code::before,
.prose code::after { content: none; }

/* Tables in the docs.
   ---------------------------------------------------------------------------
   Reference tables carry a `<code>` route or permission in the first columns
   and a sentence in the last. `<code>` has no break opportunity in it, so auto
   table layout hands those columns their whole unbroken width and the prose
   column collapses to a few characters, with the rest of the table scrolled off
   the side. Letting code wrap inside a cell is the whole fix: auto table layout
   can then share the width out in proportion to what each column holds, which
   gives the sentences the room and wraps the routes.

   Helios already makes the table its own horizontal scroll container
   (`display: block; overflow-x: auto` in css/custom/typography.css), so a table
   that is genuinely too wide scrolls inside itself and never pushes the page
   sideways. These rules make that the last resort rather than the first. */
.kc-docs-main .prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
.kc-docs-main .prose table code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Reference cards: the events page and the Twig page.
   ---------------------------------------------------------------------------
   Both are a long list of entries — 130-odd events, 45 Twig functions and
   filters — and each entry is a long identifier, a word or two of kind, and a
   sentence, with the events carrying a payload key list on top. That was four
   table columns each, and four columns do not fit the article column: the
   sentence scrolled off the side and `onKahunaCartRegisterCarrierRateProviders`
   came apart into five-character shreds. A card gives the name a line of its
   own and everything else the full width, and it reads the same at any window
   size.

   Written by gen-dev-reference.py's `reference_card()`, which is why these are
   raw HTML inside a markdown page. The look is the API endpoint card's. */
.kc-docs-main .kc-refs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 28px;
}
.kc-docs-main .kc-ref {
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    background: var(--ks-card);
    padding: 12px 16px 14px;
}
/* Inline flow rather than a flex row: a flex item will not shrink below the
   width of the unbroken name, so the longest of them — 39 characters of
   `onKahunaCartDeclareFeatureCompatibility` — pushed the card sideways on a
   phone. Laid out as text, the tags drop to a second line first, and only a
   name that still cannot fit breaks, at the one point it has to. */
.kc-docs-main .kc-ref-head {
    margin-bottom: 6px;
    line-height: 1.5;
}
.kc-docs-main .kc-ref-name {
    font-family: var(--ks-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}
.kc-docs-main .kc-ref-tag {
    display: inline-block;
    position: relative;
    top: -1px;
    margin-left: 7px;
    font-family: var(--ks-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
}
/* Tinted: the event a plugin raises, and the smaller of the two Twig kinds.
   Everything else — listens, handler method, function — stays neutral, so one
   tinted tag in a run of cards is the one worth stopping on. */
.kc-docs-main .kc-ref-tag--fires,
.kc-docs-main .kc-ref-tag--filter {
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}
.kc-docs-main .kc-ref-what,
.kc-docs-main .kc-ref-detail {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-docs-main .kc-ref-detail {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--ks-line);
    font-size: 14px;
}
.kc-docs-main .kc-ref-label {
    font-family: var(--ks-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin-right: 6px;
}
.kc-docs-main .kc-ref code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    /* A payload runs to a couple of dozen keys, so the line wraps between them
       and a key longer than the line breaks at a word boundary, never mid-word. */
    overflow-wrap: break-word;
    word-break: normal;
}
/* The description is prose, so a key named in it keeps the chip every other
   page gives it. The payload is a list of two dozen names read in one go, and
   a chip either side of every comma leaves the commas floating in the gaps —
   so the keys there are the mono face and the link colour and nothing else. */
.kc-docs-main .kc-ref-detail code {
    background: none;
    padding: 0;
    font-weight: 600;
    color: var(--ks-lagoon-deep);
}

/* --------------------------------------------------------------------------
   API reference (api-collection and api-endpoint pages)
   --------------------------------------------------------------------------
   Helios styles these in css/custom/api.css with Tailwind utilities over its
   own gray ramp. That file is compiled into build/css/site.css, so the layout
   arrives, but the colours are Helios's, and the child theme cannot add
   utilities of its own (see the note at the top of this file). Everything
   below is plain CSS over the brand tokens, loaded after the bundle, and it
   re-skins rather than re-builds: the structure stays Helios's.
   -------------------------------------------------------------------------- */

/* Method badges. Used in three places at three sizes: the endpoint card header,
   the docs sidebar, and the on-this-page TOC. */
.kc-body .api-method {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.kc-body .api-method.method-get {
    background: var(--ks-lagoon-mist);
    border-color: #B9D4D2;
    color: var(--ks-lagoon-deep);
}
.kc-body .api-method.method-post {
    background: #E4EFD9;
    border-color: #C6DDB4;
    color: #3F6B24;
}
.kc-body .api-method.method-put,
.kc-body .api-method.method-patch {
    background: #F7E7C6;
    border-color: #E8CE9B;
    color: #7A5400;
}
.kc-body .api-method.method-delete {
    background: #F7DCCB;
    border-color: #EABE9F;
    color: var(--ks-board-deep);
}

/* The endpoint card */
.kc-body .api-endpoint-card {
    margin: 18px 0 28px;
    border: 1px solid var(--ks-line);
    border-radius: 14px;
    background: var(--ks-card);
    overflow: hidden;
}
.kc-body .api-endpoint-card .endpoint-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--ks-sand-soft);
    border-bottom: 1px solid var(--ks-line);
}
.kc-body .api-endpoint-card .endpoint-path {
    font-family: var(--ks-mono);
    font-size: 13.5px;
    color: var(--ks-koa);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}
.kc-body .api-endpoint-card .endpoint-path .path-param { color: var(--ks-board); }
.kc-body .api-endpoint-card .endpoint-permission {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ks-body);
    font-size: 12px;
    color: var(--ks-koa-soft);
    white-space: nowrap;
}
.kc-body .api-endpoint-card .endpoint-permission code {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    background: var(--ks-sand-deep);
    color: var(--ks-koa);
    border-radius: 5px;
    padding: 2px 6px;
}
.kc-body .api-endpoint-card .endpoint-permission.is-public code {
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}
.kc-body .api-endpoint-card .endpoint-description {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ks-line);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .endpoint-description > *:first-child { margin-top: 0; }
.kc-body .api-endpoint-card .endpoint-description > *:last-child { margin-bottom: 0; }
.kc-body .api-endpoint-card .endpoint-description code,
.kc-body .api-endpoint-card .endpoint-response code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    color: var(--ks-koa);
    border-radius: 5px;
    padding: 1px 5px;
}
.kc-body .api-endpoint-card .endpoint-body { padding: 4px 16px 16px; }
/* The description is the last thing in a card with no parameters, so it keeps
   no rule under it. */
.kc-body .api-endpoint-card .endpoint-description:last-child { border-bottom: 0; }

/* Parameter table */
.kc-body .api-endpoint-card .params-title,
.kc-body .api-endpoint-card .responses-title,
.kc-body .api-endpoint-card .response-title {
    margin: 16px 0 8px;
    font-family: var(--ks-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
/* The card clips its own overflow, so the scroll container is the wrapper and
   the table itself stays a table: a `display: block` table shrink-to-fits and
   leaves the header ground stopping short of the card's edge. */
.kc-body .api-endpoint-card .api-params { overflow-x: auto; }
.kc-body .api-endpoint-card .params-table {
    /* The docs-table rule above turns every table in the article column into
       its own scroll container. This one is inside a `not-prose` card and does
       not want that, so it says so. */
    display: table;
    width: 100%;
    min-width: 26rem;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0;
}
.kc-body .api-endpoint-card .params-table th {
    padding: 8px 10px;
    text-align: left;
    background: var(--ks-sand-soft);
    border-bottom: 1px solid var(--ks-line);
    font-family: var(--ks-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .params-table td {
    padding: 10px;
    border-top: 1px solid var(--ks-line);
    vertical-align: top;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .params-table td:first-child { min-width: 8rem; }
.kc-body .api-endpoint-card .params-table td:last-child { width: 62%; }
.kc-body .api-endpoint-card .param-name {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa);
    overflow-wrap: anywhere;
}
.kc-body .api-endpoint-card .param-type {
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .param-required,
.kc-body .api-endpoint-card .param-optional {
    display: inline-block;
    margin-left: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.kc-body .api-endpoint-card .param-required { color: var(--ks-board-deep); }
.kc-body .api-endpoint-card .param-optional { color: #A08E78; }
.kc-body .api-endpoint-card .param-description { color: var(--ks-koa-soft); }
.kc-body .api-endpoint-card .param-description code,
.kc-body .api-endpoint-card .param-default code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    color: var(--ks-koa);
    border-radius: 4px;
    padding: 1px 5px;
}
.kc-body .api-endpoint-card .param-default,
.kc-body .api-endpoint-card .param-enum {
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--ks-koa-soft);
}

/* Response note */
.kc-body .api-endpoint-card .endpoint-response {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--ks-line);
    border-left: 3px solid var(--ks-lagoon);
    border-radius: 0 10px 10px 0;
    background: var(--ks-sand-soft);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .endpoint-response > *:first-child { margin-top: 0; }
.kc-body .api-endpoint-card .endpoint-response > *:last-child { margin-bottom: 0; }

/* Collection page: one section per endpoint, and the closing prose. */
.kc-docs-main .api-collection-section {
    /* Anchor jumps clear the sticky brand bar. Helios's own `mb-16 pb-12`
       leaves a hundred-odd pixels between one endpoint and the next, which is
       more air than these cards want. */
    scroll-margin-top: calc(var(--ks-nav-h) + 16px);
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom-color: var(--ks-line);
}
.kc-docs-main .api-collection-section:last-child { margin-bottom: 0; padding-bottom: 0; }
.kc-docs-main .api-collection-section h2 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 22px;
    margin: 0 0 4px;
}
.kc-docs-main .api-collection-outro { margin-top: 36px; }

/* On-this-page TOC: the endpoint rows carry a method badge, so they need the
   badge to sit on its own line above a long title rather than squashing it. */
.kc-docs-toc .toc-link { display: flex; align-items: baseline; gap: 7px; }
.kc-docs-toc .toc-link .api-method {
    flex: none;
    padding: 1px 5px;
    font-size: 9.5px;
}

/* Docs sidebar: same badge, one size down again. */
.kc-docs-aside .nav-link .api-method,
.kc-docs-mobile-panel .nav-link .api-method {
    margin-right: 6px;
    padding: 1px 5px;
    font-size: 9.5px;
}

/* --------------------------------------------------------------------------
   Code blocks (codesh plugin)
   --------------------------------------------------------------------------
   codesh ships a cool Tailwind-gray chrome (#f3f4f6 surround, gray-300 chips)
   that reads cold against the warm grounds. Its stylesheet loads after this
   one, so every rule here is scoped under `.kc-body` to win on specificity
   rather than order. Syntax token colours are left to the phiki theme.
   -------------------------------------------------------------------------- */

.kc-body .codesh-block {
    background-color: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    box-shadow: 0 4px 10px -2px rgba(43, 28, 12, 0.06);
}

/* phiki writes the code body's background as an inline style, so the pure white
   from its light theme needs `!important` to warm up. Token colours are left to
   the phiki theme. */
.kc-body .codesh-block pre.phiki { background-color: var(--ks-card) !important; }

.kc-body .codesh-block .codesh-header {
    background-color: transparent;
    border-bottom: 1px solid var(--ks-line);
}

.kc-body .codesh-block .codesh-lang {
    color: var(--ks-koa-soft);
    background-color: var(--ks-sand-deep);
}

.kc-body .codesh-block .codesh-title { color: var(--ks-koa); }

.kc-body .codesh-block .codesh-copy,
.kc-body .codesh-group .codesh-copy {
    color: var(--ks-koa-soft);
    background-color: var(--ks-card);
    border-color: var(--ks-line);
}

.kc-body .codesh-block .codesh-copy:hover,
.kc-body .codesh-group .codesh-copy:hover {
    color: var(--ks-lagoon);
    background-color: var(--ks-card);
    border-color: var(--ks-lagoon);
}

/* Sidebar navigation links */
.kc-docs-shell .nav-link { font-family: var(--ks-body); }
.kc-docs-shell .nav-link.active { color: var(--ks-lagoon); }

/* Line the nested group's vertical rule up with the centre of its parent's
   icon: the row's 12px of left padding plus half the 20px icon. Helios's own
   `ml-4` left it 6px short. */
.kc-docs-shell .nav-children,
.kc-docs-mobile-panel .nav-children { margin-left: 22px; }

/* Helios's search trigger and kbd chips */
.kc-body .search-trigger { border-color: var(--ks-line); background: var(--ks-card); color: var(--ks-koa-soft); }
.kc-body .search-trigger:hover { border-color: var(--ks-lagoon); }
.kc-body kbd { border-color: var(--ks-line); background: var(--ks-sand); color: var(--ks-koa-soft); }

/* --------------------------------------------------------------------------
   Light-only guarantees
   --------------------------------------------------------------------------
   Helios ships a dark variant driven by a `dark` class on <html>. This site
   never uses it: the templates hardcode light and js/kahuna.js strips the class
   if a stale localStorage value from another Helios site puts it back. These
   rules are the belt-and-braces so nothing dark can flash through.
   -------------------------------------------------------------------------- */

html.dark .kc-body { background: var(--ks-salt); color: var(--ks-koa); }
html.dark .kc-docs-shell { background: var(--ks-card); color: var(--ks-koa); }
html.dark .kc-docs-aside { background: var(--ks-salt); }

/* --------------------------------------------------------------------------
   Compare pages
   --------------------------------------------------------------------------
   Everything under /compare: the parity matrix (compare-matrix), the index
   cards (compare-cards), hand-written tables (compare-table), long-form prose
   (prose), the verdict pair (compare-verdict), onward links (related) and the
   slim breadcrumb (compare-crumb).

   Plain CSS on `kc-` classes over `--ks-` tokens, hairline borders, 10px
   radii, no shadows and no gradients — the same rules as the rest of the file.

   The one thing worth knowing before editing: a feature row's note lives in a
   SEPARATE <tr> underneath it, not inside the feature cell, so it can run the
   full width of the table. The toggle is a <details> in the feature cell and
   the reveal is `tr:has(.kc-note[open]) + tr.kc-cmp-note` — pure CSS, so the
   notes work with JavaScript off, and a browser without `:has()` simply shows
   every note instead of hiding them.
   -------------------------------------------------------------------------- */

/* ---- token colours -------------------------------------------------------
   One source for the six cell tokens. Glyphs are mono so ✓ / + / ~ / ✗ all
   occupy the same advance and the columns read as columns. */

.kc-cell,
.kc-cmp-legend b {
    font-family: var(--ks-mono);
    font-variant-ligatures: none;
}

/* Cell icons. The text glyph stays in the markup for copy-paste and readers
   without CSS; on screen each token is a 20px disc whose fill says how much of
   the feature is there, with a check or cross masked in front of it. The two
   masks are defined once here as data URIs — nothing is inlined per cell. */
:root {
    --ks-no: #B3412E;
    /* "Official add-on" is available and working, just not in the box, so it
       belongs to the same blue family as "in core" one step lighter — not to
       the warm end of the palette, where it sat next to --ks-no and read at a
       glance as another kind of no. */
    --ks-addon: #3E8FA3;
    --kc-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.6 5 12l1.6-1.6 3 3 8.8-8.8L20 6.2z'/%3E%3C/svg%3E");
    --kc-mask-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.6 7.8 13.4 12l4.2 4.2-1.4 1.4-4.2-4.2-4.2 4.2-1.4-1.4L10.6 12 6.4 7.8l1.4-1.4 4.2 4.2 4.2-4.2z'/%3E%3C/svg%3E");
}

.kc-cell[data-token="core"],        .kc-cmp-legend b[data-token="core"]        { color: var(--ks-lagoon); }
.kc-cell[data-token="addon"],       .kc-cmp-legend b[data-token="addon"]       { color: var(--ks-addon); }
.kc-cell[data-token="third_party"], .kc-cmp-legend b[data-token="third_party"] { color: var(--ks-koa-soft); }
.kc-cell[data-token="partial"],     .kc-cmp-legend b[data-token="partial"]     { color: var(--ks-amber); }
.kc-cell[data-token="none"],        .kc-cmp-legend b[data-token="none"]        { color: var(--ks-no); }
.kc-cell[data-token="unknown"],     .kc-cmp-legend b[data-token="unknown"]     { color: var(--ks-koa-soft); }

/* A faint wash of the same colour across the cell, so a column reads at a
   glance even before the icons resolve. Layered as an image so the KahunaCart
   column's own background stays underneath. */
.kc-cell[data-token]        { background-image: linear-gradient(var(--kc-cell-tint, transparent), var(--kc-cell-tint, transparent)); }
.kc-cell[data-token="core"]        { --kc-cell-tint: color-mix(in srgb, var(--ks-lagoon) 11%, transparent); }
.kc-cell[data-token="addon"]       { --kc-cell-tint: color-mix(in srgb, var(--ks-addon) 9%, transparent); }
.kc-cell[data-token="third_party"] { --kc-cell-tint: color-mix(in srgb, var(--ks-koa-soft) 7%, transparent); }
.kc-cell[data-token="partial"]     { --kc-cell-tint: color-mix(in srgb, var(--ks-amber) 10%, transparent); }
.kc-cell[data-token="none"]        { --kc-cell-tint: color-mix(in srgb, var(--ks-no) 5%, transparent); }
.kc-cell[data-token="unknown"]     { --kc-cell-tint: transparent; }

.kc-cell > span[aria-hidden],
.kc-cmp-legend b[data-token] {
    --kc-i-mask: none;
    --kc-i-ink: currentColor;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 0;
    line-height: 16px;
    text-align: center;
}
.kc-cell > span[aria-hidden]::before,
.kc-cmp-legend b[data-token]::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--kc-i-ink);
    -webkit-mask: var(--kc-i-mask) center / contain no-repeat;
    mask: var(--kc-i-mask) center / contain no-repeat;
}

/* In the box: a solid disc with the check knocked out of it. */
.kc-cell[data-token="core"] > span, .kc-cmp-legend b[data-token="core"] {
    background: currentColor; --kc-i-mask: var(--kc-mask-check); --kc-i-ink: var(--ks-card);
}
/* Official add-on: an open ring with a check — there, but not in the box. */
.kc-cell[data-token="addon"] > span, .kc-cmp-legend b[data-token="addon"] {
    --kc-i-mask: var(--kc-mask-check);
}
/* Third-party: the same, dashed, because somebody else maintains it. */
.kc-cell[data-token="third_party"] > span, .kc-cmp-legend b[data-token="third_party"] {
    border-style: dashed; --kc-i-mask: var(--kc-mask-check);
}
/* Partial: half a disc. */
.kc-cell[data-token="partial"] > span, .kc-cmp-legend b[data-token="partial"] {
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.kc-cell[data-token="partial"] > span::before, .kc-cmp-legend b[data-token="partial"]::before { content: none; }
/* Not available: a cross on a faint tint, no ring — absence should not shout. */
.kc-cell[data-token="none"] > span, .kc-cmp-legend b[data-token="none"] {
    border-color: transparent;
    background: color-mix(in srgb, var(--ks-no) 14%, transparent);
    --kc-i-mask: var(--kc-mask-cross);
}
.kc-cell[data-token="none"] > span::before, .kc-cmp-legend b[data-token="none"]::before { inset: -1px; }
/* Unverified: a dotted ring around the question mark itself. */
.kc-cell[data-token="unknown"] > span, .kc-cmp-legend b[data-token="unknown"] {
    border-style: dotted; font-size: 12px; font-weight: 700; font-family: var(--ks-mono);
}
.kc-cell[data-token="unknown"] > span::before, .kc-cmp-legend b[data-token="unknown"]::before { content: none; }

/* ---- legend -------------------------------------------------------------- */

.kc-cmp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0 0 24px;
    padding: 14px 18px;
    list-style: none;
    background: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
}

.kc-cmp-legend li { display: flex; align-items: baseline; gap: 8px; }
.kc-cmp-legend b { min-width: 1.5em; text-align: center; font-size: 14px; }

/* ---- expand / collapse --------------------------------------------------- */

.kc-cmp-tools {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
}

.kc-cmp-tool {
    font-family: var(--ks-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 7px 14px;
    cursor: pointer;
}

.kc-cmp-tool:hover { color: var(--ks-lagoon); border-color: var(--ks-lagoon); }

/* ---- platform index (compare-index) --------------------------------------
   The row of "vs" links under the hub's hero: eight pages, one line. */

.kc-cmp-index-block { padding-top: 0; }

.kc-cmp-index {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.kc-cmp-index-label {
    font-family: var(--ks-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin-inline-end: 4px;
}

.kc-cmp-index-link {
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa);
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 7px 14px;
    text-decoration: none;
    white-space: nowrap;
}

.kc-cmp-index-link small {
    font-size: 12px;
    font-weight: 500;
    color: var(--ks-koa-soft);
}

.kc-cmp-index-link:hover { color: var(--ks-lagoon); border-color: var(--ks-lagoon); }

/* ---- groups -------------------------------------------------------------- */

.kc-cmp-groups { display: flex; flex-direction: column; gap: 12px; }

.kc-cmp-group {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    overflow: hidden;
}

.kc-cmp-group > summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    font-family: var(--ks-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    list-style: none;
    background: var(--ks-sand-soft);
}

.kc-cmp-group > summary::-webkit-details-marker { display: none; }

.kc-cmp-group > summary::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-right: 2px solid var(--ks-lagoon);
    border-bottom: 2px solid var(--ks-lagoon);
    transform: rotate(-45deg);
    transition: transform 160ms ease;
}

.kc-cmp-group[open] > summary::before { transform: rotate(45deg); }
.kc-cmp-group > summary:hover { background: var(--ks-sand); }
.kc-cmp-gname { flex: 1 1 auto; }

.kc-cmp-gcount {
    flex: none;
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

/* ---- the scroller -------------------------------------------------------- */

.kc-cmp-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.kc-cmp-scroll:focus-visible { outline: 3px solid var(--ks-lagoon); outline-offset: -3px; }

/* ---- the matrix table ---------------------------------------------------- */

/* `separate` rather than `collapse`: a sticky cell in a collapsed table loses
   its borders in WebKit, so every rule is drawn on the cell itself. */
.kc-cmp {
    --kc-cmp-platform-width: 120px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

/* Platform cells form a fixed-width block against the right edge. The feature
   column takes the remaining room, keeping every group aligned even when its
   longest label is much shorter than the group above or below it. */
.kc-cmp:not(.kc-cmp-wide) th.kc-cmp-plat,
.kc-cmp:not(.kc-cmp-wide) td.kc-cell {
    box-sizing: border-box;
    width: var(--kc-cmp-platform-width);
    min-width: var(--kc-cmp-platform-width);
}

.kc-cmp th,
.kc-cmp td {
    border-bottom: 1px solid var(--ks-line);
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}

.kc-cmp tbody tr:last-child > th,
.kc-cmp tbody tr:last-child > td { border-bottom: 0; }

.kc-cmp thead th {
    background: var(--ks-sand);
    font-family: var(--ks-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ks-koa);
    white-space: nowrap;
    /* Sticky against the scroller. `overflow-x: auto` makes .kc-cmp-scroll the
       scroll container on both axes, so this only bites where the table itself
       scrolls vertically — groups are short enough that it rarely has to. */
    position: sticky;
    top: 0;
    z-index: 3;
}

.kc-cmp thead th abbr { text-decoration: none; border-bottom: 1px dotted var(--ks-line); cursor: help; }
.kc-cmp thead th.kc-cmp-plat { text-align: center; }

/* The feature column rides along on horizontal scroll. A sticky cell needs an
   opaque background of its own — `inherit` resolves to transparent here. */
.kc-cmp th.kc-cmp-feat {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 210px;
    max-width: 340px;
    font-weight: 500;
    color: var(--ks-koa);
    background: var(--ks-card);
    border-right: 1px solid var(--ks-line);
}

.kc-cmp thead th.kc-cmp-feat { z-index: 4; background: var(--ks-sand); }
.kc-cmp tbody tr.kc-cmp-alt > th.kc-cmp-feat { background: var(--ks-sand-soft); }
.kc-cmp tbody tr.kc-cmp-alt > td { background: var(--ks-sand-soft); }

/* Ours: a ruled frame down the whole column rather than a fill, so the
   per-token tints read the same in our column as in everybody else's. Drawn
   with inset shadows so it survives either table border model and never
   changes the cell size; the header takes the top edge, the last row the
   bottom one. */
.kc-cmp th.kc-cmp-ours,
.kc-cmp td.kc-cmp-ours {
    box-shadow: inset 2px 0 0 var(--ks-lagoon), inset -2px 0 0 var(--ks-lagoon);
}
.kc-cmp thead th.kc-cmp-ours {
    color: var(--ks-lagoon-deep);
    box-shadow: inset 2px 0 0 var(--ks-lagoon), inset -2px 0 0 var(--ks-lagoon), inset 0 2px 0 var(--ks-lagoon);
}
/* The last feature row, not :last-child — a collapsed note row can follow it. */
.kc-cmp tbody tr.kc-cmp-row-last > td.kc-cmp-ours {
    box-shadow: inset 2px 0 0 var(--ks-lagoon), inset -2px 0 0 var(--ks-lagoon), inset 0 -2px 0 var(--ks-lagoon);
}

.kc-cell,
.kc-cmp td.kc-cell {
    text-align: center;
    vertical-align: middle;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
}

/* ---- notes --------------------------------------------------------------- */

.kc-note { display: block; }
.kc-note > summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}
.kc-note > summary::-webkit-details-marker { display: none; }

.kc-note > summary::after {
    content: "i";
    flex: none;
    order: 2;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    font-family: var(--ks-mono);
    font-size: 10px;
    font-style: normal;
    line-height: 15px;
    text-align: center;
    color: var(--ks-lagoon);
    border: 1px solid var(--ks-lagoon);
    border-radius: 50%;
}

.kc-note[open] > summary::after { background: var(--ks-lagoon); color: var(--ks-salt); }
.kc-note > summary:hover span { color: var(--ks-lagoon); }

/* The note row is in the DOM on every render; `:has()` reveals it. */
.kc-cmp tr.kc-cmp-note { display: none; }
.kc-cmp tbody tr:has(.kc-note[open]) + tr.kc-cmp-note,
.kc-cmp tr.kc-cmp-note:target { display: table-row; }

@supports not selector(:has(*)) {
    .kc-cmp tr.kc-cmp-note { display: table-row; }
}

.kc-cmp tr.kc-cmp-note > td {
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
    padding: 12px 16px;
}

.kc-cmp tr.kc-cmp-note code {
    font-family: var(--ks-mono);
    font-size: 0.92em;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 5px;
    padding: 1px 5px;
}

.kc-cmp tr.kc-cmp-note strong { color: var(--ks-koa); }

/* ---- the matrix on a phone ---------------------------------------------- */

/* Below 720px a twelve-column table cannot work, sticky column or not. The
   table stops being a table: each feature row becomes a card with the label on
   top and one chip per platform underneath (platform name over its mark, from
   the cell's data-plat), KahunaCart first with its lagoon frame. Nothing
   scrolls sideways, and the note toggle in the label keeps working. */
@media (max-width: 720px) {
    /* Only the matrix scroller; compare-table.html.twig shares the class and
       still needs to scroll sideways. */
    .kc-cmp-group > .kc-cmp-scroll { overflow: visible; }
    .kc-cmp,
    .kc-cmp tbody,
    .kc-cmp tr,
    .kc-cmp th,
    .kc-cmp td { display: block; width: auto; min-width: 0; max-width: none; }
    .kc-cmp thead { display: none; }

    .kc-cmp tbody tr.kc-cmp-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 6px;
        padding: 12px 14px 14px;
        border-bottom: 1px solid var(--ks-line);
    }
    .kc-cmp tbody tr.kc-cmp-row-last { border-bottom: 0; }
    .kc-cmp tbody tr.kc-cmp-alt { background: var(--ks-sand-soft); }

    .kc-cmp th.kc-cmp-feat,
    .kc-cmp tbody tr.kc-cmp-alt > th.kc-cmp-feat {
        grid-column: 1 / -1;
        position: static;
        padding: 0 0 6px;
        border: 0;
        background: transparent;
        font-weight: 600;
        font-size: 14px;
    }

    .kc-cmp td.kc-cell,
    .kc-cmp tbody tr.kc-cmp-alt > td.kc-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 7px 4px 6px;
        border: 1px solid var(--ks-line);
        border-radius: 8px;
        background-color: var(--ks-card);
        white-space: normal;
    }
    .kc-cmp td.kc-cell::before {
        content: attr(data-plat);
        order: -1;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--ks-mono);
        font-size: 10.5px;
        letter-spacing: 0.02em;
        color: var(--ks-koa-soft);
    }
    .kc-cmp td.kc-cmp-ours,
    .kc-cmp tbody tr.kc-cmp-row-last > td.kc-cmp-ours { box-shadow: inset 0 0 0 2px var(--ks-lagoon); }
    .kc-cmp td.kc-cmp-ours::before { color: var(--ks-lagoon-deep); font-weight: 700; }

    .kc-cmp tbody tr:has(.kc-note[open]) + tr.kc-cmp-note,
    .kc-cmp tr.kc-cmp-note:target { display: block; }
    .kc-cmp tr.kc-cmp-note > td { padding: 10px 14px 12px; }
}

/* ---- footnotes ----------------------------------------------------------- */

.kc-cmp-foot { margin-top: 40px; }
.kc-cmp-foot h3 { font-size: 20px; font-weight: 700; margin: 0 0 14px; }

.kc-cmp-notes {
    margin: 0;
    padding-left: 24px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-cmp-notes li { margin-bottom: 12px; }
.kc-cmp-notes code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 5px; padding: 1px 5px; }
.kc-cmp-notes strong { color: var(--ks-koa); }

.kc-cmp-fnref {
    display: block;
    font-weight: 600;
    color: var(--ks-koa);
    text-decoration: none;
}

.kc-cmp-fnref:hover { color: var(--ks-lagoon); }

.kc-cmp-verified {
    margin: 22px 0 0;
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}

/* ---- comparison cards ---------------------------------------------------- */

.kc-cmp-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.kc-cmp-cards.kc-pushed { margin-top: 36px; }

@media (min-width: 640px)  { .kc-cmp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kc-cmp-cards { grid-template-columns: repeat(3, 1fr); } }

.kc-cmp-card {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 22px 22px 20px;
}

.kc-cmp-card-ours { background: var(--ks-lagoon-mist); border-color: var(--ks-lagoon); }

.kc-cmp-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.kc-cmp-card h3 a { color: var(--ks-koa); text-decoration: none; }
.kc-cmp-card h3 a:hover { color: var(--ks-lagoon); }

.kc-cmp-card-tag {
    margin: 0 0 16px;
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}

.kc-cmp-bar {
    display: flex;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--ks-sand-deep);
}

.kc-cmp-bar span { display: block; height: 100%; }
.kc-cmp-bar span[data-token="core"]        { background: var(--ks-lagoon); }
.kc-cmp-bar span[data-token="addon"]       { background: var(--ks-addon); }
.kc-cmp-bar span[data-token="third_party"] { background: var(--ks-koa-soft); }
.kc-cmp-bar span[data-token="partial"]     { background: var(--ks-amber); }
.kc-cmp-bar span[data-token="none"]        { background: var(--ks-sand-deep); }

.kc-cmp-count {
    margin: 9px 0 14px;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

.kc-cmp-verdict { margin: 0 0 16px; font-size: 14.5px; color: var(--ks-koa); }

.kc-cmp-more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-lagoon);
    text-decoration: none;
}

.kc-cmp-more:hover { text-decoration: underline; }

/* ---- hand-written table (compare-table) ---------------------------------- */

.kc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    overflow: hidden;
}

.kc-cmp-scroll.kc-pushed { margin-top: 36px; }

.kc-table th,
.kc-table td {
    border-bottom: 1px solid var(--ks-line);
    padding: 13px 16px;
    text-align: left;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

.kc-table thead th {
    background: var(--ks-sand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.kc-table tbody th { font-weight: 600; color: var(--ks-koa); }
.kc-table tbody tr:last-child > th,
.kc-table tbody tr:last-child > td { border-bottom: 0; }
.kc-table .kc-col-ours { background: var(--ks-lagoon-mist); }
.kc-table thead th.kc-col-ours { color: var(--ks-lagoon-deep); }

.kc-table-note {
    margin: 14px 0 0;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
    max-width: 72ch;
}

/* ---- prose module -------------------------------------------------------- */

.kc-prose.kc-pushed { margin-top: 30px; }
.kc-prose-narrow { max-width: 72ch; }
.kc-prose-wide { max-width: none; }

.kc-prose a { color: var(--ks-lagoon); }
.kc-prose strong { font-weight: 700; color: var(--ks-koa); }
.kc-prose h3:first-child { margin-top: 0; }

/* Two columns for the long "here is everything you give up" bullet lists. */
.kc-prose-2col { columns: 2; column-gap: 48px; }
.kc-prose-2col > * { break-inside: avoid; }
.kc-prose-2col h3 { break-after: avoid; }

@media (max-width: 760px) {
    .kc-prose-2col { columns: 1; }
}

/* ---- verdict pair -------------------------------------------------------- */

.kc-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kc-verdict.kc-pushed { margin-top: 36px; }

@media (max-width: 760px) {
    .kc-verdict { grid-template-columns: 1fr; }
}

.kc-verdict-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 24px 26px;
}

.kc-verdict-ours { background: var(--ks-lagoon-mist); border-color: var(--ks-lagoon); }
.kc-verdict-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.01em; }
.kc-verdict-card ul { list-style: none; margin: 0; padding: 0; }

.kc-verdict-card li {
    display: flex;
    gap: 11px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ks-koa);
}

.kc-verdict-card li:last-child { margin-bottom: 0; }

.kc-verdict-mark {
    flex: none;
    font-family: var(--ks-mono);
    font-size: 13px;
    line-height: 1.75;
    color: var(--ks-lagoon);
}

.kc-verdict-ours .kc-verdict-mark { color: var(--ks-lagoon-deep); }

/* ---- related links ------------------------------------------------------- */

.kc-block.kc-tight.kc-tighter { padding: 40px 0 56px; }
.kc-h2-small { font-size: clamp(22px, 2.6vw, 28px); }

.kc-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.kc-related-card {
    display: block;
    position: relative;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 16px 40px 16px 18px;
    text-decoration: none;
    color: var(--ks-koa);
}

.kc-related-card:hover { border-color: var(--ks-lagoon); }
.kc-related-card b { display: block; font-size: 15px; font-weight: 700; }
.kc-related-card span { display: block; margin-top: 4px; font-size: 13px; color: var(--ks-koa-soft); }

.kc-related-card em {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: var(--ks-mono);
    font-style: normal;
    color: var(--ks-lagoon);
}

/* ---- ranking ------------------------------------------------------------- */

.kc-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 820px;
    border-top: 1px solid var(--ks-line);
}

.kc-rank.kc-pushed { margin-top: 34px; }

.kc-rank-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 20px 18px 20px 4px;
    border-bottom: 1px solid var(--ks-line);
}

.kc-rank-ours {
    background: var(--ks-lagoon-mist);
    border-radius: 10px;
    padding-left: 18px;
}

/* The place, and it is load-bearing: it comes from the frontmatter, not a
   counter, so a tie or a gap in the ranking still renders honestly. */
.kc-rank-num {
    flex: none;
    width: 2ch;
    font-family: var(--ks-mono);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    color: var(--ks-lagoon);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.kc-rank-ours .kc-rank-num { color: var(--ks-board); }

.kc-rank-body { flex: 1 1 auto; min-width: 0; }
.kc-rank-body h3 { font-size: 19px; font-weight: 700; margin: 0 0 5px; letter-spacing: -0.01em; }
.kc-rank-body h3 a { color: var(--ks-koa); text-decoration: none; }
.kc-rank-body h3 a:hover { color: var(--ks-lagoon); }
.kc-rank-body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ks-koa-soft); }
.kc-rank-ours .kc-rank-body p { color: var(--ks-koa); }

.kc-rank-lens {
    max-width: 820px;
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

/* ---- compare breadcrumb -------------------------------------------------- */

.kc-crumb {
    padding: 26px 0 0;
    font-size: 13px;
    color: var(--ks-koa-soft);
}

.kc-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kc-crumb a { color: var(--ks-koa-soft); text-decoration: none; }
.kc-crumb a:hover { color: var(--ks-lagoon); text-decoration: underline; }
.kc-crumb-sep { color: var(--ks-line); }
.kc-crumb [aria-current="page"] { color: var(--ks-koa); font-weight: 600; }

/* The crumb sits directly above the page hero, so that hero loses its top pad. */
.kc-crumb + .kc-block,
.kc-crumb + .kc-page-hero { padding-top: 22px; }

/* ==========================================================================
   Benchmarks (/benchmarks)
   --------------------------------------------------------------------------
   Everything here reads `config/benchmarks.yaml`, which the harness writes.
   Light-only like the rest of this file — the site sets `helios-theme` to
   light before first paint and strips any dark class, so there is no second
   palette to keep in step. Every figure is `tabular-nums` so a column of
   milliseconds lines up on the decimal point and a reader can scan it.
   ========================================================================== */

.kc-bench-num,
.kc-bench-table td,
.kc-bench-table th { font-variant-numeric: tabular-nums; }

/* ---- hero ---------------------------------------------------------------- */

.kc-bench-stamp {
    max-width: 62ch;
    margin: 22px auto 0;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-bench-stamp code {
    background: var(--ks-sand);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 0.94em;
}

.kc-bench-stamp b { color: var(--ks-board-deep); }

.kc-bench-headline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    max-width: 820px;
    margin: 26px auto 0;
    text-align: left;
}

.kc-bench-figure {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 18px 20px 16px;
}

.kc-bench-figure-name {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-lagoon-deep);
}

.kc-bench-figure-num {
    font-family: var(--ks-mono);
    font-size: 34px;
    font-weight: 500;
    line-height: 1.05;
    color: var(--ks-board);
    font-variant-numeric: tabular-nums;
}

.kc-bench-figure-num em {
    display: inline-block;
    margin-left: 6px;
    font-family: var(--ks-body);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    color: var(--ks-koa-soft);
}

.kc-bench-figure-sub {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

.kc-bench-figure-sub b { color: var(--ks-koa); font-weight: 700; }
.kc-bench-figure-sub span { color: var(--ks-line); }

.kc-bench-figure-ver {
    margin: 6px 0 0;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    color: var(--ks-koa-soft);
}

.kc-bench-note {
    max-width: 62ch;
    margin: 22px auto 0;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
}

/* ---- store size ---------------------------------------------------------- */

.kc-bench-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.kc-bench-stat {
    background: var(--ks-lagoon-mist);
    border: 1px solid var(--ks-lagoon);
    border-radius: 10px;
    padding: 18px 20px;
}

.kc-bench-stat-num {
    font-family: var(--ks-mono);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--ks-lagoon-deep);
    font-variant-numeric: tabular-nums;
}

.kc-bench-stat-lbl {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
}

.kc-bench-substore { margin-top: 34px; }

.kc-bench-substore h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.kc-bench-substore > p {
    margin: 0;
    max-width: 72ch;
    font-size: 14.5px;
    color: var(--ks-koa-soft);
}

.kc-bench-substore code {
    font-family: var(--ks-mono);
    font-size: 0.92em;
    background: var(--ks-sand);
    border-radius: 5px;
    padding: 1px 5px;
}

.kc-bench-rows th[scope="row"] { font-family: var(--ks-mono); font-size: 13.5px; font-weight: 500; }

/* ---- a caveat that must not be missed ------------------------------------ */

.kc-bench-warn {
    margin: 22px 0 0;
    padding: 14px 18px;
    max-width: 82ch;
    background: var(--ks-sand);
    border-left: 4px solid var(--ks-amber);
    border-radius: 0 8px 8px 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ks-koa);
}

.kc-bench-warn b { color: var(--ks-koa); }

.kc-bench-warn code {
    font-family: var(--ks-mono);
    font-size: 0.92em;
    background: var(--ks-card);
    border-radius: 5px;
    padding: 1px 5px;
}

/* ---- one target ---------------------------------------------------------- */

.kc-bench-target + .kc-bench-target { margin-top: 60px; padding-top: 48px; border-top: 1px solid var(--ks-line); }
.kc-bench .kc-bench-target:first-of-type { margin-top: 30px; }

.kc-bench-target-head h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.kc-bench-target-head > p {
    margin: 0 0 8px;
    max-width: 78ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-bench-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
}

.kc-bench-badge-live { background: var(--ks-lagoon); color: #FCF6EA; }

.kc-bench-meta {
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}

.kc-bench-meta code {
    background: var(--ks-sand);
    border-radius: 5px;
    padding: 1px 5px;
}

/* ---- the environment block ----------------------------------------------- */

.kc-bench-env {
    margin: 18px 0 0;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    overflow: hidden;
}

.kc-bench-env > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
}

.kc-bench-env > summary::-webkit-details-marker { display: none; }

.kc-bench-env > summary::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--ks-lagoon);
    border-bottom: 2px solid var(--ks-lagoon);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.kc-bench-env[open] > summary::before { transform: rotate(45deg); }
.kc-bench-env > summary:hover { background: var(--ks-sand); }
.kc-bench-env .kc-table { border: 0; border-radius: 0; border-top: 1px solid var(--ks-line); }
.kc-bench-env .kc-table td { font-size: 13.5px; color: var(--ks-koa-soft); }

/* ---- a group of routes --------------------------------------------------- */

.kc-bench-group { margin-top: 32px; }

.kc-bench-group h4 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.kc-bench-group-note {
    margin: 0 0 14px;
    max-width: 78ch;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
}

/* ---- the results table --------------------------------------------------- */

.kc-bench-table thead th { vertical-align: bottom; }
.kc-bench-table th.kc-bench-right,
.kc-bench-table td.kc-bench-right { text-align: right; }

.kc-bench-unit {
    display: block;
    margin-top: 2px;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ks-koa-soft);
}

.kc-bench-table tbody th[scope="row"] { font-size: 14.5px; white-space: nowrap; }
.kc-bench-script { vertical-align: top; background: var(--ks-sand-soft); }

.kc-bench-cell {
    text-align: right;
    white-space: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
}

.kc-bench-p95 {
    display: block;
    font-family: var(--ks-mono);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ks-koa);
    font-variant-numeric: tabular-nums;
}

.kc-bench-spread {
    display: block;
    margin-top: 2px;
    font-family: var(--ks-mono);
    font-size: 11px;
    line-height: 1.3;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

/* The lowest p95 in the row. The tint alone would be the only signal for a
   reader who cannot see it, so the cell also carries a bar on its left edge. */
.kc-bench-fastest {
    background: var(--ks-lagoon-mist);
    box-shadow: inset 3px 0 0 var(--ks-lagoon);
}

.kc-bench-fastest .kc-bench-p95 { color: var(--ks-lagoon-deep); font-weight: 700; }
.kc-bench-missing { background: var(--ks-sand-soft); }
.kc-bench-none { color: var(--ks-koa-soft); opacity: 0.5; font-family: var(--ks-mono); }

/* ---- reproduce recipe ---------------------------------------------------- */

.kc-bench-repro {
    max-width: 72ch;
    margin: 38px 0 0;
    padding: 26px 28px 22px;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
}

.kc-bench-repro h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.kc-bench-repro > p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--ks-koa-soft); }

.kc-bench-recipe {
    counter-reset: kc-bench-step;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.kc-bench-recipe li {
    position: relative;
    padding: 0 0 14px 30px;
    border-left: 2px solid var(--ks-line);
    margin-left: 9px;
}

.kc-bench-recipe li:last-child { padding-bottom: 0; border-left-color: transparent; }

.kc-bench-recipe li::before {
    counter-increment: kc-bench-step;
    content: counter(kc-bench-step);
    position: absolute;
    left: -10px;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ks-lagoon);
    color: #FCF6EA;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    line-height: 18px;
    text-align: center;
}

.kc-bench-recipe code {
    display: block;
    font-family: var(--ks-mono);
    font-size: 13.5px;
    color: var(--ks-koa);
    word-break: break-word;
}

.kc-bench-recipe span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
}

.kc-bench-repo-link { margin: 0; font-size: 14px; color: var(--ks-koa-soft); }
.kc-bench-repo-link a { font-family: var(--ks-mono); font-size: 0.95em; }

/* ---- history ------------------------------------------------------------- */

.kc-bench-history { font-size: 13.5px; }
.kc-bench-history th,
.kc-bench-history td { padding: 10px 13px; white-space: nowrap; }
.kc-bench-history code { font-family: var(--ks-mono); font-size: 0.92em; color: var(--ks-koa-soft); }
.kc-bench-history .kc-bench-badge { font-size: 10.5px; padding: 2px 8px; }

.kc-bench-build { font-size: 12.5px; color: var(--ks-koa-soft); }

/* ---- capacity ------------------------------------------------------------ */

.kc-bench-cap-peak {
    margin: 0 0 12px;
    font-size: 14.5px;
    color: var(--ks-koa);
}

.kc-bench-cap-peak b {
    font-family: var(--ks-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ks-lagoon-deep);
}

.kc-bench-capacity tbody th[scope="row"] { font-size: 14.5px; white-space: nowrap; }

.kc-bench-nocap {
    background: var(--ks-sand-soft);
    color: var(--ks-koa-soft);
    font-size: 13.5px;
}

/* ---- narrow screens ------------------------------------------------------
   The page itself never scrolls sideways: the matrix does, inside its own box. */

@media (max-width: 760px) {
    .kc-compare .kc-cmp-legend { font-size: 12.5px; gap: 6px 16px; }
    .kc-cmp { --kc-cmp-platform-width: 104px; font-size: 13px; }
    .kc-cmp th,
    .kc-cmp td { padding: 8px 10px; }
    .kc-cmp th.kc-cmp-feat { min-width: 168px; max-width: 200px; }
    .kc-cmp-group > summary { font-size: 15.5px; padding: 13px 15px; }
    .kc-cmp-card { padding: 18px 18px 16px; }
    .kc-rank-row { gap: 14px; padding: 16px 12px 16px 4px; }
    .kc-rank-num { font-size: 24px; }
    .kc-bench-table { font-size: 13px; }
    .kc-bench-table th,
    .kc-bench-table td { padding: 9px 11px; }
    .kc-bench-table tbody th[scope="row"] { white-space: normal; min-width: 130px; }
    .kc-bench-p95 { font-size: 14px; }
    .kc-bench-figure-num { font-size: 28px; }
    .kc-bench-target-head h3 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .kc-cmp-group > summary::before,
    .kc-bench-env > summary::before { transition: none; }
}

/* --------------------------------------------------------------------------
   Consent banner
   --------------------------------------------------------------------------
   grav-plugin-consent ships a neutral palette and inherits the body font, so
   it is already legible here — this block is what makes it look like it
   belongs to KahunaCart rather than merely sitting on top of it.

   Only custom properties. The plugin declares its own defaults inside
   `:where()`, which carries zero specificity, so a plain `.consent-root`
   selector wins no matter which stylesheet the browser loaded last. Nothing
   below touches a plugin class name, so a plugin update cannot break it.

   Note the prefix: `--consent-*` is the plugin's, `--ks-*` is ours, and the
   storefront owns `--kc-*`. Three namespaces, no collisions — which is the
   whole reason the comment at the top of this file exists.
   -------------------------------------------------------------------------- */

.consent-root {
    /* Type — Bricolage for the headings, Albert Sans for everything else,
       matching the rest of the site rather than the browser default. */
    --consent-font: var(--ks-body);
    --consent-font-heading: var(--ks-display);
    --consent-font-mono: var(--ks-mono);

    /* Surfaces. Card over Salt, so the banner reads as paper on the warm
       ground rather than a white rectangle punched through it. */
    --consent-bg: var(--ks-card);
    --consent-bg-sunken: var(--ks-sand-soft);
    --consent-fg: var(--ks-koa);
    --consent-muted: var(--ks-koa-soft);
    --consent-border: var(--ks-line);
    --consent-track: var(--ks-sand-deep);

    /* Board is the action colour everywhere else on the site — the same
       orange as "Notify me at launch" — so Accept and Reject wear it too. */
    --consent-accent: var(--ks-board);
    --consent-accent-hover: var(--ks-board-deep);
    --consent-accent-fg: #FFF6EA;

    /* Lagoon for focus, matching links rather than the button fill. */
    --consent-focus: color-mix(in oklab, var(--ks-lagoon) 55%, transparent);
    --consent-backdrop: color-mix(in oklab, var(--ks-koa) 55%, transparent);

    /* Shape. 11px is the .kc-btn radius; 10px is the panel radius used most
       often across the theme. */
    --consent-radius: 10px;
    --consent-radius-sm: 8px;
    --consent-btn-radius: 11px;
    --consent-shadow:
        0 1px 2px color-mix(in oklab, var(--ks-koa) 8%, transparent),
        0 14px 34px -10px color-mix(in oklab, var(--ks-koa) 26%, transparent);

    --consent-max-width: 1180px;
}

/* ── Contact page ─────────────────────────────────────────────────────── */
.kc-contact { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: 36px; align-items: start; margin-top: 8px; }
.kc-contact-side { display: grid; gap: 14px; }
.kc-contact-card { background: var(--ks-card); border: 1.5px solid var(--ks-line); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.kc-contact-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--ks-sand); color: var(--ks-lagoon); display: inline-flex; align-items: center; justify-content: center; }
.kc-contact-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.kc-contact-text { display: grid; gap: 3px; min-width: 0; }
.kc-contact-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #A08A6E; }
.kc-contact-value { font-size: 15px; font-weight: 600; color: var(--ks-koa); text-decoration: none; word-break: break-word; }
a.kc-contact-value:hover { color: var(--ks-lagoon); }
.kc-contact-hint { font-size: 14px; color: #6E5A44; line-height: 1.55; margin: 6px 2px 0; }
.kc-contact-form .kc-news-msg { margin: 0 0 18px; }
.kc-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.kc-contact-field { display: grid; gap: 6px; }
.kc-contact-field--wide { grid-column: 1 / -1; }
.kc-contact-field label { font-size: 14px; font-weight: 600; color: var(--ks-koa); }
.kc-contact-field .kc-news-input { flex: none; width: 100%; box-sizing: border-box; }
.kc-contact-field textarea.kc-news-input { resize: vertical; min-height: 150px; line-height: 1.5; }
.kc-contact-field select.kc-news-input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ks-koa) 50%), linear-gradient(135deg, var(--ks-koa) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.kc-contact-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 22px 0 0; }
.kc-contact-note { font-size: 13px; color: #6E5A44; }
@media (max-width: 760px) {
    .kc-contact { grid-template-columns: 1fr; gap: 26px; }
    .kc-contact-grid { grid-template-columns: 1fr; }
}

/* ── Shop landing, laid out like a pricing page ───────────────────────── */
.kc-shop-plan { margin: 8px 0 12px; }
.kc-shop-plan-name { font-size: 22px; margin: 6px 0 12px; }
.kc-shop-plan-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.kc-shop-plan-actions form.kahunacart-buy.kc-shop-plan-buy { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.kc-shop-plan-more { font-weight: 600; color: var(--ks-lagoon); text-decoration: none; }
.kc-shop-plan-more:hover { text-decoration: underline; }
.kc-renew-link { margin-top: 14px; font-weight: 600; }
.kc-renew-card .kc-renew-link a { color: #fff; text-decoration: none; }
.kc-renew-card .kc-renew-link a:hover { text-decoration: underline; }
.kc-shop-section { margin-top: 56px; }
.kc-shop-section .kc-intro { max-width: 720px; margin-bottom: 22px; }
.kc-shop-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 22px; }
.kc-shop-chip { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--ks-sand); color: var(--ks-koa); }
.kc-shop-chip::before { content: "\2713\00a0"; color: var(--ks-lagoon); }
.kc-shop-faq .kc-faq { max-width: 820px; }
.kc-shop-cta { text-align: center; padding: 40px 0 8px; }
.kc-shop-cta .kc-intro { margin-left: auto; margin-right: auto; }
.kc-shop-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0 0; }
@media (max-width: 760px) { .kc-shop-section { margin-top: 40px; } }

/* ── Docs readability fixes from the launch Lighthouse pass (12 Sept 2026) ──
   Alert titles and the previous/next labels were under 4.5:1, and links in
   running text had nothing but colour to tell them apart. */
.md-alert--note > .md-alert-title { color: #24559E; fill: #24559E; }
.md-alert--warning > .md-alert-title { color: #7F5700; fill: #7F5700; }
.md-alert--tip > .md-alert-title { color: #1E6B3A; fill: #1E6B3A; }
.md-alert--important > .md-alert-title { color: #6B3FA0; fill: #6B3FA0; }
.md-alert--caution > .md-alert-title { color: #A83A2A; fill: #A83A2A; }
.prev-next-nav .nav-button .label { color: var(--ks-koa-soft); }
#htmx-article p a:not(.kc-btn):not(.nav-button), #htmx-article li a:not(.kc-btn), #htmx-article td a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
#htmx-article p a:hover, #htmx-article li a:hover, #htmx-article td a:hover { text-decoration-color: currentColor; }

/* The newsroom's own paragraphs, under the hero intro. */
.kc-newsroom-copy { max-width: 760px; margin: 18px auto 0; }
.kc-newsroom-copy p { font-size: 15.5px; line-height: 1.6; color: var(--ks-koa-soft); margin: 0 0 12px; }
.kc-newsroom-copy a { color: var(--ks-lagoon); }
/* ==========================================================================
   KahunaCart interior pages: shared pieces
   --------------------------------------------------------------------------
   Loaded on every page after kahuna.css. Holds the framed screenshot used by
   templates/modular/shot.html.twig and shot-grid.html.twig, so the four
   interior pages (platform, features, developers, performance) show a
   picture the same way. Page-specific rules live in kahuna-page-*.css.
   Same rules as kahuna.css: `kc-` classes, `--ks-` properties, light-only.
   ========================================================================== */

/* Browser frame around a screenshot. Bar matches the admin mock-up on the
   homepage (.kc-am-top) so the two read as the same object. */
.kc-frame {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(43, 28, 12, 0.10), 0 2px 6px rgba(43, 28, 12, 0.06);
}
.kc-frame-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
}
.kc-frame-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.kc-frame-bar i:nth-child(1) { background: #CA5415; }
.kc-frame-bar i:nth-child(2) { background: #F6EAD7; border: 1px solid #E4D5BC; }
.kc-frame-bar i:nth-child(3) { background: #1A6F83; }
.kc-frame-url {
    margin-left: 8px;
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 3px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.kc-frame-img { display: block; width: 100%; height: auto; }
.kc-frame-empty { aspect-ratio: 16 / 10; background: var(--ks-sand-soft); }

/* Screenshot feature: copy beside a frame. */
.kc-shot-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: center;
}
.kc-shot-flip .kc-shot-grid { grid-template-columns: 1.15fr 0.85fr; }
.kc-shot-flip .kc-shot-copy { order: 2; }
.kc-shot-flip .kc-shot-fig { order: 1; }
.kc-shot-fig { margin: 0; min-width: 0; }
.kc-shot-caption {
    margin-top: 12px;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: var(--ks-koa-soft);
    text-align: center;
}
.kc-shot-link { margin: 22px 0 0; font-weight: 600; }
.kc-shot-link a { text-decoration: none; }
.kc-shot-link a:hover { text-decoration: underline; }
.kc-h2-small { font-size: clamp(26px, 3.4vw, 36px); }
@media (max-width: 880px) {
    .kc-shot-grid,
    .kc-shot-flip .kc-shot-grid { grid-template-columns: 1fr; gap: 28px; }
    .kc-shot-flip .kc-shot-copy { order: 1; }
    .kc-shot-flip .kc-shot-fig { order: 2; }
}

/* Screenshot gallery. */
.kc-shots-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 22px; margin-top: 8px; }
.kc-shots-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.kc-shots-item { margin: 0; min-width: 0; }
.kc-shots-item figcaption { margin-top: 12px; }
.kc-shots-item figcaption b { display: block; font-family: var(--ks-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.kc-shots-item figcaption b a { color: inherit; text-decoration: none; }
.kc-shots-item figcaption b a:hover { color: var(--ks-lagoon); }
.kc-shots-item figcaption span { display: block; font-size: 14.5px; color: var(--ks-koa-soft); margin-top: 3px; }
@media (max-width: 880px) {
    .kc-shots-grid,
    .kc-shots-grid[data-columns="3"] { grid-template-columns: 1fr; }
}

/* A checklist bullet inside a screenshot section may contain inline <code>.
   kahuna.css lays .kc-checks li out as a flex row, which turns every text
   node into its own flex item and breaks the line around the code; here the
   tick is positioned instead so the bullet flows as one line of text. */
.kc-shot .kc-checks li { display: block; position: relative; padding-left: 24px; }
.kc-shot .kc-checks li::before { position: absolute; left: 0; top: 0; }
.kc-shot .kc-checks li code { font-family: var(--ks-mono); font-size: 0.9em; background: var(--ks-sand); border-radius: 5px; padding: 1px 6px; }

/* Screenshot zoom (js/kahuna-pages.js). The framed picture is clickable; the
   overlay dims the page and the figure grows out of the frame into the middle
   of the screen. Reduced motion: no transition, the picture just appears. */
.kc-zoomable { cursor: zoom-in; }
.kc-zoomable:focus-visible { outline: 3px solid var(--ks-lagoon); outline-offset: 3px; }
.kc-zoom-source { visibility: hidden; }
html.kc-zoom-open { overflow: hidden; }
.kc-zoom {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    background: rgba(43, 28, 12, 0);
    cursor: zoom-out;
    transition: background 320ms ease;
}
.kc-zoom.kc-zoom-in { background: rgba(43, 28, 12, 0.82); }
.kc-zoom-fig {
    margin: 0;
    max-width: min(1600px, 92vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform-origin: center center;
    will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) {
    .kc-zoom-fig { transition: transform 380ms cubic-bezier(0.22, 0.9, 0.36, 1), opacity 240ms ease; }
}
.kc-zoom-img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 40px);
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
    background: var(--ks-card);
}
.kc-zoom-cap {
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: #E8DECF;
    text-align: center;
}
.kc-zoom-close {
    position: fixed;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(246, 234, 215, 0.14);
    color: #F6EAD7;
    font-size: 28px;
    line-height: 44px;
    cursor: pointer;
}
.kc-zoom-close:hover { background: rgba(246, 234, 215, 0.28); }
.kc-zoom-close:focus-visible { outline: 3px solid #FFD9A8; outline-offset: 2px; }

/* ==========================================================================
   Add-on cards (templates/modular/addons-cards.html.twig)
   --------------------------------------------------------------------------
   The /add-ons index: three cards, each an icon, a name that links, a pitch,
   three points and an arrow link. Same card metrics as .kc-cmp-card so the
   two grids read as one family.
   ========================================================================== */

.kc-addon-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.kc-addon-cards.kc-pushed { margin-top: 36px; }

@media (min-width: 720px)  { .kc-addon-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kc-addon-cards { grid-template-columns: repeat(3, 1fr); } }

.kc-addon-card {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 24px 22px 20px;
}

.kc-addon-art {
    display: grid;
    place-items: center;
    background: var(--ks-salt);
    border-radius: 7px;
    margin-bottom: 22px;
    padding: 8px;
}
.kc-addon-art img { display: block; width: 180px; max-width: 100%; height: auto; }

.kc-page-hero-art img { display: block; width: 200px; height: auto; margin: 0 auto 24px; }
.kc-page-hero-copy { min-width: 0; }

@media (min-width: 800px) {
    .kc-page-hero--art .kc-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
        align-items: center;
        gap: 48px;
    }
    .kc-page-hero--art .kc-page-hero-copy { grid-column: 1; grid-row: 1; }
    .kc-page-hero-art { grid-column: 2; grid-row: 1; }
    .kc-page-hero-art img { width: 100%; margin: 0; }
    .kc-page-hero--art,
    .kc-page-hero--art .kc-kicker,
    .kc-page-hero--art .kc-intro { text-align: left; }
    .kc-page-hero--art .kc-intro { margin: 0; }
    .kc-page-hero--art .kc-ctas { justify-content: flex-start; }
}

.kc-addon-card .kc-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ks-lagoon-mist);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.kc-addon-card .kc-ic svg {
    width: 22px;
    height: 22px;
    stroke: var(--ks-lagoon-deep);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kc-addon-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.kc-addon-card h3 a { color: var(--ks-koa); text-decoration: none; }
.kc-addon-card h3 a:hover { color: var(--ks-lagoon); }

.kc-addon-pitch { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--ks-koa); }

.kc-addon-points {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ks-line);
}

.kc-addon-points li {
    position: relative;
    padding: 10px 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
}

.kc-addon-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 17px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--ks-lagoon);
}

.kc-addon-more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-lagoon);
    text-decoration: none;
}

.kc-addon-more:hover { text-decoration: underline; }

.kc-addon-note {
    margin: 22px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-addon-note a { color: var(--ks-lagoon); }

@media (max-width: 640px) {
    .kc-addon-card { padding: 20px 18px 18px; }
}
/* ==========================================================================
   KahunaCart /platform page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css. Everything here is scoped to
   the two templates only this page uses, templates/modular/plat-compare and
   plat-stack, under .kc-plat-compare and .kc-plat-stack. The homepage's
   platform split already owns .kc-plat-grid, .kc-plat-points, .kc-plat-card
   and .kc-plat-stats in kahuna.css, so nothing here reuses those names.
   Same rules as kahuna.css: `kc-` classes, `--ks-` properties, light-only.
   ========================================================================== */

.kc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Hosted cart vs KahunaCart on Grav
   --------------------------------------------------------------------------
   A three-column grid drawn as a table: the item, the hosted answer, ours.
   Our column sits on a Lagoon mist tint so the eye lands there. Below 760px
   each row stacks and every cell repeats its column heading from data-col.
   -------------------------------------------------------------------------- */

.kc-plat-compare-table {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(43, 28, 12, 0.04);
}
.kc-plat-compare-table.kc-pushed { margin-top: 36px; }

.kc-plat-compare-head,
.kc-plat-compare-row {
    display: grid;
    grid-template-columns: 200px 1fr 1.15fr;
}
.kc-plat-compare-row { border-top: 1px solid var(--ks-line); }
.kc-plat-compare-row:hover { background: var(--ks-sand-soft); }

.kc-plat-compare-cell {
    padding: 18px 22px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
    min-width: 0;
}
.kc-plat-compare-head .kc-plat-compare-cell {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 16px 22px;
    background: var(--ks-sand);
}
.kc-plat-compare-head .kc-plat-compare-hosted { color: var(--ks-koa-soft); }
.kc-plat-compare-head .kc-plat-compare-ours { color: var(--ks-lagoon-deep); background: var(--ks-lagoon-mist); }

.kc-plat-compare-row .kc-plat-compare-label {
    font-family: var(--ks-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    line-height: 1.3;
}
.kc-plat-compare-row .kc-plat-compare-ours {
    color: var(--ks-koa);
    background: rgba(221, 234, 232, 0.35);
    border-left: 1px solid var(--ks-line);
}
.kc-plat-compare-row:hover .kc-plat-compare-ours { background: rgba(221, 234, 232, 0.6); }
.kc-plat-compare-cell code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    border-radius: 6px;
    padding: 1px 6px;
}

.kc-plat-compare-note {
    margin: 16px 4px 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
    max-width: 78ch;
}

@media (max-width: 960px) {
    .kc-plat-compare-head,
    .kc-plat-compare-row { grid-template-columns: 160px 1fr 1.15fr; }
    .kc-plat-compare-cell { padding: 16px 18px; font-size: 14.5px; }
}

@media (max-width: 760px) {
    .kc-plat-compare-head { display: none; }
    .kc-plat-compare-row { grid-template-columns: 1fr; }
    .kc-plat-compare-row .kc-plat-compare-label {
        padding: 18px 20px 4px;
        font-size: 17px;
    }
    .kc-plat-compare-row .kc-plat-compare-hosted,
    .kc-plat-compare-row .kc-plat-compare-ours {
        padding: 10px 20px 16px;
        border-left: 0;
    }
    .kc-plat-compare-row .kc-plat-compare-ours {
        background: rgba(221, 234, 232, 0.35);
        border-top: 1px solid var(--ks-line);
    }
    .kc-plat-compare-row [data-col]::before {
        content: attr(data-col);
        display: block;
        font-family: var(--ks-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ks-koa-soft);
        margin-bottom: 6px;
        padding-top: 8px;
    }
    .kc-plat-compare-row .kc-plat-compare-ours::before { color: var(--ks-lagoon-deep); }
}

/* --------------------------------------------------------------------------
   The stack
   --------------------------------------------------------------------------
   The homepage draws this diagram small inside a dark card. Here it is the
   section: a Sand band with the layers at full width on a light ground, the
   theme in Koa ink on top, content in a plain card beside commerce in Lagoon,
   the admin on mist, the API on a dashed outline.
   -------------------------------------------------------------------------- */

.kc-plat-stack {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}

.kc-plat-stack-diagram {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 860px;
    margin: 0 auto;
}
.kc-plat-stack-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.kc-plat-layer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 68px;
    padding: 18px 24px;
    border-radius: 14px;
    border: 1px solid var(--ks-line);
    background: var(--ks-card);
    color: var(--ks-koa);
    text-align: center;
}
.kc-plat-layer b {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.kc-plat-layer span {
    font-family: var(--ks-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--ks-koa-soft);
}

.kc-plat-layer-theme { background: var(--ks-koa); border-color: var(--ks-koa); color: #FFF6EA; }
.kc-plat-layer-theme span { color: #D8C8B2; }
.kc-plat-layer-grav { padding-top: 22px; padding-bottom: 22px; }
.kc-plat-layer-store { background: var(--ks-lagoon); border-color: var(--ks-lagoon); color: #fff; padding-top: 22px; padding-bottom: 22px; }
.kc-plat-layer-store span { color: #CFE3E1; }
.kc-plat-layer-admin { background: var(--ks-lagoon-mist); border-color: #C9DDDA; }
.kc-plat-layer-admin span { color: var(--ks-lagoon-deep); }
.kc-plat-layer-api { background: transparent; border-style: dashed; border-color: var(--ks-koa-soft); }

/* What lives where. */
.kc-plat-stack-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 860px;
    margin: 40px auto 0;
}
.kc-plat-stack-list {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 26px 22px;
}
.kc-plat-stack-list h3 {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-plat-stack-files h3 { color: var(--ks-koa-soft); }
.kc-plat-stack-db h3 { color: var(--ks-lagoon-deep); }
.kc-plat-stack-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kc-plat-stack-list li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ks-koa);
}
.kc-plat-stack-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--ks-sand-deep);
    border: 1px solid var(--ks-line);
}
.kc-plat-stack-db li::before { background: var(--ks-lagoon); border-color: var(--ks-lagoon); }
.kc-plat-stack-list code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    border-radius: 6px;
    padding: 1px 6px;
}

.kc-plat-stack-note {
    max-width: 860px;
    margin: 18px auto 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
}
.kc-plat-stack-note code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 6px;
    padding: 1px 6px;
}

@media (max-width: 640px) {
    .kc-plat-stack-split { grid-template-columns: 1fr; }
    .kc-plat-stack-lists { grid-template-columns: 1fr; margin-top: 32px; }
    .kc-plat-layer { padding: 16px 18px; min-height: 60px; }
    .kc-plat-layer b { font-size: 16.5px; }
}
/* ==========================================================================
   KahunaCart /features page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css, so everything here sits under
   a `kc-featp-*` class. The shot sections and the hero come from the shared
   templates; this file adds the jump bar, the fact lists, the add-on tag and
   the honest-gaps grid. kc- classes, --ks- properties, light-only.
   ========================================================================== */

/* ---- jump bar ------------------------------------------------------------ */

.kc-featp-nav {
    position: sticky;
    top: var(--ks-featp-top, var(--ks-nav-h));
    z-index: 40;
    margin-top: 36px;
    background: rgba(252, 246, 234, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
    transition: transform 240ms ease, opacity 240ms ease;
}
.kc-featp-nav-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}
.kc-featp-nav-in {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 9px;
    padding-bottom: 9px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.kc-featp-nav-in::-webkit-scrollbar { display: none; }
.kc-featp-nav-label {
    flex: none;
    margin-right: 10px;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-featp-nav a {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--ks-koa-soft);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.kc-featp-nav a svg {
    flex: none;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-featp-nav a:hover { color: var(--ks-koa); background: var(--ks-sand); }
.kc-featp-nav a.kc-featp-on {
    color: #FCF6EA;
    background: var(--ks-lagoon);
    border-color: var(--ks-lagoon);
}

/* Anchor targets after the bar clear both the brand bar and the jump bar. */
.kc-featp-nav ~ section[id] { scroll-margin-top: calc(var(--ks-featp-top, var(--ks-nav-h)) + 52px); }

/* Fallbacks for the brand bar's second row of links when the script has not
   measured it: 76 + 43 down to 1000px, 64 + 43 below 900px. */
@media (max-width: 1000px) {
    .kc-featp-nav { top: var(--ks-featp-top, 119px); }
    .kc-featp-nav ~ section[id] { scroll-margin-top: calc(var(--ks-featp-top, 119px) + 44px); }
}
@media (max-width: 900px) {
    .kc-featp-nav { top: var(--ks-featp-top, 108px); margin-top: 28px; }
    .kc-featp-nav-label { display: none; }
    .kc-featp-nav-in { gap: 4px; padding-top: 8px; padding-bottom: 8px; }
    .kc-featp-nav a { padding: 7px 12px; font-size: 13.5px; }
    .kc-featp-nav ~ section[id] { scroll-margin-top: calc(var(--ks-featp-top, 108px) + 44px); }
}

/* ---- fact list ----------------------------------------------------------- */

.kc-featp-facts { padding: 0 0 88px; }
.kc-shot + .kc-featp-facts { margin-top: -44px; }

.kc-featp-facts-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 26px 30px 24px;
}
.kc-featp-facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 44px;
    margin: 0;
}
.kc-featp-facts-grid > div {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid var(--ks-line);
}
.kc-featp-facts-grid > div:first-child,
.kc-featp-facts-grid > div:nth-child(2) { padding-top: 0; }
.kc-featp-facts-grid > div:last-child,
.kc-featp-facts-grid > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
.kc-featp-facts-grid dt {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    line-height: 1.5;
}
.kc-featp-facts-grid dd {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ks-koa);
}
.kc-featp-facts-note {
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
}
.kc-featp-facts-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 22px;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--ks-line);
    font-size: 14.5px;
    font-weight: 600;
}
.kc-featp-facts-links span {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-featp-facts-links a { text-decoration: none; }
.kc-featp-facts-links a:hover { text-decoration: underline; }
.kc-featp-facts-links em { font-style: normal; font-family: var(--ks-mono); }

@media (max-width: 880px) {
    .kc-featp-facts { padding-bottom: 72px; }
    .kc-shot + .kc-featp-facts { margin-top: -40px; }
    .kc-featp-facts-card { padding: 20px 20px 18px; }
    .kc-featp-facts-grid { grid-template-columns: 1fr; gap: 0; }
    .kc-featp-facts-grid > div { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
    .kc-featp-facts-grid > div:nth-child(2) { padding-top: 12px; }
    .kc-featp-facts-grid > div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--ks-line); padding-bottom: 12px; }
}

/* ---- add-on tag inside a checklist bullet -------------------------------- */

.kc-featp-addon {
    display: inline-block;
    vertical-align: 2px;
    margin: 0 2px;
    padding: 1px 8px;
    border: 1px solid var(--ks-amber);
    border-radius: 999px;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-amber);
    line-height: 1.5;
}

/* ---- honest gaps --------------------------------------------------------- */

.kc-featp-gaps {
    background: var(--ks-sand-soft);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}
.kc-featp-gaps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.kc-featp-gap {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 14px;
    padding: 22px 22px 20px;
}
.kc-featp-gap h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.kc-featp-gap p {
    flex: 1;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
}
.kc-featp-gap-tag {
    display: inline-block;
    align-self: flex-start;
    margin-top: 16px;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-amber);
}

@media (max-width: 960px) { .kc-featp-gaps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kc-featp-gaps-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
   KahunaCart /developers page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css, so every rule here is scoped
   under a `kc-devp-*` class. Same rules as kahuna.css: `kc-` classes, `--ks-`
   properties, light-only, no Tailwind utilities.

   The dark code blocks copy the homepage terminal's palette (kahuna-home.css
   `.kc-term*`) under their own names, so this page does not depend on the
   homepage stylesheet being present. Syntax colours come from the codesh
   plugin's kahuna-koa theme, not from rules here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: dark code blocks
   -------------------------------------------------------------------------- */

.kc-devp-term {
    background: var(--ks-koa);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.18);
}
.kc-devp-term-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: #3A281A;
    border-bottom: 1px solid rgba(246, 234, 215, 0.12);
}
.kc-devp-term-top i { width: 9px; height: 9px; border-radius: 50%; display: block; background: rgba(246, 234, 215, 0.25); }
.kc-devp-term-top i:first-child { background: var(--ks-board); }
.kc-devp-term-top span {
    margin-left: 8px;
    font-family: var(--ks-mono);
    font-size: 11px;
    color: #C9B9A4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The code itself is rendered by the codesh plugin (Phiki, kahuna-koa theme
   from user/data/codesh/themes), one `.codesh-block` per sample. These three
   frames own the ground and the padding, so the block's own chrome is turned
   off. Selectors start with `.kc-body` to beat the docs-page codesh rules in
   kahuna.css on specificity. Long lines scroll inside the block. */
.kc-devp-term-body,
.kc-devp-mini,
.kc-devp-json {
    display: grid;
    gap: 12px;
    margin: 0;
    min-width: 0;
    font-family: var(--ks-mono);
    font-size: 13.5px;
    line-height: 1.6;
    color: #E8DECF;
}
.kc-devp-term-body { padding: 16px 0 18px; }
.kc-devp-mini,
.kc-devp-json {
    background: var(--ks-koa);
    border-radius: 12px;
    padding: 12px 0 14px;
    font-size: 12.5px;
}
.kc-devp-mini { margin-top: 14px; }

.kc-body .kc-devp-term .codesh-block,
.kc-body .kc-devp-mini .codesh-block,
.kc-body .kc-devp-json .codesh-block {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    min-width: 0;
}
.kc-body .kc-devp-term .codesh-block pre.phiki,
.kc-body .kc-devp-mini .codesh-block pre.phiki,
.kc-body .kc-devp-json .codesh-block pre.phiki {
    background-color: transparent !important;
    margin: 0;
    padding: 0 20px;
    font-family: var(--ks-mono);
    font-size: inherit;
    line-height: inherit;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
}
.kc-body .kc-devp-mini .codesh-block pre.phiki,
.kc-body .kc-devp-json .codesh-block pre.phiki { padding: 0 16px; }
/* The API cards are narrow, and their samples are short JSON objects and one
   long error sentence, so those wrap instead of scrolling. */
.kc-body .kc-devp-json .codesh-block pre.phiki { white-space: pre-wrap; }

/* Lines that are not code: the doctor's status rows, a summary, a comment. */
.kc-devp-lines {
    padding: 0 20px;
    white-space: pre;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.kc-devp-mini .kc-devp-lines,
.kc-devp-json .kc-devp-lines { padding: 0 16px; }
.kc-devp-line { display: block; min-height: 1.6em; }
.kc-devp-l-out { color: #C9B9A4; }
.kc-devp-note { color: #A89880; }
.kc-devp-tag { color: #7CC4B8; font-weight: 700; margin-right: 8px; }
.kc-devp-tag-warn { color: #FFD9A8; }

/* Links under a card or a panel. */
.kc-devp-link { margin: 18px 0 0; font-weight: 600; font-size: 15px; }
.kc-devp-link a { text-decoration: none; }
.kc-devp-link a:hover { text-decoration: underline; }

/* Inline code on the sand ground. */
.kc-devp-apis code:not(pre code),
.kc-devp-addons code:not(pre code),
.kc-devp-code .kc-devp-caption code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    border-radius: 6px;
    padding: 1px 6px;
    color: var(--ks-lagoon-deep);
}

/* --------------------------------------------------------------------------
   Two APIs
   -------------------------------------------------------------------------- */

.kc-devp-apis-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
    align-items: stretch;
}
.kc-devp-api {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 28px 28px 26px;
    min-width: 0;
}
.kc-devp-api > * { flex: none; }
.kc-devp-api h3 { font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.kc-devp-api h4 {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 26px 0 10px;
}
.kc-devp-api-text { font-size: 15px; color: var(--ks-koa-soft); margin: 0; }
.kc-devp-api-note { font-size: 14px; color: var(--ks-koa-soft); margin: 12px 0 0; }

.kc-devp-badge {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-lagoon-deep);
    background: var(--ks-lagoon-mist);
    border-radius: 999px;
    padding: 4px 12px;
    margin: 0 0 14px;
}
.kc-devp-badge-admin { color: #8A4A12; background: #F3DEC9; }

/* Endpoint table: scrolls inside its own box below 560px. */
.kc-devp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kc-devp-endpoints {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 440px;
}
.kc-devp-endpoints th {
    text-align: left;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    padding: 0 10px 8px 0;
    border-bottom: 1px solid var(--ks-line);
}
.kc-devp-endpoints td {
    padding: 7px 10px 7px 0;
    border-bottom: 1px solid var(--ks-line);
    vertical-align: top;
    color: var(--ks-koa-soft);
}
.kc-devp-endpoints tr:last-child td { border-bottom: 0; }
.kc-devp-apis .kc-devp-endpoints td code:not(pre code) {
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: var(--ks-koa);
    background: none;
    padding: 0;
    white-space: nowrap;
}
.kc-devp-method {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 2px 7px;
    min-width: 54px;
    text-align: center;
}
.kc-devp-method-get { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-devp-method-post { background: #F3DEC9; color: #8A4A12; }
.kc-devp-method-patch { background: #F1E7C8; color: #7A5600; }
.kc-devp-method-delete { background: #F5D9D2; color: #8E2E1A; }

/* Admin card pieces. */
.kc-devp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 22px 0 0;
}
.kc-devp-stats div {
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    padding: 12px 12px 10px;
    text-align: center;
}
.kc-devp-stats dt {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--ks-board);
    line-height: 1;
}
.kc-devp-stats dd {
    margin: 4px 0 0;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-devp-families {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kc-devp-families li {
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa);
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 5px 12px;
}
.kc-devp-points { margin-top: 24px; }
.kc-devp-points li { font-size: 14.5px; color: var(--ks-koa-soft); }

/* Pinned to the foot of the admin card, so the two cards end together. */
.kc-devp-callout {
    margin: 26px 0 0;
    padding: 14px 18px;
    background: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    border-left: 4px solid var(--ks-board);
    border-radius: 12px;
    font-size: 14.5px;
    color: var(--ks-koa-soft);
}
.kc-devp-api .kc-devp-callout { margin-top: auto; padding-top: 14px; }
.kc-devp-api .kc-devp-link + .kc-devp-callout { margin-top: auto; }
.kc-devp-api .kc-devp-link { margin-bottom: 26px; }
.kc-devp-api .kc-devp-link:last-child { margin-bottom: 0; }
.kc-devp-callout b { color: var(--ks-koa); }

@media (max-width: 960px) {
    .kc-devp-apis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kc-devp-api { padding: 22px 18px 20px; }
    .kc-devp-stats { grid-template-columns: repeat(2, 1fr); }

    /* The endpoint table becomes a list: method and path on one line, the
       answer under them, so nothing has to scroll sideways on a phone. */
    .kc-devp-endpoints { min-width: 0; }
    .kc-devp-endpoints thead { display: none; }
    .kc-devp-endpoints,
    .kc-devp-endpoints tbody,
    .kc-devp-endpoints tr { display: block; }
    .kc-devp-endpoints tr { padding: 9px 0; border-bottom: 1px solid var(--ks-line); }
    .kc-devp-endpoints tr:last-child { border-bottom: 0; }
    .kc-devp-endpoints td { display: inline; padding: 0; border: 0; }
    .kc-devp-endpoints td:nth-child(2) { margin-left: 8px; }
    .kc-devp-endpoints td:nth-child(3) { display: block; padding-top: 4px; font-size: 13px; }
    .kc-devp-apis .kc-devp-endpoints td code:not(pre code) { white-space: normal; overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   Code samples: tabs
   -------------------------------------------------------------------------- */

.kc-devp-tabs { margin-top: 4px; }
.kc-devp-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 5px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-radius: 14px;
    width: fit-content;
    max-width: 100%;
}
.kc-devp-tablist [role="tab"] {
    appearance: none;
    border: 0;
    background: none;
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
}
.kc-devp-tablist [role="tab"]:hover { color: var(--ks-koa); }
.kc-devp-tablist [role="tab"][aria-selected="true"] {
    background: var(--ks-card);
    color: var(--ks-koa);
    box-shadow: 0 1px 3px rgba(43, 28, 12, 0.10);
}

/* Without the script every panel stacks, each with its own title. With it,
   the strip carries the names, so the per-panel title goes away. */
.kc-devp-panel + .kc-devp-panel { margin-top: 44px; }
.kc-devp-tabs-js .kc-devp-panel + .kc-devp-panel { margin-top: 0; }
.kc-devp-panel-title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.kc-devp-tabs-js .kc-devp-panel-title { display: none; }
.kc-devp-caption { font-size: 15px; color: var(--ks-koa-soft); max-width: 78ch; margin: 0 0 18px; }
.kc-devp-panel { min-width: 0; }
.kc-devp-panel:focus-visible { outline: 3px solid var(--ks-lagoon); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 560px) {
    .kc-devp-tablist { width: 100%; gap: 4px; }
    .kc-devp-tablist [role="tab"] { padding: 8px 12px; font-size: 13.5px; flex: 1 1 auto; }
    .kc-devp-term-body { font-size: 12px; padding: 14px 0 16px; }
    .kc-body .kc-devp-term .codesh-block pre.phiki,
    .kc-devp-term .kc-devp-lines { padding: 0 14px; }
}

/* --------------------------------------------------------------------------
   Build an add-on
   -------------------------------------------------------------------------- */

.kc-devp-addons-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 20px;
    align-items: start;
}
.kc-devp-can {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 26px 28px;
    min-width: 0;
}
.kc-devp-can h3 { font-size: 19px; font-weight: 800; margin: 0 0 16px; }
.kc-devp-can ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kc-devp-can li {
    display: grid;
    gap: 2px;
    padding: 11px 0;
    border-top: 1px solid var(--ks-line);
}
.kc-devp-can li:first-child { border-top: 0; padding-top: 0; }
.kc-devp-can li b { font-size: 15px; }
.kc-devp-can li span { font-size: 13.5px; color: var(--ks-koa-soft); }

.kc-devp-steps { display: grid; gap: 14px; min-width: 0; }
.kc-devp-step {
    position: relative;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 24px 26px 24px 70px;
    min-width: 0;
}
.kc-devp-step-num {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ks-lagoon);
    color: #F6EAD7;
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 14px;
}
.kc-devp-step h3 { font-size: 18px; font-weight: 700; margin: 2px 0 8px; }
.kc-devp-step p { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0; }

.kc-devp-contract {
    margin-top: 20px;
    background: var(--ks-lagoon-deep);
    color: #F6EAD7;
    border-radius: 18px;
    padding: 30px 32px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 28px;
    align-items: center;
}
.kc-devp-contract .kc-kicker { color: #A8CBCC; margin-bottom: 8px; }
.kc-devp-contract h3 { color: #fff; font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.kc-devp-contract p { font-size: 15px; color: #BAD3D2; margin: 0; }
.kc-devp-contract-links { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.kc-devp-contract-links a { color: #F6EAD7; font-weight: 600; text-decoration: none; }
.kc-devp-contract-links a:hover { color: #fff; text-decoration: underline; }
.kc-devp-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kc-devp-chips li {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(246, 234, 215, 0.12);
    border: 1px solid rgba(246, 234, 215, 0.22);
    border-radius: 999px;
    padding: 6px 13px;
}

@media (max-width: 960px) {
    .kc-devp-addons-grid,
    .kc-devp-contract { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kc-devp-can { padding: 22px 18px; }
    .kc-devp-step { padding: 22px 18px 22px 60px; }
    .kc-devp-step-num { left: 16px; top: 22px; }
    .kc-devp-contract { padding: 24px 20px; }
}
/* ==========================================================================
   KahunaCart /performance page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css; every rule here is scoped under
   a `kc-perfp-` class so nothing leaks. Same rules as kahuna.css: `kc-`
   classes, `--ks-` properties, light-only.

   Chart conventions follow the homepage: Lagoon for the current build,
   Sand-deep with Amber figures for "before", axes from zero, every value
   printed, tabular numerals. The chart rules are copied here rather than
   shared with kahuna-home.css, which only the homepage loads.
   ========================================================================== */

/* ---- headline figures ----------------------------------------------------- */

.kc-perfp-head {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
    margin-top: 36px;
    padding: 36px 0 30px;
}
.kc-perfp-head-in {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}
.kc-perfp-fig {
    display: block;
    padding: 6px 18px;
    color: inherit;
    text-decoration: none;
    border-left: 1px solid var(--ks-line);
}
.kc-perfp-fig:first-child { border-left: 0; }
.kc-perfp-fig-num {
    display: block;
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: clamp(40px, 5.6vw, 64px);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ks-lagoon-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kc-perfp-fig-num small {
    font-family: var(--ks-mono);
    font-size: 0.34em;
    font-weight: 600;
    letter-spacing: 0;
    margin-left: 0.18em;
    color: var(--ks-lagoon);
    vertical-align: 0.12em;
}
.kc-perfp-fig-lbl {
    display: block;
    margin-top: 10px;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.45;
    color: var(--ks-koa-soft);
}
a.kc-perfp-fig:hover .kc-perfp-fig-num { color: var(--ks-board); }
a.kc-perfp-fig:hover .kc-perfp-fig-lbl { color: var(--ks-koa); }
.kc-perfp-head-foot {
    margin: 24px auto 0;
    max-width: 78ch;
    text-align: center;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-perfp-head-foot code { font-family: inherit; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 5px; padding: 0 5px; }
.kc-perfp-head-foot a { color: var(--ks-lagoon); }

@media (max-width: 720px) {
    .kc-perfp-head { padding: 26px 0 22px; }
    .kc-perfp-head-in { grid-template-columns: 1fr; row-gap: 22px; }
    .kc-perfp-fig { border-left: 0; padding: 0 8px; }
    .kc-perfp-fig-num { font-size: 48px; }
    .kc-perfp-head-foot { text-align: left; }
}

/* ---- why it is fast ------------------------------------------------------- */

.kc-perfp-why-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 44px;
}
.kc-perfp-why-list.kc-perfp-pushed { margin-top: 34px; }
.kc-perfp-why-item { display: flex; gap: 16px; align-items: flex-start; }
.kc-perfp-why-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
    display: grid;
    place-items: center;
}
.kc-perfp-why-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kc-perfp-why-item h3 {
    margin: 6px 0 6px;
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.kc-perfp-why-item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ks-koa-soft); }

@media (max-width: 760px) {
    .kc-perfp-why-list { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- the route table ------------------------------------------------------ */

/* The table scrolls inside .kc-cmp-scroll (kahuna.css) on a phone; the
   min-width keeps the four columns readable instead of crushing them. */
.kc-perfp-table { min-width: 560px; }
.kc-perfp-table thead th { vertical-align: bottom; }
.kc-perfp-table tbody th[scope="row"] { font-size: 14.5px; white-space: nowrap; }
.kc-perfp-num { text-align: right; }
.kc-perfp-table th.kc-perfp-num,
.kc-perfp-table td.kc-perfp-num { text-align: right; }
.kc-perfp-table td.kc-perfp-num {
    font-family: var(--ks-mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: 11px;
    padding-bottom: 11px;
}
.kc-perfp-unit {
    display: block;
    margin-top: 2px;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ks-koa-soft);
}
.kc-perfp-table .kc-perfp-group th {
    background: var(--ks-sand-soft);
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 400;
}
.kc-perfp-table .kc-perfp-group b { display: block; font-family: var(--ks-display); font-size: 15px; font-weight: 700; color: var(--ks-koa); }
.kc-perfp-table .kc-perfp-group span { display: block; margin-top: 2px; font-size: 13px; color: var(--ks-koa-soft); white-space: normal; }
/* The lowest p95 in the row. The tint would be the only signal for someone
   who cannot see it, so the cell also carries a bar and a hidden word. */
.kc-perfp-table td.kc-perfp-fast {
    background: var(--ks-lagoon-mist);
    box-shadow: inset 3px 0 0 var(--ks-lagoon);
    color: var(--ks-lagoon-deep);
    font-weight: 700;
}
.kc-perfp-table td.kc-perfp-none { color: var(--ks-koa-soft); font-size: 12.5px; font-family: var(--ks-body); }
.kc-perfp-meta {
    margin: 14px 0 0;
    max-width: 78ch;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-perfp-meta code { font-family: inherit; background: var(--ks-sand); border-radius: 5px; padding: 0 5px; }
.kc-perfp-meta a { color: var(--ks-lagoon); }
.kc-perfp-note {
    margin: 22px 0 0;
    max-width: 72ch;
    padding: 14px 18px;
    border-left: 3px solid var(--ks-amber);
    background: var(--ks-sand-soft);
    border-radius: 0 10px 10px 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ks-koa);
}
.kc-perfp-note-wide { max-width: none; }

@media (max-width: 760px) {
    .kc-perfp-table { font-size: 13.5px; }
    .kc-perfp-table th,
    .kc-perfp-table td { padding: 9px 11px; }
    .kc-perfp-table td.kc-perfp-num { font-size: 14px; }
}

/* ---- charts (before/after and capacity) ----------------------------------- */

.kc-perfp-before-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.kc-perfp-p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ks-koa-soft); max-width: 58ch; }

.kc-perfp-chart {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 26px 22px;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.08);
}
.kc-perfp-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 16px; }
.kc-perfp-chart-head b { font-family: var(--ks-display); font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; }
.kc-perfp-chart-head span { font-size: 13px; color: var(--ks-koa-soft); }
.kc-perfp-chart-head-2 { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ks-line); }
.kc-perfp-chart-head-2 b { font-size: 14px; color: var(--ks-koa-soft); font-weight: 700; }

.kc-perfp-bars { --kc-perfp-lbl: 92px; --kc-perfp-val: 84px; }
.kc-perfp-bar { display: grid; grid-template-columns: var(--kc-perfp-lbl) 1fr var(--kc-perfp-val); align-items: center; gap: 12px; margin-bottom: 10px; }
.kc-perfp-bar-lbl { font-family: var(--ks-mono); font-size: 12.5px; font-weight: 600; color: var(--ks-koa); }
.kc-perfp-track { position: relative; display: block; height: 28px; background: var(--ks-sand); border-radius: 6px; overflow: hidden; }
.kc-perfp-fill { position: absolute; left: 0; top: 0; bottom: 0; display: block; background: var(--ks-lagoon); border-radius: 6px; transform-origin: left center; }
.kc-perfp-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ks-lagoon); }
.kc-perfp-val { font-family: var(--ks-mono); font-size: 13.5px; font-weight: 700; color: var(--ks-koa); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.kc-perfp-val small { display: block; font-size: 10.5px; font-weight: 600; color: var(--ks-lagoon); letter-spacing: 0.02em; }
.kc-perfp-axis {
    position: relative;
    height: 20px;
    margin: 4px var(--kc-perfp-val) 0 var(--kc-perfp-lbl);
    border-top: 1px solid var(--ks-line);
    font-family: var(--ks-mono);
    font-size: 10.5px;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}
.kc-perfp-axis span { position: absolute; top: 4px; transform: translateX(-50%); }
.kc-perfp-axis span:first-child { transform: none; }
.kc-perfp-axis span:last-child { transform: translateX(-100%); }

/* "Before": thinner bars in Sand-deep, Amber figures. */
.kc-perfp-bars-before .kc-perfp-track { height: 16px; }
.kc-perfp-bars-before .kc-perfp-fill { background: var(--ks-sand-deep); }
.kc-perfp-bars-before .kc-perfp-val { color: var(--ks-amber); font-size: 12.5px; }

.kc-perfp-foot { margin: 14px 4px 0; font-family: var(--ks-mono); font-size: 11.5px; line-height: 1.6; color: var(--ks-koa-soft); }
.kc-perfp-foot a { color: var(--ks-lagoon); }

/* Capacity cards: two side by side, smaller bars, a wider value column for the
   rung line under each figure. */
.kc-perfp-cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.kc-perfp-cap-card { padding: 22px 22px 18px; }
.kc-perfp-cap-bars { --kc-perfp-lbl: 120px; --kc-perfp-val: 156px; }
.kc-perfp-cap-bars .kc-perfp-track { height: 22px; }
.kc-perfp-cap-bars .kc-perfp-bar { margin-bottom: 12px; }
.kc-perfp-cap-bars .kc-perfp-val small { color: var(--ks-koa-soft); font-weight: 500; }
/* The route that cleared nothing: no bar, the miss in words, the zero in Amber. */
.kc-perfp-track-miss { background: repeating-linear-gradient(135deg, var(--ks-sand-soft) 0 6px, var(--ks-sand) 6px 12px); }
.kc-perfp-val-miss { color: var(--ks-amber); white-space: normal; }
.kc-perfp-cap-bars .kc-perfp-val-miss small { color: var(--ks-amber); white-space: normal; line-height: 1.3; }

@media (max-width: 880px) {
    .kc-perfp-before-grid { grid-template-columns: 1fr; gap: 34px; }
    .kc-perfp-cap-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kc-perfp-chart { padding: 18px 16px 16px; }
    .kc-perfp-bars { --kc-perfp-lbl: 74px; --kc-perfp-val: 70px; }
    .kc-perfp-bar { gap: 8px; }
    .kc-perfp-bar-lbl { font-size: 11.5px; }
    .kc-perfp-val { font-size: 12.5px; }
    .kc-perfp-bars-before .kc-perfp-axis span:nth-child(3) { display: none; }
    .kc-perfp-cap-card { padding: 18px 14px 14px; }
    .kc-perfp-cap-bars { --kc-perfp-lbl: 68px; --kc-perfp-val: 128px; }
    .kc-perfp-cap-bars .kc-perfp-bar { gap: 8px; }
    .kc-perfp-cap-bars .kc-perfp-bar-lbl { font-size: 11px; }
    .kc-perfp-cap-bars .kc-perfp-val { font-size: 12.5px; }
    .kc-perfp-cap-bars .kc-perfp-val small { font-size: 9.5px; }
    .kc-perfp-cap-bars .kc-perfp-axis span:nth-child(even) { display: none; }
}

/* ---- motion ----------------------------------------------------------------
   Bars grow from the axis the first time a card scrolls into view
   (templates/modular/perfp-motion.html.twig). Fills are absolutely positioned
   and only their transform changes, so nothing around them moves. Without the
   script, or with reduced motion, the finished chart is simply there. */

@media (prefers-reduced-motion: no-preference) {
    .kc-perfp-fill { transition: transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 120ms); }
    .kc-perfp-now { transition: opacity 400ms ease; transition-delay: calc(900ms + var(--i, 0) * 120ms); }
    .kc-perfp-js [data-kc-perfp]:not(.kc-perfp-go) .kc-perfp-fill { transform: scaleX(0); }
    .kc-perfp-js [data-kc-perfp]:not(.kc-perfp-go) .kc-perfp-now { opacity: 0; }
}
.md-alert {
  padding: 8px 16px;
  border-left: 3.5px solid #333333;
  margin-bottom: 16px;
}

.md-alert-body > *:last-child {
  margin-bottom: 0;
}

.md-alert-title {
  display: flex;
  font-weight: bold;
  align-items: center;
  margin-bottom: 8px;
  margin-top: 0;

  & > svg {
    margin-right: 8px;
  }
}

.md-alert--note {
  border-color: var(--gh-alert-note-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-note-title-color);
    fill: var(--gh-alert-note-title-color);
  }
}

.md-alert--tip {
  border-color: var(--gh-alert-tip-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-tip-title-color);
    fill: var(--gh-alert-tip-title-color);
  }
}

.md-alert--important {
  border-color: var(--gh-alert-important-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-important-title-color);
    fill: var(--gh-alert-important-title-color);
  }
}

.md-alert--warning {
  border-color: var(--gh-alert-warning-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-warning-title-color);
    fill: var(--gh-alert-warning-title-color);
  }
}

.md-alert--caution {
  border-color: var(--gh-alert-caution-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-caution-title-color);
    fill: var(--gh-alert-caution-title-color);
  }
}
/* ===================================
   CODESH - Code Syntax Highlighter
   Complete standalone styles
   =================================== */

/* Main container - base styles */
.codesh-block {
    position: relative;
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    overflow: hidden;
    contain: inline-size;
    min-width: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* ===================================
   LIGHT MODE (default)
   =================================== */
.codesh-block {
    background-color: #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.codesh-block .codesh-header {
    background-color: rgba(229, 231, 235, 0.15);
    border-bottom: 1px solid rgba(209, 213, 219, 0.5);
}

.codesh-block .codesh-lang {
    color: #4b5563;
    background-color: rgba(209, 213, 219, 0.4);
}

.codesh-block .codesh-title {
    color: #374151;
}

.codesh-block .codesh-copy,
.codesh-group .codesh-copy {
    color: #4b5563;
    background-color: rgba(209, 213, 219, 0.4);
    border-color: rgba(156, 163, 175, 0.2);
}

.codesh-block .codesh-copy:hover,
.codesh-group .codesh-copy:hover {
    background-color: rgba(156, 163, 175, 0.2);
    color: #111827;
    border-color: rgba(107, 114, 128, 0.2);
}

.codesh-block .codesh-copy.copied,
.codesh-group .codesh-copy.copied {
    background-color: rgba(34, 197, 94, 0.9);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.8);
}

/* Light mode diff colors */
.codesh-block .line .deleted {
    color: #dc2626;
}

.codesh-block .line .inserted {
    color: #16a34a;
}

/* ===================================
   DARK MODE (via .dark ancestor - Tailwind style)
   Using neutral zinc scale based on #1D1D20
   =================================== */
.dark .codesh-block {
    background-color: #1d1d20;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
}

.dark .codesh-block .codesh-header {
    background-color: rgba(39, 39, 42, 0.6);
    border-bottom: 1px solid rgba(63, 63, 70, 0.4);
}

.dark .codesh-block .codesh-lang {
    color: #a1a1aa;
    background-color: rgba(51, 51, 55, 0.8);
}

.dark .codesh-block .codesh-title {
    color: #d4d4d8;
}

.dark .codesh-block .codesh-copy,
.dark .codesh-group .codesh-copy {
    color: #d4d4d8;
    background-color: rgba(51, 51, 55, 0.9);
    border-color: rgba(63, 63, 70, 0.5);
}

.dark .codesh-block .codesh-copy:hover,
.dark .codesh-group .codesh-copy:hover {
    background-color: rgba(63, 63, 70, 0.8);
    color: #ffffff;
    border-color: rgba(82, 82, 91, 0.5);
}

.dark .codesh-block .codesh-copy.copied,
.dark .codesh-group .codesh-copy.clpied {
    background-color: rgba(34, 197, 94, 0.9);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.8);
}


/* ===================================
   SHARED STYLES
   =================================== */

/* Header bar */
.codesh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
}

/* Language badge */
.codesh-lang {
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Title/filename display */
.codesh-title {
    font-size: 0.875rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Copy button */
.codesh-copy {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.codesh-copy-icon {
    width: 1rem;
    height: 1rem;
}

/* Code container */
.codesh-code {
    overflow-x: auto;
}

/* ===================================
   PHIKI DUAL THEME SUPPORT
   Switch between light/dark themes via CSS variables
   Only applies to blocks with codesh-dual-theme class
   =================================== */

/* Dark mode: switch to dark theme colors via CSS variables */
.dark .codesh-dual-theme .shiki,
.dark .codesh-dual-theme .phiki,
.dark .codesh-group .shiki,
.dark .codesh-group .phiki {
    background-color: var(--shiki-dark-bg, var(--phiki-dark-background-color)) !important;
}

.dark .codesh-dual-theme .shiki span,
.dark .codesh-dual-theme .phiki span,
.dark .codesh-group .shiki span,
.dark .codesh-group .phiki span {
    color: var(--shiki-dark, var(--phiki-dark-color)) !important;
    font-style: var(--shiki-dark-font-style, var(--phiki-dark-font-style)) !important;
    font-weight: var(--shiki-dark-font-weight, var(--phiki-dark-font-weight)) !important;
    text-decoration: var(--shiki-dark-text-decoration, var(--phiki-dark-text-decoration)) !important;
}

/* Token backgrounds for diff - only apply when variable is set */
.dark .codesh-dual-theme .shiki span[style*="--shiki-dark-bg"],
.dark .codesh-dual-theme .phiki span[style*="--phiki-dark-background-color"],
.dark .codesh-group .shiki span[style*="--shiki-dark-bg"],
.dark .codesh-group .phiki span[style*="--phiki-dark-background-color"] {
    background-color: var(--shiki-dark-bg, var(--phiki-dark-background-color)) !important;
}

.codesh-block pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    tab-size: 4;
}

.codesh-block code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
}

/* No header mode - minimal styling */
.codesh-block.no-header {
    border-radius: 0.5rem;
}

/* ===================================
   LINE STYLES
   =================================== */
.codesh-block .line {
    display: block;
    padding: 0 0.5rem;
    margin: 0 -0.5rem;
}

/* Line numbers - Phiki uses 'line-number' class */
.codesh-block .line-number {
    display: inline-block;
    width: 2.5em;
    margin-right: 1.5em;
    text-align: right;
    color: inherit;
    opacity: 0.4;
    user-select: none;
    -webkit-user-select: none;
    font-variant-numeric: tabular-nums;
}

/* ===================================
   LINE HIGHLIGHTING
   =================================== */
.codesh-block .line.highlight {
    background-color: rgba(250, 200, 50, 0.15);
    box-shadow: inset 3px 0 0 0 #d19a00;
}

.codesh-block .line.highlight .line-number {
    opacity: 0.6;
}

/* ===================================
   LINE FOCUS
   =================================== */
.codesh-block.has-focus .line:not(.focus) {
    opacity: 0.35;
}

.codesh-block .line.focus {
    background-color: rgba(59, 130, 246, 0.12);
    box-shadow: inset 3px 0 0 0 #3b82f6;
}

.codesh-block .line.focus .line-number {
    opacity: 0.6;
}

/* ===================================
   ERROR FALLBACK
   =================================== */
.codesh-block.codesh-error pre {
    background-color: #1e1e1e;
    color: #d4d4d4;
}

/* ===================================
   SCROLLBAR STYLING
   =================================== */
.codesh-block pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.codesh-block pre::-webkit-scrollbar-track {
    background: transparent;
}

.codesh-block pre::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
}

.codesh-block pre::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
}

/* ===================================
   CODE GROUPS - Tabbed Code Blocks
   =================================== */
.codesh-group {
    position: relative;
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    overflow: hidden;
    contain: inline-size;
    min-width: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Light mode group */
.codesh-group {
    background-color: #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* Dark mode group - zinc scale */
.dark .codesh-group {
    background-color: #1d1d20;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
}

/* Group header */
.codesh-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: rgba(229, 231, 235, 0.8);
    border-bottom: 1px solid rgba(209, 213, 219, 0.5);
}

.dark .codesh-group-header {
    background-color: rgba(39, 39, 42, 0.6);
    border-bottom: 1px solid rgba(63, 63, 70, 0.4);
}

/* Tabs container */
.codesh-group-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.codesh-group-tabs::-webkit-scrollbar {
    display: none;
}

/* Individual tab */
.codesh-group-tab {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.codesh-group-tab:hover {
    color: #374151;
}

.codesh-group-tab.active {
    color: #111827;
    border-bottom-color: #3b82f6;
}

/* Dark mode tabs */
.dark .codesh-group-tab {
    color: #a1a1aa;
}

.dark .codesh-group-tab:hover {
    color: #d4d4d8;
}

.dark .codesh-group-tab.active {
    color: #f4f4f5;
    border-bottom-color: #3b82f6;
}

/* Tab panels container */
.codesh-group-panels {
    position: relative;
}

/* Individual panel - use higher specificity to override .codesh-block base styles */
.codesh-group-panel.codesh-block {
    display: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.codesh-group-panel.codesh-block.active {
    display: block;
}

/* Hide any inner headers - group has its own header */
.codesh-group-panel .codesh-header,
.codesh-group-panel .code-header {
    display: none !important;
}

/* Reset any .code-block wrapper injected by theme */
.codesh-group-panel .code-block {
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    ring: none;
}

/* Reset styles for panels inside groups */
.codesh-group-panel .codesh-code {
    overflow-x: auto;
}

.codesh-group-panel pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    tab-size: 4;
    background: transparent !important;
}

.codesh-group-panel code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
}

/* Scrollbar for group panels */
.codesh-group-panel pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.codesh-group-panel pre::-webkit-scrollbar-track {
    background: transparent;
}

.codesh-group-panel pre::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
}

.codesh-group-panel pre::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
}

/* ===================================
   LINE WRAPPING
   =================================== */
.codesh-line-wrap pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
}

.codesh-line-wrap .codesh-code {
    overflow-x: hidden;
}

/* Line numbers with wrapping - use padding/margin technique */
/* Only apply when line numbers are present */
.codesh-line-wrap .line:has(.line-number) {
    padding-left: 4em;
}

.codesh-line-wrap .line-number {
    margin-left: -4em;
}

/* Group panels with line wrap */
.codesh-group-panel.codesh-line-wrap pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
}
.toc-anchor {
    transition: hover 0.5s ease;
    position: absolute;
    opacity: 0;
}

.toc-anchor.after {
    margin-left: 5px;
}

.toc-anchor.before {
    margin-left: -22px;
    padding-right: 8px;
}

.toc-anchor:after {
    content: attr(data-anchor-icon);
}

:hover > .toc-anchor, .toc-anchor:focus {
    opacity: .5;
}
#grav-login {
    max-width: 30rem;
    margin: 5rem auto;
    background: #fcfcfc;
    border: 4px solid #eee;
    border-radius: 4px;
    padding: 1rem 3rem 3rem 3rem;
    text-align: center;
}

#grav-login .form-actions {
    text-align: right;
}

#grav-logout {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.alert.info {
    color: #27ae60;
}

.alert.error {
    color: #e74c3c;
}

#grav-login p {
    font-size: small;
    margin: 1rem 0;
    padding: 0;
    text-align: center;
}
#grav-login .form-actions p {
    margin-bottom: 0;
}

#grav-login .button {
    vertical-align: middle;
}

#grav-login .delimiter {
    display: block;
    font-size: 1.6rem;
    letter-spacing: 1px;
    line-height: 1.6rem;
    position: relative;
    text-transform: uppercase;
    margin: 1rem 0;
}

#grav-login .delimiter::after,
#grav-login .delimiter::before {
    background-color: #777777;
    content: "";
    height: 1px;
    position: absolute;
    top: 0.8rem;
    width: 40%;
}
#grav-login .delimiter::before {
    background-image: linear-gradient(to right, #777777, #ffffff);
    left: 0;
}
#grav-login .delimiter::after {
    background-image: linear-gradient(to left, #777777, #ffffff);
    right: 0;
}

#grav-login .rememberme {
    display: inline-block;
    float: left;
    padding: 7px 0;
    vertical-align: middle;
}

#grav-login .rememberme label {
    font-weight: inherit;
    display: inline;
}

.login-status {
    white-space: nowrap;
    vertical-align: middle;
}
.form-group.has-errors{background:rgba(255,0,0,.05);border:1px solid rgba(255,0,0,.2);border-radius:3px;margin:0 -5px;padding:0 5px}.form-errors{color:#b52b27}.form-honeybear{display:none;position:absolute !important;height:1px;width:1px;overflow:hidden;clip-path:rect(0px, 1px, 1px, 0px)}.form-errors p{margin:0}.form-input-file input{display:none}.form-input-file .dz-default.dz-message{position:absolute;text-align:center;left:0;right:0;top:50%;transform:translateY(-50%);margin:0}.form-input-file.dropzone{position:relative;min-height:70px;border-radius:3px;margin-bottom:.85rem;border:2px dashed #ccc;color:#aaa;padding:.5rem}.form-input-file.dropzone .dz-preview{margin:.5rem}.form-input-file.dropzone .dz-preview:hover{z-index:2}.form-input-file.dropzone .dz-preview .dz-image img{margin:0}.form-input-file.dropzone .dz-preview .dz-remove{font-size:16px;position:absolute;top:3px;right:3px;display:inline-flex;height:20px;width:20px;background-color:red;justify-content:center;align-items:center;color:#fff;font-weight:bold;border-radius:50%;cursor:pointer;z-index:20}.form-input-file.dropzone .dz-preview .dz-remove:hover{background-color:darkred;text-decoration:none}.form-input-file.dropzone .dz-preview .dz-error-message{min-width:140px;width:auto}.form-input-file.dropzone .dz-preview .dz-image,.form-input-file.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:3px;z-index:1}.filepond--root.form-input{min-height:7rem;height:auto;overflow:hidden;border:0}.form-tabs .tabs-nav{display:flex;padding-top:1px;margin-bottom:-1px}.form-tabs .tabs-nav a{flex:1;transition:color .5s ease,background .5s ease;cursor:pointer;text-align:center;padding:10px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ccc;border-radius:5px 5px 0 0}.form-tabs .tabs-nav a.active{border:1px solid #ccc;border-bottom:1px solid rgba(0,0,0,0);margin:0 -1px}.form-tabs .tabs-nav a.active span{color:inherit}.form-tabs .tabs-nav span{display:inline-block;line-height:1.1}.form-tabs.subtle .tabs-nav{margin-right:0 !important}.form-tabs .tabs-content .tab__content{display:none;padding-top:2rem}.form-tabs .tabs-content .tab__content.active{display:block}.checkboxes{display:inline-block}.checkboxes label{display:inline;cursor:pointer;position:relative;padding:0 0 0 20px;margin-right:15px}.checkboxes label:before{content:"";display:inline-block;width:20px;height:20px;left:0;margin-top:0;margin-right:10px;position:absolute;border-radius:3px;border:1px solid #e6e6e6}.checkboxes input[type=checkbox]{display:none}.checkboxes input[type=checkbox]:checked+label:before{content:"✓";font-size:20px;line-height:1;text-align:center}.checkboxes.toggleable label{margin-right:0}.form-field-toggleable .checkboxes.toggleable{margin-right:5px;vertical-align:middle}.form-field-toggleable .checkboxes+label{display:inline-block}.switch-toggle{display:inline-flex;overflow:hidden;border-radius:3px;line-height:35px;border:1px solid #ccc}.switch-toggle input[type=radio]{position:absolute;visibility:hidden;display:none}.switch-toggle label{display:inline-block;cursor:pointer;padding:0 15px;margin:0;white-space:nowrap;color:inherit;transition:background-color .5s ease}.switch-toggle input.highlight:checked+label{background:#333;color:#fff}.switch-toggle input:checked+label{color:#fff;background:#999}.signature-pad{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:10px;width:100%;height:100%;max-width:700px;max-height:460px;border:1px solid #f0f0f0;background-color:#fff;padding:16px}.signature-pad--body{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;border:1px solid #f6f6f6;min-height:100px}.signature-pad--body canvas{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:4px;box-shadow:0 0 5px rgba(0,0,0,.02) inset}.signature-pad--footer{color:#c3c3c3;text-align:center;font-size:1.2em}.signature-pad--actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px}[data-grav-field=array] .form-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}[data-grav-field=array] .form-row>input,[data-grav-field=array] .form-row>textarea{margin:0;display:inline-block}[data-grav-field=array] .form-row>span[data-grav-array-action]{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:1.9rem;min-height:1.9rem;padding:.25rem;border-radius:3px;cursor:pointer;color:inherit;opacity:.45;transition:opacity .2s ease}[data-grav-field=array] .form-row>span[data-grav-array-action]:hover{opacity:1}[data-grav-field=array] .form-row>span[data-grav-array-action=sort]{cursor:grab}[data-grav-field=array] .form-row>span[data-grav-array-action=sort]:active{cursor:grabbing}.form-data.basic-captcha .form-input-wrapper{border:1px solid #ccc;border-radius:5px;display:flex;overflow:hidden}.form-data.basic-captcha .form-input-prepend{display:flex;color:#333;background-color:#ccc;flex-shrink:0}.form-data.basic-captcha .form-input-prepend img{margin:0}.form-data.basic-captcha .form-input-prepend button>svg{margin:0 8px;width:18px;height:18px}.form-data.basic-captcha input.form-input{border:0}
/* ==========================================================================
   KahunaCart storefront layer
   --------------------------------------------------------------------------
   Dresses the /shop routes — listing, category, search, product, cart,
   checkout, receipt, account, and the sign-in screens a shopper passes
   through — in the kahunacart.com identity defined in css/kahuna.css.

   Two mechanisms, in this order of preference:

   1. The token bridge below. The plugin's own stylesheet
      (plugin://kahunacart/assets/kahunacart.css) resolves every internal
      value through --kahunacart-* first, so naming a token here re-colours
      storefront markup this file never mentions — the invoice, the download
      list, the address book. That is how pages nobody has themed still
      arrive on-brand.

   2. Rules under `.kc-storefront`, for the pages whose *layout* had to change
      rather than their colour: a shop with a real masthead, a product page
      with a gallery beside its buy box, a checkout with a summary that follows
      you down the page.

   `.kc-storefront` is the <main> of partials/base-shop.html.twig, so it holds
   every storefront page whether or not this theme has forked its template —
   which is why the account area, the invoice, and anything a later plugin
   release adds are dressed here without a template of their own. A page the
   theme has not forked is also given a container by the `:not(.kc-shop)` rule
   at the end of this section, since the plugin's own templates emit no wrapper
   and would otherwise run edge to edge.

   Load order: this file is registered at a lower priority than the plugin's
   stylesheet so it emits afterwards, and every rule is scoped under
   .kc-storefront or a kc- component class so it also out-specifies the
   plugin's deliberately-weak `:where()` fallbacks. Either alone would do; both
   together mean a change to the plugin's asset priority cannot quietly undress
   the store.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Token bridge — the whole hand-off to the plugin's stylesheet
   --------------------------------------------------------------------------
   Split by job, the way the plugin uses them: --accent is ink and borders,
   --accent-strong is the only one that ever fills a box. Lagoon reads as the
   store's voice, Board is reserved for the thing you click.
   -------------------------------------------------------------------------- */

:root {
    --kahunacart-fg: var(--ks-koa);
    --kahunacart-bg: var(--ks-salt);
    --kahunacart-muted: var(--ks-koa-soft);
    --kahunacart-subtle: var(--ks-koa-soft);
    --kahunacart-border: var(--ks-line);
    --kahunacart-border-strong: #D6C3A4;

    --kahunacart-accent: var(--ks-lagoon);
    --kahunacart-accent-ink: var(--ks-lagoon-deep);
    --kahunacart-accent-strong: var(--ks-board);
    --kahunacart-on-accent-strong: #FFF6EA;

    --kahunacart-surface: var(--ks-sand);
    --kahunacart-surface-2: var(--ks-sand-soft);
    --kahunacart-surface-sunk: var(--ks-sand-deep);
    --kahunacart-card: var(--ks-card);
    --kahunacart-input: #FFFFFF;

    --kahunacart-radius: 10px;
    --kahunacart-radius-lg: 16px;
    --kahunacart-card-ratio: 4 / 3;
    --kahunacart-font-mono: var(--ks-mono);

    --kahunacart-success: #2E6B47;
    --kahunacart-warning: #8A4A12;
    --kahunacart-danger: #A32E12;

    --kahunacart-ease: ease;
    --kahunacart-duration: 140ms;
}


/* --------------------------------------------------------------------------
   2. Header cart pill
   --------------------------------------------------------------------------
   Sits in the branded bar on every page, beside the CTA. Sand ground so it
   reads as a control rather than a second call to action — the count badge is
   the only Board on it, and only once there is something to count.
   -------------------------------------------------------------------------- */

.kc-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 14px;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa);
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-cart-link:hover { background: var(--ks-sand); border-color: #D6C3A4; color: var(--ks-koa); }
.kc-cart-link svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-cart-count {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    min-width: 20px;
    padding: 4px 6px;
    border-radius: 999px;
    text-align: center;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}
.kc-cart-link.kc-has-items .kc-cart-count { background: var(--ks-board); color: #FFF6EA; }

/* The account control beside it: same pill, icon only. */
.kc-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-account-link:hover { background: var(--ks-sand); border-color: #D6C3A4; }
.kc-account-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kc-account-link img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Anywhere the bar is not at its full 1120px the cart gives up its label and
   the row tightens, which is what keeps the inline nav links alive down to
   1000px rather than losing them at 1200 — see the matching note in
   css/kahuna.css. */
@media (max-width: 1200px) {
    .kc-nav-in { gap: 20px; }
    .kc-cart-link { padding: 8px 11px; gap: 6px; }
    .kc-cart-label { display: none; }
}

/* Two controls went into a bar that was already full, and on a phone the CTA
   ran off the right edge. The lockup gives up room first — it is the one
   element on the row that is not a destination — and below 400px it comes down
   to the bus, which is the mark people recognise anyway. Nothing is hidden
   that a customer needs: the cart, the account and the CTA all survive. */
@media (max-width: 600px) {
    .kc-nav-in { gap: 10px; }
    .kc-nav-in .kc-brand { min-width: 0; gap: 9px; }
    .kc-nav-in .kc-brand i { width: 38px; height: 38px; }
    .kc-nav-in .kc-brand b { font-size: 19px; }
    .kc-account-link { width: 34px; height: 34px; }
    .kc-cart-link { padding: 7px 9px; }
    .kc-cart-count { min-width: 18px; padding: 3px 5px; font-size: 11px; }
    .kc-nav-in .kc-btn-small { padding: 8px 13px; font-size: 13px; }
}
/* 430px (the widest iPhone) still has room for the wordmark once everything
   above has tightened; 390px does not. */
@media (max-width: 400px) {
    .kc-nav-in .kc-brand b { display: none; }
}

/* A documentation page's bar carries a control the others do not — the search
   button, ~96px of it — and with the cart and account beside it the row went
   over even at full width. So a docs bar runs permanently on the tighter
   settings the others only adopt below 1200px. */
.kc-nav-docs .kc-nav-in { gap: 20px; }
.kc-nav-docs .kc-cart-label { display: none; }
.kc-nav-docs .kc-cart-link { padding: 8px 11px; gap: 6px; }

/* For the same reason the inline links hand over to the scrolling row 100px
   earlier on docs than the 1000px the other shells use — at 1024, the width of
   every landscape tablet, the docs row was still ~40px over. */
@media (max-width: 1100px) {
    .kc-nav-docs .kc-nav-item { display: none; }
    .kc-nav-docs .kc-nav-mobile { display: block; border-top: 1px solid var(--ks-line); padding-top: 8px; }
}

/* And the wordmark has to go a good deal sooner there, or the CTA wraps onto
   two lines and the lockup is clipped. */
@media (max-width: 640px) {
    .kc-nav-docs .kc-brand b { display: none; }
}

/* Even wordmark-less, a docs bar at 390px is six controls in 342px of gutter
   and lands about 8px over. The bar — and only the bar — trades 8px of gutter
   each side for it; the page's own .kc-wrap keeps its 24px. */
@media (max-width: 430px) {
    .kc-nav .kc-nav-in,
    .kc-nav .kc-nav-mobile-in { padding-left: 16px; padding-right: 16px; }
    .kc-nav-in { gap: 9px; }
}

/* 360px — the smallest phone still worth designing for — needs one more pass,
   and only on docs, where the burger and the search button are both present. */
@media (max-width: 380px) {
    .kc-nav-docs .kc-account-link { width: 30px; height: 30px; }
    .kc-nav-docs .kc-cart-link { padding: 6px 8px; }
    .kc-nav-docs .kc-btn-small { padding: 7px 10px; font-size: 12.5px; }
}

.kc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* --------------------------------------------------------------------------
   3. Shop shell
   --------------------------------------------------------------------------
   The masthead band is Sand-soft against the Salt page, which is the same
   move the page hero makes to separate a hero from the cards below it.
   -------------------------------------------------------------------------- */

.kc-shop-hero {
    background: var(--ks-sand-soft);
    border-bottom: 1px solid var(--ks-line);
    padding: 52px 0 44px;
}
.kc-shop-hero-in {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.kc-shop-hero-text { flex: 1 1 380px; min-width: 0; }
.kc-shop-hero h1 {
    font-size: clamp(32px, 4.4vw, 46px);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 12px;
}
.kc-shop-hero .kc-intro { margin: 0; max-width: 54ch; }
.kc-shop-hero-search { flex: 0 1 380px; min-width: 260px; }

/* A narrower masthead for the pages that are a step in a flow rather than a
   place to browse — cart, checkout, receipt, account, sign-in. */
.kc-shop-hero.kc-shop-hero--flow { padding: 44px 0 36px; }
.kc-shop-hero.kc-shop-hero--flow h1 { font-size: clamp(28px, 3.6vw, 38px); }

.kc-shop {
    background: var(--ks-salt);
    padding: 40px 0 88px;
}

/* Storefront pages this theme has not forked — the account area, the invoice,
   whatever a later plugin release adds. The plugin's templates emit a bare
   `.kahunacart` section with no container of its own, so it is given one here
   rather than being left to run the full width of the window. Pages that *are*
   forked carry .kc-shop and bring their own .kc-wrap, hence the :not(). */
.kc-storefront > .kahunacart:not(.kc-shop) {
    display: block;
    max-width: 1120px;
    margin: 0 auto;
    padding: 44px 24px 88px;
}
.kc-storefront > .kahunacart:not(.kc-shop) > h1 {
    font-family: var(--ks-display);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: var(--ks-koa);
}
/* The newsletter's pages put their heading inside a card rather than on the
   section, so the rule above does not reach it; the display face still
   should. Size and spacing stay the plugin's, which fits the card. */
.kc-storefront .kahunacart-newsletters-card h1 {
    font-family: var(--ks-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ks-koa);
}
/* No align-items:start on these: a sticky child cannot travel when its
   track is sized to its own content, and the sidebar and the order summary
   both scrolled away with the page. None of these asides paints anything
   itself, so a stretched column is invisible. */
.kc-shop-layout {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 44px;
}
.kc-shop-layout.kc-shop-layout--flat { grid-template-columns: minmax(0, 1fr); }
.kc-shop-aside { position: sticky; top: calc(var(--ks-nav-h) + 20px); }
.kc-shop-main { min-width: 0; }

@media (max-width: 900px) {
    .kc-shop-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .kc-shop-aside { position: static; }
    .kc-shop-hero { padding: 36px 0 32px; }
    .kc-shop-hero-in { align-items: stretch; gap: 24px; }
    .kc-shop-hero-search { flex: 1 1 100%; }
}


/* --------------------------------------------------------------------------
   4. Shared shop furniture
   -------------------------------------------------------------------------- */

.kc-shop-panel {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 22px;
}
.kc-shop-panel + .kc-shop-panel { margin-top: 16px; }
.kc-shop-panel-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 16px;
}
.kc-shop-panel--sticky { position: sticky; top: calc(var(--ks-nav-h) + 20px); }

/* The listing writes its own count; the search results region carries the
   plugin's, which says how many matched what — so both wear the same label. */
.kc-shop-count,
.kc-storefront .kahunacart-search-summary {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 18px;
}
.kc-storefront .kahunacart-search-more,
.kc-storefront .kahunacart-listing-more { font-size: 14px; color: var(--ks-koa-soft); margin: 18px 0 0; }

.kc-shop-empty {
    background: var(--ks-card);
    border: 1px dashed var(--ks-line);
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    color: var(--ks-koa-soft);
    font-size: 16px;
}
.kc-shop-empty p { margin: 0 0 18px; }
.kc-shop-empty p:last-child { margin: 0; }

.kc-shop-back { margin: 28px 0 0; font-size: 14.5px; }
.kc-shop-back a { color: var(--ks-koa-soft); text-decoration: none; font-weight: 600; }
.kc-shop-back a:hover { color: var(--ks-lagoon); }

.kc-shop-note { font-size: 14px; color: var(--ks-koa-soft); margin: 18px 0 0; }

/* Flash messages. The plugin names the scope; each one gets its own tint. */
.kc-storefront .kahunacart-messages { margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.kc-storefront .kahunacart-message {
    margin: 0;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: var(--ks-sand);
    color: var(--ks-koa);
    font-size: 14.5px;
}
.kc-storefront .kahunacart-message--success { background: var(--ks-lagoon-mist); border-color: #BBD5D2; color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-message--error { background: #F8E2D8; border-color: #E8C3B2; color: #8E2A10; }
.kc-storefront .kahunacart-message--warning { background: #F5E6CE; border-color: #E3CBA1; color: #7A4410; }
.kc-storefront .kc-payment-open .kahunacart-message p { margin: 0 0 10px; }
.kc-storefront .kc-payment-open-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }
.kc-storefront .kc-payment-open-note { font-size: 13.5px; color: var(--ks-koa-soft); }

/* Buttons. The plugin's templates use the bare `.button` class every Grav
   theme is expected to define; this is that definition, in Board. */
.kc-storefront .button,
.kc-shop-hero .button {
    display: inline-block;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    padding: 12px 22px;
    border-radius: 11px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.kc-storefront .button:hover,
.kc-shop-hero .button:hover { background: var(--ks-board-deep); color: #FFF6EA; transform: translateY(-1px); }

.kc-storefront .kc-btn-ghost,
.kc-storefront .button.kc-btn-ghost {
    background: transparent;
    color: var(--ks-koa);
    border: 1.5px solid var(--ks-koa);
}
.kc-storefront .kc-btn-ghost:hover,
.kc-storefront .button.kc-btn-ghost:hover { background: var(--ks-sand); color: var(--ks-koa); }

.kc-storefront .kc-btn-block { display: block; width: 100%; text-align: center; }

/* Form controls, shared by the checkout, the cart, the filters and the
   estimate box. Inputs are white against the warm grounds so a field always
   reads as somewhere to type. */
.kc-storefront .kc-input,
.kc-storefront input[type="text"],
.kc-storefront input[type="email"],
.kc-storefront input[type="tel"],
.kc-storefront input[type="search"],
.kc-storefront input[type="number"],
.kc-storefront input[type="password"],
.kc-storefront select,
.kc-storefront textarea,
.kc-shop-hero input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ks-body);
    font-size: 15px;
    color: var(--ks-koa);
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 11px 13px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.kc-storefront .kc-input:focus,
.kc-storefront input:focus,
.kc-storefront select:focus,
.kc-storefront textarea:focus,
.kc-shop-hero input[type="search"]:focus {
    outline: none;
    border-color: var(--ks-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.15);
}
.kc-storefront ::placeholder { color: #A8917A; }

/* Selects. Helios's Tailwind forms layer sets appearance:none on every select,
   which takes the native arrow with it, so the arrow is drawn here: a Koa
   chevron on the right, and room for it so a long option never runs under it.
   The second selector outranks .kc-input, whose background shorthand would
   otherwise paint over the arrow. */
.kc-storefront select,
.kc-storefront select.kc-input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235C4A3A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 13px center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
}

.kc-storefront .kc-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
}

/* Tick boxes and radios.
   Helios's Tailwind forms layer already paints these with appearance:none and
   an explicit 1rem box, and fills a checked one from `color` rather than
   accent-color — so this re-points that fill at Lagoon and softens the border
   to the brand line, and must never set `width: auto`, which on a box with no
   native appearance collapses it to its own borders. */
.kc-storefront input[type="checkbox"],
.kc-storefront input[type="radio"],
.kc-auth-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    color: var(--ks-lagoon);
    border-color: #C0AB92;
    cursor: pointer;
}
.kc-storefront input[type="checkbox"] { border-radius: 5px; }
.kc-storefront input[type="checkbox"]:focus,
.kc-storefront input[type="radio"]:focus {
    --tw-ring-color: var(--ks-lagoon);
    border-color: var(--ks-lagoon);
}

.kc-storefront .kc-fieldset {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
    margin: 0 0 16px;
}
.kc-storefront .kc-legend {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    padding: 0;
    margin: 0 0 18px;
    float: left;
    width: 100%;
}
.kc-storefront .kc-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    clear: both;
}
.kc-storefront .kc-field { margin: 0; }
.kc-storefront .kc-field--wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .kc-storefront .kc-field-grid { grid-template-columns: 1fr; } }

.kc-storefront .kc-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--ks-koa);
    margin: 14px 0 0;
    cursor: pointer;
}
.kc-storefront .kc-checkbox input { margin: 2px 0 0; flex: none; }

.kc-storefront .kc-hint { font-size: 13.5px; color: var(--ks-koa-soft); margin: 8px 0 0; }
.kc-storefront .kc-hint--warn { color: #8A4A12; }

/* Radio rows: payment providers, shipping methods. */
.kc-storefront .kc-choice-list { display: flex; flex-direction: column; gap: 10px; clear: both; }
.kc-storefront .kc-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    background: var(--ks-salt);
    font-size: 15px;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-storefront .kc-choice:hover { border-color: #D6C3A4; }
.kc-storefront .kc-choice input { flex: none; }
.kc-storefront .kc-choice:has(input:checked) {
    border-color: var(--ks-lagoon);
    background: var(--ks-lagoon-mist);
}
.kc-storefront .kc-choice-label { flex: 1 1 auto; font-weight: 600; }
.kc-storefront .kc-choice-price { font-family: var(--ks-mono); font-size: 14px; color: var(--ks-koa-soft); }

/* The receipt maths block, shared by cart, checkout and the order page. */
.kc-storefront .kahunacart-totals {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}
.kc-storefront .kahunacart-totals th,
.kc-storefront .kahunacart-totals td {
    padding: 9px 0;
    text-align: left;
    font-weight: 500;
    color: var(--ks-koa-soft);
    border: 0;
}
.kc-storefront .kahunacart-totals td { text-align: right; font-family: var(--ks-mono); color: var(--ks-koa); font-variant-numeric: tabular-nums; }
.kc-storefront .kahunacart-totals .kahunacart-total th,
.kc-storefront .kahunacart-totals .kahunacart-total td {
    border-top: 1px solid var(--ks-line);
    padding-top: 14px;
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--ks-koa);
    letter-spacing: -0.01em;
}
.kc-storefront .kahunacart-totals .kahunacart-total td { color: var(--ks-board); }
.kc-storefront .kahunacart-adjustment em { font-style: normal; font-size: 12px; color: #A8917A; }


/* --------------------------------------------------------------------------
   5. Storefront search box
   --------------------------------------------------------------------------
   The plugin's own partial, dressed. Field and button share one rounded
   shell so the masthead reads as a single control.
   -------------------------------------------------------------------------- */

.kc-shop-search .kahunacart-search { display: flex; gap: 0; margin: 0; }
.kc-shop-search .kahunacart-search-field { flex: 1 1 auto; min-width: 0; display: block; margin: 0; }
.kc-shop-search input[type="search"] {
    border-radius: 11px 0 0 11px;
    border-right: 0;
    height: 46px;
}
.kc-shop-search .button {
    flex: none;
    border-radius: 0 11px 11px 0;
    height: 46px;
    padding: 0 20px;
}
.kc-shop-search .button:hover { transform: none; }
.kc-storefront .kahunacart-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   6. Catalog sidebar
   --------------------------------------------------------------------------
   The plugin's category tree and filter panel, included unmodified and
   dressed here — the same arrangement the demo theme uses, so a change in the
   plugin's markup does not need a fork to be picked up.
   -------------------------------------------------------------------------- */

.kc-storefront .kahunacart-catalog-nav { display: flex; flex-direction: column; gap: 28px; }

.kc-storefront .kahunacart-nav-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ks-line);
}

.kc-storefront .kahunacart-cat-list { list-style: none; margin: 0; padding: 0; }
.kc-storefront .kahunacart-cat-list .kahunacart-cat-list { margin-left: 12px; padding-left: 10px; border-left: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-cat-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0; }
.kc-storefront .kahunacart-cat-branch { width: 100%; }
.kc-storefront .kahunacart-cat-summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.kc-storefront .kahunacart-cat-summary::-webkit-details-marker { display: none; }
.kc-storefront .kahunacart-cat-summary::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-right: 1.5px solid var(--ks-koa-soft);
    border-bottom: 1.5px solid var(--ks-koa-soft);
    transform: rotate(-45deg);
    transition: transform 140ms ease;
}
.kc-storefront details[open] > .kahunacart-cat-summary::before { transform: rotate(45deg); }

.kc-storefront .kahunacart-cat-link {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    color: var(--ks-koa);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
}
.kc-storefront .kahunacart-cat-link:hover { background: var(--ks-sand); color: var(--ks-lagoon); }
.kc-storefront .kahunacart-cat-link.is-current { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-cat-count,
.kc-storefront .kahunacart-filter-count {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    color: #A8917A;
    font-variant-numeric: tabular-nums;
}

.kc-storefront .kahunacart-filters { margin: 0; }
.kc-storefront .kahunacart-filter-group { border: 0; margin: 0 0 20px; padding: 0; }
.kc-storefront .kahunacart-filter-group legend {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    padding: 0;
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-filter-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kc-storefront .kahunacart-filter-option {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ks-koa);
    padding: 4px 0;
    cursor: pointer;
}
.kc-storefront .kahunacart-filter-option input { flex: none; }
.kc-storefront .kahunacart-filter-option > span:not(.kahunacart-filter-count) { flex: 1 1 auto; }

.kc-storefront .kahunacart-filter-range { display: flex; align-items: center; gap: 8px; }
.kc-storefront .kahunacart-filter-field { flex: 1 1 0; min-width: 0; }
.kc-storefront .kahunacart-filter-dash { color: var(--ks-koa-soft); flex: none; }
.kc-storefront .kahunacart-filter-price input { padding: 9px 11px; font-size: 14px; }

.kc-storefront .kahunacart-filter-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kc-storefront .kahunacart-filter-actions .button { padding: 10px 18px; font-size: 14px; }
.kc-storefront .kahunacart-filter-clear { font-size: 13.5px; color: var(--ks-koa-soft); text-decoration: underline; }

/* The rest of a facet the `catalog.facets.max_values` cap has shortened. A
   <details> holding real checkboxes in the same form, so opening it costs no
   request; the summary reads like the Clear link above rather than like a
   control, because it reveals rather than does. */
.kc-storefront .kahunacart-filter-more { margin-top: 6px; }
.kc-storefront .kahunacart-filter-more-toggle {
    font-size: 13.5px;
    color: var(--ks-lagoon);
    cursor: pointer;
    padding: 2px 0;
}
.kc-storefront .kahunacart-filter-more-toggle:hover { color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-filter-more > .kahunacart-filter-options { margin-top: 6px; }

/* A value nothing reachable answers. Counts are taken over the listing being
   looked at, so a value that would give an empty grid reads 0 and its input is
   disabled; greying it where it stands rather than dropping it keeps the panel
   from reshuffling under the cursor on every tick. `catalog.facets.empty: hide`
   drops them instead and nothing then reaches these rules. Whatever the shopper
   has ticked is never disabled, at any count. */
.kc-storefront .kahunacart-filter-option.is-disabled,
.kc-storefront .kahunacart-filter-range.is-disabled {
    color: var(--ks-koa-soft);
    opacity: 0.5;
    cursor: not-allowed;
}
.kc-storefront .kahunacart-filter-option.is-disabled input { cursor: not-allowed; }

/* Under a facet whose every value is out of reach: one muted line under the
   heading, rather than a column of a dozen dead boxes all reading 0. */
.kc-storefront .kahunacart-filter-none {
    margin: 0;
    font-size: 13.5px;
    font-style: italic;
    color: var(--ks-koa-soft);
}

/* A category holding nothing under the filters currently on. Still a link: the
   tree is the way out of a corner somebody has filtered themselves into. The
   row rather than the whole item, because a dead branch's children carry the
   class too and two nested opacities multiply. */
.kc-storefront .kahunacart-cat-item.is-unavailable > .kahunacart-cat-link,
.kc-storefront .kahunacart-cat-item.is-unavailable > .kahunacart-cat-count,
.kc-storefront .kahunacart-cat-item.is-unavailable > .kahunacart-cat-branch > .kahunacart-cat-summary {
    opacity: 0.5;
}

/* A specification value that is also a link to the rest of the catalogue
   answering it. Ink rather than Lagoon at rest: a spec table where every
   second cell is brand-coloured reads as a list of links rather than a table
   of facts, and the dotted rule under it is what says it is one. */
.kc-storefront .kahunacart-attribute-link {
    color: var(--ks-koa);
    text-decoration: none;
    border-bottom: 1px dotted var(--ks-line);
}
.kc-storefront .kahunacart-attribute-link:hover,
.kc-storefront .kahunacart-attribute-link:focus-visible {
    color: var(--ks-lagoon);
    border-bottom-color: currentColor;
}
.kc-storefront .kahunacart-attribute-link .kahunacart-spec-hex { color: inherit; }


/* --------------------------------------------------------------------------
   7. Product grid
   -------------------------------------------------------------------------- */

.kc-shop-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kc-shop-grid, .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kc-shop-grid, .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: minmax(0, 1fr); } }

.kc-pcard {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.kc-pcard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); border-color: #D6C3A4; }
.kc-pcard.is-sold-out { opacity: 0.72; }

.kc-pcard-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.kc-pcard-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
    overflow: hidden;
}
.kc-pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A product with no picture gets a tonal tile carrying its monogram, in a hue
   picked from its id and held inside the warm band — 15deg to 75deg, rust
   through sand to olive — so a catalog that has never uploaded an image still
   reads as a catalog rather than a list of holes. */
.kc-pcard-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(150deg,
            hsl(var(--ks-tile-hue, 30) 42% 88%),
            hsl(var(--ks-tile-hue, 30) 34% 80%));
}
.kc-pcard-mono {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -0.02em;
    color: hsl(var(--ks-tile-hue, 30) 38% 34% / 0.5);
}

.kc-pcard-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.kc-badge {
    font-family: var(--ks-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
}
.kc-badge--sale { background: var(--ks-board); color: #FFF6EA; border-color: var(--ks-board); }
.kc-badge--soon { white-space: nowrap; color: var(--ks-lagoon-deep); border-color: var(--ks-lagoon-mist); background: var(--ks-lagoon-mist); }
/* Compact rows are too tight for a pill: a quiet one-line label beside the price. */
.kc-compact-soon {
    flex: none;
    font-family: var(--ks-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    white-space: nowrap;
}
.kc-badge--sold-out { background: var(--ks-koa); color: var(--ks-sand); border-color: var(--ks-koa); }
.kc-badge--digital { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); border-color: #BBD5D2; }

.kc-pcard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.kc-pcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kc-pcard-title {
    font-family: var(--ks-display);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ks-koa);
    margin: 0;
    min-width: 0;
}
.kc-pcard-price {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ks-board);
    white-space: nowrap;
    flex: none;
    font-variant-numeric: tabular-nums;
}
.kc-pcard-was { font-family: var(--ks-mono); font-size: 12.5px; color: #A8917A; margin-left: 6px; font-weight: 400; }
.kc-pcard-summary {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kc-pcard-stock {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8A4A12;
    margin-top: auto;
    padding-top: 4px;
}

/* --------------------------------------------------------------------------
   7b. Sectioned listing
   --------------------------------------------------------------------------
   The shop page split into blocks by the plugin's `catalog.sections`: the hero
   at the top, the add-ons under it, then the shelf of payment providers. The
   plugin resolves the blocks and this theme draws them, through
   partials/kahunacart-section-{hero,grid,compact}.html.twig.

   The column count each block was configured with arrives as
   --kahunacart-section-columns on the block's own element, which is the
   plugin's public token rather than an internal one, so the number a merchant
   typed into the admin is the number these rules read. Every grid below is
   auto-fill with a real minimum track, so the count is a ceiling and the
   blocks collapse on their own without a media query per block. `auto-fill`
   rather than `auto-fit` because the commonest hero here holds one product,
   and auto-fit would collapse the empty track and stretch that one card across
   the width of two with its text ending halfway.
   -------------------------------------------------------------------------- */

.kc-section { margin-bottom: 48px; }
.kc-section:last-child { margin-bottom: 0; }

.kc-section-title {
    font-family: var(--ks-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ks-line);
}

/* The hero. One card per product, picture beside the words, at most two across
   because a third one is the grid with a longer summary. */
.kc-hero-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
    gap: 20px;
    max-width: calc(var(--kahunacart-section-columns, 2) * 34rem);
}
.kc-hero-card {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    transition: box-shadow 140ms ease, border-color 140ms ease;
}
.kc-hero-card:hover { box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); border-color: #D6C3A4; }

/* A hero holding one product is the store's headline and takes the whole row:
   a bigger picture, a bigger title, and the summary set wide beside it. The
   two-across ceiling above is for heroes with two products. */
.kc-hero-list:has(> .kc-hero-card:only-child) {
    grid-template-columns: 1fr;
    max-width: none;
}
.kc-hero-card:only-child { padding: 28px; gap: 32px; }
.kc-hero-card:only-child .kc-hero-media { flex: 1 1 18rem; max-width: 24rem; }
.kc-hero-card:only-child .kc-hero-body { flex: 2 1 22rem; gap: 14px; }
.kc-hero-card:only-child .kc-hero-title { font-size: clamp(28px, 3vw, 36px); }
.kc-hero-card:only-child .kc-hero-summary { font-size: 17px; max-width: 60ch; }

/* Stops shrinking at 8rem, by which width the row is about to wrap anyway and
   a narrower column would be a stripe rather than a picture. */
.kc-hero-media {
    position: relative;
    flex: 1 1 8rem;
    min-width: 8rem;
    max-width: 15rem;
    align-self: flex-start;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
}
.kc-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kc-hero-body {
    flex: 3 1 14rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.kc-hero-title {
    font-family: var(--ks-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}
.kc-hero-title a { color: var(--ks-koa); text-decoration: none; }
.kc-hero-title a:hover { color: var(--ks-lagoon); }
.kc-hero-summary {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
    margin: 0;
    max-width: 46ch;
}
.kc-hero-price {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--ks-board);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
/* On the baseline of the card whatever length the summary came out, so two
   heroes side by side do not have their buttons at two different heights. */
.kc-hero-action { margin-top: auto; }

/* The grid block. The cards are this theme's own; all this does is cap the
   track count at what the block asked for. */
.kc-section--grid .kc-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    max-width: calc(var(--kahunacart-section-columns, 3) * 22rem);
}

/* The compact block. Rows rather than tiles, for the shelf people scan. */
.kc-compact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: 4px 20px;
    max-width: calc(var(--kahunacart-section-columns, 2) * 26rem);
}
.kc-compact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ks-koa);
    transition: background 140ms ease;
}
.kc-compact-link:hover { background: var(--ks-sand-soft); }
.kc-compact-link:hover .kc-compact-title { color: var(--ks-lagoon); }
.kc-compact-media {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
}
.kc-compact-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The monogram tile is shared with the product card, where it fills a card and
   carries a 40px letter. At thumbnail size that letter is the whole tile. */
.kc-compact-media .kc-pcard-mono { font-size: 17px; }

.kc-compact-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    line-height: 1.35;
}
.kc-compact-price {
    flex: none;
    font-family: var(--ks-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ks-board);
    font-variant-numeric: tabular-nums;
}

/* Subcategory cards — the department landing page, same card language. */
.kc-storefront .kahunacart-subcategory-grid {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 900px) { .kc-storefront .kahunacart-subcategory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kc-storefront .kahunacart-subcategory-grid { grid-template-columns: minmax(0, 1fr); } }
.kc-storefront .kahunacart-subcategory-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.kc-storefront .kahunacart-subcategory-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); }
.kc-storefront .kahunacart-subcategory-link { display: block; padding: 18px; text-decoration: none; color: inherit; }
.kc-storefront .kahunacart-subcategory-media { margin: -18px -18px 14px; }
.kc-storefront .kahunacart-subcategory-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.kc-storefront .kahunacart-subcategory-title { font-family: var(--ks-display); font-size: 16.5px; font-weight: 700; margin: 0 0 4px; }
.kc-storefront .kahunacart-subcategory-count { font-family: var(--ks-mono); font-size: 11.5px; color: var(--ks-koa-soft); }


/* --------------------------------------------------------------------------
   8. Product page
   -------------------------------------------------------------------------- */

.kc-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
}
/* The column stretches so the sticky box inside it has somewhere to travel;
   the bordered box stays the height of the picture rather than growing into a
   tall empty card beside a long description. */
.kc-product-media-col { min-width: 0; }
@media (max-width: 900px) { .kc-product-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.kc-product-media {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    overflow: hidden;
    position: sticky;
    top: calc(var(--ks-nav-h) + 20px);
}
@media (max-width: 900px) { .kc-product-media { position: static; } }

.kc-product-media .kahunacart-gallery { margin: 0; }
.kc-product-media .kahunacart-gallery-main {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.kc-product-media .kahunacart-gallery-main::-webkit-scrollbar { display: none; }
.kc-product-media .kahunacart-gallery-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.kc-product-media .kahunacart-gallery-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kc-product-media .kahunacart-gallery-thumbs {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border-top: 1px solid var(--ks-line);
    overflow-x: auto;
}
.kc-product-media .kahunacart-gallery-thumbs img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--ks-line);
    display: block;
}

/* The stand-in when a product has no pictures at all. */
.kc-product-ph {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg,
        hsl(var(--ks-tile-hue, 30) 42% 88%),
        hsl(var(--ks-tile-hue, 30) 34% 80%));
}
.kc-product-ph span {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 84px;
    letter-spacing: -0.03em;
    color: hsl(var(--ks-tile-hue, 30) 38% 34% / 0.45);
}

.kc-product-info { min-width: 0; }
.kc-product-title {
    font-family: var(--ks-display);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: var(--ks-koa);
}
.kc-product-summary { font-size: 17px; line-height: 1.55; color: var(--ks-koa-soft); margin: 0 0 24px; }
.kc-product-desc { font-size: 15.5px; color: var(--ks-koa); margin: 24px 0 0; }
.kc-product-desc h2 { font-size: 21px; font-weight: 800; margin: 28px 0 10px; }
.kc-product-desc h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.kc-product-desc p { margin: 0 0 14px; }
.kc-product-desc ul, .kc-product-desc ol { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.kc-product-desc ol { list-style: decimal; }
.kc-product-desc li { margin-bottom: 6px; }
.kc-product-desc code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 6px; padding: 2px 6px; }
.kc-product-desc pre { background: var(--ks-koa); color: #E8DECF; border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
.kc-product-desc pre code { background: none; padding: 0; color: inherit; }

/* The buy box: the one panel on the page that fills with Board. */
.kc-product-buy {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 22px;
    margin: 0 0 24px;
}
/* The plugin gives the buy form its own bordered surface, which inside this
   panel would read as a box in a box. The panel is the box; the form is
   flattened into it. */
.kc-product-buy .kahunacart-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
}
.kc-product-buy .kahunacart-options,
.kc-product-buy .kahunacart-variant-picker { flex: 1 1 100%; }
.kc-product-buy .kahunacart-option { margin: 0 0 14px; }
.kc-product-buy .kahunacart-option-name {
    display: block;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 8px;
}
.kc-product-buy .kahunacart-option-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.kc-product-buy .kahunacart-option-choice {
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ks-line);
    background: var(--ks-salt);
    color: var(--ks-koa);
    cursor: pointer;
}
.kc-product-buy .kahunacart-option-choice[aria-checked="true"] {
    border-color: var(--ks-lagoon);
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}
.kc-product-buy .kahunacart-price {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ks-board);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.kc-product-buy .kahunacart-compare-price { font-family: var(--ks-mono); font-size: 16px; color: #A8917A; }
.kc-product-buy .kahunacart-qty { flex: none; margin: 0; }
.kc-product-buy .kahunacart-qty input { width: 72px; text-align: center; }
.kc-product-buy .button { margin-left: auto; padding: 13px 26px; }
.kc-product-buy select { max-width: 100%; }

/* Tags: a way of narrowing the catalog, so they are chips, not headings. */
.kc-storefront .kahunacart-tags { margin: 26px 0 0; }
.kc-storefront .kahunacart-tags-title {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.kc-storefront .kahunacart-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    color: var(--ks-koa-soft);
    text-decoration: none;
}
.kc-storefront .kahunacart-tag:hover { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); border-color: #BBD5D2; }

/* Breadcrumbs, above the product title. */
.kc-storefront .kahunacart-breadcrumbs { margin: 0 0 18px; }
.kc-storefront .kahunacart-breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
}
.kc-storefront .kahunacart-breadcrumb-item + .kahunacart-breadcrumb-item::before {
    content: "/";
    color: #C0AB92;
    margin-right: 8px;
}
.kc-storefront .kahunacart-breadcrumb-item a { color: var(--ks-koa-soft); text-decoration: none; font-weight: 600; }
.kc-storefront .kahunacart-breadcrumb-item a:hover { color: var(--ks-lagoon); }
.kc-storefront .kahunacart-breadcrumb-current { color: var(--ks-koa-soft); }
.kc-shop-hero .kahunacart-breadcrumbs { margin: 0 0 14px; }


/* --------------------------------------------------------------------------
   9. Cart
   -------------------------------------------------------------------------- */

.kc-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
}
@media (max-width: 960px) { .kc-cart-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.kc-cart-table { width: 100%; border-collapse: collapse; }
.kc-cart-table thead th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-cart-table thead th.kc-num,
.kc-cart-table td.kc-num { text-align: right; }
.kc-cart-table tbody td {
    padding: 18px 12px;
    border-bottom: 1px solid var(--ks-line);
    font-size: 15px;
    vertical-align: middle;
}
.kc-cart-table tbody tr:last-child td { border-bottom: 0; }
.kc-cart-table td:first-child, .kc-cart-table th:first-child { padding-left: 0; }
.kc-cart-table td:last-child, .kc-cart-table th:last-child { padding-right: 0; }

.kc-cart-item-title { display: block; font-weight: 600; color: var(--ks-koa); }
.kc-cart-item-sku { display: block; font-family: var(--ks-mono); font-size: 12px; color: #A8917A; margin-top: 3px; }
.kc-cart-table td.kc-num { font-family: var(--ks-mono); font-variant-numeric: tabular-nums; color: var(--ks-koa); }
.kc-cart-line-total { font-weight: 600; }
.kc-storefront .kc-qty-input { width: 68px; text-align: center; padding: 8px 6px; }

.kc-storefront .kc-remove {
    background: none;
    border: 1px solid transparent;
    color: #A8917A;
    font-size: 20px;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.kc-storefront .kc-remove:hover { background: #F8E2D8; color: #8E2A10; border-color: #E8C3B2; }

.kc-cart-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* The discount form and the estimate box, dressed inside their panels. */
/* The plugin gives this form a dashed surface of its own, which inside the
   panel would be a box in a box; and its label repeats the panel's heading
   word for word, so the label is left for screen readers only. */
.kc-storefront .kahunacart-coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.kc-storefront .kahunacart-coupon > label[for="kahunacart-coupon-code"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.kc-storefront .kahunacart-coupon input { flex: 1 1 140px; min-width: 0; }
.kc-storefront .kahunacart-coupon .button { flex: none; padding: 11px 18px; font-size: 14px; }
.kc-storefront .kahunacart-coupon-remove { background: transparent; color: var(--ks-koa-soft); border: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-coupon-remove:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-storefront .kahunacart-coupon-active {
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-lagoon-deep);
    background: var(--ks-lagoon-mist);
    border-radius: 8px;
    padding: 8px 11px;
    margin: 0 0 14px;
}

.kc-storefront .kahunacart-estimate-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-estimate-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.kc-storefront .kahunacart-estimate-field { flex: 1 1 100%; }
.kc-storefront .kahunacart-estimate-field > span:first-child { display: block; font-size: 13px; font-weight: 600; color: var(--ks-koa-soft); margin: 0 0 6px; }
.kc-storefront .kahunacart-estimate-form .button { flex: none; padding: 11px 18px; font-size: 14px; }
.kc-storefront .kahunacart-estimate-result { margin: 14px 0 0; font-size: 14px; }
.kc-storefront .kahunacart-estimate-hint { font-size: 13.5px; color: var(--ks-koa-soft); margin: 12px 0 0; }


/* --------------------------------------------------------------------------
   10. Checkout
   -------------------------------------------------------------------------- */

/* The plugin caps .kahunacart-checkout-form at 42rem, which is right for the
   single stacked column it ships and wrong for two — without the reset the
   form never grows past 672px and the summary sits in the middle of the page
   with the right third empty. Same story for the one-message pages below. */
.kc-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 40px;
    max-width: none;
}
@media (max-width: 960px) { .kc-checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.kc-checkout-main { min-width: 0; }
.kc-checkout-aside { min-width: 0; }

.kc-summary-items { list-style: none; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--ks-line); display: flex; flex-direction: column; gap: 12px; }
.kc-summary-item { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; }
.kc-summary-item-title { color: var(--ks-koa); min-width: 0; }
.kc-summary-qty { font-family: var(--ks-mono); font-size: 12.5px; color: #A8917A; }
.kc-summary-item-total { font-family: var(--ks-mono); color: var(--ks-koa); white-space: nowrap; font-variant-numeric: tabular-nums; }

.kc-checkout-aside .kc-shop-panel .button { margin-top: 18px; }
.kc-checkout-aside .kc-shop-back { text-align: center; margin-top: 16px; }

/* The address-check panel, when a geocoder proposes a correction. */
.kc-storefront .kahunacart-address-suggestion {
    background: var(--ks-lagoon-mist);
    border: 1px solid #BBD5D2;
    border-radius: 16px;
    padding: 20px 22px;
    margin: 0 0 20px;
    grid-column: 1 / -1;
}
.kc-storefront .kahunacart-address-suggestion h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: var(--ks-lagoon-deep); }

.kc-storefront .kahunacart-shipping-address,
.kc-storefront .kahunacart-shipping-methods { clear: both; }


/* --------------------------------------------------------------------------
   11. Receipt, processing, denied
   -------------------------------------------------------------------------- */

.kc-order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
}
@media (max-width: 960px) { .kc-order-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.kc-order-meta { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 24px; }
.kc-order-meta div { display: flex; flex-direction: column; gap: 4px; }
.kc-order-meta dt,
.kc-order-meta .kc-order-meta-label {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-order-meta dd,
.kc-order-meta .kc-order-meta-value {
    margin: 0;
    font-family: var(--ks-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
}

.kc-order-items { width: 100%; border-collapse: collapse; }
.kc-order-items thead th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-order-items thead th:last-child, .kc-order-items td:last-child { text-align: right; padding-right: 0; }
.kc-order-items th:first-child, .kc-order-items td:first-child { padding-left: 0; }
.kc-order-items tbody td { padding: 15px 12px; border-bottom: 1px solid var(--ks-line); font-size: 15px; }
.kc-order-items tbody tr:last-child td { border-bottom: 0; }

.kc-storefront .kahunacart-status {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
    margin-right: 5px;
}
.kc-storefront .kahunacart-status--paid,
.kc-storefront .kahunacart-status--completed { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-status--shipped { background: #F3DEC9; color: #8A4A12; }
.kc-storefront .kahunacart-status--refunded,
.kc-storefront .kahunacart-status--cancelled,
.kc-storefront .kahunacart-status--failed { background: #F8E2D8; color: #8E2A10; }

.kc-storefront .kahunacart-download-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kc-storefront .kahunacart-download {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
}
.kc-storefront .kahunacart-download > a { font-weight: 700; color: var(--ks-lagoon); text-decoration: none; }
.kc-storefront .kahunacart-download > a:hover { text-decoration: underline; }
.kc-storefront .kahunacart-download-meta,
.kc-storefront .kahunacart-release-version { font-family: var(--ks-mono); font-size: 12px; color: var(--ks-koa-soft); }

/* Merchant Markdown inside the storefront: licence install steps and offline
   payment instructions. The base sheet resets every list to nothing, which is
   right for navigation and wrong for ten numbered install steps, so the
   defaults are put back here the way .kc-product-desc puts them back on the
   product page. */
.kc-storefront .kahunacart-license-instructions,
.kc-storefront .kahunacart-offline-instructions { font-size: 15px; line-height: 1.55; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-instructions p,
.kc-storefront .kahunacart-offline-instructions p { margin: 0 0 12px; }
.kc-storefront .kahunacart-license-instructions ul,
.kc-storefront .kahunacart-license-instructions ol,
.kc-storefront .kahunacart-offline-instructions ul,
.kc-storefront .kahunacart-offline-instructions ol { list-style: revert; margin: 0 0 14px; padding-left: 22px; }
.kc-storefront .kahunacart-license-instructions li,
.kc-storefront .kahunacart-offline-instructions li { margin-bottom: 6px; }
.kc-storefront .kahunacart-license-instructions code,
.kc-storefront .kahunacart-offline-instructions code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 6px; padding: 2px 6px; }

/* The licence card in the grav.org licensing layout: the packages a key covers as
   pills under the key, the licence file and the ready-to-run package as real
   buttons, and every H3 of the merchant's instructions folded into a
   <details> so a customer opens the install route they want and never reads
   the other two. */
/* The card itself sits on the same light ground as a download row in the
   panel above it. The plugin's own sheet paints it on --kahunacart-surface,
   which this theme maps to Sand, and a whole card of Sand read as a dark block
   beside its neighbours. */
.kc-storefront .kahunacart-license { background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 16px; padding: 22px 24px; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.05); }
.kc-storefront .kahunacart-license + .kahunacart-license { margin-top: 16px; }
/* Inside a receipt panel the card is already on card white, so it drops to the
   page ground and loses the shadow: a card on a card reads as a mistake. */
.kc-storefront .kahunacart-order-panel .kahunacart-license { background: var(--ks-salt); box-shadow: none; }
/* The boxes inside the card (a download row, an install option) are card white
   on the receipt, where the card is on the page ground. On the account tab the
   card is the white thing, so those boxes take the page ground instead and keep
   their edges either way. */
.kc-storefront .kahunacart-account .kahunacart-license-download,
.kc-storefront .kahunacart-account .kahunacart-license-instructions details.kahunacart-license-option { background: var(--ks-salt); }
.kc-storefront .kahunacart-account .kahunacart-license-instructions details.kahunacart-license-option[open] { background: var(--ks-card); }
.kc-storefront .kahunacart-license-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.kc-storefront .kahunacart-license-product { font-size: 20px; font-weight: 800; margin: 0; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-variant { font-weight: 500; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license-keyline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.kc-storefront .kahunacart-license-keylabel,
.kc-storefront .kahunacart-license-rename-label,
.kc-storefront .kahunacart-license h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license h4 { margin: 0 0 10px; }
.kc-storefront .kahunacart-license-key { font-family: var(--ks-mono); font-size: 17px; font-weight: 600; background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 9px; padding: 6px 12px; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-copy { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--ks-line); background: transparent; color: var(--ks-koa); cursor: pointer; }
.kc-storefront .kahunacart-license-copy:hover { background: var(--ks-sand); }
.kc-storefront .kahunacart-license-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 4px; }
.kc-storefront .kahunacart-license-rename-input { flex: 0 1 320px; }
.kc-storefront .kahunacart-license-rename button { flex: none; }
.kc-storefront .kahunacart-license-rename-input { font-size: 14.5px; padding: 8px 12px; border: 1px solid var(--ks-line); border-radius: 9px; background: var(--ks-card); color: var(--ks-koa); }
.kc-storefront .kahunacart-license-rename button { font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--ks-line); background: transparent; color: var(--ks-koa); cursor: pointer; }
.kc-storefront .kahunacart-license-rename button:hover { background: var(--ks-sand); }
.kc-storefront .kahunacart-license-rename-help { flex-basis: 100%; font-size: 13px; color: var(--ks-koa-soft); margin: 0 0 12px; }
.kc-storefront .kahunacart-license-terms { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0 0 8px; padding: 14px 0 0; border-top: 1px solid var(--ks-line); font-size: 14.5px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license-renew { margin: 0 0 18px; font-size: 14.5px; }
.kc-storefront .kahunacart-license-renew-link { color: var(--ks-lagoon); font-weight: 600; text-decoration: none; }
.kc-storefront .kahunacart-license-renew-link:hover { text-decoration: underline; }
.kc-storefront .kahunacart-license-downloads,
.kc-storefront .kahunacart-license-instructions,
.kc-storefront .kahunacart-license-activations { padding-top: 18px; border-top: 1px solid var(--ks-line); margin-top: 6px; }
@media (max-width: 560px) {
    .kc-storefront .kahunacart-license { padding: 18px; }
    .kc-storefront .kahunacart-license-rename { grid-template-columns: 1fr; }
}
/* The box for an add-on that landed on a key the customer already held: the
   same card as a licence, headed by the add-on's name, the covering key in the
   same code box a key line uses, then the add-on rule's own instructions. */
.kc-storefront .kahunacart-license--addon h4.kahunacart-license-product { font-size: 20px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ks-koa); margin: 0 0 12px; }
.kc-storefront .kahunacart-license-covered { margin: 0 0 6px; font-size: 15px; color: var(--ks-koa); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kc-storefront .kahunacart-license-covered code { font-family: var(--ks-mono); font-size: 15px; font-weight: 600; background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 8px; padding: 4px 10px; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-no-new-key { margin: 0 0 16px; font-size: 14.5px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license--addon .kahunacart-license-instructions { margin-top: 0; padding-top: 16px; }
.kc-storefront .kahunacart-license-covers { margin: 10px 0 0; }
.kc-storefront .kahunacart-license-coverslabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ks-koa-soft); margin: 0 0 6px; }
.kc-storefront .kahunacart-license-packages { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 14px; padding: 0; }
.kc-storefront .kahunacart-license-package { font-family: var(--ks-mono); font-size: 12.5px; font-weight: 600; color: var(--ks-koa); background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 999px; padding: 4px 11px; }
.kc-storefront .kahunacart-license-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.kc-storefront .kahunacart-license-file-button,
.kc-storefront .kahunacart-license-download-button {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ks-board); color: #FFF6EA; font-weight: 700; font-size: 14px;
    border-radius: 9px; padding: 9px 18px; text-decoration: none; border: 0; white-space: nowrap;
    transition: background .15s ease, transform .15s ease;
}
.kc-storefront .kahunacart-license-file-button:hover,
.kc-storefront .kahunacart-license-download-button:hover { background: var(--ks-board-deep); color: #FFF6EA; transform: translateY(-1px); text-decoration: none; }
.kc-storefront .kahunacart-license-downloads { margin: 0 0 20px; }
.kc-storefront .kahunacart-license-downloads h4 { margin: 0 0 8px; }
.kc-storefront .kahunacart-license-download { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 12px; }
.kc-storefront .kahunacart-license-download + .kahunacart-license-download { margin-top: 8px; }
.kc-storefront .kahunacart-license-download-name { font-weight: 600; color: var(--ks-koa); overflow-wrap: anywhere; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option { border: 1px solid var(--ks-line); border-radius: 12px; padding: 0 16px; margin: 0 0 10px; background: var(--ks-card); }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; display: flex; align-items: center; gap: 10px; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > summary::-webkit-details-marker { display: none; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ks-koa-soft); border-bottom: 2px solid var(--ks-koa-soft); transform: rotate(-45deg); transition: transform .15s ease; flex: none; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option[open] > summary::before { transform: rotate(45deg); }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > :not(summary) { margin-left: 17px; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > :last-child:not(summary) { margin-bottom: 14px; }
.kc-storefront .kahunacart-license-instructions pre { background: #2B2118; color: #FFF1DD; border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; overflow-x: auto; font-family: var(--ks-mono); font-size: 13.5px; line-height: 1.6; }
.kc-storefront .kahunacart-license-instructions pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
@media (max-width: 560px) {
    .kc-storefront .kahunacart-license-download { flex-direction: column; align-items: flex-start; }
}

.kc-storefront .kahunacart-offline-instructions {
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-left: 3px solid var(--ks-board);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 24px;
    font-size: 15px;
}

.kc-order-links { display: flex; flex-wrap: wrap; gap: 20px; margin: 28px 0 0; font-size: 14.5px; }
.kc-order-links a { color: var(--ks-lagoon); font-weight: 600; text-decoration: none; }
.kc-order-links a:hover { text-decoration: underline; }

.kc-storefront .kahunacart-account-offer {
    background: var(--ks-lagoon-mist);
    border: 1px solid #BBD5D2;
    border-radius: 16px;
    padding: 22px;
    margin: 24px 0 0;
}
.kc-storefront .kahunacart-account-offer-title { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-account-offer-text { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0 0 16px; }

/* A one-message page — payment in flight, or a download that cannot be
   honored — is centred rather than left in a wide empty column. */
.kc-storefront .kahunacart-processing,
.kc-storefront .kahunacart-denied { max-width: none; }

.kc-shop-notice {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 48px 32px;
}
.kc-shop-notice h1 { font-size: 28px; font-weight: 800; margin: 0 0 12px; }
.kc-shop-notice p { font-size: 16px; color: var(--ks-koa-soft); margin: 0 0 20px; }
.kc-shop-notice p:last-child { margin: 0; }
.kc-shop-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 22px;
    border: 3px solid var(--ks-line);
    border-top-color: var(--ks-lagoon);
    border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
    .kc-shop-spinner { animation: kc-shop-spin 900ms linear infinite; }
    @keyframes kc-shop-spin { to { transform: rotate(360deg); } }
}


/* --------------------------------------------------------------------------
   12. Account area
   -------------------------------------------------------------------------- */

.kc-storefront .kahunacart-account-nav { margin: 0 0 28px; border-bottom: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-account-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}
/* The plugin's base CSS underlines and pads the <li>; the underline here lives on
   the link/span, so the <li> is reset or the current tab shows two rules. */
.kc-storefront .kahunacart-account-nav-item { padding: 0; margin: 0; border: 0; }
.kc-storefront .kahunacart-account-nav-item a,
.kc-storefront .kahunacart-account-nav-item span {
    display: inline-block;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.kc-storefront .kahunacart-account-nav-item a:hover { color: var(--ks-lagoon); }
.kc-storefront .kahunacart-account-nav-item--current span { color: var(--ks-koa); border-bottom-color: var(--ks-board); }
.kc-storefront .kahunacart-account-nav-item--logout { margin-left: auto; }
.kc-storefront .kahunacart-account-nav-item--logout a { color: #A32E12; }

.kc-storefront .kahunacart-account-panel {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-account-panel > h2 {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-account-identity { font-size: 15px; color: var(--ks-koa-soft); margin: 0 0 20px; }

/* Password and security. The form is the Login plugin's generic output inside
   an account panel; these rules name its classes (form-field, form-label,
   switch-toggle, twofa-*) rather than ones this theme controls. */
.kc-storefront .kahunacart-account-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
}
.kc-storefront .kahunacart-account-profile-header .kahunacart-account-identity { margin: 0; line-height: 1.45; }
.kc-storefront .kahunacart-account-profile-header .kahunacart-account-identity strong {
    display: block;
    font-family: var(--ks-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
}
.kc-storefront .kahunacart-account-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--ks-salt), 0 0 0 4px var(--ks-line);
}

/* A form page, not a table page: the card is only as wide as a field wants to
   be, so an email address is not stretched across a 1100px input. */
/* The Account page in two columns: the profile form down the left, the panels
   the add-ons hang on it (payment methods, email preferences) stacked on the
   right. The heading, the nav and the avatar row span both. The form spans a
   generous run of rows so every panel placed after it lands beside it, and
   anything full-width that follows drops below. */
.kc-storefront .kahunacart-account-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
.kc-storefront .kahunacart-account-profile > :not(.kahunacart-account-panel):not(.kahunacart-customer-panel) { grid-column: 1 / -1; }
.kc-storefront .kahunacart-account-profile > .kahunacart-account-panel--credentials { grid-column: 1; grid-row: span 12; max-width: none; }
.kc-storefront .kahunacart-account-profile > .kahunacart-account-panel:not(.kahunacart-account-panel--credentials),
.kc-storefront .kahunacart-account-profile > .kahunacart-customer-panel { grid-column: 2; }
@media (max-width: 860px) {
    .kc-storefront .kahunacart-account-profile { grid-template-columns: minmax(0, 1fr); }
    .kc-storefront .kahunacart-account-profile > .kahunacart-account-panel--credentials { grid-row: auto; }
    .kc-storefront .kahunacart-account-profile > .kahunacart-account-panel,
    .kc-storefront .kahunacart-account-profile > .kahunacart-customer-panel { grid-column: 1; }
}
.kc-storefront .kahunacart-account-panel--credentials .form-field { margin: 0 0 18px; }
.kc-storefront .kahunacart-account-panel--credentials .form-label label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
}
.kc-storefront .kahunacart-account-panel--credentials .form-label .required { color: var(--ks-board); margin-left: 2px; }
.kc-storefront .kahunacart-account-panel--credentials .form-description {
    display: block;
    font-size: 13px;
    color: var(--ks-koa-soft);
    margin: 6px 0 0;
}
.kc-storefront .kahunacart-account-panel--credentials input[disabled] {
    background: var(--ks-sand-soft);
    color: var(--ks-koa-soft);
    cursor: not-allowed;
}
.kc-storefront .kahunacart-account-panel--credentials .form-errors { margin: 6px 0 0; font-size: 13px; }

/* The two-factor block is a Form plugin "section": an h3 over a .form-section. */
.kc-storefront .kahunacart-account-panel--credentials h3 {
    font-family: var(--ks-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    margin: 26px 0 16px;
    padding-top: 22px;
    border-top: 1px solid var(--ks-line);
}

/* The yes/no toggle: a segmented pill in the brand colours in place of the
   Form plugin's grey boxes. */
.kc-storefront .switch-toggle {
    display: inline-flex;
    padding: 3px;
    line-height: 1;
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    overflow: hidden;
}
.kc-storefront .switch-toggle label {
    padding: 8px 18px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    border-radius: 999px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.kc-storefront .switch-toggle label:hover { color: var(--ks-koa); }
.kc-storefront .switch-toggle input:checked + label { background: var(--ks-sand-deep); color: var(--ks-koa); }
.kc-storefront .switch-toggle input.highlight:checked + label { background: var(--ks-lagoon); color: #FFFFFF; }

/* The secret: QR code beside its text form and the regenerate button. */
.kc-storefront .twofa-secret .form-input-wrapper.twofa-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
    align-items: center;
    padding: 16px;
    background: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
}
.kc-storefront .twofa-secret img[data-2fa-image] {
    grid-row: span 2;
    width: 128px;
    height: 128px;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid var(--ks-line) !important;
    border-radius: 10px;
}
.kc-storefront .twofa-secret .form-input-wrapper.twofa-wrapper > div { font-size: 13.5px; color: var(--ks-koa-soft); align-self: end; }
.kc-storefront .twofa-secret .twofa-wrapper.danger { align-self: start; }
.kc-storefront .twofa-secret-code {
    display: block;
    margin-top: 4px;
    font-family: var(--ks-mono);
    font-size: 14.5px;
    letter-spacing: 0.06em;
    color: var(--ks-koa);
}
.kc-storefront .twofa-secret .button.button-small {
    background: transparent;
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 9px;
}
.kc-storefront .twofa-secret .button.button-small:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-storefront .twofa-secret .fa { display: none; }

.kc-storefront .kahunacart-account-panel--credentials .buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ks-line);
}
.kc-storefront .kahunacart-account-empty { color: var(--ks-koa-soft); font-size: 14.5px; margin: 0; }

.kc-storefront .kahunacart-account-orders,
.kc-storefront .kahunacart-account-downloads { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.kc-storefront .kahunacart-account-orders th,
.kc-storefront .kahunacart-account-downloads th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-storefront .kahunacart-account-orders td,
.kc-storefront .kahunacart-account-downloads td { padding: 14px 12px; border-bottom: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-account-orders tr:last-child td { border-bottom: 0; }
.kc-storefront .kahunacart-account-orders th:first-child,
.kc-storefront .kahunacart-account-orders td:first-child { padding-left: 0; }
.kc-storefront .kahunacart-account-orders a { color: var(--ks-lagoon); font-weight: 700; text-decoration: none; }

.kc-storefront .kahunacart-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .kc-storefront .kahunacart-address-grid { grid-template-columns: minmax(0, 1fr); } }
.kc-storefront .kahunacart-address-card {
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    padding: 18px;
}
/* The add-address tile: dashed, quiet, a big terracotta plus; opened, it becomes
   an ordinary card the width of the row. */
.kc-storefront .kahunacart-address-card--add { background: transparent; border: 1px dashed var(--ks-line-strong, #D6C3A4); padding: 0; }
.kc-storefront .kahunacart-address-card--add:hover { background: var(--ks-card); border-color: var(--ks-board); }
.kc-storefront .kahunacart-address-add-summary { color: var(--ks-koa-soft); font-weight: 600; font-size: 14.5px; }
.kc-storefront .kahunacart-address-add-plus { color: var(--ks-board); font-weight: 300; }
.kc-storefront .kahunacart-address-card--add:has(.kahunacart-address-add[open]) { background: var(--ks-card); border: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-address-add[open] > .kahunacart-address-add-summary { color: var(--ks-koa); font-size: 18px; font-weight: 800; }
.kc-storefront .kahunacart-address-card h3 {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-address { font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--ks-koa); }


/* --------------------------------------------------------------------------
   13. Sign-in and the other Login plugin screens
   --------------------------------------------------------------------------
   The markup is the Login plugin's generic form output, so these rules name
   its classes rather than ones this theme controls.
   -------------------------------------------------------------------------- */

.kc-auth { max-width: 460px; margin: 0 auto; }
.kc-auth-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 32px 30px;
}
/* The Login plugin ships css/login.css, which gives #grav-login a 4px grey
   border, an off-white fill, 5rem of vertical margin and centred text — a
   whole card of its own, inside this one. Neutralised rather than switched off
   with `built_in_css: false`, because that flag also undresses the screens
   this theme does not style (two-factor, register, the profile form).

   The <h1> is the plugin's own page body, "# User Login" in
   plugin://login/pages/login.md. The masthead above already names the page, so
   it is dropped rather than shown twice — and dropping it also leaves the page
   with a single h1, which is what a screen reader's heading list wants. */
.kc-auth-card #grav-login {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
}
.kc-auth-card #grav-login > h1 { display: none; }
.kc-auth-card #grav-login .form-actions { text-align: left; }
.kc-auth-card #grav-login p { font-size: 14px; text-align: left; margin: 12px 0; }
.kc-auth-card .form-data,
.kc-auth-card .form-field { margin: 0 0 16px; }
.kc-auth-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
    text-align: left;
}
.kc-auth-card .form-input-wrapper { display: block; }
.kc-auth-card input[type="text"],
.kc-auth-card input[type="email"],
.kc-auth-card input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ks-body);
    font-size: 15px;
    color: var(--ks-koa);
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 11px 13px;
}
.kc-auth-card input:focus {
    outline: none;
    border-color: var(--ks-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.15);
}
/* The plugin puts "remember me", "forgot" and the submit button in one
   .form-actions row. Given a full basis it wraps onto a line of its own above
   the two buttons, which is where a tick box belongs. */
.kc-auth-card .rememberme { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 100%; }
.kc-auth-card .rememberme .form-input-wrapper { display: flex; align-items: center; gap: 8px; }
.kc-auth-card .rememberme input { flex: none; }
.kc-auth-card .rememberme label { margin: 0; font-weight: 500; color: var(--ks-koa); }

.kc-auth-card .form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.kc-auth-card .button {
    display: inline-block;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 22px;
    border-radius: 11px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease;
}
.kc-auth-card .button:hover { background: var(--ks-board-deep); color: #FFF6EA; }
.kc-auth-card .button.secondary {
    background: transparent;
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
    order: 2;
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 16px;
}
.kc-auth-card .button.secondary:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-auth-card .button[value="login.login"] { order: 1; }
.kc-auth-card .fa { display: none; }
.kc-auth-card h4 { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.kc-auth-card hr { border: 0; border-top: 1px solid var(--ks-line); margin: 18px 0; }


/* --------------------------------------------------------------------------
   14. Error page
   --------------------------------------------------------------------------
   Shared by the storefront shell and the marketing one — see
   templates/error.html.twig, which picks the shell from the route.
   -------------------------------------------------------------------------- */

.kc-error { text-align: center; padding: 40px 0 24px; max-width: 640px; margin: 0 auto; }
.kc-error-code {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: clamp(96px, 18vw, 180px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0;
    /* Kept inside the warm family: Board to Board-deep. Running it across to
       Lagoon looks good written down and renders a grey-olive mud through the
       middle, because orange to teal passes straight through neutral. */
    background: linear-gradient(105deg, var(--ks-board), var(--ks-board-deep) 55%, #7A3208);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.kc-error-title {
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 800;
    margin: 14px 0 12px;
    color: var(--ks-koa);
}
.kc-error-message {
    font-size: 17px;
    color: var(--ks-koa-soft);
    margin: 0 auto 8px;
    max-width: 48ch;
}