/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: "JetBrains Mono", monospace;
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-stone-50: oklch(98.5% 0.001 106.423);
    --color-stone-100: oklch(97% 0.001 106.424);
    --color-stone-200: oklch(92.3% 0.003 48.717);
    --color-stone-300: oklch(86.9% 0.005 56.366);
    --color-stone-400: oklch(70.9% 0.01 56.259);
    --color-stone-500: oklch(55.3% 0.013 58.071);
    --color-stone-600: oklch(44.4% 0.011 73.639);
    --color-stone-700: oklch(37.4% 0.01 67.558);
    --color-stone-800: oklch(26.8% 0.007 34.298);
    --color-stone-900: oklch(21.6% 0.006 56.043);
    --color-stone-950: oklch(14.7% 0.004 49.25);
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-5xl: 64rem;
    --text-xs: var(--text-xs);
    --text-sm: var(--text-sm);
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: var(--text-base);
    --text-lg: var(--text-lg);
    --text-xl: var(--text-xl);
    --text-2xl: var(--text-2xl);
    --text-3xl: var(--text-3xl);
    --text-4xl: var(--text-4xl);
    --text-5xl: var(--text-5xl);
    --text-6xl: var(--text-6xl);
    --font-weight-light: var(--font-weight-light);
    --font-weight-normal: var(--font-weight-normal);
    --font-weight-medium: var(--font-weight-medium);
    --font-weight-semibold: var(--font-weight-semibold);
    --tracking-wide: 0.025em;
    --leading-tight: 1.25;
    --radius-sm: var(--radius-sm);
    --radius-md: var(--radius-md);
    --radius-lg: var(--radius-lg);
    --radius-xl: var(--radius-xl);
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-xs: var(--shadow-xs);
    --shadow-sm: var(--shadow-sm);
    --shadow-md: var(--shadow-md);
    --shadow-lg: var(--shadow-lg);
    --shadow-xl: var(--shadow-xl);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --blur-md: 12px;
    --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: "JetBrains Mono", monospace;
    --font-display: var(--font-display);
    --font-body: var(--font-body);
    --font-ui: var(--font-ui);
    --font-greek: var(--font-greek);
    --font-hebrew: var(--font-hebrew);
    --z-index-sticky: 200;
  }
}
@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 {
  .pointer-events-none {
    pointer-events: none;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-24 {
    top: var(--space-24);
  }
  .right-6 {
    right: var(--space-6);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-6 {
    bottom: var(--space-6);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .z-\[var\(--z-index-sticky\)\] {
    z-index: var(--z-index-sticky);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-0\.5 {
    margin-top: var(--space-0_5);
  }
  .mt-1\.5 {
    margin-top: var(--space-1_5);
  }
  .mt-2 {
    margin-top: var(--space-2);
  }
  .mt-3 {
    margin-top: var(--space-3);
  }
  .mt-4 {
    margin-top: var(--space-4);
  }
  .mt-5 {
    margin-top: var(--space-5);
  }
  .mt-6 {
    margin-top: var(--space-6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: var(--space-8);
  }
  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }
  .mt-10 {
    margin-top: var(--space-10);
  }
  .mt-12 {
    margin-top: var(--space-12);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mb-4 {
    margin-bottom: var(--space-4);
  }
  .mb-8 {
    margin-bottom: var(--space-8);
  }
  .mb-12 {
    margin-bottom: var(--space-12);
  }
  .mb-20 {
    margin-bottom: var(--space-20);
  }
  .mb-24 {
    margin-bottom: var(--space-24);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .aspect-\[4\/3\] {
    aspect-ratio: 4/3;
  }
  .aspect-\[9\/19\.5\] {
    aspect-ratio: 9/19.5;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-1\.5 {
    height: var(--space-1_5);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: var(--space-12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-\[var\(--chip-height\)\] {
    height: var(--chip-height);
  }
  .h-full {
    height: 100%;
  }
  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }
  .min-h-\[4\.5rem\] {
    min-height: 4.5rem;
  }
  .w-1\.5 {
    width: var(--space-1_5);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: var(--space-12);
  }
  .w-\[15\.5rem\] {
    width: 15.5rem;
  }
  .w-\[15rem\] {
    width: 15rem;
  }
  .w-\[19rem\] {
    width: 19rem;
  }
  .w-\[20rem\] {
    width: 20rem;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-\[13ch\] {
    max-width: 13ch;
  }
  .max-w-\[20ch\] {
    max-width: 20ch;
  }
  .max-w-\[22ch\] {
    max-width: 22ch;
  }
  .max-w-\[34ch\] {
    max-width: 34ch;
  }
  .max-w-\[34rem\] {
    max-width: 34rem;
  }
  .max-w-\[40rem\] {
    max-width: 40rem;
  }
  .max-w-\[42ch\] {
    max-width: 42ch;
  }
  .max-w-\[46ch\] {
    max-width: 46ch;
  }
  .max-w-\[46rem\] {
    max-width: 46rem;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-11 {
    min-width: calc(var(--spacing) * 11);
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .origin-right {
    transform-origin: 100%;
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-full {
    --tw-translate-y: 100%;
    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);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .columns-2 {
    columns: 2;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-rows-\[0fr\] {
    grid-template-rows: 0fr;
  }
  .grid-rows-\[1fr\] {
    grid-template-rows: 1fr;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-0\.5 {
    gap: var(--space-0_5);
  }
  .gap-1\.5 {
    gap: var(--space-1_5);
  }
  .gap-2 {
    gap: var(--space-2);
  }
  .gap-2\.5 {
    gap: var(--space-2_5);
  }
  .gap-3 {
    gap: var(--space-3);
  }
  .gap-4 {
    gap: var(--space-4);
  }
  .gap-5 {
    gap: var(--space-5);
  }
  .gap-6 {
    gap: var(--space-6);
  }
  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }
  .gap-8 {
    gap: var(--space-8);
  }
  .gap-12 {
    gap: var(--space-12);
  }
  .gap-16 {
    gap: var(--space-16);
  }
  .gap-x-5 {
    column-gap: var(--space-5);
  }
  .gap-y-2 {
    row-gap: var(--space-2);
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-\[var\(--card-radius\)\] {
    border-radius: var(--card-radius);
  }
  .rounded-\[var\(--radius-sm\)\] {
    border-radius: var(--radius-sm);
  }
  .rounded-\[var\(--radius-xl\)\] {
    border-radius: var(--radius-xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-\[rgba\(0\,0\,0\,0\.08\)\] {
    border-color: rgba(0,0,0,0.08);
  }
  .border-\[var\(--border-on-dark-medium\)\] {
    border-color: var(--border-on-dark-medium);
  }
  .border-\[var\(--border-strong\)\] {
    border-color: var(--border-strong);
  }
  .border-border-default {
    border-color: var(--border-default);
  }
  .border-border-subtle {
    border-color: var(--border-subtle);
  }
  .bg-\[color-mix\(in_srgb\,var\(--bg-surface\)_88\%\,transparent\)\] {
    background-color: var(--bg-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--bg-surface) 88%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--bg-surface\)_94\%\,transparent\)\] {
    background-color: var(--bg-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--bg-surface) 94%,transparent);
    }
  }
  .bg-\[var\(--decorative\)\] {
    background-color: var(--decorative);
  }
  .bg-\[var\(--primary-bg\)\] {
    background-color: var(--primary-bg);
  }
  .bg-bg-elevated {
    background-color: var(--bg-elevated);
  }
  .bg-border-default {
    background-color: var(--border-default);
  }
  .bg-primary {
    background-color: var(--primary);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .object-cover {
    object-fit: cover;
  }
  .object-top {
    object-position: top;
  }
  .p-2\.5 {
    padding: var(--space-2_5);
  }
  .p-5 {
    padding: var(--space-5);
  }
  .p-6 {
    padding: var(--space-6);
  }
  .p-7 {
    padding: calc(var(--spacing) * 7);
  }
  .p-\[var\(--card-padding-compact\)\] {
    padding: var(--card-padding-compact);
  }
  .px-1 {
    padding-inline: var(--space-1);
  }
  .px-2 {
    padding-inline: var(--space-2);
  }
  .px-2\.5 {
    padding-inline: var(--space-2_5);
  }
  .px-3 {
    padding-inline: var(--space-3);
  }
  .px-4 {
    padding-inline: var(--space-4);
  }
  .px-5 {
    padding-inline: var(--space-5);
  }
  .px-6 {
    padding-inline: var(--space-6);
  }
  .py-1 {
    padding-block: var(--space-1);
  }
  .py-2\.5 {
    padding-block: var(--space-2_5);
  }
  .py-3 {
    padding-block: var(--space-3);
  }
  .py-5 {
    padding-block: var(--space-5);
  }
  .py-16 {
    padding-block: var(--space-16);
  }
  .py-20 {
    padding-block: var(--space-20);
  }
  .py-24 {
    padding-block: var(--space-24);
  }
  .pt-2 {
    padding-top: var(--space-2);
  }
  .pt-4 {
    padding-top: var(--space-4);
  }
  .pt-6 {
    padding-top: var(--space-6);
  }
  .pt-8 {
    padding-top: var(--space-8);
  }
  .pb-32 {
    padding-bottom: calc(var(--spacing) * 32);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .\[font-size\:2\.25rem\] {
    font-size: 2.25rem;
  }
  .\[font-size\:clamp\(1\.75rem\,4vw\,2\.75rem\)\] {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
  }
  .\[font-size\:clamp\(1\.875rem\,3\.4vw\,2\.5rem\)\] {
    font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  }
  .\[font-size\:clamp\(2\.25rem\,4vw\,3rem\)\] {
    font-size: clamp(2.25rem, 4vw, 3rem);
  }
  .\[font-size\:clamp\(2rem\,4vw\,3rem\)\] {
    font-size: clamp(2rem, 4vw, 3rem);
  }
  .text-\[1\.25rem\] {
    font-size: 1.25rem;
  }
  .text-\[1\.125rem\] {
    font-size: 1.125rem;
  }
  .text-\[1\.0625rem\] {
    font-size: 1.0625rem;
  }
  .leading-\[1\.4\] {
    --tw-leading: 1.4;
    line-height: 1.4;
  }
  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }
  .leading-\[1\.6\] {
    --tw-leading: 1.6;
    line-height: 1.6;
  }
  .leading-\[1\.55\] {
    --tw-leading: 1.55;
    line-height: 1.55;
  }
  .leading-\[1\.65\] {
    --tw-leading: 1.65;
    line-height: 1.65;
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .\[line-height\:1\.1\] {
    line-height: 1.1;
  }
  .\[line-height\:1\.08\] {
    line-height: 1.08;
  }
  .\[line-height\:1\.15\] {
    line-height: 1.15;
  }
  .\[line-height\:1\.35\] {
    line-height: 1.35;
  }
  .\[line-height\:1\] {
    line-height: 1;
  }
  .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);
  }
  .\[font-weight\:600\] {
    font-weight: 600;
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .\[letter-spacing\:-0\.01em\] {
    letter-spacing: -0.01em;
  }
  .\[letter-spacing\:-0\.02em\] {
    letter-spacing: -0.02em;
  }
  .\[letter-spacing\:-0\.015em\] {
    letter-spacing: -0.015em;
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .whitespace-normal {
    white-space: normal;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-\[var\(--decorative\)\] {
    color: var(--decorative);
  }
  .text-\[var\(--primary-on\)\] {
    color: var(--primary-on);
  }
  .text-primary {
    color: var(--primary);
  }
  .text-text-on-dark {
    color: var(--text-on-dark);
  }
  .text-text-on-dark-dim {
    color: var(--text-on-dark-dim);
  }
  .text-text-on-dark-faint {
    color: var(--text-on-dark-faint);
  }
  .text-text-primary {
    color: var(--text-primary);
  }
  .text-text-secondary {
    color: var(--text-secondary);
  }
  .text-text-tertiary {
    color: var(--text-tertiary);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow-\[var\(--shadow-lg\)\] {
    --tw-shadow: var(--shadow-lg);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[var\(--shadow-md\)\] {
    --tw-shadow: var(--shadow-md);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[var\(--shadow-primary-glow\)\] {
    --tw-shadow: var(--shadow-primary-glow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[var\(--shadow-sm\)\] {
    --tw-shadow: var(--shadow-sm);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[var\(--shadow-xs\)\] {
    --tw-shadow: var(--shadow-xs);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    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);
  }
  .ring-2 {
    --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);
  }
  .ring-\[var\(--border-on-dark-soft\)\] {
    --tw-ring-color: var(--border-on-dark-soft);
  }
  .ring-\[var\(--primary\)\] {
    --tw-ring-color: var(--primary);
  }
  .ring-border-default {
    --tw-ring-color: var(--border-default);
  }
  .ring-border-subtle {
    --tw-ring-color: var(--border-subtle);
  }
  .backdrop-blur-\[4px\] {
    --tw-backdrop-blur: blur(4px);
    -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,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -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-\[background-color\,border-color\,box-shadow\,color\] {
    transition-property: background-color,border-color,box-shadow,color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[background-color\,border-color\,color\,box-shadow\] {
    transition-property: background-color,border-color,color,box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[box-shadow\,border-color\,background-color\] {
    transition-property: box-shadow,border-color,background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[box-shadow\] {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[color\,border-color\,background-color\] {
    transition-property: color,border-color,background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[color\,box-shadow\] {
    transition-property: color,box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[grid-template-rows\] {
    transition-property: grid-template-rows;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[opacity\,background-color\,box-shadow\] {
    transition-property: opacity,background-color,box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[width\,background-color\] {
    transition-property: width,background-color;
    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-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-\[var\(--duration-base\)\] {
    --tw-duration: var(--duration-base);
    transition-duration: var(--duration-base);
  }
  .duration-\[var\(--duration-fast\)\] {
    --tw-duration: var(--duration-fast);
    transition-duration: var(--duration-fast);
  }
  .ease-\[var\(--ease-chrome\)\] {
    --tw-ease: var(--ease-chrome);
    transition-timing-function: var(--ease-chrome);
  }
  .group-hover\:text-primary {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--primary);
      }
    }
  }
  .hover\:border-\[color-mix\(in_srgb\,var\(--decorative\)_30\%\,transparent\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--decorative);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in srgb,var(--decorative) 30%,transparent);
        }
      }
    }
  }
  .hover\:border-\[var\(--border-on-dark-strong\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--border-on-dark-strong);
      }
    }
  }
  .hover\:border-\[var\(--primary\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--primary);
      }
    }
  }
  .hover\:bg-\[color-mix\(in_srgb\,var\(--decorative\)_4\%\,transparent\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--decorative);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in srgb,var(--decorative) 4%,transparent);
        }
      }
    }
  }
  .hover\:bg-\[color-mix\(in_srgb\,var\(--primary\)_6\%\,transparent\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--primary);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in srgb,var(--primary) 6%,transparent);
        }
      }
    }
  }
  .hover\:bg-\[var\(--primary-hover\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--primary-hover);
      }
    }
  }
  .hover\:bg-\[var\(--surface-on-dark-subtle\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--surface-on-dark-subtle);
      }
    }
  }
  .hover\:text-primary {
    &:hover {
      @media (hover: hover) {
        color: var(--primary);
      }
    }
  }
  .hover\:text-text-secondary {
    &:hover {
      @media (hover: hover) {
        color: var(--text-secondary);
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .hover\:shadow-\[var\(--shadow-lg\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: var(--shadow-lg);
        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-\[var\(--shadow-md\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: var(--shadow-md);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:ring-\[var\(--primary\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--primary);
      }
    }
  }
  .focus-visible\:ring-3 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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-visible\:ring-ring {
    &:focus-visible {
      --tw-ring-color: var(--ring);
    }
  }
  .focus-visible\:outline-none {
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .active\:bg-\[var\(--primary-deep\)\] {
    &:active {
      background-color: var(--primary-deep);
    }
  }
  .active\:bg-bg-surface-active {
    &:active {
      background-color: var(--bg-surface-active);
    }
  }
  .sm\:-mt-14 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * -14);
    }
  }
  .sm\:mb-28 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 28);
    }
  }
  .sm\:mb-32 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 32);
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:hidden {
    @media (width >= 40rem) {
      display: none;
    }
  }
  .sm\:w-\[16rem\] {
    @media (width >= 40rem) {
      width: 16rem;
    }
  }
  .sm\:w-\[17rem\] {
    @media (width >= 40rem) {
      width: 17rem;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:flex-wrap {
    @media (width >= 40rem) {
      flex-wrap: wrap;
    }
  }
  .sm\:items-start {
    @media (width >= 40rem) {
      align-items: flex-start;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:px-12 {
    @media (width >= 40rem) {
      padding-inline: var(--space-12);
    }
  }
  .sm\:py-20 {
    @media (width >= 40rem) {
      padding-block: var(--space-20);
    }
  }
  .sm\:py-24 {
    @media (width >= 40rem) {
      padding-block: var(--space-24);
    }
  }
  .sm\:py-32 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 32);
    }
  }
  .sm\:pt-8 {
    @media (width >= 40rem) {
      padding-top: var(--space-8);
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: var(--space-6);
    }
  }
  .lg\:mt-0 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:min-h-\[82svh\] {
    @media (width >= 64rem) {
      min-height: 82svh;
    }
  }
  .lg\:w-\[18\.75rem\] {
    @media (width >= 64rem) {
      width: 18.75rem;
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-5 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[minmax\(0\,0\.92fr\)_minmax\(0\,1\.08fr\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr);
    }
  }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.05fr\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
    }
  }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:items-start {
    @media (width >= 64rem) {
      align-items: flex-start;
    }
  }
  .lg\:justify-center {
    @media (width >= 64rem) {
      justify-content: center;
    }
  }
  .lg\:justify-start {
    @media (width >= 64rem) {
      justify-content: flex-start;
    }
  }
  .lg\:gap-0 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 0);
    }
  }
  .lg\:gap-12 {
    @media (width >= 64rem) {
      gap: var(--space-12);
    }
  }
  .lg\:gap-16 {
    @media (width >= 64rem) {
      gap: var(--space-16);
    }
  }
  .lg\:text-left {
    @media (width >= 64rem) {
      text-align: left;
    }
  }
}
:root {
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 380ms;
  --duration-moderate: var(--duration-base);
  --duration-deliberate: var(--duration-slow);
  --duration-editorial: var(--duration-slow);
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-editorial-reveal: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-chrome: cubic-bezier(0, 0.59, 0.32, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear: linear;
  --transition-chrome: color var(--duration-fast) var(--ease-chrome),
    background-color var(--duration-fast) var(--ease-chrome),
    border-color var(--duration-fast) var(--ease-chrome);
  --transition-state: color var(--duration-base) var(--ease-chrome),
    background-color var(--duration-base) var(--ease-chrome),
    border-color var(--duration-base) var(--ease-chrome),
    box-shadow var(--duration-base) var(--ease-chrome);
  --transition-elevation: box-shadow var(--duration-fast) var(--ease-chrome),
    transform var(--duration-fast) var(--ease-chrome);
  --transition-panel: transform var(--duration-slow) var(--ease-standard),
    opacity var(--duration-moderate) var(--ease-standard);
  --transition-editorial: opacity var(--duration-editorial) var(--ease-editorial-reveal),
    transform var(--duration-editorial) var(--ease-editorial-reveal);
  --transition-theme: background-color var(--duration-slow) var(--ease-in-out),
    color var(--duration-slow) var(--ease-in-out),
    border-color var(--duration-slow) var(--ease-in-out),
    box-shadow var(--duration-slow) var(--ease-in-out);
  --space-0_5: 2px;
  --space-1: 4px;
  --space-1_5: 6px;
  --space-2: 8px;
  --space-2_5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --layout-canvas: 56rem;
  --layout-prose: 40rem;
  --layout-form: 28rem;
  --layout-cta-max: 20rem;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-popover: 1200;
  --z-tooltip: 1300;
  --z-toast: 1400;
  --z-debug: 9999;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 32px;
  --text-5xl: 40px;
  --text-6xl: 48px;
  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.40;
  --leading-relaxed: 1.55;
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.08em;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-mono: "JetBrains Mono", ui-monospace, "Source Code Pro", monospace;
  --font-greek: "Cardo", "EB Garamond", "Literata", "Noto Serif SC", serif;
  --font-hebrew: "Noto Serif Hebrew", "Frank Ruhl Libre", "David Libre", serif;
  --type-hero-size: clamp(3.5rem, 6.5vw + 1rem, 6.5rem);
  --type-hero-lead: 1.02;
  --type-hero-tracking: -0.025em;
  --type-hero-weight: 700;
  --type-hero-family: var(--font-display);
  --type-hero: var(--type-hero-weight) var(--type-hero-size) / var(--type-hero-lead) var(--type-hero-family);
  --type-h1: 500 32px/1.25 var(--font-display);
  --type-h2: 500 24px/1.25 var(--font-display);
  --type-h3: 500 20px/1.40 var(--font-display);
  --type-h4: 500 16px/1.40 var(--font-display);
  --type-eyebrow: 500 12px/1.40 var(--font-display);
  --type-body-scripture: 400 18px/1.75 var(--font-body);
  --type-body: 400 16px/1.55 var(--font-ui);
  --type-body-small: 400 14px/1.55 var(--font-ui);
  --type-ui: 400 14px/1.40 var(--font-display);
  --type-ui-sm: 400 12px/1.40 var(--font-display);
  --type-button: 500 14px/1.40 var(--font-display);
  --type-label: 500 12px/1.40 var(--font-display);
  --type-label-small: 500 11px/1.45 var(--font-display);
  --type-code: 400 13px/1.40 var(--font-mono);
  --type-greek: 400 1.1em/1.75 var(--font-greek);
  --type-hebrew: 400 1.15em/1.75 var(--font-hebrew);
  --radius-sm: calc(var(--radius) * 0.67);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 2);
  --radius-xl: calc(var(--radius) * 3);
  --radius-2xl: calc(var(--radius) * 4);
  --radius-full: 9999px;
  --font-size: 16px;
  --font-display-w-light: 300;
  --font-display-w-normal: 400;
  --font-display-w-medium: 500;
  --font-display-scale: 1;
  --font-body-adjust: none;
  --text-on-dark: rgba(255, 255, 255, 0.87);
  --text-on-dark-dim: rgba(255, 255, 255, 0.54);
  --text-on-dark-faint: rgba(255, 255, 255, 0.30);
  --surface-on-dark-dim: rgba(255, 255, 255, 0.03);
  --surface-on-dark-muted: rgba(255, 255, 255, 0.05);
  --surface-on-dark-subtle: rgba(255, 255, 255, 0.08);
  --surface-on-dark-default: rgba(255, 255, 255, 0.10);
  --surface-on-dark-strong: rgba(255, 255, 255, 0.15);
  --surface-on-dark-vivid: rgba(255, 255, 255, 0.20);
  --border-on-dark-soft: rgba(255, 255, 255, 0.10);
  --border-on-dark-medium: rgba(255, 255, 255, 0.15);
  --border-on-dark-strong: rgba(255, 255, 255, 0.25);
  --phase-mind: #60a5fa;
  --phase-heart: #f472b6;
  --phase-affections: #fbbf24;
  --surface-immersive: linear-gradient(160deg, #0a0a12 0%, #120f1e 50%, #08080e 100%);
  --crisis-accent: #fde68a;
  --surface-crisis: linear-gradient(160deg, rgba(35, 28, 15, 0.98) 0%, rgba(25, 20, 10, 0.96) 100%);
  --annual-review-glow: 0 0 60px rgba(129, 140, 248, 0.15), 0 0 120px rgba(129, 140, 248, 0.08);
  --annual-review-gradient: linear-gradient(90deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.4), rgba(236, 72, 153, 0.3));
  --translation-spectrum: linear-gradient(to right, #F97316, #D4AF37, #14B8A6, #60A5FA, #4ADE80, #F472B6);
  --diff-version-nasb: #B87333;
  --diff-version-esv: #A48332;
  --diff-version-kjv: #8B6F9C;
  --diff-version-nkjv: #B59A3A;
  --diff-version-csb: #5F8B85;
  --diff-version-niv: #6B85A8;
  --diff-version-nlt: #7A9E6B;
  --diff-version-msg: #B57E9E;
  --diff-version-amp: #9A7AAE;
  --ref-type-quotation: #3b82f6;
  --ref-type-parallel: #10b981;
  --ref-type-prophecy: #f59e0b;
  --ref-type-typology: #8b5cf6;
  --ref-type-thematic: #ec4899;
  --input: transparent;
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
}
:root {
  --color-stone-50: #F9F8F7;
  --color-stone-100: #F4F1EF;
  --color-stone-150: #EAE7E4;
  --color-stone-200: #E1DDDA;
  --color-stone-300: #CBC6C2;
  --color-stone-400: #ACA6A2;
  --color-stone-500: #8E8883;
  --color-stone-600: #716A65;
  --color-stone-700: #544E4B;
  --color-stone-800: #312D2A;
  --color-stone-850: #221E1C;
  --color-stone-900: #181513;
  --color-stone-950: #120F0D;
  --color-ink-alpha-3: rgba(28, 25, 23, 0.03);
  --color-ink-alpha-5: rgba(28, 25, 23, 0.05);
  --color-ink-alpha-7: rgba(28, 25, 23, 0.07);
  --color-ink-alpha-8: rgba(28, 25, 23, 0.08);
  --color-ink-alpha-12: rgba(28, 25, 23, 0.12);
  --color-ink-alpha-20: rgba(28, 25, 23, 0.20);
  --color-ink-alpha-22: rgba(28, 25, 23, 0.22);
  --color-paper-alpha-6: rgba(250, 250, 249, 0.06);
  --color-paper-alpha-7: rgba(250, 250, 249, 0.07);
  --color-paper-alpha-8: rgba(250, 250, 249, 0.08);
  --color-paper-alpha-12: rgba(250, 250, 249, 0.12);
  --color-paper-alpha-20: rgba(250, 250, 249, 0.20);
  --color-paper-alpha-24: rgba(250, 250, 249, 0.24);
  --color-amber-50: #FEF8ED;
  --color-amber-100: #FFF0D7;
  --color-amber-200: #F6DAAC;
  --color-amber-300: #E6C186;
  --color-amber-400: #CD9F55;
  --color-amber-500: #AB813F;
  --color-amber-600: #896429;
  --color-amber-700: #694914;
  --color-amber-800: #412800;
  --color-amber-900: #241100;
  --color-forest-50: #E9FFF0;
  --color-forest-100: #D1FFE1;
  --color-forest-200: #6CFFAE;
  --color-forest-300: #00EC8F;
  --color-forest-400: #00C778;
  --color-forest-500: #00A361;
  --color-forest-600: #00814C;
  --color-forest-700: #006037;
  --color-forest-800: #00381E;
  --color-forest-900: #001C0C;
  --color-burnt-50: #FFF7F1;
  --color-burnt-100: #FFEEE2;
  --color-burnt-200: #FFD4B6;
  --color-burnt-300: #FFB47C;
  --color-burnt-400: #F78600;
  --color-burnt-500: #CB6D00;
  --color-burnt-600: #A15500;
  --color-burnt-700: #793E00;
  --color-burnt-800: #482300;
  --color-burnt-900: #260F00;
  --color-brick-50: #FFF6F5;
  --color-brick-100: #FFEDEB;
  --color-brick-200: #FFD2CC;
  --color-brick-300: #FFB0A7;
  --color-brick-400: #FF786F;
  --color-brick-500: #ED403F;
  --color-brick-600: #C90E1F;
  --color-brick-700: #990012;
  --color-brick-800: #5D0007;
  --color-brick-900: #320002;
  --color-brand-50: #FFF6F5;
  --color-brand-100: #FFEDEC;
  --color-brand-200: #FFD1CF;
  --color-brand-300: #FEB0AD;
  --color-brand-400: #ED8584;
  --color-brand-500: #E02A40;
  --color-brand-600: #C12537;
  --color-brand-700: #960C23;
  --color-brand-800: #5C0010;
  --color-brand-900: #320005;
  --color-slate-50: #F3F9FF;
  --color-slate-100: #E6F4FF;
  --color-slate-200: #C1E3FF;
  --color-slate-300: #92CFFF;
  --color-slate-400: #3DB1FF;
  --color-slate-500: #0091DD;
  --color-slate-600: #0072AF;
  --color-slate-700: #005484;
  --color-slate-800: #00314F;
  --color-slate-900: #00182A;
  --color-white: #FFFFFF;
  --color-white-alpha-55: rgba(255, 255, 255, 0.55);
  --color-white-alpha-85: rgba(255, 255, 255, 0.85);
  --color-white-alpha-90: rgba(255, 255, 255, 0.90);
  --color-redletter-light: #AB4043;
  --color-redletter-dark: #DF7F7C;
  --color-func-verb-light: #346B49;
  --color-func-verb-dark: #6FB789;
  --color-func-noun-light: #83592E;
  --color-func-noun-dark: #D0975F;
  --color-func-prep-light: #0C6A76;
  --color-func-prep-dark: #43AFC1;
  --color-func-adj-light: #5C4068;
  --color-func-adj-dark: #B18DCD;
  --color-func-article-light: #826B69;
  --color-func-article-dark: #AA9190;
  --color-func-conj-light: #6C6B50;
  --color-func-conj-dark: #A2A084;
  --sage: #5B7A6E;
  --sage-soft: #E7EDE9;
  --color-highlight-yellow-light: rgba(194, 166, 56, 0.25);
  --color-highlight-yellow-dark: rgba(194, 166, 56, 0.20);
  --color-highlight-green-light: rgba(106, 160, 100, 0.25);
  --color-highlight-green-dark: rgba(106, 160, 100, 0.20);
  --color-highlight-blue-light: rgba(108, 146, 192, 0.24);
  --color-highlight-blue-dark: rgba(108, 146, 192, 0.19);
  --color-highlight-orange-light: rgba(200, 140, 68, 0.26);
  --color-highlight-orange-dark: rgba(200, 140, 68, 0.20);
  --color-chart-red-light: #C05050;
  --color-chart-red-dark: #DF7F7C;
  --color-chart-rust-light: #A65C20;
  --color-chart-rust-dark: #D59466;
  --color-chart-amber-light: #D4A030;
  --color-chart-amber-dark: #E8C060;
  --color-chart-sage-light: #6B8E6B;
  --color-chart-sage-dark: #8FB88F;
  --color-chart-teal-light: #3B8B8B;
  --color-chart-teal-dark: #60BBBB;
  --color-chart-sky-light: #5DA5D5;
  --color-chart-sky-dark: #75C5F0;
  --color-chart-slate-light: #42789C;
  --color-chart-slate-dark: #75ACD2;
  --color-chart-plum-light: #7E5E8F;
  --color-chart-plum-dark: #B18DCD;
}
:root {
  --accent: var(--surface-muted);
  --accent-foreground: var(--text-primary);
  --affirm-foreground: var(--affirm-on);
  --affirm-soft: var(--affirm-bg);
  --alert-bg-affirm: var(--affirm-bg);
  --alert-bg-destructive: var(--destructive-bg);
  --alert-bg-info: var(--info-bg);
  --alert-bg-warning: var(--warning-bg);
  --alert-body-font: var(--type-body-small);
  --alert-border-affirm: var(--affirm);
  --alert-border-destructive: var(--destructive);
  --alert-border-info: var(--info);
  --alert-border-warning: var(--warning);
  --alert-icon-size: 20px;
  --alert-padding: 16px;
  --alert-radius: var(--radius-md);
  --alert-title-font: var(--type-ui);
  --audio-active-line: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --audio-active-line: color-mix(in srgb, var(--primary) 10%, transparent);
  }
  --audio-active-verse: var(--primary-bg);
  --background: var(--surface-canvas);
  --badge-bg-neutral: var(--surface-muted);
  --badge-border-neutral: var(--border-default);
  --badge-fg-neutral: var(--text-secondary);
  --badge-height: 20px;
  --badge-padding-x: 8px;
  --badge-radius: var(--radius-lg);
  --bg-app: var(--surface-canvas);
  --bg-elevated: var(--surface-elevated);
  --bg-glass: var(--surface-glass);
  --bg-inset: var(--surface-inset);
  --bg-reading: var(--surface-canvas);
  --bg-surface: var(--surface-base);
  --bg-surface-active: var(--surface-active);
  --bg-surface-hover: var(--surface-hover);
  --border: var(--border-default);
  --breadcrumb-current: var(--text-primary);
  --breadcrumb-gap: 8px;
  --breadcrumb-link: var(--text-tertiary);
  --breadcrumb-link-hover: var(--text-primary);
  --breadcrumb-separator: "/";
  --breadcrumb-separator-color: var(--text-quaternary);
  --button-border-width: 1px;
  --button-height-lg: 48px;
  --button-height-md: 40px;
  --button-height-sm: 32px;
  --button-padding-x-lg: 20px;
  --button-padding-x-md: 16px;
  --button-padding-x-sm: 12px;
  --button-radius: var(--radius-md);
  --button-transition: var(--transition-state);
  --card: var(--surface-base);
  --card-bg: var(--surface-base);
  --card-border: 1px solid var(--border-default);
  --card-fg: var(--text-primary);
  --card-foreground: var(--text-primary);
  --card-lift-hover: -2px;
  --card-padding: 24px;
  --card-padding-compact: 16px;
  --card-padding-roomy: 32px;
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --chiasm-ribbon-active: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chiasm-ribbon-active: color-mix(in srgb, var(--primary) 70%, transparent);
  }
  --chip-height: 24px;
  --chip-padding-x: 10px;
  --count-badge-height: 18px;
  --count-badge-padding-x: 6px;
  --destructive-foreground: var(--text-on-accent);
  --divine-name-weight: 500;
  --dot-size: 8px;
  --drop-cap-fg: var(--text-primary);
  --drop-cap-shadow: 0 1px 0 var(--text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --drop-cap-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  }
  --empty-body-max-width: 420px;
  --empty-icon-color: var(--text-quaternary);
  --empty-icon-size: 48px;
  --empty-padding: 48px 24px;
  --focus-line-dim: var(--text-quaternary);
  --focus-line-fg: var(--text-primary);
  --focus-link-underline-color: var(--text-link);
  --focus-link-underline-offset: 3px;
  --focus-link-underline-width: 2px;
  --focus-ring-color: var(--ring);
  --focus-ring-offset: 0;
  --focus-ring-style: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  --focus-ring-width: 3px;
  --footnote-marker-bg: transparent;
  --footnote-marker-bg-hover: var(--info-bg);
  --footnote-marker-fg: var(--info);
  --footnote-marker-hover: var(--info-hover);
  --foreground: var(--text-primary);
  --func-adj: var(--color-func-adj-light);
  --func-article: var(--color-func-article-light);
  --func-conj: var(--color-func-conj-light);
  --func-noun: var(--color-func-noun-light);
  --func-prep: var(--color-func-prep-light);
  --func-verb: var(--color-func-verb-light);
  --highlight-blue: var(--color-highlight-blue-light);
  --highlight-box-decoration: clone;
  --highlight-green: var(--color-highlight-green-light);
  --highlight-padding-x: 0.08em;
  --highlight-padding-y: 0;
  --highlight-radius: 0.15em;
  --highlight-yellow: var(--color-highlight-yellow-light);
  --illumination-glow: transparent;
  --input-background: var(--input-bg);
  --input-bg: var(--surface-base);
  --input-bg-disabled: var(--surface-disabled);
  --input-border-color: var(--border-default);
  --input-border-color-focus: var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    --input-border-color-focus: color-mix(in srgb, var(--border-strong) 68%, var(--primary) 32%);
  }
  --input-border-color-hover: var(--border-strong);
  --input-border-width: 1px;
  --input-height: 40px;
  --input-invalid-border: var(--destructive);
  --input-warning-border: var(--warning);
  --input-affirm-border: var(--affirm);
  --input-invalid-bg: var(--destructive-bg);
  --input-warning-bg: var(--warning-bg);
  --input-affirm-bg: var(--affirm-bg);
  --input-padding-x: 12px;
  --input-placeholder: var(--text-quaternary);
  --input-radius: var(--radius-sm);
  --input-ring: 0 0 5px var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --input-ring: 0 0 5px color-mix(in srgb, var(--primary) 34%, transparent);
  }
  --input-text: var(--text-primary);
  --line-guide-dim: var(--text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --line-guide-dim: color-mix(in srgb, var(--text-primary) 35%, transparent);
  }
  --loading-bg: var(--primary-hover);
  --loading-cursor: wait;
  --loading-fg: var(--text-on-accent);
  --loading-pointer-events: none;
  --loading-spinner-color: currentColor;
  --loading-spinner-size: 16px;
  --modal-bg: var(--surface-elevated);
  --modal-border: 1px solid var(--border-default);
  --modal-max-width: 560px;
  --modal-padding: 32px;
  --modal-radius: var(--radius-lg);
  --modal-scrim: var(--surface-overlay);
  --modal-shadow: var(--shadow-xl);
  --muted: var(--surface-muted);
  --muted-foreground: var(--text-tertiary);
  --orb-border: var(--border-subtle);
  --orb-focus-ring: var(--focus-ring-style);
  --orb-kind-annotation: var(--accent-rust);
  --orb-kind-crossref: var(--accent-slate);
  --orb-kind-echo: var(--accent-sage);
  --orb-kind-insight: var(--accent-amber);
  --orb-shadow: var(--shadow-sm);
  --orb-surface: var(--surface-elevated);
  --overlay: var(--surface-overlay);
  --pagination-bg: transparent;
  --pagination-bg-active: transparent;
  --pagination-bg-hover: var(--surface-hover);
  --pagination-fg: var(--text-secondary);
  --pagination-fg-active: var(--text-primary);
  --pagination-gap: 4px;
  --pagination-item-size: 32px;
  --pagination-radius: var(--radius-sm);
  --peek-border: var(--border-subtle);
  --peek-shadow: var(--shadow-lg);
  --peek-surface: var(--surface-elevated);
  --popover: var(--surface-elevated);
  --popover-bg: var(--surface-elevated);
  --popover-border: 1px solid var(--border-default);
  --popover-foreground: var(--text-primary);
  --popover-item-padding: 8px 12px;
  --popover-item-radius: var(--radius-sm);
  --popover-padding: 8px;
  --popover-radius: var(--radius-md);
  --popover-shadow: var(--shadow-lg);
  --primary-dim: var(--primary-hover);
  --primary-foreground: var(--text-on-accent);
  --primary-half: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-half: color-mix(in srgb, var(--primary) 40%, transparent);
  }
  --progress-fill-bg-affirm: var(--affirm);
  --progress-fill-bg-primary: var(--primary);
  --progress-ring-size: 32px;
  --progress-ring-stroke: 3px;
  --progress-track-bg: var(--surface-inset);
  --progress-track-height: 6px;
  --progress-track-radius: 999px;
  --reader-time-remaining-bg: transparent;
  --reader-time-remaining-fg: var(--text-quaternary);
  --red-letter: var(--color-redletter-light);
  --red-letter-dim: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --red-letter-dim: color-mix(in srgb, var(--red-letter) 38%, var(--text-primary) 62%);
  }
  --red-letter-prose: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --red-letter-prose: color-mix(in srgb, var(--red-letter) 68%, var(--text-primary) 32%);
  }
  --scripture-active-bg: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --scripture-active-bg: color-mix(in srgb, var(--red-letter) 6%, transparent);
  }
  --scripture-active-glow: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --scripture-active-glow: color-mix(in srgb, var(--red-letter) 30%, transparent);
  }
  --scripture-active-indicator: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --scripture-active-indicator: color-mix(in srgb, var(--red-letter) 45%, transparent);
  }
  --scripture-active-text: var(--red-letter);
  --scripture-selection-color: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --scripture-selection-color: color-mix(in srgb, var(--red-letter) 40%, transparent);
  }
  --secondary: var(--surface-muted);
  --secondary-foreground: var(--text-primary);
  --segment-bg: var(--surface-inset);
  --segment-bg-active: var(--surface-base);
  --segment-border-active: var(--border-default);
  --segment-height: 28px;
  --segment-padding-x: 10px;
  --segment-radius: var(--radius-sm);
  --segment-shadow-active: var(--shadow-xs);
  --shadow-primary-glow: none;
  --shadow-primary-glow-sm: none;
  --sidebar: var(--sidebar-bg);
  --sidebar-accent-fg: var(--text-primary);
  --sidebar-accent-foreground: var(--sidebar-accent-fg);
  --sidebar-bg: var(--surface-canvas);
  --sidebar-border: var(--border-subtle);
  --sidebar-fg: var(--text-primary);
  --sidebar-foreground: var(--sidebar-fg);
  --sidebar-hover: var(--color-ink-alpha-8);
  --sidebar-primary-foreground: var(--sidebar-primary-on);
  --sidebar-ring: var(--ring);
  --skeleton-animation: shimmer 1400ms var(--ease-chrome) infinite;
  --skeleton-bg: var(--surface-inset);
  --skeleton-radius: var(--radius-sm);
  --small-caps-tracking: 0.05em;
  --spread-margin-divider: var(--border-subtle);
  --spread-paper: var(--bg-app);
  --spread-paper-tint: var(--bg-app);
  @supports (color: color-mix(in lab, red, red)) {
    --spread-paper-tint: color-mix(in srgb, var(--bg-app) 98%, var(--primary) 2%);
  }
  --stanza-min-height: 220px;
  --surface-canvas-band: var(--surface-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-canvas-band: color-mix(in srgb, var(--surface-canvas) 93%, var(--text-primary) 7%);
  }
  --surface-popover: var(--surface-elevated);
  --switch-background: var(--switch-bg-off);
  --switch-bg-on: var(--primary);
  --switch-height: 24px;
  --switch-radius: 999px;
  --switch-thumb-shadow: var(--shadow-xs);
  --switch-thumb-size: 20px;
  --switch-width: 44px;
  --table-cell-padding-x: 16px;
  --table-cell-padding-y: 12px;
  --table-divider: var(--border-subtle);
  --table-header-bg: var(--surface-muted);
  --table-header-fg: var(--text-tertiary);
  --table-row-height: 44px;
  --table-row-height-dense: 36px;
  --table-row-hover: var(--surface-hover);
  --table-row-selected: var(--primary-bg);
  --table-sticky-shadow: var(--shadow-sm);
  --tabs-list-bg: var(--surface-inset);
  --tabs-list-gap: 4px;
  --tabs-list-padding: 4px;
  --tabs-list-radius: var(--radius-md);
  --tabs-trigger-bg-active: var(--surface-base);
  --tabs-trigger-fg: var(--text-secondary);
  --tabs-trigger-fg-active: var(--text-primary);
  --tabs-trigger-height: 32px;
  --tabs-trigger-padding-x: 12px;
  --tabs-trigger-shadow-active: var(--shadow-xs);
  --text-on-primary: var(--text-on-accent);
  --toast-bg: var(--surface-elevated);
  --toast-border: 1px solid var(--border-default);
  --toast-padding: 12px 16px;
  --toast-padding-left: 19px;
  --toast-radius: var(--radius-md);
  --toast-role-stripe-width: 3px;
  --toast-shadow: var(--shadow-md);
  --tooltip-delay-close: 150ms;
  --tooltip-delay-open: 600ms;
  --tooltip-max-width: 240px;
  --tooltip-padding: 6px 10px;
  --tooltip-radius: var(--radius-sm);
  --tooltip-shadow: var(--shadow-md);
  --verse-number-fg: var(--text-quaternary);
  --verse-number-gutter: 2.2em;
  --verse-number-offset: 0.45em;
  --verse-number-size: 0.5em;
  --primary-on: var(--text-on-accent);
  --info-on: var(--text-on-accent);
  --affirm-on: var(--text-on-accent);
  --warning-on: var(--text-on-accent);
  --destructive-on: var(--text-on-accent);
  --surface-active: var(--decorative-bg);
  --sidebar-primary: var(--neutral-fill);
  --progress-fill-bg: var(--neutral-fill);
  --tabs-underline-color: var(--neutral-ink);
  --count-badge-bg: var(--neutral-ink);
  --accent-blue: var(--accent-slate);
}
html.dark {
  --affirm-foreground: var(--affirm-on);
  --affirm-soft: var(--affirm-bg);
  --audio-active-line: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --audio-active-line: color-mix(in srgb, var(--primary) 14%, transparent);
  }
  --audio-active-verse: var(--primary-bg);
  --bg-app: var(--surface-canvas);
  --bg-elevated: var(--surface-elevated);
  --bg-glass: var(--surface-glass);
  --bg-inset: var(--surface-inset);
  --bg-reading: var(--surface-canvas);
  --bg-surface: var(--surface-base);
  --bg-surface-active: var(--surface-active);
  --bg-surface-hover: var(--surface-hover);
  --chiasm-ribbon-active: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chiasm-ribbon-active: color-mix(in srgb, var(--primary) 70%, transparent);
  }
  --divine-name-weight: 500;
  --drop-cap-fg: var(--text-primary);
  --focus-line-dim: var(--text-quaternary);
  --focus-line-fg: var(--text-primary);
  --focus-ring-color: var(--ring);
  --focus-ring-style: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  --footnote-marker-bg: transparent;
  --footnote-marker-bg-hover: var(--info-bg);
  --footnote-marker-fg: var(--info);
  --footnote-marker-hover: var(--info-hover);
  --func-adj: var(--color-func-adj-dark);
  --func-article: var(--color-func-article-dark);
  --func-conj: var(--color-func-conj-dark);
  --func-noun: var(--color-func-noun-dark);
  --func-prep: var(--color-func-prep-dark);
  --func-verb: var(--color-func-verb-dark);
  --highlight-blue: var(--color-highlight-blue-dark);
  --highlight-green: var(--color-highlight-green-dark);
  --highlight-yellow: var(--color-highlight-yellow-dark);
  --input-background: var(--input-bg);
  --line-guide-dim: var(--text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --line-guide-dim: color-mix(in srgb, var(--text-primary) 28%, transparent);
  }
  --orb-border: var(--border-subtle);
  --orb-focus-ring: var(--focus-ring-style);
  --orb-kind-annotation: var(--accent-rust);
  --orb-kind-crossref: var(--accent-slate);
  --orb-kind-echo: var(--accent-sage);
  --orb-kind-insight: var(--accent-amber);
  --orb-shadow: inset 0 0 0 1px var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --orb-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
  }
  --orb-surface: var(--surface-elevated);
  --overlay: var(--surface-overlay);
  --peek-border: var(--border-subtle);
  --peek-shadow: var(--shadow-lg);
  --peek-surface: var(--surface-elevated);
  --primary-dim: var(--primary-hover);
  --primary-foreground: var(--text-on-accent);
  --primary-half: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-half: color-mix(in srgb, var(--primary) 45%, transparent);
  }
  --reader-time-remaining-bg: transparent;
  --reader-time-remaining-fg: var(--text-quaternary);
  --red-letter: var(--color-redletter-dark);
  --red-letter-dim: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --red-letter-dim: color-mix(in srgb, var(--red-letter) 48%, var(--text-primary) 52%);
  }
  --red-letter-prose: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --red-letter-prose: color-mix(in srgb, var(--red-letter) 72%, var(--text-primary) 28%);
  }
  --scripture-active-bg: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --scripture-active-bg: color-mix(in srgb, var(--red-letter) 10%, transparent);
  }
  --scripture-active-glow: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --scripture-active-glow: color-mix(in srgb, var(--red-letter) 40%, transparent);
  }
  --scripture-active-indicator: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --scripture-active-indicator: color-mix(in srgb, var(--red-letter) 55%, transparent);
  }
  --scripture-active-text: var(--red-letter);
  --scripture-selection-color: var(--red-letter);
  @supports (color: color-mix(in lab, red, red)) {
    --scripture-selection-color: color-mix(in srgb, var(--red-letter) 50%, transparent);
  }
  --sidebar: var(--sidebar-bg);
  --sidebar-accent-foreground: var(--sidebar-accent-fg);
  --sidebar-foreground: var(--sidebar-fg);
  --sidebar-hover: var(--color-paper-alpha-12);
  --sidebar-primary-foreground: var(--sidebar-primary-on);
  --slider-track-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --small-caps-tracking: 0.05em;
  --spread-margin-divider: var(--border-subtle);
  --spread-paper: var(--bg-app);
  --spread-paper-tint: var(--bg-app);
  @supports (color: color-mix(in lab, red, red)) {
    --spread-paper-tint: color-mix(in srgb, var(--bg-app) 99%, var(--primary) 1%);
  }
  --stanza-min-height: 220px;
  --surface-canvas-band: var(--surface-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-canvas-band: color-mix(in srgb, var(--surface-canvas) 85%, var(--text-primary) 15%);
  }
  --surface-popover: var(--surface-elevated);
  --switch-background: var(--color-paper-alpha-24);
  --text-on-primary: var(--text-on-accent);
  --verse-number-fg: var(--text-quaternary);
  --verse-number-gutter: 2.2em;
  --verse-number-offset: 0.45em;
  --verse-number-size: 0.5em;
}
html[data-style="scriptorium"] {
  --surface-canvas: #FBFAF6;
  --surface-base: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-elevated: #FBFAF6;
  --surface-inset: var(--color-stone-100);
  --surface-muted: #F6F6F5;
  --surface-hover: rgba(28, 25, 23, 0.05);
  --surface-selected: rgba(244, 220, 188, 0.45);
  --surface-glass: rgba(255, 255, 255, 0.95);
  --surface-overlay: rgba(28, 25, 23, 0.22);
  --surface-disabled: var(--color-stone-150);
  --text-primary: #1F1B16;
  --text-secondary: var(--color-stone-700);
  --text-tertiary: #6B655C;
  --text-quaternary: var(--color-stone-500);
  --text-disabled: var(--color-stone-400);
  --text-inverse: var(--color-stone-50);
  --text-on-accent: #FFFFFF;
  --text-link: var(--color-slate-600);
  --text-link-hover: var(--color-slate-700);
  --text-redletter: var(--color-redletter-light);
  --border-subtle: #E5E2DB;
  --border-default: rgba(28, 25, 23, 0.12);
  --border-strong: rgba(28, 25, 23, 0.20);
  --border-focus: var(--color-amber-500);
  --primary: #1F1B16;
  --primary-bg: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-bg: color-mix(in srgb, color-mix(in srgb, var(--primary) 70%, var(--color-stone-500)) 5%, transparent);
  }
  --primary-hover: #1F1B16;
  --primary-deep: #1F1B16;
  --info: var(--color-slate-600);
  --info-bg: var(--info);
  @supports (color: color-mix(in lab, red, red)) {
    --info-bg: color-mix(in srgb, color-mix(in srgb, var(--info) 70%, var(--color-stone-500)) 6%, transparent);
  }
  --info-hover: var(--color-slate-700);
  --info-deep: var(--color-slate-800);
  --affirm: var(--color-forest-600);
  --affirm-bg: var(--affirm);
  @supports (color: color-mix(in lab, red, red)) {
    --affirm-bg: color-mix(in srgb, color-mix(in srgb, var(--affirm) 70%, var(--color-stone-500)) 12%, transparent);
  }
  --affirm-hover: var(--color-forest-700);
  --affirm-deep: var(--color-forest-700);
  --warning: var(--color-burnt-500);
  --warning-bg: var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --warning-bg: color-mix(in srgb, color-mix(in srgb, var(--warning) 70%, var(--color-stone-500)) 8%, transparent);
  }
  --warning-hover: var(--color-burnt-600);
  --warning-deep: var(--color-burnt-700);
  --warning-on: var(--color-burnt-900);
  --destructive: var(--color-brick-600);
  --destructive-bg: var(--destructive);
  @supports (color: color-mix(in lab, red, red)) {
    --destructive-bg: color-mix(in srgb, color-mix(in srgb, var(--destructive) 70%, var(--color-stone-500)) 6%, transparent);
  }
  --destructive-hover: var(--color-brick-700);
  --destructive-deep: var(--color-brick-800);
  --decorative: var(--color-amber-400);
  --decorative-deep: var(--color-amber-500);
  --decorative-bg: rgba(200, 150, 76, 0.09);
  --ring: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ring: color-mix(in srgb, var(--primary) 35%, transparent);
  }
  --ring-strong: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ring-strong: color-mix(in srgb, var(--primary) 60%, transparent);
  }
}
html.dark[data-style="scriptorium"] {
  --surface-canvas: #17120E;
  --surface-base: var(--color-stone-850);
  --surface-raised: var(--color-stone-800);
  --surface-elevated: #302D2B;
  --surface-inset: var(--color-stone-950);
  --surface-muted: var(--color-stone-800);
  --surface-hover: rgba(250, 250, 249, 0.08);
  --surface-selected: rgba(244, 220, 188, 0.10);
  --surface-glass: rgba(28, 25, 23, 0.90);
  --surface-overlay: rgba(0, 0, 0, 0.60);
  --surface-disabled: #242020;
  --text-primary: var(--color-stone-50);
  --text-secondary: var(--color-stone-300);
  --text-tertiary: var(--color-stone-400);
  --text-quaternary: var(--color-stone-400);
  --text-disabled: #6D6863;
  --text-inverse: var(--color-stone-850);
  --text-on-accent: var(--color-stone-900);
  --text-link: var(--color-slate-400);
  --text-link-hover: var(--color-slate-400);
  --text-redletter: #DF7F7C;
  --border-subtle: rgba(250, 250, 249, 0.07);
  --border-default: rgba(250, 250, 249, 0.12);
  --border-strong: rgba(250, 250, 249, 0.20);
  --border-focus: var(--color-amber-400);
  --primary: #EDE6D8;
  --primary-bg: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-bg: color-mix(in srgb, var(--primary) 5%, transparent);
  }
  --primary-hover: #EDE6D8;
  --primary-deep: #EDE6D8;
  --info: var(--color-slate-400);
  --info-bg: var(--info);
  @supports (color: color-mix(in lab, red, red)) {
    --info-bg: color-mix(in srgb, var(--info) 8%, transparent);
  }
  --info-hover: var(--color-slate-400);
  --info-deep: var(--color-slate-700);
  --affirm: var(--color-forest-400);
  --affirm-bg: var(--affirm);
  @supports (color: color-mix(in lab, red, red)) {
    --affirm-bg: color-mix(in srgb, var(--affirm) 16%, transparent);
  }
  --affirm-hover: var(--color-forest-500);
  --affirm-deep: #438C60;
  --warning: var(--color-burnt-400);
  --warning-bg: var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --warning-bg: color-mix(in srgb, var(--warning) 10%, transparent);
  }
  --warning-hover: var(--color-burnt-300);
  --warning-deep: var(--color-burnt-700);
  --destructive: var(--color-brick-500);
  --destructive-bg: var(--destructive);
  @supports (color: color-mix(in lab, red, red)) {
    --destructive-bg: color-mix(in srgb, var(--destructive) 8%, transparent);
  }
  --destructive-hover: var(--color-brick-400);
  --destructive-deep: var(--color-brick-800);
  --decorative: var(--color-amber-400);
  --decorative-deep: var(--color-amber-400);
  --decorative-bg: rgba(200, 150, 76, 0.12);
  --ring: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ring: color-mix(in srgb, var(--primary) 40%, transparent);
  }
  --ring-strong: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ring-strong: color-mix(in srgb, var(--primary) 70%, transparent);
  }
}
html[data-style="scriptorium"] {
  --font-display: "Public Sans", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", sans-serif;
  --font-body: "Literata", "Noto Serif SC", "Noto Serif TC", "Noto Sans Thai", serif;
  --font-ui: "Public Sans", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", sans-serif;
  --neutral-fill: var(--color-stone-700);
  --neutral-ink: var(--color-stone-850);
  --sidebar-primary-on: #FFFFFF;
  --sidebar-accent: rgba(28, 25, 23, 0.06);
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.03);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.04), 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.05), 0 2px 4px -2px rgba(28, 25, 23, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -4px rgba(28, 25, 23, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, 0.10), 0 8px 10px -6px rgba(28, 25, 23, 0.06);
  --radius: 0.375rem;
  --type-hero-weight: 300;
  --type-hero-tracking: -0.03em;
  --anim-hero-ambient: none;
  --button-font: var(--type-button);
  --button-pressed-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  --input-invalid-ring: 0 0 4px var(--destructive);
  @supports (color: color-mix(in lab, red, red)) {
    --input-invalid-ring: 0 0 4px color-mix(in srgb, var(--destructive) 35%, transparent);
  }
  --input-warning-ring: 0 0 4px var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --input-warning-ring: 0 0 4px color-mix(in srgb, var(--warning) 35%, transparent);
  }
  --input-affirm-ring: 0 0 4px var(--affirm);
  @supports (color: color-mix(in lab, red, red)) {
    --input-affirm-ring: 0 0 4px color-mix(in srgb, var(--affirm) 35%, transparent);
  }
  --input-transition: border-color var(--duration-fast) var(--ease-chrome),
    box-shadow var(--duration-fast) var(--ease-chrome);
  --card-transition: box-shadow var(--duration-fast) var(--ease-chrome),
    border-color var(--duration-fast) var(--ease-chrome);
  --modal-scrim-backdrop: blur(6px) saturate(1.1);
  --tabs-trigger-font: var(--type-ui-sm);
  --badge-font: var(--type-label);
  --count-badge-font: 500 11px/16px var(--font-display);
  --count-badge-fg: var(--color-stone-50);
  --progress-transition: width var(--duration-moderate) var(--ease-standard);
  --tooltip-bg: var(--color-stone-850);
  --tooltip-fg: var(--color-stone-50);
  --tooltip-font: 500 12px/16px var(--font-display);
  --breadcrumb-font: var(--type-ui-sm);
  --pagination-weight-active: var(--font-weight-medium);
  --pagination-border-active: 2px solid var(--color-stone-850);
  --pagination-underline-active: 2px solid var(--color-stone-850);
  --table-header-font: var(--type-label-small);
  --table-stripe: rgba(28, 25, 23, 0.02);
  --skeleton-shimmer: linear-gradient(90deg,
                          var(--surface-inset) 0%,
                          var(--surface-muted) 50%,
                          var(--surface-inset) 100%);
  --switch-bg-off: var(--color-stone-400);
  --switch-thumb: #FFFFFF;
  --switch-transition: background-color var(--duration-base) var(--ease-chrome),
    transform var(--duration-base) var(--ease-chrome);
  --switch-bg-off-dark: var(--color-paper-alpha-24);
  --slider-track-shadow-inset: inset 0 1px 1px rgba(28, 25, 23, 0.06);
  --touch-hit-area: content-box 44px 44px;
  --empty-title-font: var(--type-h3);
  --empty-body-font: var(--type-body);
  --highlight-transition-in: background-color var(--duration-editorial) var(--ease-editorial-reveal);
  --highlight-transition-out: background-color var(--duration-deliberate) var(--ease-editorial-reveal);
  --step-dot-size: 28px;
  --step-line-height: 2px;
  --step-line-bg: var(--border-default);
  --step-line-fill: var(--primary);
  --step-dot-bg-default: var(--surface-inset);
  --step-dot-bg-complete: var(--primary);
  --step-dot-bg-current: var(--surface-base);
  --step-dot-border-current: 2px solid var(--primary);
  --step-check-duration: var(--duration-moderate);
  --step-pulse-duration: 2400ms;
  --loading-opacity: 1;
  --loading-aria-live: polite;
  --highlight-orange: var(--color-highlight-orange-light);
  --accent-red: var(--color-chart-red-light);
  --accent-rust: var(--color-chart-rust-light);
  --accent-amber: var(--color-chart-amber-light);
  --accent-sage: var(--color-chart-sage-light);
  --accent-teal: var(--color-chart-teal-light);
  --accent-sky: var(--color-chart-sky-light);
  --accent-slate: var(--color-chart-slate-light);
  --accent-plum: var(--color-chart-plum-light);
  --chart-1: oklch(0.620 0.160 65);
  --chart-2: oklch(0.650 0.120 190);
  --chart-3: oklch(0.550 0.120 310);
  --chart-4: oklch(0.750 0.140 85);
  --chart-5: oklch(0.700 0.120 55);
  --divine-name: var(--text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --divine-name: color-mix(in srgb, var(--text-primary) 82%, var(--color-stone-600) 18%);
  }
  --drop-cap-gradient: linear-gradient(
                              180deg,
                              var(--text-primary) 0%,
                              var(--text-primary) 100%
                            );
  @supports (color: color-mix(in lab, red, red)) {
    --drop-cap-gradient: linear-gradient(
                              180deg,
                              color-mix(in srgb, var(--text-primary) 98%, transparent) 0%,
                              color-mix(in srgb, var(--text-primary) 86%, var(--primary) 14%) 100%
                            );
  }
  --illumination-outline: color-mix(in srgb, oklch(37.4% 0.01 67.558) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --illumination-outline: color-mix(in srgb, var(--color-stone-700) 50%, transparent);
  }
  --illumination-fill: var(--surface-base);
  @supports (color: color-mix(in lab, red, red)) {
    --illumination-fill: color-mix(in srgb, var(--surface-base) 94%, var(--color-stone-300) 6%);
  }
  --illumination-hebrew-fg: oklch(37.4% 0.01 67.558);
  @supports (color: color-mix(in lab, red, red)) {
    --illumination-hebrew-fg: color-mix(in srgb, var(--color-stone-700) 80%, var(--primary) 20%);
  }
  --chiasm-ribbon: color-mix(in srgb, oklch(55.3% 0.013 58.071) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --chiasm-ribbon: color-mix(in srgb, var(--color-stone-500) 40%, transparent);
  }
  color-scheme: light;
}
html.dark[data-style="scriptorium"] {
  --anim-hero-ambient: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.30);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.35);
  --shadow-primary-glow: 0 0 12px var(--primary), 0 0 24px var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --shadow-primary-glow: 0 0 12px color-mix(in srgb, var(--primary) 35%, transparent), 0 0 24px color-mix(in srgb, var(--primary) 12%, transparent);
  }
  --shadow-primary-glow-sm: 0 0 6px var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --shadow-primary-glow-sm: 0 0 6px color-mix(in srgb, var(--primary) 25%, transparent);
  }
  --neutral-fill: var(--color-stone-300);
  --neutral-ink: var(--color-stone-50);
  --sidebar-primary-on: #0C0A09;
  --sidebar-accent: rgba(250, 250, 249, 0.06);
  --count-badge-fg: var(--color-stone-900);
  --tooltip-bg: var(--color-stone-850);
  --tooltip-fg: var(--color-stone-50);
  --pagination-border-active: 2px solid var(--color-stone-50);
  --input-invalid-ring: 0 0 6px var(--destructive);
  @supports (color: color-mix(in lab, red, red)) {
    --input-invalid-ring: 0 0 6px color-mix(in srgb, var(--destructive) 55%, transparent);
  }
  --input-warning-ring: 0 0 6px var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --input-warning-ring: 0 0 6px color-mix(in srgb, var(--warning) 55%, transparent);
  }
  --input-affirm-ring: 0 0 6px var(--affirm);
  @supports (color: color-mix(in lab, red, red)) {
    --input-affirm-ring: 0 0 6px color-mix(in srgb, var(--affirm) 55%, transparent);
  }
  --highlight-orange: var(--color-highlight-orange-dark);
  --accent-red: var(--color-chart-red-dark);
  --accent-rust: var(--color-chart-rust-dark);
  --accent-amber: var(--color-chart-amber-dark);
  --accent-sage: var(--color-chart-sage-dark);
  --accent-teal: var(--color-chart-teal-dark);
  --accent-sky: var(--color-chart-sky-dark);
  --accent-slate: var(--color-chart-slate-dark);
  --accent-plum: var(--color-chart-plum-dark);
  --divine-name: var(--text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --divine-name: color-mix(in srgb, var(--text-primary) 90%, var(--color-stone-400) 10%);
  }
  --drop-cap-gradient: linear-gradient(
                              180deg,
                              var(--text-primary) 0%,
                              var(--text-primary) 100%
                            );
  @supports (color: color-mix(in lab, red, red)) {
    --drop-cap-gradient: linear-gradient(
                              180deg,
                              color-mix(in srgb, var(--text-primary) 100%, transparent) 0%,
                              color-mix(in srgb, var(--text-primary) 76%, var(--primary) 24%) 100%
                            );
  }
  --drop-cap-shadow: 0 0 20px var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --drop-cap-shadow: 0 0 20px color-mix(in srgb, var(--primary) 18%, transparent);
  }
  --illumination-outline: color-mix(in srgb, oklch(70.9% 0.01 56.259) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --illumination-outline: color-mix(in srgb, var(--color-stone-400) 60%, transparent);
  }
  --illumination-fill: var(--surface-base);
  @supports (color: color-mix(in lab, red, red)) {
    --illumination-fill: color-mix(in srgb, var(--surface-base) 96%, var(--color-stone-800) 4%);
  }
  --illumination-glow: radial-gradient(
                              closest-side,
                              var(--primary) 0%,
                              transparent 75%
                            );
  @supports (color: color-mix(in lab, red, red)) {
    --illumination-glow: radial-gradient(
                              closest-side,
                              color-mix(in srgb, var(--primary) 24%, transparent) 0%,
                              transparent 75%
                            );
  }
  --illumination-hebrew-fg: oklch(92.3% 0.003 48.717);
  @supports (color: color-mix(in lab, red, red)) {
    --illumination-hebrew-fg: color-mix(in srgb, var(--color-stone-200) 86%, var(--primary) 14%);
  }
  --chiasm-ribbon: color-mix(in srgb, oklch(70.9% 0.01 56.259) 32%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --chiasm-ribbon: color-mix(in srgb, var(--color-stone-400) 32%, transparent);
  }
  color-scheme: dark;
}
html[data-style="scriptorium"] {
  transition: var(--transition-theme);
}
@media (prefers-contrast: more) {
  html[data-style="scriptorium"] {
    --text-secondary: var(--color-stone-850);
    --text-tertiary: var(--color-stone-700);
    --text-quaternary: var(--color-stone-600);
    --border-subtle: var(--color-ink-alpha-12);
    --border-default: var(--color-ink-alpha-20);
    --ring: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      --ring: color-mix(in srgb, var(--primary) 70%, transparent);
    }
    --color-highlight-yellow-light: rgba(194, 166, 56, 0.45);
    --color-highlight-green-light: rgba(106, 160, 100, 0.45);
    --color-highlight-blue-light: rgba(108, 146, 192, 0.44);
    --color-highlight-orange-light: rgba(200, 140, 68, 0.46);
  }
  html.dark[data-style="scriptorium"] {
    --text-secondary: var(--color-stone-50);
    --text-tertiary: var(--color-stone-200);
    --text-quaternary: var(--color-stone-300);
    --border-subtle: var(--color-paper-alpha-12);
    --border-default: var(--color-paper-alpha-20);
    --ring: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      --ring: color-mix(in srgb, var(--primary) 80%, transparent);
    }
    --color-highlight-yellow-dark: rgba(194, 166, 56, 0.40);
    --color-highlight-green-dark: rgba(106, 160, 100, 0.40);
    --color-highlight-blue-dark: rgba(108, 146, 192, 0.40);
    --color-highlight-orange-dark: rgba(200, 140, 68, 0.42);
  }
}
@media (forced-colors: active) {
  html[data-style="scriptorium"] {
    --text-primary: CanvasText;
    --surface-canvas: Canvas;
    --surface-base: Canvas;
    --border-default: CanvasText;
    --primary: LinkText;
    --text-link: LinkText;
    --text-redletter: LinkText;
    --destructive: Mark;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
  html[data-style="scriptorium"] :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}
html[data-style="scriptorium"] .scripture-html {
  --scripture-html-line-height: 1.4;
  --scripture-html-line-height-prose: 1.55;
  --scripture-html-line-height-poetry: 1.58;
  --scripture-html-prose-indent: 1.35em;
  --scripture-html-prose-spacing: 22px;
  --scripture-html-prose-measure: 40em;
  font-variant-numeric: normal;
}
html[data-style="scriptorium"] .scripture-html :is(.p, .m, .pm, .pc, .pr), html[data-style="scriptorium"] .scripture-html .pi:not(.q):not(.q1):not(.q2):not(.q3):not(.q4):not(.qm):not(.qm1):not(.qm2):not(.qm3):not(.qm4):not(.qr):not(.qc):not(.qa):not(.qd) {
  text-align: left;
  hanging-punctuation: unset;
  text-wrap: wrap;
  hyphens: manual;
}
html[data-style="scriptorium"] .scripture-html .chapter-num {
  font-family: var(--font-body);
  font-size: 3.25em;
  line-height: 0.8;
  font-weight: 400;
  color: var(--text-primary);
  margin-top: 0.084em;
  margin-bottom: -0.084em;
  padding-right: 0.08em;
}
html[data-style="scriptorium"] .scripture-html :is(.p, .m, .pm, .pc, .pr) + :is(.q, .q1, .q2, .q3, .q4, .qm, .qm1, .qm2, .qm3, .qm4), html[data-style="scriptorium"] .scripture-html :is(.p, .m, .pm, .pc, .pr) + :is(.pi.q1, .pi.q2, .pi.q3, .pi.q4, .pi.qm1, .pi.qm2, .pi.qm3, .pi.qm4), html[data-style="scriptorium"] .scripture-html :is(.q, .q1, .q2, .q3, .q4, .qm, .qm1, .qm2, .qm3, .qm4) + :is(.p, .m, .pm, .pc, .pr), html[data-style="scriptorium"] .scripture-html :is(.pi.q1, .pi.q2, .pi.q3, .pi.q4, .pi.qm1, .pi.qm2, .pi.qm3, .pi.qm4) + :is(.p, .m, .pm, .pc, .pr) {
  margin-top: var(--scripture-html-prose-spacing);
}
html[data-style="scriptorium"] .scripture-html .b {
  height: 0.6em;
}
@media (min-width: 768px) {
  html[data-style="scriptorium"] .masonry-grid {
    column-count: 2;
  }
}
@media (min-width: 1280px) {
  html[data-style="scriptorium"] .masonry-grid {
    column-count: 3;
  }
}
html[data-style="scriptorium"] .interactive-lift {
  transition: var(--transition-elevation);
  cursor: pointer;
}
html[data-style="scriptorium"] .interactive-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
html[data-style="scriptorium"] .interactive-lift:active {
  transform: scale(0.99);
}
html[data-style="scriptorium"] .animate-page-enter {
  animation: pageEnter var(--duration-slow) var(--ease-standard) forwards;
}
html[data-style="scriptorium"] .animate-landing-enter {
  animation: landingEnter var(--duration-editorial) var(--ease-standard) forwards;
}
html[data-style="scriptorium"] .animate-actions-in {
  animation: fadeSlideUp var(--duration-base) var(--ease-standard) var(--duration-slow) both;
}
html[data-style="scriptorium"] .skeleton {
  background: linear-gradient( 90deg, var(--skeleton-bg) 0%, var(--surface-muted) 50%, var(--skeleton-bg) 100% );
  background-size: 200% 100%;
  animation: shimmer 1400ms var(--ease-chrome) infinite;
  border-radius: var(--skeleton-radius);
}
html[data-style="scriptorium"] .skeleton-text {
  height: 1em;
  border-radius: var(--skeleton-radius);
}
html[data-style="scriptorium"] .skeleton-card {
  height: 120px;
  border-radius: var(--radius-lg);
}
html[data-style="scriptorium"] :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-style);
  border-radius: var(--radius-sm);
}
html[data-style="scriptorium"] :is(input, textarea, select):focus-visible {
  border-radius: var(--input-radius);
  box-shadow: var(--input-ring);
}
html[data-style="scriptorium"] a:focus-visible, html[data-style="scriptorium"] .chat-markdown a:focus-visible, html[data-style="scriptorium"] .book-page-content a:focus-visible {
  outline: none;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--focus-link-underline-color);
  text-decoration-thickness: var(--focus-link-underline-width);
  text-underline-offset: var(--focus-link-underline-offset);
}
html[data-style="scriptorium"] [data-chatbot-input]:focus-visible {
  outline: none;
  box-shadow: none;
}
html[data-style="scriptorium"] :focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
html[data-style="scriptorium"] .chat-markdown a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
html[data-style="scriptorium"] .chat-markdown a:hover {
  color: var(--text-link-hover);
}
html[data-style="scriptorium"] .book-page-content a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
html[data-style="scriptorium"] .book-page-content a:hover {
  color: var(--text-link-hover);
}
@media (prefers-contrast: more) {
  html[data-style="scriptorium"] .w-gloss.verb {
    text-decoration: underline solid currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  html[data-style="scriptorium"] .w-gloss.noun {
    text-decoration: underline dotted currentColor;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
  }
  html[data-style="scriptorium"] .w-gloss.prep {
    text-decoration: underline dashed currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  html[data-style="scriptorium"] .w-gloss.adj {
    text-decoration: underline wavy currentColor;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
  }
  html[data-style="scriptorium"] .w-gloss.article {
    font-style: italic;
    opacity: 0.9;
  }
  html[data-style="scriptorium"] .w-gloss.conj {
    font-variant: small-caps;
    letter-spacing: 0.03em;
  }
  html[data-style="scriptorium"] .chip-grammar.verb::before {
    content: "V";
  }
  html[data-style="scriptorium"] .chip-grammar.noun::before {
    content: "N";
  }
  html[data-style="scriptorium"] .chip-grammar.prep::before {
    content: "P";
  }
  html[data-style="scriptorium"] .chip-grammar.adj::before {
    content: "A";
  }
  html[data-style="scriptorium"] .chip-grammar.article::before {
    content: "D";
  }
  html[data-style="scriptorium"] .chip-grammar.conj::before {
    content: "C";
  }
  html[data-style="scriptorium"] .chip-grammar::before {
    font: var(--type-label-small);
    margin-right: 6px;
    padding-right: 6px;
    border-right: 1px solid currentColor;
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-style="scriptorium"] .skeleton, html[data-style="scriptorium"] .skel-shimmer, html[data-style="scriptorium"] .skel-bar, html[data-style="scriptorium"] .skel-line {
    animation: none !important;
    background: var(--surface-inset) !important;
  }
  html[data-style="scriptorium"] .parchment-breathe, html[data-style="scriptorium"] .hero-breathe {
    animation-play-state: paused !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01ms;
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-moderate: 0.01ms;
    --duration-slow: 0.01ms;
    --duration-deliberate: 0.01ms;
    --duration-editorial: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  *:hover, *:active {
    transform: none !important;
  }
  .skeleton {
    animation: none !important;
    background: var(--skeleton-bg, var(--bg-surface-hover)) !important;
  }
  .animate-flame, .animate-shimmer, .animate-confetti-particle, .animate-page-enter, .animate-landing-enter, .animate-actions-in, .typing-dot {
    animation: none !important;
  }
}
html[data-motion="off"] {
  --duration-instant: 0.01ms;
  --duration-fast: 0.01ms;
  --duration-base: 0.01ms;
  --duration-moderate: 0.01ms;
  --duration-slow: 0.01ms;
  --duration-deliberate: 0.01ms;
  --duration-editorial: 0.01ms;
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html[data-motion="off"] *:hover, html[data-motion="off"] *:active {
  transform: none !important;
}
html[data-motion="off"] .skeleton {
  animation: none !important;
  background: var(--skeleton-bg, var(--bg-surface-hover)) !important;
}
html[data-motion="off"] .animate-flame, html[data-motion="off"] .animate-shimmer, html[data-motion="off"] .animate-confetti-particle, html[data-motion="off"] .animate-page-enter, html[data-motion="off"] .animate-landing-enter, html[data-motion="off"] .animate-actions-in, html[data-motion="off"] .typing-dot {
  animation: none !important;
}
[role="group"] button:hover, table button:hover, [data-density="compact"] button:hover {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html[data-motion="force"] {
    --duration-instant: 80ms;
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 380ms;
    --duration-moderate: var(--duration-base);
    --duration-deliberate: var(--duration-slow);
    --duration-editorial: var(--duration-slow);
  }
  html[data-motion="force"] *, html[data-motion="force"] *::before, html[data-motion="force"] *::after {
    animation-duration: revert !important;
    animation-iteration-count: revert !important;
    transition-duration: revert !important;
    scroll-behavior: revert !important;
  }
  html[data-motion="force"] .skeleton, html[data-motion="force"] .animate-flame, html[data-motion="force"] .animate-shimmer, html[data-motion="force"] .animate-confetti-particle, html[data-motion="force"] .animate-page-enter, html[data-motion="force"] .animate-landing-enter, html[data-motion="force"] .animate-actions-in, html[data-motion="force"] .typing-dot {
    animation: revert !important;
  }
}
@media (prefers-contrast: more) {
  .w-gloss.verb {
    text-decoration: underline solid currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .w-gloss.noun {
    text-decoration: underline dotted currentColor;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
  }
  .w-gloss.prep {
    text-decoration: underline dashed currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .w-gloss.adj {
    text-decoration: underline wavy currentColor;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
  }
  .w-gloss.article {
    font-style: italic;
    opacity: 0.9;
  }
  .w-gloss.conj {
    font-variant: small-caps;
    letter-spacing: 0.03em;
  }
  .chip-grammar.verb::before {
    content: "V";
  }
  .chip-grammar.noun::before {
    content: "N";
  }
  .chip-grammar.prep::before {
    content: "P";
  }
  .chip-grammar.adj::before {
    content: "A";
  }
  .chip-grammar.article::before {
    content: "D";
  }
  .chip-grammar.conj::before {
    content: "C";
  }
  .chip-grammar::before {
    font: var(--type-label-small);
    margin-right: 6px;
    padding-right: 6px;
    border-right: 1px solid currentColor;
    opacity: 0.7;
  }
}
@media (forced-colors: active) {
  :root {
    --text-primary: CanvasText;
    --text-secondary: CanvasText;
    --text-tertiary: CanvasText;
    --surface-canvas: Canvas;
    --surface-base: Canvas;
    --surface-raised: Canvas;
    --surface-elevated: Canvas;
    --surface-popover: Canvas;
    --bg-app: Canvas;
    --bg-surface: Canvas;
    --bg-elevated: Canvas;
    --border-default: CanvasText;
    --border-subtle: CanvasText;
    --border-strong: CanvasText;
    --primary: LinkText;
    --text-link: LinkText;
    --text-redletter: LinkText;
    --red-letter: LinkText;
    --destructive: Mark;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-primary-glow: none;
    --shadow-primary-glow-sm: none;
  }
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}
@media print {
  :root {
    color-scheme: light only;
  }
  body {
    background: #FFFFFF;
    color: #000000;
  }
  .sidebar, nav, aside, .sticky-toolbar, .toast, .modal, .drawer, button, .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-tertiary, .btn-icon, .no-print, [data-skip-print] {
    display: none !important;
  }
  .scripture-html, .scripture-surface, .commentary, .verse-body, .book-page-content {
    max-width: none;
    font-size: 11.5pt;
    line-height: 1.55;
    box-shadow: none !important;
    border: 0 !important;
  }
  .scripture-html h1, .scripture-html h2, .scripture-html h3, .pericope, .chapter-header {
    page-break-after: avoid;
  }
  .scripture-html p, .scripture-html blockquote, .verse-body p, .verse-body blockquote {
    orphans: 3;
    widows: 3;
  }
  .v-num {
    color: #555 !important;
  }
  .redletter, .red-letter, .scripture-html .wj {
    color: #A43A3C !important;
  }
  .hl-yellow, .hl-green, .hl-blue, .hl-orange {
    background: transparent !important;
    border-bottom: 1px dashed #888 !important;
    padding: 0 !important;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}
@media (prefers-color-scheme: dark) {
  html:not(.light):not(.dark) {
    color-scheme: dark;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes overlayEnter {
  from {
    opacity: 0;
    transform: translate( var(--motion-overlay-from-x, 0), var(--motion-overlay-from-y, var(--space-2)) );
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes staggerFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes landingEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes err-shake {
  0%, 100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-4px);
  }
  30% {
    transform: translateX(4px);
  }
  45% {
    transform: translateX(-3px);
  }
  60% {
    transform: translateX(2px);
  }
  80% {
    transform: translateX(0);
  }
}
@keyframes input-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-4px);
  }
  40%, 80% {
    transform: translateX(4px);
  }
}
@keyframes indet {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(300%);
  }
}
@keyframes indet-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}
@keyframes progressIndet {
  0% {
    left: -35%;
  }
  100% {
    left: 100%;
  }
}
@keyframes step-check {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes step-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--ring);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(221, 91, 86, 0);
  }
}
@keyframes aurora {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes breathe {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gardenPageEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gardenLandingEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1.0);
  }
}
@keyframes chapterPageEnterForward {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes chapterPageEnterBackward {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes chapterPageExitForward {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes chapterPageExitBackward {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes parchment-breathe {
  0%, 100% {
    transform: scale(1.00);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.02);
    opacity: 1.00;
  }
}
@keyframes sprout-reveal {
  0% {
    transform: scale(0.96);
    opacity: 0;
  }
  70% {
    transform: scale(1.02);
    opacity: 1;
  }
  100% {
    transform: scale(1.0);
    opacity: 1;
  }
}
@keyframes garden-bloom {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes garden-breathe {
  0%, 100% {
    transform: scale(1.00) translate(-50%, -50%);
    opacity: 0.70;
  }
  50% {
    transform: scale(1.03) translate(-50%, -50%);
    opacity: 1.00;
  }
}
@layer base {
  * {
    box-sizing: border-box;
  }
  html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-body);
  }
  body {
    overflow-x: hidden;
  }
  body[data-workspace-scroll-lock='true'] {
    overflow: hidden;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
}
@layer utilities {
  .bg-aurora {
    background: radial-gradient(circle at 50% 0%, rgba(20, 50, 60, 0.28) 0%, rgba(15, 17, 21, 0) 60%), radial-gradient(circle at 85% 30%, rgba(45, 27, 54, 0.16) 0%, rgba(15, 17, 21, 0) 50%), radial-gradient(circle at 15% 40%, rgba(61, 48, 16, 0.1) 0%, rgba(15, 17, 21, 0) 50%);
    background-size: 200% 200%;
  }
  .bg-mesh-lament {
    background-color: #0f1115;
    background-image: radial-gradient(at 0% 0%, hsla(280, 40%, 20%, 0.4) 0px, transparent 50%), radial-gradient(at 100% 0%, hsla(260, 30%, 15%, 0.4) 0px, transparent 50%), radial-gradient(at 100% 100%, hsla(240, 30%, 10%, 0.4) 0px, transparent 50%), radial-gradient(at 0% 100%, hsla(290, 40%, 10%, 0.4) 0px, transparent 50%);
    background-size: 150% 150%;
    animation: breathe 30s ease infinite alternate;
  }
  @keyframes breathe {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--border-strong, rgba(0,0,0,0.12));
    border-radius: 3px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--text-quaternary, rgba(0,0,0,0.2));
  }
  .font-hebrew-script {
    font-family: "Times New Roman", "Arial Hebrew", serif;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-rendering: optimizeLegibility;
  }
  .glass-panel {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--border-default);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--border-default) 60%, transparent);
    }
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-sm);
  }
  .glass-bubble-ai {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-subtle);
  }
  .chat-markdown {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .chat-markdown > :first-child {
    margin-top: 0;
  }
  .chat-markdown > :last-child {
    margin-bottom: 0;
  }
  .chat-markdown p, .chat-markdown ul, .chat-markdown ol, .chat-markdown pre, .chat-markdown blockquote, .chat-markdown table, .chat-markdown hr {
    margin: 0.75rem 0;
  }
  .chat-markdown h1, .chat-markdown h2, .chat-markdown h3, .chat-markdown h4 {
    margin: 1rem 0 0.5rem;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-weight: var(--font-display-w-medium, 500);
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .chat-markdown h1 {
    font-size: calc(20px * var(--font-display-scale, 1));
  }
  .chat-markdown h2 {
    font-size: calc(18px * var(--font-display-scale, 1));
  }
  .chat-markdown h3, .chat-markdown h4 {
    font-size: calc(16px * var(--font-display-scale, 1));
  }
  .chat-markdown ul, .chat-markdown ol {
    padding-left: 1.25rem;
  }
  .chat-markdown ul {
    list-style: disc;
  }
  .chat-markdown ol {
    list-style: decimal;
  }
  .chat-markdown li + li {
    margin-top: 0.375rem;
  }
  .chat-markdown li > p {
    margin: 0.25rem 0;
  }
  .chat-markdown a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
    }
    text-underline-offset: 0.14em;
  }
  .chat-markdown a:hover {
    color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--primary) 82%, var(--text-primary));
    }
    text-decoration-color: currentColor;
  }
  .chat-markdown strong {
    color: var(--text-primary);
    font-weight: 700;
  }
  .chat-markdown blockquote {
    border-left: 3px solid var(--border-strong);
    color: var(--text-secondary);
    padding-left: 0.875rem;
  }
  .chat-markdown hr {
    border: 0;
    border-top: 1px solid var(--border-default);
  }
  .chat-markdown code {
    border: 1px solid var(--border-subtle);
    border-radius: 0.5rem;
    background: var(--bg-inset);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--bg-inset) 68%, transparent);
    }
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.15rem 0.35rem;
  }
  .chat-markdown pre {
    overflow-x: auto;
    border: 1px solid var(--border-default);
    border-radius: 0.875rem;
    background: var(--bg-inset);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--bg-inset) 88%, transparent);
    }
    padding: 0.9rem 1rem;
  }
  .chat-markdown pre code {
    border: 0;
    background: transparent;
    display: block;
    font-size: 0.85rem;
    line-height: 1.65;
    padding: 0;
    white-space: pre;
  }
  .chat-markdown table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
  }
  .chat-markdown th, .chat-markdown td {
    border: 1px solid var(--border-default);
    padding: 0.5rem 0.625rem;
    text-align: left;
    vertical-align: top;
  }
  .chat-markdown th {
    background: var(--bg-surface-hover);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--bg-surface-hover) 92%, transparent);
    }
    color: var(--text-primary);
    font-weight: 600;
  }
  .chat-markdown-user a {
    color: currentColor;
    text-decoration-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    }
  }
  .masonry-grid {
    column-count: 1;
    column-gap: 2rem;
  }
  @media (min-width: 768px) {
    .masonry-grid {
      column-count: 2;
    }
  }
  @media (min-width: 1280px) {
    .masonry-grid {
      column-count: 3;
    }
  }
  .masonry-item {
    break-inside: avoid;
    margin-bottom: 2rem;
  }
  .card-elevated {
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--border-default);
    border: none;
    padding: 24px;
    transition: box-shadow 250ms cubic-bezier(0.4,0,0.2,1), transform 250ms cubic-bezier(0.4,0,0.2,1);
  }
  .card-elevated:hover {
    box-shadow: var(--shadow-md), 0 0 0 1px var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--primary) 12%, var(--border-subtle));
    }
    transform: translateY(-2px);
  }
  .card-elevated:active {
    transform: scale(0.99);
  }
  .card-outlined {
    border-radius: var(--radius-lg);
    background: transparent;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: none;
    border: 1px solid var(--border-default);
    padding: 16px;
    transition: border-color 250ms cubic-bezier(0.4,0,0.2,1), background 250ms cubic-bezier(0.4,0,0.2,1), transform 200ms ease;
  }
  .card-outlined:hover {
    border-color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    }
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 3%, transparent);
    }
  }
  .card-outlined:active {
    transform: scale(0.99);
  }
  .card-filled {
    border-radius: var(--radius-md);
    background: var(--bg-surface-hover);
    box-shadow: none;
    border: 1px solid transparent;
    padding: 12px 16px;
    transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
  }
  .card-filled:hover {
    background: var(--bg-surface-active);
  }
  .card-filled:active {
    transform: scale(0.98);
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .btn-primary {
    height: 44px;
    padding: 0 24px;
    border-radius: var(--radius-lg);
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 14px;
    font-weight: 600;
    border: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), var(--shadow-sm);
    transition: background 150ms ease, transform 100ms ease, box-shadow 150ms ease;
  }
  .btn-primary:hover {
    background: var(--primary-dim);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), var(--shadow-md);
  }
  .btn-primary:active {
    transform: scale(0.98);
  }
  .btn-primary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .btn-secondary {
    height: 40px;
    padding: 0 20px;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-default);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: border-color 150ms ease, background 150ms ease, transform 100ms ease;
  }
  .btn-secondary:hover {
    border-color: var(--primary);
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 6%, transparent);
    }
  }
  .btn-secondary:active {
    transform: scale(0.98);
  }
  .btn-secondary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  .btn-ghost {
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border: none;
    transition: background 150ms ease, color 150ms ease;
  }
  .btn-ghost:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
  }
  .btn-ghost:active {
    background: var(--bg-surface-active);
  }
  .btn-tertiary {
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
    border: none;
    transition: background 150ms ease;
  }
  .btn-tertiary:hover {
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 8%, transparent);
    }
  }
  .btn-tertiary:active {
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 12%, transparent);
    }
  }
  .btn-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 150ms ease, color 150ms ease;
  }
  .btn-icon:hover {
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 8%, transparent);
    }
    color: var(--text-primary);
  }
  .btn-lg {
    height: 48px;
    padding: 0 28px;
    font-size: 15px;
  }
  .btn-sm {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
  }
  .btn-xs {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }
  .btn-icon-xs {
    width: 24px;
    height: 24px;
  }
  .btn-icon-sm {
    width: 28px;
    height: 28px;
  }
  .btn-icon-lg {
    width: 44px;
    height: 44px;
  }
  .interactive-lift {
    transition: transform 250ms cubic-bezier(0.4,0,0.2,1), box-shadow 250ms cubic-bezier(0.4,0,0.2,1);
    cursor: pointer;
  }
  .interactive-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .interactive-lift:active {
    transform: scale(0.99);
  }
  .animate-page-enter {
    animation: pageEnter 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .animate-landing-enter {
    animation: landingEnter 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes landingEnter {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .text-display {
    font-family: var(--font-display);
    font-size: calc(40px * var(--font-display-scale, 1));
    font-weight: var(--font-display-w-light, 300);
    line-height: 1.15;
    letter-spacing: -0.025em;
  }
  .text-h1 {
    font-family: var(--font-display);
    font-size: calc(28px * var(--font-display-scale, 1));
    font-weight: var(--font-display-w-medium, 500);
    line-height: 1.25;
    letter-spacing: -0.02em;
  }
  .text-h2 {
    font-family: var(--font-display);
    font-size: calc(22px * var(--font-display-scale, 1));
    font-weight: var(--font-display-w-medium, 500);
    line-height: 1.3;
    letter-spacing: -0.015em;
  }
  .text-h3 {
    font-family: var(--font-display);
    font-size: calc(18px * var(--font-display-scale, 1));
    font-weight: var(--font-display-w-medium, 500);
    line-height: 1.35;
    letter-spacing: -0.01em;
  }
  .text-label {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
  }
  .text-body, .text-body-md, .text-body-sm, .text-caption, .text-ui, .text-micro {
    font-family: var(--font-ui);
    font-weight: 400;
  }
  .text-body {
    font-size: 16px;
    line-height: 1.65;
  }
  .text-body-md {
    font-size: 15px;
    line-height: 1.6;
  }
  .text-body-sm {
    font-size: 14px;
    line-height: 1.6;
  }
  .text-caption {
    font-size: 13px;
    line-height: 1.5;
  }
  .text-overline {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
  }
  .text-ui {
    font-size: 12px;
    line-height: 1.5;
  }
  .text-micro {
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.04em;
  }
  .text-3xs {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
  }
  .text-2xs {
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 400;
    line-height: 1.3;
  }
  .text-italic {
    font-style: italic;
  }
  .typing-indicator {
    display: flex;
    gap: 5px;
    padding: 12px 16px;
    align-items: center;
  }
  .typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-tertiary);
    animation: typingPulse 1.4s infinite;
  }
  .typing-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  .typing-dot:nth-child(3) {
    animation-delay: 0.4s;
  }
  @keyframes typingPulse {
    0%, 60%, 100% {
      opacity: 0.3;
      transform: scale(0.8);
    }
    30% {
      opacity: 1;
      transform: scale(1);
    }
  }
  .animate-actions-in {
    animation: fadeSlideUp 200ms ease-out 300ms both;
  }
  @keyframes fadeSlideUp {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .popover-arrow-up::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -6px;
    width: 12px;
    height: 12px;
    background: inherit;
    border: inherit;
    border-right: none;
    border-bottom: none;
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
  }
  .popover-arrow-down::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    width: 12px;
    height: 12px;
    background: inherit;
    border: inherit;
    border-left: none;
    border-top: none;
    transform: rotate(45deg);
    border-radius: 0 0 2px 0;
  }
  .sticky-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg-app);
    transition: box-shadow 200ms ease;
  }
  .sticky-toolbar--scrolled {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);
  }
  .theme-adaptive {
    transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
  }
  .split-divider {
    width: 8px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    flex-shrink: 0;
    z-index: 10;
  }
  .split-divider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 2px;
    background: var(--border-default);
    transition: background 150ms ease, width 150ms ease;
  }
  .split-divider:hover::after {
    background: var(--primary);
    width: 3px;
    left: 2.5px;
  }
  .split-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: var(--text-quaternary);
    opacity: 0;
    transition: opacity 150ms;
    pointer-events: none;
  }
  .split-divider:hover::before {
    opacity: 1;
    color: var(--primary);
  }
  .animate-flame {
    animation: flamePulse 2s ease-in-out infinite;
  }
  @keyframes flamePulse {
    0%, 100% {
      transform: scale(1) rotate(0deg);
    }
    25% {
      transform: scale(1.1) rotate(3deg);
    }
    75% {
      transform: scale(1.05) rotate(-2deg);
    }
  }
  .animate-shimmer {
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
  }
  @keyframes shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  .type-watermark {
    position: absolute;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    line-height: 1;
    color: var(--primary);
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
  }
  .glow-ornament {
    position: relative;
  }
  .glow-ornament::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    height: 120%;
    background: radial-gradient( ellipse at center, var(--primary) 0%, transparent 70% );
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( ellipse at center, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 70% );
    }
    pointer-events: none;
    border-radius: 50%;
  }
  .deco-rules {
    position: relative;
  }
  .deco-rules::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient( 0deg, var(--primary) 0px, var(--primary) 1px, transparent 1px, transparent 12px );
    @supports (color: color-mix(in lab, red, red)) {
      background: repeating-linear-gradient( 0deg, color-mix(in srgb, var(--primary) 4%, transparent) 0px, color-mix(in srgb, var(--primary) 4%, transparent) 1px, transparent 1px, transparent 12px );
    }
    pointer-events: none;
    border-radius: inherit;
  }
  .deco-hatch {
    position: relative;
  }
  .deco-hatch::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient( -45deg, var(--primary) 0px, var(--primary) 1px, transparent 1px, transparent 10px );
    @supports (color: color-mix(in lab, red, red)) {
      background: repeating-linear-gradient( -45deg, color-mix(in srgb, var(--primary) 3%, transparent) 0px, color-mix(in srgb, var(--primary) 3%, transparent) 1px, transparent 1px, transparent 10px );
    }
    pointer-events: none;
    border-radius: inherit;
  }
  .title-rule {
    width: 40px;
    height: 1px;
    background: var(--primary);
    opacity: 0.35;
    margin-left: auto;
    margin-right: auto;
  }
  .animate-confetti-particle {
    animation: confettiBurst 1.5s ease-out forwards;
  }
  @keyframes confettiBurst {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(0);
    }
    50% {
      opacity: 1;
      transform: translate( calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y)) ) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate( calc(-50% + var(--confetti-x) * 1.5), calc(-50% + var(--confetti-y) * 1.5) ) scale(0.5);
    }
  }
  .input-field {
    width: 100%;
    background: var(--input-background);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-primary);
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }
  .input-field::placeholder {
    color: var(--text-quaternary);
  }
  .input-field:focus {
    outline: none;
    border-color: var(--border-strong);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--border-strong) 72%, var(--primary) 28%);
    }
    box-shadow: 0 0 0 3px var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
    }
  }
  .page-container {
    max-width: 960px;
    margin-inline: auto;
    padding-inline: var(--page-inset, 40px);
  }
  .page-container-wide {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--page-inset, 40px);
  }
  .skeleton {
    background: linear-gradient( 90deg, var(--bg-surface-hover) 25%, var(--bg-surface-hover) 50%, var(--bg-surface-hover) 75% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 90deg, var(--bg-surface-hover) 25%, color-mix(in srgb, var(--bg-surface-hover) 60%, var(--bg-surface-active)) 50%, var(--bg-surface-hover) 75% );
    }
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
  }
  .skeleton-text {
    height: 1em;
    border-radius: var(--radius-sm);
  }
  .skeleton-card {
    height: 120px;
    border-radius: var(--radius-lg);
  }
  @keyframes skeletonShimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  .text-shadow-sm {
    text-shadow: 0 1px 2px var(--overlay);
  }
  .text-shadow-md {
    text-shadow: 0 2px 4px var(--overlay);
  }
  .text-shadow-lg {
    text-shadow: 0 4px 8px var(--overlay);
  }
  .avatar-xs {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .avatar-md {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .avatar-lg {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .font-body {
    font-size-adjust: var(--font-body-adjust, none);
  }
}
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
[data-chatbot-input]:focus-visible {
  outline: none;
}
:focus:not(:focus-visible) {
  outline: none;
}
.sidebar-surface {
  background: var(--sidebar-bg);
  box-shadow: 1px 0 0 var(--border-subtle), 4px 0 14px -2px var(--surface-overlay), 12px 0 32px -10px var(--surface-overlay);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 1px 0 0 color-mix(in srgb, var(--border-subtle) 45%, transparent), 4px 0 14px -2px color-mix(in srgb, var(--surface-overlay) 35%, transparent), 12px 0 32px -10px color-mix(in srgb, var(--surface-overlay) 25%, transparent);
  }
}
html.dark .sidebar-surface {
  box-shadow: inset -1px 0 0 var(--surface-raised), 1px 0 0 var(--border-subtle), 4px 0 14px -2px var(--surface-overlay), 14px 0 36px -10px var(--surface-overlay);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--surface-raised) 60%, transparent), 1px 0 0 color-mix(in srgb, var(--border-subtle) 50%, transparent), 4px 0 14px -2px color-mix(in srgb, var(--surface-overlay) 40%, transparent), 14px 0 36px -10px color-mix(in srgb, var(--surface-overlay) 35%, transparent);
  }
}
.sidebar-divider {
  height: 1px;
  background: linear-gradient( 90deg, transparent 0%, var(--border-subtle) 25%, var(--border-subtle) 75%, transparent 100% );
}
.sidebar-logo-divider {
  border-bottom: 0;
  background-image: linear-gradient( 90deg, transparent 0%, var(--border-subtle) 20%, var(--border-default) 50%, var(--border-subtle) 80%, transparent 100% );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}
.sidebar-user-card {
  background: linear-gradient( 180deg, var(--surface-hover) 0%, var(--surface-hover) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, var(--surface-hover) 0%, color-mix(in srgb, var(--surface-hover) 50%, transparent) 100% );
  }
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--ease-chrome), background-color var(--duration-fast) var(--ease-chrome);
}
.sidebar-user-card:hover {
  border-color: var(--border-default);
}
.liquid-glass-pill {
  background: var(--bg-elevated);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  }
  backdrop-filter: blur(40px) saturate(2);
  -webkit-backdrop-filter: blur(40px) saturate(2);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.48), inset 0 -0.5px 0 rgba(0, 0, 0, 0.05), 0 4px 24px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05);
}
html.dark .liquid-glass-pill {
  background: var(--bg-elevated);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  }
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.10), inset 0 -0.5px 0 rgba(0, 0, 0, 0.25), 0 4px 28px rgba(0, 0, 0, 0.42), 0 1px 4px rgba(0, 0, 0, 0.20);
}
.av2-page {
  --surface-immersive: linear-gradient(160deg, #0a0a12 0%, #120f1e 50%, #08080e 100%);
  --border-on-dark-soft: rgba(255, 255, 255, 0.1);
  --border-on-dark-medium: rgba(255, 255, 255, 0.15);
  --border-on-dark-strong: rgba(255, 255, 255, 0.25);
  --surface-on-dark-subtle: rgba(255, 255, 255, 0.08);
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --z-index-sticky: 200;
  --font-mono: var(--font-jetbrains-mono, ui-monospace), monospace;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  --av2-ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1);
  --av2-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --av2-ease-page: cubic-bezier(0.45, 0.05, 0.25, 1);
  --av2-device-frame: #101010;
  --av2-device-shadow: 0 0 0 1.5px #1c1c1e,
    0 30px 80px -30px rgba(31, 27, 22, 0.45),
    0 14px 36px -14px rgba(31, 27, 22, 0.25);
}
.dark .av2-page {
  --av2-device-shadow: 0 0 0 1.5px rgba(242, 236, 227, 0.14),
    0 24px 60px -28px rgba(0, 0, 0, 0.7);
}
.av2-reveal {
  opacity: 0;
  transform: translateY(20px);
}
.av2-reveal.av2-revealed {
  animation: av2FadeUp 640ms var(--av2-ease-quiet) forwards;
  animation-delay: var(--av2-delay, 0ms);
}
@keyframes av2FadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.av2-fade {
  opacity: 0;
  transform: translateY(12px);
  animation: av2HeroRise 640ms var(--av2-ease-quiet) forwards;
}
@keyframes av2HeroRise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.av2-d0 {
  animation: av2HeroEyebrow 560ms var(--av2-ease-quiet) 0ms forwards;
}
@keyframes av2HeroEyebrow {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.av2-d1 {
  animation-duration: 720ms;
  animation-delay: 90ms;
}
.av2-d2 {
  animation-delay: 220ms;
}
.av2-d3 {
  animation-duration: 600ms;
  animation-delay: 340ms;
}
.av2-d4 {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  animation: av2HeroDevice 820ms var(--av2-ease-quiet) 460ms forwards;
}
@keyframes av2HeroDevice {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.av2-frame-wrap {
  container-type: inline-size;
}
.av2-device {
  position: relative;
  background: var(--av2-device-frame);
  box-shadow: var(--av2-device-shadow);
}
.av2-phone {
  width: 100%;
  border-radius: 14cqw;
  padding: 2.7cqw;
}
.av2-phone .av2-device-screen {
  position: relative;
  overflow: hidden;
  border-radius: 11.3cqw;
  background: #ffffff;
}
.av2-phone .av2-device-island {
  position: absolute;
  top: 6cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 30cqw;
  height: 8.7cqw;
  border-radius: 999px;
  background: var(--av2-device-frame);
  z-index: 10;
}
.av2-tablet {
  position: relative;
  border-radius: 1.5rem;
  padding: 11px;
  background: var(--av2-device-frame);
  box-shadow: var(--av2-device-shadow);
}
.av2-tablet-screen {
  position: relative;
  overflow: hidden;
  border-radius: 0.875rem;
  background: #ffffff;
}
.av2-hero-visual {
  position: relative;
  min-height: 26rem;
}
.av2-hero-back {
  top: 50%;
  left: 50%;
  transform: translate(-78%, -43%) rotate(-8deg) scale(0.82);
  opacity: 0.5;
  filter: saturate(0.9);
  z-index: 0;
}
.av2-hero-front {
  z-index: 2;
}
@media (min-width: 1024px) {
  .av2-hero-visual {
    min-height: 40rem;
  }
}
.av2-parallax {
  transform: translate3d(0, var(--av2-parallax, 0px), 0);
  transition: transform 120ms linear;
  will-change: transform;
}
.av2-cta-emphasis {
  animation: av2CtaSettle 520ms var(--av2-ease-quiet) both;
  will-change: transform;
}
@keyframes av2CtaSettle {
  0% {
    opacity: 0.85;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.av2-cta-emphasis:hover {
  transform: translateY(-1px);
}
.av2-cta-emphasis:active {
  transform: translateY(0) scale(0.985);
  transition: transform 110ms var(--av2-ease-soft);
}
.av2-verse {
  font-family: var(--font-body);
  font-style: italic;
}
.av2-stage-swap {
  animation: av2StageSwap 480ms var(--av2-ease-quiet);
}
@keyframes av2StageSwap {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.av2-xfade {
  transition: opacity 700ms var(--av2-ease-quiet);
}
.av2-screen-dots {
  position: absolute;
  bottom: 4.5cqw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 2cqw 3cqw;
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.42);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: inset 0 0 0 0.4cqw rgba(255, 255, 255, 0.14);
  animation: av2DotsBreathe 2400ms var(--av2-ease-quiet) 600ms 2;
}
@keyframes av2DotsBreathe {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.06);
  }
}
.av2-screen-dot {
  width: 2.4cqw;
  height: 2.4cqw;
  min-width: 7px;
  min-height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: width 280ms var(--av2-ease-quiet), background-color 280ms var(--av2-ease-quiet);
}
.av2-screen-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}
.av2-screen-dot--active {
  width: 6.4cqw;
  min-width: 18px;
  background: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .av2-screen-dots {
    animation: none;
  }
  .av2-screen-dot {
    transition: none;
  }
}
.av2-verse-rotate {
  animation: av2VerseIn 700ms var(--av2-ease-quiet);
}
@keyframes av2VerseIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.av2-hero {
  position: relative;
}
.av2-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 62% at 50% 18%, var(--decorative) 0%, var(--surface-canvas) 62%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(58% 62% at 50% 18%, color-mix(in srgb, var(--decorative) 9%, var(--surface-canvas)) 0%, var(--surface-canvas) 62%);
  }
  pointer-events: none;
  animation: av2WashDrift 18s var(--av2-ease-page) infinite alternate;
  will-change: transform;
}
@keyframes av2WashDrift {
  0% {
    transform: translateX(-8px);
  }
  100% {
    transform: translateX(8px);
  }
}
.dark .av2-hero-glow {
  background: radial-gradient(58% 62% at 50% 18%, var(--decorative) 0%, var(--surface-canvas) 62%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(58% 62% at 50% 18%, color-mix(in srgb, var(--decorative) 7%, var(--surface-canvas)) 0%, var(--surface-canvas) 62%);
  }
}
.av2-band {
  background: var(--decorative);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--decorative) 3.5%, var(--surface-canvas));
  }
  border-radius: var(--radius-xl);
}
.dark .av2-band {
  background: var(--text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-primary) 4%, var(--surface-canvas));
  }
}
.av2-ipad-figure {
  position: relative;
}
.av2-ipad-glow {
  position: absolute;
  inset: -10% -6% 4% -6%;
  background: radial-gradient(58% 58% at 50% 42%, var(--decorative), transparent 72%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(58% 58% at 50% 42%, color-mix(in srgb, var(--decorative) 16%, transparent), transparent 72%);
  }
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.dark .av2-ipad-glow {
  background: radial-gradient(58% 58% at 50% 42%, var(--decorative), transparent 72%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(58% 58% at 50% 42%, color-mix(in srgb, var(--decorative) 12%, transparent), transparent 72%);
  }
}
.av2-coverwall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.av2-coverwall > :nth-child(n + 9) {
  display: none;
}
@media (min-width: 640px) {
  .av2-coverwall {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.875rem;
  }
  .av2-coverwall > :nth-child(n + 9) {
    display: block;
  }
  .av2-coverwall > :nth-child(n + 13) {
    display: none;
  }
}
.av2-cover {
  transition: transform var(--duration-fast) var(--ease-chrome), box-shadow var(--duration-fast) var(--ease-chrome);
  will-change: transform;
}
.av2-cover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.av2-marquee {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent);
  mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent);
}
.av2-marquee-row {
  display: flex;
  overflow: hidden;
}
.av2-marquee-track {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  width: max-content;
  animation: av2Marquee 38s linear infinite;
  will-change: transform;
}
.av2-marquee-track--rev {
  animation-direction: reverse;
}
.av2-marquee-track:hover {
  animation-play-state: paused;
}
@keyframes av2Marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.av2-tcarousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.av2-tcarousel-track {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-4);
  width: max-content;
  animation: av2Marquee 80s linear infinite;
  will-change: transform;
}
.av2-tcarousel-track:hover {
  animation-play-state: paused;
}
.av2-exhale {
  position: relative;
  overflow: hidden;
  background: radial-gradient(60% 70% at 82% 12%, var(--decorative), transparent 70%), linear-gradient(180deg, var(--surface-canvas) 0%, var(--decorative) 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(60% 70% at 82% 12%, color-mix(in srgb, var(--decorative) 6%, transparent), transparent 70%), linear-gradient(180deg, var(--surface-canvas) 0%, color-mix(in srgb, var(--decorative) 5%, var(--surface-canvas)) 100%);
  }
  border-radius: var(--radius-xl);
}
.dark .av2-exhale {
  background: radial-gradient(60% 70% at 82% 12%, var(--decorative), transparent 70%), linear-gradient(180deg, var(--surface-canvas) 0%, var(--text-primary) 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(60% 70% at 82% 12%, color-mix(in srgb, var(--decorative) 7%, transparent), transparent 70%), linear-gradient(180deg, var(--surface-canvas) 0%, color-mix(in srgb, var(--text-primary) 5%, var(--surface-canvas)) 100%);
  }
}
.av2-stat-row + .av2-stat-row {
  border-top: 1px solid color-mix(in srgb, #5b7a6e 26%, transparent);
}
@media (min-width: 640px) {
  .av2-stat-row + .av2-stat-row {
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, #5b7a6e 26%, transparent);
  }
}
.av2-final {
  position: relative;
  overflow: hidden;
  background: var(--surface-immersive);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-on-dark-soft);
}
.av2-breathe {
  position: absolute;
  inset: -20%;
  background: radial-gradient(50% 60% at 30% 35%, var(--primary), transparent 70%), radial-gradient(50% 60% at 75% 72%, var(--decorative), transparent 70%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(50% 60% at 30% 35%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%), radial-gradient(50% 60% at 75% 72%, color-mix(in srgb, var(--decorative) 20%, transparent), transparent 70%);
  }
  background-size: 200% 200%;
  animation: av2Breathe 18s var(--av2-ease-page) infinite alternate;
  pointer-events: none;
}
@keyframes av2Breathe {
  0% {
    background-position: 0% 50%;
    opacity: 0.85;
  }
  100% {
    background-position: 100% 50%;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .av2-reveal, .av2-fade, .av2-d0, .av2-d4 {
    opacity: 1 !important;
    transform: none !important;
    animation: av2RmFade 240ms ease both !important;
  }
  @keyframes av2RmFade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .av2-breathe, .av2-verse-rotate, .av2-cta-emphasis, .av2-stage-swap, .av2-hero-glow {
    animation: none !important;
  }
  .av2-cta-emphasis {
    opacity: 1 !important;
    transform: none !important;
  }
  .av2-cta-emphasis:hover, .av2-cta-emphasis:active {
    transform: none !important;
  }
  .av2-parallax, .av2-wash-parallax {
    transform: none !important;
  }
  .av2-xfade {
    transition: none !important;
  }
  .av2-marquee-track {
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap !important;
    justify-content: center;
    width: 100%;
  }
  .av2-marquee-dup {
    display: none !important;
  }
  .av2-tcarousel-track {
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap !important;
    justify-content: center;
    width: 100%;
  }
  .av2-tcard--dup {
    display: none !important;
  }
  .av2-cover {
    transition: none !important;
  }
  .av2-cover:hover {
    transform: none !important;
  }
}
html, body {
  margin: 0;
}
body {
  background: var(--surface-canvas, #FBFAF6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#app.av2-page {
  min-height: 100vh;
}
.av2-langbar {
  position: fixed;
  top: 14px;
  /* Align the right edge with the page content column (mirrors .av2-brandbar
     on the left) so the two chrome pills sit symmetrically over the content. */
  right: max(20px, calc((100vw - 1200px) / 2 + 53px));
  z-index: 300;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-elevated);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  }
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-subtle);
}
.av2-langbar button {
  min-width: 36px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.av2-langbar button:hover {
  color: var(--text-primary);
}
.av2-langbar button.av2-lang--active {
  background: var(--primary);
  color: var(--primary-on, var(--primary-foreground, #fff));
}
.av2-langbar button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.av2-brandbar {
  position: fixed;
  top: 14px;
  /* Align the logo with the page content column (main is max-width:1200px,
     centered, 40px padding, hero text ~16px further in). Track the centered
     column across viewport widths instead of hugging the viewport edge. */
  left: max(20px, calc((100vw - 1200px) / 2 + 50px));
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 5px 6px;
  border-radius: 999px;
  background: var(--bg-elevated);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  }
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-subtle);
  pointer-events: none;
}
.av2-brandbar img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: block;
  flex-shrink: 0;
}
.av2-brandbar span {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-primary);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .av2-brandbar {
    left: 14px;
    padding: 5px;
  }
  .av2-brandbar span {
    display: none;
  }
  .av2-langbar {
    right: 14px;
  }
}
@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-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-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@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-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-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@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-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --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-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-duration: initial;
      --tw-ease: initial;
    }
  }
}