*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

input:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

select:where([multiple]),select:where([size]:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

input:where([type='checkbox']),input:where([type='radio']) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

input:where([type='checkbox']) {
  border-radius: 0px;
}

input:where([type='radio']) {
  border-radius: 100%;
}

input:where([type='checkbox']):focus,input:where([type='radio']):focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

input:where([type='checkbox']):checked,input:where([type='radio']):checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

input:where([type='checkbox']):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

  input:where([type='checkbox']):checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='radio']):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

  input:where([type='radio']):checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

input:where([type='checkbox']):indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {

  input:where([type='checkbox']):indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

input:where([type='file']) {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

input:where([type='file']):focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-16 {
  bottom: -4rem;
}
.-left-16 {
  left: -4rem;
}
.-left-20 {
  left: -5rem;
}
.end-0 {
  inset-inline-end: 0px;
}
.left-0 {
  left: 0px;
}
.left-2\.5 {
  left: 0.625rem;
}
.right-0 {
  right: 0px;
}
.start-0 {
  inset-inline-start: 0px;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-0 {
  z-index: 0;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.\!row-span-1 {
  grid-row: span 1 / span 1 !important;
}
.m-0 {
  margin: 0px;
}
.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.-me-0\.5 {
  margin-inline-end: -0.125rem;
}
.-me-2 {
  margin-inline-end: -0.5rem;
}
.-ml-px {
  margin-left: -1px;
}
.-mr-2 {
  margin-right: -0.5rem;
}
.-mt-px {
  margin-top: -1px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-12 {
  margin-left: 3rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.ms-2 {
  margin-inline-start: 0.5rem;
}
.ms-3 {
  margin-inline-start: 0.75rem;
}
.ms-4 {
  margin-inline-start: 1rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-full {
  height: 100%;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-\[calc\(100\%\+8rem\)\] {
  width: calc(100% + 8rem);
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[2rem\] {
  min-width: 2rem;
}
.min-w-\[400px\] {
  min-width: 400px;
}
.min-w-full {
  min-width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[877px\] {
  max-width: 877px;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-top {
  transform-origin: top;
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-4 {
  --tw-translate-y: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default {
  cursor: default;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize {
  resize: both;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.\!flex-row {
  flex-direction: row !important;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-center {
  justify-items: center;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-amber-900\/5 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(120 53 15 / 0.05);
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.divide-stone-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(245 245 244 / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-wrap {
  text-wrap: wrap;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-300\/80 {
  border-color: rgb(252 211 77 / 0.8);
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-amber-900\/10 {
  border-color: rgb(120 53 15 / 0.1);
}
.border-amber-900\/15 {
  border-color: rgb(120 53 15 / 0.15);
}
.border-amber-900\/20 {
  border-color: rgb(120 53 15 / 0.2);
}
.border-black\/20 {
  border-color: rgb(0 0 0 / 0.2);
}
.border-black\/30 {
  border-color: rgb(0 0 0 / 0.3);
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.border-indigo-400 {
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.border-pink-300 {
  --tw-border-opacity: 1;
  border-color: rgb(249 168 212 / var(--tw-border-opacity, 1));
}
.border-red-500\/60 {
  border-color: rgb(239 68 68 / 0.6);
}
.border-sky-300 {
  --tw-border-opacity: 1;
  border-color: rgb(125 211 252 / var(--tw-border-opacity, 1));
}
.border-stone-100 {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 244 / var(--tw-border-opacity, 1));
}
.border-stone-200 {
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
}
.border-stone-300 {
  --tw-border-opacity: 1;
  border-color: rgb(214 211 209 / var(--tw-border-opacity, 1));
}
.border-stone-900\/15 {
  border-color: rgb(28 25 23 / 0.15);
}
.border-transparent {
  border-color: transparent;
}
.bg-\[\#FF2D20\]\/10 {
  background-color: rgb(255 45 32 / 0.1);
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/40 {
  background-color: rgb(255 251 235 / 0.4);
}
.bg-amber-50\/50 {
  background-color: rgb(255 251 235 / 0.5);
}
.bg-amber-50\/70 {
  background-color: rgb(255 251 235 / 0.7);
}
.bg-amber-50\/85 {
  background-color: rgb(255 251 235 / 0.85);
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-pink-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-600\/95 {
  background-color: rgb(220 38 38 / 0.95);
}
.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-stone-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
}
.bg-stone-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
}
.bg-stone-50\/60 {
  background-color: rgb(250 250 249 / 0.6);
}
.bg-stone-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
}
.bg-stone-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/85 {
  background-color: rgb(255 255 255 / 0.85);
}
.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-yellow-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-amber-50\/70 {
  --tw-gradient-from: rgb(255 251 235 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.stroke-\[\#FF2D20\] {
  stroke: #FF2D20;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-top {
  -o-object-position: top;
     object-position: top;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pe-4 {
  padding-inline-end: 1rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-7 {
  padding-right: 1.75rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.ps-3 {
  padding-inline-start: 0.75rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.text-start {
  text-align: start;
}
.align-top {
  vertical-align: top;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-sm\/relaxed {
  font-size: 0.875rem;
  line-height: 1.625;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-4 {
  line-height: 1rem;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-50 {
  --tw-text-opacity: 1;
  color: rgb(255 251 235 / var(--tw-text-opacity, 1));
}
.text-amber-50\/70 {
  color: rgb(255 251 235 / 0.7);
}
.text-amber-50\/75 {
  color: rgb(255 251 235 / 0.75);
}
.text-amber-50\/80 {
  color: rgb(255 251 235 / 0.8);
}
.text-amber-50\/90 {
  color: rgb(255 251 235 / 0.9);
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-700\/40 {
  color: rgb(180 83 9 / 0.4);
}
.text-amber-700\/70 {
  color: rgb(180 83 9 / 0.7);
}
.text-amber-700\/80 {
  color: rgb(180 83 9 / 0.8);
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-amber-900\/50 {
  color: rgb(120 53 15 / 0.5);
}
.text-amber-900\/90 {
  color: rgb(120 53 15 / 0.9);
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-black\/50 {
  color: rgb(0 0 0 / 0.5);
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-700\/70 {
  color: rgb(4 120 87 / 0.7);
}
.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-stone-300 {
  --tw-text-opacity: 1;
  color: rgb(214 211 209 / var(--tw-text-opacity, 1));
}
.text-stone-400 {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}
.text-stone-500 {
  --tw-text-opacity: 1;
  color: rgb(120 113 108 / var(--tw-text-opacity, 1));
}
.text-stone-600 {
  --tw-text-opacity: 1;
  color: rgb(87 83 78 / var(--tw-text-opacity, 1));
}
.text-stone-700 {
  --tw-text-opacity: 1;
  color: rgb(68 64 60 / var(--tw-text-opacity, 1));
}
.text-stone-800 {
  --tw-text-opacity: 1;
  color: rgb(41 37 36 / var(--tw-text-opacity, 1));
}
.text-stone-900 {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-75 {
  opacity: 0.75;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-1px_0_rgba\(255\2c 255\2c 255\2c 0\.15\)_inset\] {
  --tw-shadow: 0 -1px 0 rgba(255,255,255,0.15) inset;
  --tw-shadow-colored: inset 0 -1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.15\)_inset\] {
  --tw-shadow: 0 1px 0 rgba(255,255,255,0.15) inset;
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.35\)_inset\2c 0_2px_8px_rgba\(80\2c 50\2c 20\2c 0\.18\)\] {
  --tw-shadow: 0 1px 0 rgba(255,255,255,0.35) inset,0 2px 8px rgba(80,50,20,0.18);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_14px_34px_0px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  --tw-shadow: 0px 14px 34px 0px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0px 14px 34px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-amber-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 211 77 / var(--tw-ring-opacity, 1));
}
.ring-amber-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity, 1));
}
.ring-black {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}
.ring-black\/5 {
  --tw-ring-color: rgb(0 0 0 / 0.05);
}
.ring-blue-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
}
.ring-gray-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.ring-stone-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(120 113 108 / var(--tw-ring-opacity, 1));
}
.ring-transparent {
  --tw-ring-color: transparent;
}
.ring-white\/\[0\.05\] {
  --tw-ring-color: rgb(255 255 255 / 0.05);
}
.ring-yellow-600 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(202 138 4 / var(--tw-ring-opacity, 1));
}
.ring-opacity-5 {
  --tw-ring-opacity: 0.05;
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_1px_0_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
  --tw-drop-shadow: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0px_4px_34px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-drop-shadow: drop-shadow(0px 4px 34px rgba(0,0,0,0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0px_4px_34px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
  --tw-drop-shadow: drop-shadow(0px 4px 34px rgba(0,0,0,0.25));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-sm {
  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.sepia {
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  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 {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-75 {
  transition-duration: 75ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ================================================================
   THEME SYSTEM — three modes via [data-theme] on <html>
   ================================================================ */

:root {
    /* Reading preferences (overridden by useSettings composable). */
    --reading-font-size: 17px;
    --reading-line-height: 1.7;
    /* Width of the main reading column. Overridable via the Settings
       panel ("Πλάτος ἀνάγνωσης"). 'none' = no limit (full-width). */
    --reader-max-width: 72rem;
}

/* Apply via this class on the main column of reading pages
   (Bible/Read, Bible/Search, Topical/Concepts). The fallback in the
   var() handles the brief moment before useSettings has run. */
.reader-column {
    max-width: var(--reader-max-width, 72rem);
    width: 100%;
}

/* ================================================================
   3D button design tokens — used across the public reader for
   primary actions, alphabetical letters, translation pills, kind
   switchers, etc. Each button picks up these via:
       background: var(--btn-3d-bg)
       box-shadow: var(--btn-3d-shadow-rest)
   …and switches to the accent variant when active. Centralizing here
   means a theme tweak doesn't require chasing rules in 5 components.
   These tokens slot into the existing day / sepia / night themes
   via the --surface-card / --accent / --accent-soft variables.
   ================================================================ */
:root {
    --btn-3d-bg:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface-card) 96%, white) 0%,
            var(--surface-card) 100%);
    --btn-3d-bg-accent:
        linear-gradient(180deg,
            var(--accent-soft) 0%,
            var(--accent) 100%);

    --btn-3d-shadow-rest:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 1px rgba(80, 50, 20, 0.05),
        0 2px 3px -1px rgba(80, 50, 20, 0.10);
    --btn-3d-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 3px rgba(80, 50, 20, 0.10),
        0 5px 10px -2px rgba(80, 50, 20, 0.18);
    --btn-3d-shadow-pressed:
        inset 0 1px 2px rgba(80, 50, 20, 0.20),
        0 1px 0 rgba(80, 50, 20, 0.05);
    --btn-3d-shadow-accent:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 1px 1px rgba(80, 20, 20, 0.20),
        0 3px 6px -1px rgba(80, 20, 20, 0.30);
}
/* Night-theme adjustments — the cream highlights and warm shadows
   become deeper to read against the dark surface. */
:root[data-theme="night"] {
    --btn-3d-shadow-rest:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1px 1px rgba(0, 0, 0, 0.30),
        0 2px 3px -1px rgba(0, 0, 0, 0.45);
    --btn-3d-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 3px rgba(0, 0, 0, 0.40),
        0 5px 10px -2px rgba(0, 0, 0, 0.55);
    --btn-3d-shadow-pressed:
        inset 0 1px 2px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.04);
    --btn-3d-shadow-accent:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 1px 1px rgba(0, 0, 0, 0.40),
        0 3px 6px -1px rgba(0, 0, 0, 0.55);
}

:root,
:root[data-theme="day"] {
    /* Paper / surfaces */
    --bg-paper:           #faf3e2;
    --bg-paper-deep:      #f3e6c0;
    --surface-card:       #fffdf6;
    --surface-soft:       rgba(255, 252, 240, 0.7);

    /* Ink (text) */
    --ink:                #2c1f10;
    --ink-soft:           #4a3216;
    --ink-muted:          #6b5848;
    --ink-faded:          #7a5b32;

    /* Rules / dividers */
    --rule:               rgba(150, 110, 60, 0.22);
    --rule-soft:          rgba(150, 110, 60, 0.10);

    /* Accents */
    --accent:             #8b1e1e;        /* βυζαντινό κόκκινο */
    --accent-soft:        #a93220;
    --gold:               #b78e3a;

    /* Paper fiber speckle/grain colors */
    --paper-speckle:      rgba(150, 110, 60, 0.05);
    --paper-fiber-1:      rgba(170, 130, 70, 0.025);
    --paper-fiber-2:      rgba(180, 140, 80, 0.02);
    --paper-warmth-1:     rgba(220, 180, 110, 0.18);
    --paper-warmth-2:     rgba(200, 160, 90, 0.12);

    /* Card shadow tones */
    --card-highlight:     rgba(255, 255, 255, 0.85);
    --card-inset:         rgba(150, 110, 60, 0.08);
    --card-shadow-1:      rgba(80, 50, 20, 0.045);
    --card-shadow-2:      rgba(80, 50, 20, 0.065);
    --card-shadow-3:      rgba(80, 50, 20, 0.09);

    color-scheme: light;
}

/* SEPIA — softer, lower contrast warm paper for long reading sessions. */
:root[data-theme="sepia"] {
    --bg-paper:           #f4e6c2;
    --bg-paper-deep:      #ead5a0;
    --surface-card:       #fbf3dd;
    --surface-soft:       rgba(248, 235, 200, 0.78);

    --ink:                #3c2e1a;
    --ink-soft:           #5a4628;
    --ink-muted:          #7a624a;
    --ink-faded:          #8a6f44;

    --rule:               rgba(120, 80, 30, 0.30);
    --rule-soft:          rgba(120, 80, 30, 0.14);

    --accent:             #7a1c1c;
    --accent-soft:        #963320;
    --gold:               #a07f30;

    --paper-speckle:      rgba(140, 100, 50, 0.07);
    --paper-fiber-1:      rgba(160, 120, 60, 0.04);
    --paper-fiber-2:      rgba(170, 130, 70, 0.03);
    --paper-warmth-1:     rgba(210, 170, 100, 0.22);
    --paper-warmth-2:     rgba(190, 150, 80, 0.16);

    --card-highlight:     rgba(255, 250, 235, 0.7);
    --card-inset:         rgba(120, 80, 30, 0.10);
    --card-shadow-1:      rgba(80, 50, 20, 0.08);
    --card-shadow-2:      rgba(80, 50, 20, 0.12);
    --card-shadow-3:      rgba(80, 50, 20, 0.16);

    color-scheme: light;
}

/* NIGHT — dark warm theme for late-evening reading. */
:root[data-theme="night"] {
    --bg-paper:           #14181f;
    --bg-paper-deep:      #0d1116;
    --surface-card:       #1a2028;
    --surface-soft:       rgba(28, 36, 46, 0.72);

    --ink:                #e8dcc4;       /* warm off-white */
    --ink-soft:           #c8b896;
    --ink-muted:          #9a8a6c;
    --ink-faded:          #7d6f54;

    --rule:               rgba(232, 220, 196, 0.18);
    --rule-soft:          rgba(232, 220, 196, 0.08);

    --accent:             #d4a046;       /* gold instead of red — easier on eyes at night */
    --accent-soft:        #e8b660;
    --gold:               #c9a66b;

    --paper-speckle:      rgba(220, 200, 160, 0.025);
    --paper-fiber-1:      rgba(200, 180, 140, 0.012);
    --paper-fiber-2:      rgba(220, 200, 160, 0.010);
    --paper-warmth-1:     rgba(60, 50, 35, 0.55);
    --paper-warmth-2:     rgba(40, 35, 25, 0.45);

    --card-highlight:     rgba(255, 240, 200, 0.04);
    --card-inset:         rgba(0, 0, 0, 0.20);
    --card-shadow-1:      rgba(0, 0, 0, 0.30);
    --card-shadow-2:      rgba(0, 0, 0, 0.45);
    --card-shadow-3:      rgba(0, 0, 0, 0.60);

    color-scheme: dark;
}

/* ================================================================
   Theme textures — applied to layout shells (use vars above)
   ================================================================ */

/* PAPYRUS — main reading area (driven by theme variables) */
.texture-papyrus {
    background-color: var(--bg-paper);
    background-image:
        radial-gradient(var(--paper-speckle) 0.5px, transparent 0.6px),
        repeating-linear-gradient(
            115deg,
            transparent 0px,
            var(--paper-fiber-1) 1px,
            transparent 2px,
            transparent 7px
        ),
        repeating-linear-gradient(
            -65deg,
            transparent 0px,
            var(--paper-fiber-2) 1px,
            transparent 2px,
            transparent 9px
        ),
        radial-gradient(ellipse at top left, var(--paper-warmth-1), transparent 60%),
        radial-gradient(ellipse at bottom right, var(--paper-warmth-2), transparent 55%);
    background-size: 4px 4px, auto, auto, auto, auto;
    color: var(--ink);
}

/* ============================================================
   HEADER / FOOTER backgrounds — refined deep walnut, modern flat.
   Previously: prominent wood-grain SVG turbulence (felt skinned).
   Now: solid deep walnut with barely-perceptible paper-grain noise
   for organic depth + a thin gold rule at the bottom edge that
   echoes Orthodox manuscript illumination.
   The class name `texture-wood` is kept for backward compatibility.
   ============================================================ */
.texture-wood {
    background-color: #3d2818;
    background-image:
        /* tiny paper-grain noise — high frequency, low opacity overlay */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='80'><filter id='wn'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.10 0 0 0 0 0.04 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23wn)'/></svg>"),
        /* gentle vertical luminance — light at top, deeper at the seam */
        linear-gradient(180deg, #4a3221 0%, #3d2818 60%, #2e1c0d 100%);
    background-size: 400px 80px, auto;
    background-blend-mode: overlay, normal;
    box-shadow:
        /* top: faint cream highlight (suggests light coming over the edge) */
        0 1px 0 rgba(255, 240, 215, 0.10) inset,
        /* bottom: gold hairline — the ecclesiastical illumination touch */
        0 -1px 0 rgba(212, 175, 55, 0.42),
        /* under-shadow into the content area */
        0 4px 14px rgba(40, 25, 10, 0.32);
}

/* DEEP variant for footer — slightly darker, same family, no gold rule at bottom. */
.texture-wood-deep {
    background-color: #2a1a0e;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='80'><filter id='wdn'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.02 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23wdn)'/></svg>"),
        linear-gradient(180deg, #34200f 0%, #2a1a0e 60%, #1d1108 100%);
    background-size: 400px 80px, auto;
    background-blend-mode: overlay, normal;
    box-shadow:
        /* top: gold hairline — symmetric to header (footer is bookend of page) */
        0 1px 0 rgba(212, 175, 55, 0.32) inset,
        0 -1px 0 rgba(0, 0, 0, 0.6) inset,
        0 -3px 10px rgba(20, 10, 4, 0.42);
}

.surface-card {
    background-color: var(--surface-card);
    color: var(--ink);
}

/* Stronger 3D card — multi-layer shadow with top highlight + ambient + key shadows. */
.surface-card-bordered {
    background-color: var(--surface-card);
    color: var(--ink);
    border: 1px solid var(--rule);
    box-shadow:
        0 1px 0 var(--card-highlight) inset,
        0 -1px 0 var(--card-inset) inset,
        0 1px 2px var(--card-shadow-1),
        0 3px 8px -3px var(--card-shadow-2),
        0 10px 22px -14px var(--card-shadow-3);
}

/* Helper: ink-on-paper text feel */
.ink { color: var(--ink); }
.ink-muted { color: var(--ink-muted); }

/* ============================================================
   Reading typography — driven by useSettings composable.
   Use !important to win over component-scoped .biblical-text rules
   (which carry [data-v-xxx] specificity).
   ============================================================ */
.biblical-text,
.reading-prose {
    font-size: var(--reading-font-size) !important;
    line-height: var(--reading-line-height) !important;
}

/* Τίτλοι καὶ ὀνόματα σὲ Cardo, ΧΩΡΙΣ τὸ μέγεθος ἀναγνώσεως. Τὸ .biblical-text
   ἀκολουθεῖ τὸ μέγεθος ποὺ διάλεξε ὁ ἀναγνώστης (καὶ τὸ ἐπιβάλλει μὲ
   !important) — σωστὸ γιὰ στίχους καὶ σημειώσεις, λάθος γιὰ ἕναν τίτλο
   σελίδας, ποὺ ἔπεφτε στὰ 17px. */
.serif-display {
    font-family: 'Cardo', 'GFS Didot', Georgia, serif;
}

/* ============================================================
   Theme-specific overrides for wood textures (header/footer)
   The SVG urls inside .texture-wood are baked-in, so we tint via
   filter() in the alternate themes.
   ============================================================ */
:root[data-theme="sepia"] .texture-wood {
    filter: sepia(0.25) brightness(0.96);
}
:root[data-theme="sepia"] .texture-wood-deep {
    filter: sepia(0.3) brightness(0.92);
}

:root[data-theme="night"] .texture-wood {
    filter: brightness(0.45) saturate(0.55) hue-rotate(-5deg);
}
:root[data-theme="night"] .texture-wood-deep {
    filter: brightness(0.32) saturate(0.5) hue-rotate(-5deg);
}

/* ============================================================
   READER MODE — toggled via body.reader-mode
   Goal: minimize chrome, focus on text. Header auto-hides on
   scroll-down, narrows content column, dims toolbars.
   ============================================================ */

/* Header collapses when scrolling down. Apply via JS data attribute
   `data-scroll-dir="down"` on <html>. */
body.reader-mode header.texture-wood {
    transition: transform 0.25s ease, opacity 0.25s ease;
}
html[data-scroll-dir="down"] body.reader-mode header.texture-wood {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Narrower content column for comfortable reading line-length.
   Apply to the main content wrapper. */
body.reader-mode main {
    max-width: 720px !important;
    margin-left: auto;
    margin-right: auto;
}

/* Dim secondary toolbars but keep them accessible (fade in on hover). */
body.reader-mode .toolbar-group,
body.reader-mode .reader-fade {
    opacity: 0.45;
    transition: opacity 0.2s ease;
}
body.reader-mode .toolbar-group:hover,
body.reader-mode .toolbar-group:focus-within,
body.reader-mode .reader-fade:hover,
body.reader-mode .reader-fade:focus-within {
    opacity: 1;
}

/* Slightly larger reading text for serenity. */
body.reader-mode .biblical-text {
    font-size: 1.05em;
    line-height: 1.85;
}

/* Hide footer (mostly decorative chrome) in reader mode. */
body.reader-mode footer.texture-wood-deep {
    display: none;
}

/* ================================================================
   Animations & micro-interactions
   ================================================================ */

/* Smooth accordion expand/collapse using grid-template-rows.
   Apply `accordion-content` to the wrapper, toggle `is-open` to expand.
   Inner element MUST be a single child with `min-height: 0; overflow: hidden`. */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease-out;
}
.accordion-content.is-open {
    grid-template-rows: 1fr;
}
.accordion-content > .accordion-inner {
    min-height: 0;
    overflow: hidden;
}

/* Verse anchor highlight — gentle 3-pulse glow */
@keyframes verse-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
    25%  { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.45); }
    50%  { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
    75%  { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.30); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.verse-pulse {
    animation: verse-pulse 1.6s ease-in-out 1;
    border-radius: 0.5rem;
}

/* Subtle fade-up for content blocks on initial render */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
    animation: fade-up 0.32s ease-out both;
}

/* Modal entrance — fade + scale */
.modal-pop-enter-active,
.modal-pop-leave-active {
    transition: opacity 0.18s ease-out, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-pop-enter-from,
.modal-pop-leave-to {
    opacity: 0;
    transform: scale(0.96);
}
.modal-backdrop-enter-active,
.modal-backdrop-leave-active {
    transition: opacity 0.18s ease-out;
}
.modal-backdrop-enter-from,
.modal-backdrop-leave-to {
    opacity: 0;
}

/* Card hover — extra elevation. Deeper drop shadow, brighter top highlight. */
.card-lift {
    transition: box-shadow 0.22s ease-out, border-color 0.22s ease-out, transform 0.22s ease-out;
}
.card-lift:hover {
    border-color: rgba(150, 110, 60, 0.32);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 0 rgba(150, 110, 60, 0.10) inset,
        0 2px 4px rgba(80, 50, 20, 0.10),
        0 8px 18px -4px rgba(80, 50, 20, 0.16),
        0 22px 40px -14px rgba(80, 50, 20, 0.20);
}

/* Coin-like 3D verse number badge */
.verse-coin {
    background: linear-gradient(180deg, #fff8e3 0%, #f5e7c2 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -1px 0 rgba(150, 110, 60, 0.20) inset,
        0 1px 2px rgba(80, 50, 20, 0.18),
        0 0 0 1px rgba(150, 110, 60, 0.18);
    color: #6b4a26;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Embossed strip — for section headers, gives a "raised band" feel */
.embossed-strip {
    background: linear-gradient(180deg, rgba(255, 240, 200, 0.8) 0%, rgba(252, 226, 168, 0.55) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 -1px 0 rgba(160, 110, 50, 0.18) inset;
}

/* Inset (pressed-in) area, e.g. for selected/active translation pills */
.inset-soft {
    box-shadow:
        0 1px 2px rgba(80, 50, 20, 0.10) inset,
        0 -1px 0 rgba(255, 255, 255, 0.5) inset;
}

/* Subtle button press feedback */
.press-shrink {
    transition: transform 0.08s ease-out;
}
.press-shrink:active {
    transform: scale(0.97);
}

/* Inertia page transition — quick fade in */
.page-fade-enter-active {
    transition: opacity 0.22s ease-out;
}
.page-fade-enter-from {
    opacity: 0;
}

/* Chevron rotate transition (used for accordion arrows) */
.chevron-rotate {
    transition: transform 0.22s ease-out;
}
.chevron-rotate.is-open {
    transform: rotate(180deg);
}
.chevron-rotate.is-open-90 {
    transform: rotate(90deg);
}

/* ============================================================
   Verse-ref hovercard (Tippy.js)

   Shown when the user hovers over a `.verse-ref` chip in the editor,
   the WorkBrowser preview, or the public reader. Content is fetched
   lazily via the search API and cached per page-load.
   ============================================================ */
.vr-hover {
    font-family: 'Cardo', 'GFS Didot', Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink, #2c1f10);
    max-width: 360px;
}
.vr-hover-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b91c1c;
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(185, 28, 28, 0.15);
}
.vr-hover-trans {
    margin-left: 0.5rem;
    font-size: 0.65rem;
    color: var(--ink-faded, #7a5b32);
    font-weight: 500;
    letter-spacing: 0.08em;
}
.vr-hover-text {
    color: var(--ink, #2c1f10);
}
.vr-hover-verse {
    margin-bottom: 0.35rem;
    color: var(--ink, #2c1f10);
}
.vr-hover-verse:last-child { margin-bottom: 0; }
.vr-hover-num {
    color: #b91c1c;
    font-weight: 600;
    font-size: 0.7em;
    margin-right: 0.15rem;
}
.vr-hover-loading {
    color: var(--ink-muted, #6b5848);
    font-style: italic;
    text-align: center;
    padding: 0.25rem 0.5rem;
}
.vr-hover-error {
    color: #b91c1c;
    font-style: italic;
    text-align: center;
}

/* Tippy theme override — when content has class `.vr-hover`, give the
 * Tippy box a paper feel that matches our theme. We target the default
 * `.tippy-box[data-theme~='light']` since we pass theme: 'light'. */
.tippy-box[data-theme~='light']:has(.vr-hover) {
    background: var(--surface-card, #fffdf6);
    color: var(--ink, #2c1f10);
    border: 1px solid var(--rule, rgba(150, 110, 60, 0.22));
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.08),
        0 12px 28px -8px rgba(15, 23, 42, 0.18);
}
.tippy-box[data-theme~='light']:has(.vr-hover) > .tippy-arrow {
    color: var(--surface-card, #fffdf6);
}

/* ─────────────────────────────────────────────────────────────────
 * Presentation presets — work-level visual styles for rendered entries.
 *
 *   Preset class:  .presentation--<key>     (trembelas-classic / modern / minimal)
 *   Knob overrides:
 *     - CSS variables read via var(--name, fallback)
 *     - data-* attributes matched via [data-va-x="y"]
 *
 * The work's PresentationOverridesService bakes the publisher's knob
 * choices into the body container's `style="--var: …"` and `data-*`
 * attributes. Base preset rules below use those variables / attrs so
 * overrides cleanly compose.
 *
 * Apply target: .wb-body / .reader-entry-body / .entry-body-preview
 * ─────────────────────────────────────────────────────────────────
 */

/* Knob: accent colour + text scale — apply broadly. */
.presentation .va-marker,
.presentation .verse-analysis .va-marker {
    color: var(--va-accent, #8b1e1e);
}
/* Text scale — applied via explicit multiplier on every leaf font-size
 * declaration below (because the presets use rem which is root-based,
 * not parent-cascade). The :where wrapper keeps specificity low so
 * preset rules override naturally for non-size properties. */

/* Knob: drop cap on/off — gated by data-va-dropcap. */
.presentation[data-va-dropcap="off"] .verse-analysis .va-general::first-letter,
.presentation[data-va-dropcap="off"] .tr-general .tr-comment:first-of-type::first-letter {
    initial-letter: unset;
    -webkit-initial-letter: unset;
    float: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    color: inherit;
}

/* Knob: paraphrase style variants. */
.presentation[data-va-paraphrase="italic"] .va-paraphrase,
.presentation[data-va-paraphrase="italic"] .tr-translation {
    background: none !important;
    border-left: none !important;
    padding: 0 !important;
    margin-left: 1.5rem;
    font-style: italic;
}
.presentation[data-va-paraphrase="quote"] .va-paraphrase,
.presentation[data-va-paraphrase="quote"] .tr-translation {
    background: none !important;
    border-left: 3px solid color-mix(in srgb, var(--va-accent, #8b1e1e) 50%, transparent) !important;
    padding: 0.25rem 0 0.25rem 1rem !important;
    margin-left: 0;
    font-style: normal;
}
.presentation[data-va-paraphrase="none"] .va-paraphrase,
.presentation[data-va-paraphrase="none"] .tr-translation {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 0;
    font-style: normal;
}

/* Knob: numbers position — switch between margin and inline. */
.presentation[data-va-numbers="inline"] .verse-analysis .va-items {
    list-style: decimal;
    margin: 1rem 0 0 1.5rem;
    padding-left: 0.25rem;
}
.presentation[data-va-numbers="inline"] .verse-analysis .va-items li {
    padding-left: 0.4rem;
}
.presentation[data-va-numbers="inline"] .verse-analysis .va-items li::before {
    content: none !important;
}
.presentation[data-va-numbers="inline"] .tr-notes .tr-note {
    margin-left: 1.5rem;
    padding-left: 0;
    text-indent: 0;
}
.presentation[data-va-numbers="inline"] .tr-notes .tr-note sup {
    position: static !important;
    width: auto;
    margin-right: 0.4em;
}

/* Knob: ornament — switch the character or hide entirely. */
.presentation[data-va-ornament="none"] .verse-analysis .va-items::before,
.presentation[data-va-ornament="none"] .tr-notes::before {
    content: none !important;
}
.presentation[data-va-ornament="on"] .verse-analysis .va-items::before,
.presentation[data-va-ornament="on"] .tr-notes::before {
    content: var(--va-ornament, '⁂') !important;
}

/* Knob: item spacing. */
.presentation[data-va-spacing="compact"] .verse-analysis .va-items li,
.presentation[data-va-spacing="compact"] .tr-notes .tr-note {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}
.presentation[data-va-spacing="loose"] .verse-analysis .va-items li,
.presentation[data-va-spacing="loose"] .tr-notes .tr-note {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Knob: item alignment. */
.presentation[data-va-align="left"] .verse-analysis .va-items li,
.presentation[data-va-align="left"] .verse-analysis .va-general,
.presentation[data-va-align="left"] .tr-notes .tr-note,
.presentation[data-va-align="left"] .tr-comment {
    text-align: left !important;
}

/* ============ Trembelas Classic ============
 * Drop cap on the general commentary, marginal note numbers,
 * asterism (⁂) between general and numbered sections.
 */

/* — Verse line (verseAnalysis block) — */
.presentation--trembelas-classic .verse-analysis .va-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: calc(0.75rem * var(--va-text-scale, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--va-accent-stronger, #8b6914);
    margin: 0 0 0.45rem;
}
.presentation--trembelas-classic .verse-analysis .va-verse {
    font-family: 'Cardo', 'GFS Didot', Georgia, serif;
    font-size: calc(1.15rem * var(--va-text-scale, 1));
    line-height: 1.55;
    color: var(--ink, #1c1917);
    text-indent: 1.5em;
    margin: 0 0 0.6rem;
}
.presentation--trembelas-classic .verse-analysis .va-marker {
    color: var(--va-accent, #8b1e1e);
    font-weight: 700;
    font-size: 0.7em;
}

/* — Paraphrase block — */
.presentation--trembelas-classic .verse-analysis .va-paraphrase,
.presentation--trembelas-classic .tr-translation {
    margin: 0 0 0.9rem 1.5rem;
    padding: 0.4rem 0.85rem;
    font-style: italic;
    font-size: calc(0.95rem * var(--va-text-scale, 1));
    line-height: 1.55;
    color: color-mix(in srgb, var(--ink, #1c1917) 80%, transparent);
    background: color-mix(in srgb, #d4af37 8%, transparent);
    border-left: 2px solid color-mix(in srgb, #d4af37 50%, transparent);
    border-radius: 0 4px 4px 0;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.presentation--trembelas-classic .verse-analysis .va-paraphrase-label {
    display: inline;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--va-accent, #6e1414);
    margin-right: 0.3em;
}

/* — General commentary: drop cap on first paragraph — */
.presentation--trembelas-classic .verse-analysis .va-general,
.presentation--trembelas-classic .tr-comment {
    margin: 0.5rem 0;
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1.04rem * var(--va-text-scale, 1));
    line-height: 1.7;
    color: var(--ink, #1c1917);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.presentation--trembelas-classic .verse-analysis .va-general::first-letter,
.presentation--trembelas-classic .tr-general .tr-comment:first-of-type::first-letter {
    initial-letter: var(--va-dropcap-size, 3);
    -webkit-initial-letter: var(--va-dropcap-size, 3);
    font-family: 'Cardo', 'GFS Didot', Georgia, serif;
    /* Fallback for browsers without initial-letter — approximate the
       N-line height with calc(N + 0.4em) */
    font-size: calc(var(--va-dropcap-size, 3) * 1em + 0.4em);
    line-height: 0.85;
    float: left;
    margin: 0.05em 0.15em 0 0;
    color: var(--va-accent, #6e1414);
    font-weight: 700;
}

/* — Asterism ornament between general and numbered notes — */
.presentation--trembelas-classic .verse-analysis .va-items::before,
.presentation--trembelas-classic .tr-notes::before {
    content: var(--va-ornament, '⁂');
    display: block;
    text-align: center;
    color: var(--va-accent-soft, #b08866);
    font-size: 1.4em;
    line-height: 1;
    margin: 1.2rem 0 0.6rem;
    letter-spacing: 0.4em;
}

/* — Numbered notes: hanging indent with marginal numbers — */
.presentation--trembelas-classic .verse-analysis .va-items {
    list-style: none;
    margin: 0 0 0 3rem;
    padding: 0;
    border-top: none;
}
.presentation--trembelas-classic .verse-analysis .va-items li {
    position: relative;
    margin: 0.5rem 0;
    padding-left: 0;
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1rem * var(--va-text-scale, 1));
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    /* Anchor-link scroll target: leave room above so the (N) marker
       is visible (not hidden behind a sticky header) and so the user
       lands at the START of the item, not mid-paragraph. */
    scroll-margin-top: 5rem;
    border-radius: 4px;
    transition: background 0.6s ease;
}
.presentation--trembelas-classic .verse-analysis .va-items li:target {
    background: color-mix(in srgb, #d4af37 22%, transparent);
    /* Pull the marker INSIDE the highlight by extending background left.
       outline keeps it visually contained without consuming layout space. */
    outline: 0.4rem solid color-mix(in srgb, #d4af37 22%, transparent);
    animation: va-target-fade 1.8s ease-out;
}
@keyframes va-target-fade {
    0%   { background: color-mix(in srgb, #d4af37 55%, transparent);
           outline-color: color-mix(in srgb, #d4af37 55%, transparent); }
    100% { background: color-mix(in srgb, #d4af37 22%, transparent);
           outline-color: color-mix(in srgb, #d4af37 22%, transparent); }
}
.presentation--trembelas-classic .verse-analysis .va-items li::before {
    content: '(' attr(data-n) ')';
    position: absolute;
    left: -3rem;
    width: 2.5rem;
    text-align: right;
    font-family: 'Cardo', Georgia, serif;
    font-weight: 700;
    color: var(--va-accent, #8b1e1e);
    font-size: calc(0.92rem * var(--va-text-scale, 1));
    line-height: 1.6;
}
.presentation--trembelas-classic .verse-analysis .va-items strong {
    color: var(--va-accent, #6e1414);
    font-weight: 700;
}

/* Imported Trembelas (.tr-note) — same marginal-number look.
 * Source paragraph: <p class="tr-note"><sup>(N)</sup> body</p>. */
.presentation--trembelas-classic .tr-notes .tr-note {
    position: relative;
    margin: 0.5rem 0 0.5rem 3rem;
    padding-left: 0;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    line-height: 1.6;
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1rem * var(--va-text-scale, 1));
}
.presentation--trembelas-classic .tr-notes .tr-note sup {
    position: absolute;
    left: -3rem;
    top: 0;
    width: 2.5rem;
    text-align: right;
    font-family: 'Cardo', Georgia, serif;
    font-weight: 700;
    color: var(--va-accent, #8b1e1e);
    font-size: calc(0.92rem * var(--va-text-scale, 1));
    line-height: 1.6;
    vertical-align: baseline;
}

/* Imported Trembelas original-verse line */
.presentation--trembelas-classic .tr-original {
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1.12rem * var(--va-text-scale, 1));
    line-height: 1.55;
    text-indent: 1.5em;
    margin: 0 0 0.6rem;
}

/* ============ Modern ============
 * Καθαρὸ web look — χωρὶς drop cap, χωρὶς marginal numbers, χωρὶς
 * ornaments. Διαβατοκαλά block separation μὲ νουὶ spacing καὶ ἁπαλὸ
 * background γιὰ τὴν παράφρασι. Οἱ ἀριθμημένες σημειώσεις χρησιμοποιοῦν
 * native list-style: decimal — ἁπλὲς "1. 2. 3." στὴν ἀρχὴ τῆς γραμμῆς.
 */

.presentation--modern .verse-analysis .va-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: calc(0.7rem * var(--va-text-scale, 1));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--ink, #1c1917) 50%, transparent);
    margin: 0 0 0.5rem;
}
.presentation--modern .verse-analysis .va-verse {
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1.15rem * var(--va-text-scale, 1));
    line-height: 1.65;
    color: var(--ink, #1c1917);
    margin: 0 0 1rem;
}
.presentation--modern .verse-analysis .va-marker {
    color: #8b1e1e;
    font-weight: 600;
    font-size: 0.7em;
}
.presentation--modern .verse-analysis .va-paraphrase,
.presentation--modern .tr-translation {
    margin: 0 0 1.1rem;
    padding: 0.6rem 0.95rem;
    background: color-mix(in srgb, var(--ink, #1c1917) 4%, transparent);
    border-radius: 6px;
    font-size: calc(0.95rem * var(--va-text-scale, 1));
    line-height: 1.6;
    color: color-mix(in srgb, var(--ink, #1c1917) 80%, transparent);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.presentation--modern .verse-analysis .va-paraphrase-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--ink, #1c1917) 65%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.4em;
}
.presentation--modern .verse-analysis .va-general,
.presentation--modern .tr-comment {
    margin: 1rem 0;
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1rem * var(--va-text-scale, 1));
    line-height: 1.7;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.presentation--modern .verse-analysis .va-items {
    list-style: decimal;
    margin: 1.5rem 0 0 1.5rem;
    padding: 0;
    border-top: 1px solid color-mix(in srgb, var(--ink, #1c1917) 8%, transparent);
    padding-top: 1rem;
}
.presentation--modern .verse-analysis .va-items li {
    margin: 0.7rem 0;
    padding-left: 0.4rem;
    line-height: 1.65;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1rem * var(--va-text-scale, 1));
    scroll-margin-top: 5rem;
    border-radius: 4px;
    transition: background 0.6s ease;
}
.presentation--modern .verse-analysis .va-items li::marker {
    color: color-mix(in srgb, var(--ink, #1c1917) 50%, transparent);
    font-weight: 700;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9em;
}
.presentation--modern .verse-analysis .va-items strong {
    color: var(--accent, #8b1e1e);
    font-weight: 600;
}
.presentation--modern .verse-analysis .va-items li:target {
    background: color-mix(in srgb, var(--accent, #8b1e1e) 8%, transparent);
    outline: 0.35rem solid color-mix(in srgb, var(--accent, #8b1e1e) 8%, transparent);
    animation: va-target-fade-modern 1.8s ease-out;
}
@keyframes va-target-fade-modern {
    0%   { background: color-mix(in srgb, var(--accent, #8b1e1e) 22%, transparent);
           outline-color: color-mix(in srgb, var(--accent, #8b1e1e) 22%, transparent); }
    100% { background: color-mix(in srgb, var(--accent, #8b1e1e) 8%, transparent);
           outline-color: color-mix(in srgb, var(--accent, #8b1e1e) 8%, transparent); }
}
/* Imported .tr-* counterparts for Modern */
.presentation--modern .tr-original {
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1.1rem * var(--va-text-scale, 1));
    line-height: 1.65;
    margin: 0 0 0.6rem;
}
.presentation--modern .tr-notes {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--ink, #1c1917) 8%, transparent);
}
.presentation--modern .tr-notes .tr-note {
    margin: 0.7rem 0 0.7rem 1.8rem;
    padding-left: 0;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    line-height: 1.65;
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1rem * var(--va-text-scale, 1));
}
.presentation--modern .tr-notes .tr-note sup {
    display: inline-block;
    margin-left: -1.8rem;
    width: 1.5rem;
    text-align: right;
    margin-right: 0.3rem;
    color: color-mix(in srgb, var(--ink, #1c1917) 50%, transparent);
    font-weight: 700;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: calc(0.85rem * var(--va-text-scale, 1));
    vertical-align: baseline;
    position: static;
}

/* ============ Σώφρων ἁπλό (Minimal) ============
 * Λιτὸ τυπογραφικὸ design — μηδέν διακόσμηση, μηδέν backgrounds,
 * μόνο spacing καὶ ἱεραρχία. Καλὸ γιὰ ἀκαδημαϊκὲς ἐκδόσεις ἢ ὅταν
 * τὸ περιεχόμενο μιλάει ἀπὸ μόνο του.
 */
.presentation--minimal .verse-analysis .va-label {
    display: none;
}
.presentation--minimal .verse-analysis .va-verse {
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1.08rem * var(--va-text-scale, 1));
    line-height: 1.65;
    color: var(--ink, #1c1917);
    margin: 0 0 0.8rem;
}
.presentation--minimal .verse-analysis .va-marker {
    color: var(--accent, #8b1e1e);
    font-size: 0.7em;
}
.presentation--minimal .verse-analysis .va-paraphrase,
.presentation--minimal .tr-translation {
    margin: 0 0 1rem 1.5rem;
    padding: 0;
    background: none;
    border: none;
    font-style: italic;
    font-size: calc(0.95rem * var(--va-text-scale, 1));
    line-height: 1.6;
    color: color-mix(in srgb, var(--ink, #1c1917) 70%, transparent);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.presentation--minimal .verse-analysis .va-paraphrase-label {
    font-style: normal;
    font-weight: 600;
    color: color-mix(in srgb, var(--ink, #1c1917) 60%, transparent);
}
.presentation--minimal .verse-analysis .va-general,
.presentation--minimal .tr-comment {
    margin: 0.8rem 0;
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1rem * var(--va-text-scale, 1));
    line-height: 1.7;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.presentation--minimal .verse-analysis .va-items {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    border-top: none;
}
.presentation--minimal .verse-analysis .va-items li {
    margin: 0.5rem 0;
    padding-left: 1.8rem;
    text-indent: -1.8rem;
    line-height: 1.65;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1rem * var(--va-text-scale, 1));
    scroll-margin-top: 5rem;
    border-radius: 3px;
    transition: background 0.6s ease;
}
.presentation--minimal .verse-analysis .va-items li::before {
    content: attr(data-n) '. ';
    font-weight: 700;
    color: color-mix(in srgb, var(--ink, #1c1917) 60%, transparent);
    font-family: 'Cardo', Georgia, serif;
    margin-right: 0.2em;
}
.presentation--minimal .verse-analysis .va-items strong {
    color: var(--ink, #1c1917);
    font-weight: 700;
}
.presentation--minimal .verse-analysis .va-items li:target {
    background: color-mix(in srgb, var(--accent, #8b1e1e) 8%, transparent);
    animation: va-target-fade-minimal 1.6s ease-out;
}
@keyframes va-target-fade-minimal {
    0%   { background: color-mix(in srgb, var(--accent, #8b1e1e) 22%, transparent); }
    100% { background: color-mix(in srgb, var(--accent, #8b1e1e) 8%, transparent); }
}
/* Imported .tr-* counterparts for Minimal */
.presentation--minimal .tr-original {
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1.05rem * var(--va-text-scale, 1));
    line-height: 1.65;
    margin: 0 0 0.6rem;
}
.presentation--minimal .tr-notes {
    margin-top: 1rem;
}
.presentation--minimal .tr-notes .tr-note {
    margin: 0.5rem 0;
    padding-left: 1.8rem;
    text-indent: -1.8rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    line-height: 1.65;
    font-family: 'Cardo', Georgia, serif;
    font-size: calc(1rem * var(--va-text-scale, 1));
}
.presentation--minimal .tr-notes .tr-note sup {
    font-family: 'Cardo', Georgia, serif;
    font-weight: 700;
    color: color-mix(in srgb, var(--ink, #1c1917) 60%, transparent);
    font-size: calc(0.9rem * var(--va-text-scale, 1));
    vertical-align: baseline;
    margin-right: 0.3em;
    position: static;
    display: inline;
}

/* ═══════════════════════════════════════════════════════════
   Eortologion / Feast presentation tokens
   ═══════════════════════════════════════════════════════════ */

:root {
  --feast-icon-size-hero:   220px;
  --feast-icon-size-plaque: 120px;
  --feast-icon-size-mini:   72px;
  --feast-icon-mat:         rgba(184, 134, 11, 0.06);
  --feast-icon-padding:     8px;
  --feast-color-bar-h:      4px;

  /* Wax-seal pill tokens */
  --seal-bg:        color-mix(in srgb, var(--bg-paper) 92%, var(--gold) 8%);
  --seal-emboss:    inset 0 1px 0 rgba(255, 255, 255, 0.6),
                    inset 0 -1px 0 rgba(80, 50, 20, 0.10);
  --seal-border:    1px solid rgba(150, 110, 60, 0.25);
  --seal-ink:       var(--accent);
}

/* Liturgical color bar — 4px thin gradient stripe at the top of feast cards. */
.color-bar {
  height: var(--feast-color-bar-h, 4px);
}
.color-bar.color-red    { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--gold))); }
.color-bar.color-gold   { background: linear-gradient(90deg, var(--gold),   color-mix(in srgb, var(--gold) 60%, white)); }
.color-bar.color-white  { background: linear-gradient(90deg, #ffffff,       #f0e6c8); }
.color-bar.color-purple { background: linear-gradient(90deg, #5a2d6e,       #8b4a9c); }
.color-bar.color-green  { background: linear-gradient(90deg, #4a6a25,       #6a8c3c); }
.color-bar.color-blue   { background: linear-gradient(90deg, #1e3a5f,       #3a5a8c); }
.color-bar.color-black  { background: linear-gradient(90deg, #2c1f10,       #4a3216); }

/* ═══════════════════════════════════════════════════════════════════
   ΣΧΕΔΙΑΣΤΙΚΑ ΤΟΥ ΕΓΓΡΑΦΟΥ — κοινὰ γιὰ συντάκτη καὶ ἀναγνώστη
   ═══════════════════════════════════════════════════════════════════

   Γράφονται ΜΙΑ φορὰ καὶ ἰσχύουν καὶ στὶς δύο πλευρές: τὸ `.rich-editor-content`
   εἶναι ἡ ἐπιφάνεια σύνταξης, τὸ `.reader-entry-body` ἡ δημοσιευμένη σελίδα.

   ΓΙΑΤΙ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΑ ΔΥΟ COMPONENTS: ὅταν οἱ ἴδιοι κανόνες ζοῦν σὲ δύο
   ἀρχεῖα, ἀποκλίνουν. Τὸ εἴδαμε ἤδη — τὰ παραθέματα Γραφῆς ἦταν πράσινα
   στὸν συντάκτη καὶ κόκκινα στὸν ἀναγνώστη, ὁπότε ὁ ἐκδότης δούλευε χωρὶς
   νὰ βλέπει τὸ ἀποτέλεσμά του. Ὅ,τι ἀφορᾶ τὸ ΚΕΙΜΕΝΟ μπαίνει ἐδῶ.
*/

/* ---- Ἀρίθμησι λιστῶν μὲ ἑλληνικὰ ἀριθμητικά --------------------------
   Τὸ ἐνσωματωμένο `lower-greek` τοῦ browser εἶναι ΑΛΦΑΒΗΤΙΚΟ (α, β, γ…).
   Τὸ ἑλληνικὸ ΑΡΙΘΜΗΤΙΚΟ σύστημα εἶναι προσθετικό: ι΄ = 10, ια΄ = 11,
   κ΄ = 20, ρ΄ = 100. Τὸ ὁρίζουμε ρητά, μὲ κεραία. */

@counter-style greek-numeral {
  system: additive;
  additive-symbols:
    900 'ϡ', 800 'ω', 700 'ψ', 600 'χ', 500 'φ', 400 'υ', 300 'τ', 200 'σ', 100 'ρ',
     90 'ϟ',  80 'π',  70 'ο',  60 'ξ',  50 'ν',  40 'μ',  30 'λ',  20 'κ',  10 'ι',
      9 'θ',   8 'η',   7 'ζ',   6 'ϛ',   5 'ε',   4 'δ',   3 'γ',   2 'β',   1 'α';
  suffix: '΄ ';
  range: 1 999;
  fallback: decimal;
}

@counter-style greek-numeral-upper {
  system: additive;
  additive-symbols:
    900 'Ϡ', 800 'Ω', 700 'Ψ', 600 'Χ', 500 'Φ', 400 'Υ', 300 'Τ', 200 'Σ', 100 'Ρ',
     90 'Ϟ',  80 'Π',  70 'Ο',  60 'Ξ',  50 'Ν',  40 'Μ',  30 'Λ',  20 'Κ',  10 'Ι',
      9 'Θ',   8 'Η',   7 'Ζ',   6 'Ϛ',   5 'Ε',   4 'Δ',   3 'Γ',   2 'Β',   1 'Α';
  suffix: '΄ ';
  range: 1 999;
  fallback: decimal;
}

.rich-editor-content ol[data-numbering='greek'],
.reader-entry-body   ol[data-numbering='greek']       { list-style-type: greek-numeral; }

.rich-editor-content ol[data-numbering='greek-upper'],
.reader-entry-body   ol[data-numbering='greek-upper'] { list-style-type: greek-numeral-upper; }

.rich-editor-content ol[data-numbering='lower-alpha'],
.reader-entry-body   ol[data-numbering='lower-alpha'] { list-style-type: lower-greek; }

.rich-editor-content ol[data-numbering='upper-roman'],
.reader-entry-body   ol[data-numbering='upper-roman'] { list-style-type: upper-roman; }

/* ---- Περίγραμμα μπλόκ -----------------------------------------------
   Τέσσερις ἐπιλογές, ὄχι δώδεκα: γύρω-γύρω, μόνο ἀριστερά (τὸ κλασικὸ
   σημάδι παραθέματος), πάνω-κάτω (γιὰ ἐνότητα), ἢ τίποτα. Τὸ χρῶμα
   ἔρχεται ἀπὸ τὴν παράγραφο· ἀλλιῶς παίρνει τὸ χρῶμα τοῦ ἔργου. */

.rich-editor-content [data-border],
.reader-entry-body   [data-border] {
  --blk-line: var(--blk-border, var(--accent, #8b1e1e));
}

.rich-editor-content [data-border='all'],
.reader-entry-body   [data-border='all'] {
  border: 1px solid var(--blk-line);
  border-radius: 0.25rem;
  padding: 0.6em 0.85em;
}

.rich-editor-content [data-border='left'],
.reader-entry-body   [data-border='left'] {
  border-left: 3px solid var(--blk-line);
  padding-left: 0.85em;
}

.rich-editor-content [data-border='top-bottom'],
.reader-entry-body   [data-border='top-bottom'] {
  border-top: 1px solid var(--blk-line);
  border-bottom: 1px solid var(--blk-line);
  padding: 0.5em 0;
}

/* ---- Σκίασι ----------------------------------------------------------
   Ἀποχρώσεις τοῦ ἴδιου χαρτιοῦ, ὄχι ξένα χρώματα — ὥστε ἡ σελίδα νὰ
   μένει ἑνιαία ἀκόμα κι ὅταν ξεχωρίζεις ἕνα κομμάτι. */

.rich-editor-content [data-shading='soft'],
.reader-entry-body   [data-shading='soft'] {
  background: color-mix(in srgb, var(--ink, #2c1f10) 5%, transparent);
  border-radius: 0.25rem;
  padding: 0.5em 0.75em;
}

.rich-editor-content [data-shading='accent'],
.reader-entry-body   [data-shading='accent'] {
  background: color-mix(in srgb, var(--accent, #8b1e1e) 8%, transparent);
  border-radius: 0.25rem;
  padding: 0.5em 0.75em;
}

.rich-editor-content [data-shading='warn'],
.reader-entry-body   [data-shading='warn'] {
  background: color-mix(in srgb, var(--gold, #b78e3a) 16%, transparent);
  border-radius: 0.25rem;
  padding: 0.5em 0.75em;
}

/* ---- Στῆλες ----------------------------------------------------------
   Δύο ἢ τρεῖς στῆλες μέσα σὲ ΜΙΑ παράγραφο — τὸ τυπογραφικὸ τέχνασμα
   τῶν πατερικῶν ἐκδόσεων γιὰ πυκνοὺς καταλόγους. Δὲν εἶναι στῆλες
   σελίδας· ἡ ροὴ ξαναενώνεται στὴν ἑπόμενη παράγραφο. */

.rich-editor-content [data-columns='2'],
.reader-entry-body   [data-columns='2'] { -moz-column-count: 2; column-count: 2; -moz-column-gap: 2em; column-gap: 2em; }

.rich-editor-content [data-columns='3'],
.reader-entry-body   [data-columns='3'] { -moz-column-count: 3; column-count: 3; -moz-column-gap: 1.6em; column-gap: 1.6em; }

.rich-editor-content [data-columns],
.reader-entry-body   [data-columns] { -moz-column-rule: 1px solid var(--rule, rgba(150,110,60,0.22)); column-rule: 1px solid var(--rule, rgba(150,110,60,0.22)); }

@media (max-width: 640px) {
  /* Στὸ κινητὸ οἱ στῆλες γίνονται ἀστεῖα στενές — ἐπιστρέφουν σὲ μία. */
  .rich-editor-content [data-columns],
  .reader-entry-body   [data-columns] { -moz-column-count: 1; column-count: 1; -moz-column-rule: none; column-rule: none; }
}

/* ---- Πίναξ περιεχομένων ---------------------------------------------
   Ἴδια ὄψι στὸν συντάκτη καὶ στὸν ἀναγνώστη. Οἱ ἐσοχὲς ἀκολουθοῦν τὸ
   ἐπίπεδο τῆς ἐπικεφαλίδας, ὥστε ἡ ἱεραρχία νὰ φαίνεται μὲ τὸ μάτι. */

.rich-editor-content .toc,
.reader-entry-body   .toc {
  margin: 1.2em 0;
  padding: 0.85em 1em;
  border: 1px solid var(--rule, rgba(150, 110, 60, 0.22));
  border-left: 3px solid var(--accent, #8b1e1e);
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--ink, #2c1f10) 3%, transparent);
}

.rich-editor-content .toc-title,
.reader-entry-body   .toc-title {
  font-family: 'Cardo', Georgia, serif;
  font-weight: 700;
  font-size: 1.02em;
  color: var(--accent, #8b1e1e);
  margin-bottom: 0.4em;
}

.rich-editor-content .toc-list,
.reader-entry-body   .toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rich-editor-content .toc-item,
.reader-entry-body   .toc-item {
  margin: 0.12em 0;
  font-size: 0.92em;
  line-height: 1.4;
}

.rich-editor-content .toc-item a,
.reader-entry-body   .toc-item a {
  color: var(--ink-soft, #4a3216);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.rich-editor-content .toc-item a:hover,
.reader-entry-body   .toc-item a:hover {
  color: var(--accent, #8b1e1e);
  border-bottom-color: currentColor;
}

.toc-level-1 { padding-left: 0;     font-weight: 600; }
.toc-level-2 { padding-left: 0.9em; }
.toc-level-3 { padding-left: 1.8em; font-size: 0.88em; }
.toc-level-4 { padding-left: 2.7em; font-size: 0.86em; }
.toc-level-5,
.toc-level-6 { padding-left: 3.4em; font-size: 0.84em; }

/* Ὁ ζωντανὸς πίναξ δείχνει στὸν συντάκτη τί θὰ συμβεῖ, ὄχι κενό. */
.rich-editor-content .toc-live-note,
.rich-editor-content .toc-empty {
  list-style: none;
  font-size: 0.85em;
  font-style: italic;
  color: var(--ink-faded, #7a5b32);
}
.selection\:bg-\[\#FF2D20\] *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 45 32 / var(--tw-bg-opacity, 1));
}
.selection\:bg-\[\#FF2D20\] *::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 45 32 / var(--tw-bg-opacity, 1));
}
.selection\:text-white *::-moz-selection {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.selection\:text-white *::selection {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.selection\:bg-\[\#FF2D20\]::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 45 32 / var(--tw-bg-opacity, 1));
}
.selection\:bg-\[\#FF2D20\]::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 45 32 / var(--tw-bg-opacity, 1));
}
.selection\:text-white::-moz-selection {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.selection\:text-white::selection {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.placeholder\:text-amber-900\/40::-moz-placeholder {
  color: rgb(120 53 15 / 0.4);
}
.placeholder\:text-amber-900\/40::placeholder {
  color: rgb(120 53 15 / 0.4);
}
.backdrop\:bg-transparent::backdrop {
  background-color: transparent;
}
.first\:mt-0:first-child {
  margin-top: 0px;
}
.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:border-stone-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(214 211 209 / var(--tw-border-opacity, 1));
}
.hover\:bg-amber-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-100\/40:hover {
  background-color: rgb(254 243 199 / 0.4);
}
.hover\:bg-amber-100\/50:hover {
  background-color: rgb(254 243 199 / 0.5);
}
.hover\:bg-amber-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black\/15:hover {
  background-color: rgb(0 0 0 / 0.15);
}
.hover\:bg-emerald-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.hover\:bg-stone-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-stone-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-stone-50\/50:hover {
  background-color: rgb(250 250 249 / 0.5);
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/60:hover {
  background-color: rgb(255 255 255 / 0.6);
}
.hover\:from-amber-100\/70:hover {
  --tw-gradient-from: rgb(254 243 199 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 243 199 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:text-amber-700:hover {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-900:hover {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.hover\:text-black\/70:hover {
  color: rgb(0 0 0 / 0.7);
}
.hover\:text-emerald-700:hover {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-900:hover {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.hover\:text-stone-600:hover {
  --tw-text-opacity: 1;
  color: rgb(87 83 78 / var(--tw-text-opacity, 1));
}
.hover\:text-stone-700:hover {
  --tw-text-opacity: 1;
  color: rgb(68 64 60 / var(--tw-text-opacity, 1));
}
.hover\:text-stone-800:hover {
  --tw-text-opacity: 1;
  color: rgb(41 37 36 / var(--tw-text-opacity, 1));
}
.hover\:text-stone-900:hover {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-black\/20:hover {
  --tw-ring-color: rgb(0 0 0 / 0.2);
}
.focus\:z-10:focus {
  z-index: 10;
}
.focus\:w-56:focus {
  width: 14rem;
}
.focus\:w-64:focus {
  width: 16rem;
}
.focus\:border-amber-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.focus\:border-amber-700\/40:focus {
  border-color: rgb(180 83 9 / 0.4);
}
.focus\:border-blue-300:focus {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.focus\:border-gray-300:focus {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.focus\:border-indigo-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.focus\:border-indigo-700:focus {
  --tw-border-opacity: 1;
  border-color: rgb(67 56 202 / var(--tw-border-opacity, 1));
}
.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.focus\:bg-amber-50:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.focus\:bg-gray-100:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.focus\:bg-gray-50:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.focus\:bg-gray-700:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.focus\:bg-indigo-100:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.focus\:text-gray-500:focus {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.focus\:text-gray-700:focus {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.focus\:text-gray-800:focus {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.focus\:text-indigo-800:focus {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-amber-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity, 1));
}
.focus\:ring-amber-700\/20:focus {
  --tw-ring-color: rgb(180 83 9 / 0.2);
}
.focus\:ring-indigo-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.focus\:ring-red-500\/30:focus {
  --tw-ring-color: rgb(239 68 68 / 0.3);
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-\[\#FF2D20\]:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 45 32 / var(--tw-ring-opacity, 1));
}
.active\:bg-gray-100:active {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.active\:bg-gray-900:active {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.active\:bg-red-700:active {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.active\:text-gray-500:active {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.active\:text-gray-700:active {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.active\:text-gray-800:active {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-25:disabled {
  opacity: 0.25;
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.disabled\:hover\:bg-transparent:hover:disabled {
  background-color: transparent;
}
.group:hover .group-hover\:bg-amber-200\/60 {
  background-color: rgb(253 230 138 / 0.6);
}
.group:hover .group-hover\:text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {

  .sm\:-my-px {
    margin-top: -1px;
    margin-bottom: -1px;
  }

  .sm\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .sm\:ms-10 {
    margin-inline-start: 2.5rem;
  }

  .sm\:ms-6 {
    margin-inline-start: 1.5rem;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:size-16 {
    width: 4rem;
    height: 4rem;
  }

  .sm\:size-6 {
    width: 1.5rem;
    height: 1.5rem;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:min-w-\[560px\] {
    min-width: 560px;
  }

  .sm\:max-w-2xl {
    max-width: 42rem;
  }

  .sm\:max-w-lg {
    max-width: 32rem;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:max-w-xl {
    max-width: 36rem;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:rounded-lg {
    border-radius: 0.5rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:pt-0 {
    padding-top: 0px;
  }

  .sm\:pt-5 {
    padding-top: 1.25rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 768px) {

  .md\:row-span-3 {
    grid-row: span 3 / span 3;
  }

  .md\:hidden {
    display: none;
  }
}
@media (min-width: 1024px) {

  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-0 {
    top: 0px;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-16 {
    height: 4rem;
  }

  .lg\:h-screen {
    height: 100vh;
  }

  .lg\:max-w-7xl {
    max-width: 80rem;
  }

  .lg\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:pb-10 {
    padding-bottom: 2.5rem;
  }

  .lg\:pt-0 {
    padding-top: 0px;
  }

  .lg\:text-\[\#FF2D20\] {
    --tw-text-opacity: 1;
    color: rgb(255 45 32 / var(--tw-text-opacity, 1));
  }

  .lg\:shadow-\[1px_0_0_rgba\(150\2c 110\2c 60\2c 0\.12\)\] {
    --tw-shadow: 1px 0 0 rgba(150,110,60,0.12);
    --tw-shadow-colored: 1px 0 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
@media (min-width: 1536px) {

  .\32xl\:flex {
    display: flex;
  }
}
.ltr\:origin-top-left:where([dir="ltr"], [dir="ltr"] *) {
  transform-origin: top left;
}
.ltr\:origin-top-right:where([dir="ltr"], [dir="ltr"] *) {
  transform-origin: top right;
}
.rtl\:origin-top-left:where([dir="rtl"], [dir="rtl"] *) {
  transform-origin: top left;
}
.rtl\:origin-top-right:where([dir="rtl"], [dir="rtl"] *) {
  transform-origin: top right;
}
.rtl\:flex-row-reverse:where([dir="rtl"], [dir="rtl"] *) {
  flex-direction: row-reverse;
}
@media (prefers-color-scheme: dark) {

  .dark\:block {
    display: block;
  }

  .dark\:hidden {
    display: none;
  }

  .dark\:divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(255 255 255 / 0.1);
  }

  .dark\:border-amber-900 {
    --tw-border-opacity: 1;
    border-color: rgb(120 53 15 / var(--tw-border-opacity, 1));
  }

  .dark\:border-gray-600 {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  }

  .dark\:border-stone-700 {
    --tw-border-opacity: 1;
    border-color: rgb(68 64 60 / var(--tw-border-opacity, 1));
  }

  .dark\:border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
  }

  .dark\:bg-amber-950\/40 {
    background-color: rgb(69 26 3 / 0.4);
  }

  .dark\:bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-stone-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
  }

  .dark\:bg-zinc-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
  }

  .dark\:via-zinc-900 {
    --tw-gradient-to: rgb(24 24 27 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to);
  }

  .dark\:to-zinc-900 {
    --tw-gradient-to: #18181b var(--tw-gradient-to-position);
  }

  .dark\:text-amber-200 {
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity, 1));
  }

  .dark\:text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  }

  .dark\:text-stone-200 {
    --tw-text-opacity: 1;
    color: rgb(231 229 228 / var(--tw-text-opacity, 1));
  }

  .dark\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .dark\:text-white\/50 {
    color: rgb(255 255 255 / 0.5);
  }

  .dark\:text-white\/70 {
    color: rgb(255 255 255 / 0.7);
  }

  .dark\:ring-zinc-800 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(39 39 42 / var(--tw-ring-opacity, 1));
  }

  .dark\:hover\:bg-gray-900:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-stone-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:text-gray-200:hover {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-gray-300:hover {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-white\/70:hover {
    color: rgb(255 255 255 / 0.7);
  }

  .dark\:hover\:text-white\/80:hover {
    color: rgb(255 255 255 / 0.8);
  }

  .dark\:hover\:ring-zinc-700:hover {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(63 63 70 / var(--tw-ring-opacity, 1));
  }

  .dark\:focus\:border-blue-700:focus {
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
  }

  .dark\:focus\:border-blue-800:focus {
    --tw-border-opacity: 1;
    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
  }

  .dark\:focus-visible\:ring-\[\#FF2D20\]:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 45 32 / var(--tw-ring-opacity, 1));
  }

  .dark\:focus-visible\:ring-white:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
  }

  .dark\:active\:bg-gray-700:active {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }

  .dark\:active\:text-gray-300:active {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }
}
@media print {

  .print\:hidden {
    display: none;
  }
}