.chapter__article, .reader-settings, .dialog-modal {
  --fg-100: hsl(
    calc(222deg + var(--hue-rotate))
      max(calc(40% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(93% * var(--font-lightness, 1)), 100%)
  );
  --fg-200: hsl(
    calc(222deg + var(--hue-rotate))
      max(calc(26% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(89% * var(--font-lightness, 1)), 100%)
  );
  --fg-300: hsl(
    calc(224deg + var(--hue-rotate))
      max(calc(20% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(85% * var(--font-lightness, 1)), 100%)
  );
  --fg-400: hsl(
    calc(222deg + var(--hue-rotate))
      max(calc(18% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(80.5% * var(--font-lightness, 1)), 100%)
  );
  --fg-500: hsl(
    calc(222deg + var(--hue-rotate))
      max(calc(18% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(77% * var(--font-lightness, 1)), 100%)
  );
  --fg-600: hsl(
    calc(224deg + var(--hue-rotate))
      max(calc(18% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(71% * var(--font-lightness, 1)), 100%)
  );
  --fg-700: hsl(
    calc(224deg + var(--hue-rotate))
      max(calc(16% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(65% * var(--font-lightness, 1)), 100%)
  );
  --fg-800: hsl(
    calc(222deg + var(--hue-rotate))
      max(calc(12% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(61% * var(--font-lightness, 1)), 100%)
  );
  --fg-900: hsl(
    calc(222deg + var(--hue-rotate))
      max(calc(11% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(54% * var(--font-lightness, 1)), 100%)
  );
  --fg-950: hsl(
    calc(222deg + var(--hue-rotate))
      max(calc(9% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(49% * var(--font-lightness, 1)), 100%)
  );
  --fg-tinted: hsl(
    calc(224deg + var(--hue-rotate))
      max(calc(22% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(76% * var(--font-lightness, 1)), 100%)
  );
  --fg-inverted: hsl(
    calc(222deg + var(--hue-rotate))
      max(calc(20% * (var(--font-saturation) + var(--saturation) - 1)), 0%)
      clamp(0%, calc(5% * var(--font-lightness, 1)), 100%)
  );
  --theme-color-base: 219 15 17;
  --body-bg-color: var(--bg-900);
  --site-bg-color: var(--bg-800);
  --fullscreen-background: var(--page-bg-color);
  --dark-shade-rgb: 0 0 0;
  --read-ribbon-background: var(--bg-50);
  --read-ribbon-color: var(--fg-inverted);
  --read-ribbon-box-shadow: 0 0 2px rgb(0 0 0 / 30%);
  --code-background: rgb(var(--dark-shade-rgb) / 25%);
  --code-background-inline: rgb(var(--dark-shade-rgb) / 25%);
  --code-color: var(--fg-700);
  --spoiler-background: var(--bg-100);
  --spoiler-color-visible: var(--fg-inverted);
  --ins-background: var(--green-400);
  --ins-color: var(--fg-inverted);
  --del-background: var(--red-400);
  --del-color: var(--fg-inverted);
  --caption-overlay-background: linear-gradient(
    to top,
    hsla(0, 0%, 0%, 0.5) 0%,
    hsla(0, 0%, 0%, 0.369) 19%,
    hsla(0, 0%, 0%, 0.2705) 34%,
    hsla(0, 0%, 0%, 0.191) 47%,
    hsla(0, 0%, 0%, 0.139) 56.5%,
    hsla(0, 0%, 0%, 0.097) 65%,
    hsla(0, 0%, 0%, 0.063) 73%,
    hsla(0, 0%, 0%, 0.0375) 80.2%,
    hsla(0, 0%, 0%, 0.021) 86.1%,
    hsla(0, 0%, 0%, 0.0105) 91%,
    hsla(0, 0%, 0%, 0.004) 95.2%,
    hsla(0, 0%, 0%, 0.001) 98.2%,
    hsla(0, 0%, 0%, 0) 100%
  );
  --caption-overlay-color: #fff;
  --caption-padding: 1.75rem 0.5rem 0.5rem;
  --progress-bar-background: var(--navigation-background);
  --progress-bar-color: var(--bg-200);
  --skeleton-shape-color: var(--bg-300);
  --skeleton-cutout-color: var(--page-bg-color);
  --embed-background: var(--disabled-pattern);
  --embed-box-shadow: 0 0 1px rgb(var(--dark-shade-rgb) / 70%);
  --table-border-color: var(--fg-950);
  --table-border-color-striped: var(--fg-950);
  --table-background-striped: rgb(var(--dark-shade-rgb) / 15%);
  --calendar-th-background: var(--bg-800);
  --calendar-border-color: var(--bg-800);
  --calendar-color: var(--fg-700);
  --paragraph-spacing: 1.5em;
  --blockquote-background: rgb(var(--dark-shade-rgb) / 15%);
  --placeholder-background: var(--bg-900);
  --kbd-background: rgb(255 255 255 / 10%);
  --infobox-background: rgb(var(--dark-shade-rgb) / 17%);
  --text-shadow: -1px -1px 1px rgb(0 0 0 / 12%);
  --checkmark-checked: var(--fg-600);
  --checkmark-not-checked: var(--bg-900);
  --tax-cloud-current: var(--primary-500);
  --disabled-pattern: rgb(var(--dark-shade-rgb) / 8%)
    repeating-linear-gradient(
      -45deg,
      rgb(var(--dark-shade-rgb) / 8%),
      rgb(var(--dark-shade-rgb) / 8%) 2px,
      transparent 2px,
      transparent 5px
    );
  --strong-filter: brightness(1.05);
  --invert-filter: invert(0);
  --splide-arrow: var(--bg-400);
  --splide-arrow-hover: var(--bg-100);
  --splide-arrow-active: var(--bg-100);
  --splide-pagination: var(--bg-400);
  --splide-pagination-hover: var(--bg-300);
  --splide-pagination-active: var(--bg-100);
  --litrpg-background: var(--bg-50);
  --litrpg-color: var(--fg-inverted);
  --litrpg-ins: var(--green-600);
  --litrpg-del: var(--red-600);
  --litrpg-polygon: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
  --litrpg-drop-shadow: var(--drop-shadow-m);
  --content-li-background: var(--content-li-background-gradient);
  --content-li-background-full: hsl(var(--bg-950-free) / 10%);
  --content-li-background-gradient: linear-gradient(
    to left,
    hsl(var(--bg-950-free) / 10%) 0%,
    hsl(var(--bg-950-free) / 10%) 55%,
    transparent 90%
  );
  --content-li-hr-border: 1.5px solid
    var(--hr-border-color, var(--layout-lineart-color));
  --current-content-li-background: rgb(0 0 0 / 25%);
  --primary-400: hsl(46deg 87% 75%);
  --primary-500: hsl(44deg 86% 70%);
  --primary-600: hsl(34deg 82% 70%);
  --green-400: #86a35f;
  --green-500: #78994d;
  --green-600: #6c8a45;
  --red-400: #f26666;
  --red-500: #f15555;
  --red-600: #d94d4d;
  --bg-50-free: calc(222deg + var(--hue-rotate)) calc(12% * var(--saturation))
    clamp(40%, 80% * var(--darken), 90%);
  --bg-100-free: calc(222deg + var(--hue-rotate)) calc(12% * var(--saturation))
    clamp(34%, 68% * var(--darken), 84%);
  --bg-200-free: calc(222deg + var(--hue-rotate)) calc(12% * var(--saturation))
    clamp(27%, 54% * var(--darken), 77%);
  --bg-300-free: calc(222deg + var(--hue-rotate)) calc(12% * var(--saturation))
    clamp(19%, 38% * var(--darken), 69%);
  --bg-400-free: calc(222deg + var(--hue-rotate)) calc(13% * var(--saturation))
    clamp(15.5%, 31% * var(--darken), 65.5%);
  --bg-500-free: calc(222deg + var(--hue-rotate)) calc(13% * var(--saturation))
    clamp(13.25%, 26.5% * var(--darken), 63.25%);
  --bg-600-free: calc(222deg + var(--hue-rotate)) calc(14% * var(--saturation))
    clamp(11.75%, 23.5% * var(--darken), 61.75%);
  --bg-700-free: calc(221deg + var(--hue-rotate)) calc(16% * var(--saturation))
    clamp(10%, 20% * var(--darken), 60%);
  --bg-800-free: calc(219deg + var(--hue-rotate)) calc(15% * var(--saturation))
    clamp(8.5%, 17% * var(--darken), 58.5%);
  --bg-900-free: calc(222deg + var(--hue-rotate)) calc(25% * var(--saturation))
    clamp(4%, 8% * var(--darken), 54%);
  --bg-950-free: calc(222deg + var(--hue-rotate)) calc(60% * var(--saturation))
    clamp(2%, 4% * var(--darken), 52%);
  --bg-50: hsl(var(--bg-50-free));
  --bg-100: hsl(var(--bg-100-free));
  --bg-200: hsl(var(--bg-200-free));
  --bg-300: hsl(var(--bg-300-free));
  --bg-400: hsl(var(--bg-400-free));
  --bg-500: hsl(var(--bg-500-free));
  --bg-600: hsl(var(--bg-600-free));
  --bg-700: hsl(var(--bg-700-free));
  --bg-800: hsl(var(--bg-800-free));
  --bg-900: hsl(var(--bg-900-free));
  --bg-950: hsl(var(--bg-950-free));
  --layout-spacing-vertical: clamp(24px, 5vw - 0px, 48px);
  --layout-spacing-horizontal: clamp(20px, 12.5% - 40px, 80px);
  --layout-spacing-horizontal-small: clamp(10px, 12.5% - 30px, 20px);
  --layout-border-radius-large: 4px;
  --layout-border-radius-small: 2px;
  --layout-link-color: inherit;
  --layout-link-color-hover: inherit;
  --layout-lineart-color: var(--bg-300);
  --layout-hr-border: 2px solid var(--hr-color);
  --layout-hr-border-dashed: 2px dashed var(--hr-color);
  --layout-widget-spacing: 1.75rem;
  --layout-widget-spacing-heading-multiplier: 0.5;
  --block-spacing-20: 0.5rem;
  --block-spacing-30: 1rem;
  --block-spacing-40: 1.5rem;
  --block-spacing-50: 2rem;
  --block-spacing-60: 4rem;
  --block-spacing-70: 6rem;
  --block-spacing-80: 8rem;
  --hr-color: var(--layout-lineart-color);
  --hr-size: 2px;
  --hr-spacing: max(2.5rem, calc(var(--paragraph-spacing) + 1rem));
  --hr-dots-color: var(--bg-200);
  --minimal-page-box-shadow: 0 0 1px rgb(0 0 0 / 40%);
  --minimal-page-drop-shadow: drop-shadow(0 0 1px rgb(0 0 0 / 40%));
  --minimal-box-shadow: 0 0 1px rgb(0 0 0 / 40%);
  --minimal-drop-shadow: drop-shadow(0 0 1px rgb(0 0 0 / 40%));
  --header-image-drop-shadow: drop-shadow(0 0 2px rgb(0 0 0 / 40%));
  --page-inset-top: 3rem;
  --page-bg-color: var(--bg-700);
  --page-box-shadow: 0 0 3px rgb(0 0 0 / 20%);
  --page-drop-shadow: drop-shadow(0 1px 1.5px rgb(0 0 0 / 25%));
  --card-bg-color: var(--bg-600);
  --card-footer-bg-color: var(--bg-800);
  --card-overlay-bg-color: var(--bg-800);
  --card-content-li-background: var(--card-content-li-background-gradient);
  --card-content-li-background-full: hsl(var(--bg-950-free) / 16%);
  --card-content-li-background-gradient: linear-gradient(
    to left,
    hsl(var(--bg-950-free) / 16%) 0%,
    hsl(var(--bg-950-free) / 16%) 55%,
    transparent 90%
  );
  --card-label-color: var(--fg-inverted);
  --card-label-background: var(--fg-500);
  --card-unavailable-filter: grayscale(0.5) blur(1.5px);
  --card-frame-border-color: var(--bg-800);
  --navigation-background: var(--bg-900);
  --navigation-background-start-opacity: 0;
  --navigation-background-end-opacity: 1;
  --navigation-submenu-background: var(--bg-400);
  --navigation-item-background-hover: var(--bg-400);
  --navigation-subitem-background-hover: var(--bg-300);
  --navigation-color: var(--fg-400);
  --navigation-color-hover: var(--fg-300);
  --navigation-font-size: clamp(14px, 0.5089058524vw + 12.0916030534px, 16px);
  --navigation-subitem-divider: 1px solid var(--bg-700);
  --navigation-submenu-box-shadow: 0 4px 3px -2px rgb(0 0 0 / 30%);
  --navigation-drop-shadow: drop-shadow(0 3px 2px rgb(0 0 0 / 20%));
  --alert-highlight-color: var(--primary-500);
  --new-alert-icon-text-color: var(--fg-inverted);
  --tab-background: var(--bg-500);
  --tab-background-hover: var(--bg-400);
  --tab-background-active: var(--bg-100);
  --tab-color: var(--fg-600);
  --tab-color-hover: var(--fg-500);
  --tab-color-active: var(--fg-inverted);
  --tab-text-shadow: 0 0 1px rgb(0 0 0 / 70%);
  --filter-reel-background: hsl(var(--bg-950-free) / 16%);
  --filter-reel-background-active: var(--bg-100);
  --filter-reel-color: var(--fg-600);
  --filter-reel-color-hover: var(--fg-500);
  --filter-reel-color-active: var(--fg-inverted);
  --filter-reel-text-shadow: 0 0 1px rgb(0 0 0 / 70%);
  --filter-reel-lightbox-hover-shadow: linear-gradient(
    to bottom,
    rgb(0 0 0 / 25%) 0%,
    transparent 100%
  );
  --filter-reel-filter-hover-shadow: linear-gradient(
    to top,
    rgb(0 0 0 / 15%) 0%,
    transparent 100%
  );
  --pagination-background: var(--bg-500);
  --pagination-background-hover: var(--bg-400);
  --pagination-background-current: var(--bg-200);
  --pagination-color: var(--fg-600);
  --pagination-color-hover: var(--fg-500);
  --pagination-color-current: var(--fg-inverted);
  --fg-isolated-footer: var(--fg-700);
  --fg-isolated-footer-hover: var(--fg-300);
  --bg-isolated-footer: var(--bg-900);
  --modal-overlay: rgb(0 0 0 / 35%);
  --modal-bg-color: var(--bg-600);
  --box-shadow-border: 0 0 0 1.5px
    var(--card-frame-border-color, rgb(0 0 0 / 60%));
  --box-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 9%), 0 -1px 1px 0 rgb(0 0 0 / 3%);
  --box-shadow-s: 0 1px 3px 0 rgb(0 0 0 / 11%), 0 1px 2px -1px rgb(0 0 0 / 10%);
  --box-shadow: 0 3px 6px -1px rgb(0 0 0 / 12%),
    0 -1px 4px -2px rgb(0 0 0 / 15%);
  --box-shadow-m: rgb(0 0 0 / 14%) 0 2px 5px 0, rgb(0 0 0 / 5%) 0 1px 1px 0;
  --box-shadow-l: rgb(0 0 0 / 10%) 0 5px 12px -2px,
    rgb(0 0 0 / 15%) 0 1px 7px -3px;
  --box-shadow-xl: 0 3px 8px -1px rgb(0 0 0 / 9%),
    0 3px 12px -1px rgb(0 0 0 / 17%);
  --drop-shadow-border: drop-shadow(
      0 -1.5px 0 var(--card-frame-border-color, rgb(0 0 0/70%))
    )
    drop-shadow(0 1.5px 0 var(--card-frame-border-color, rgb(0 0 0/70%)))
    drop-shadow(1.5px 0 0 var(--card-frame-border-color, rgb(0 0 0/70%)))
    drop-shadow(-1.5px 0 0 var(--card-frame-border-color, rgb(0 0 0/70%)));
  --drop-shadow-xs: drop-shadow(0 1px 1px rgb(0 0 0 / 6%))
    drop-shadow(0 0 1px rgb(0 0 0 / 6%));
  --drop-shadow-s: drop-shadow(0 1px 2px rgb(0 0 0 / 7%))
    drop-shadow(0 1px 1px rgb(0 0 0 / 7%));
  --drop-shadow: drop-shadow(0 2px 2px rgb(0 0 0 / 10%))
    drop-shadow(0 -1px 5px rgb(0 0 0 / 4%));
  --drop-shadow-m: drop-shadow(0 2px 3px rgb(0 0 0 / 10%))
    drop-shadow(0 1px 1px rgb(0 0 0 / 10%));
  --drop-shadow-l: drop-shadow(0 4px 5px rgb(0 0 0 / 5%))
    drop-shadow(0 3px 5px rgb(0 0 0 / 7%));
  --drop-shadow-xl: drop-shadow(0 3px 5px rgb(0 0 0 / 11%))
    drop-shadow(0 3px 6px rgb(0 0 0 / 11%));
  --mobile-menu-background: var(--bg-700);
  --mobile-menu-advanced-background: color-mix(
    in srgb,
    var(--bg-900),
    white 3%
  );
  --mobile-menu-box-shadow: 2px 0 3px rgb(0 0 0 / 30%);
  --mobile-advanced-menu-site-box-shadow: inset -5px 0 3px -4px rgb(0 0 0 / 30%);
  --mobile-menu-overlay: rgb(0 0 0 / 50%);
  --mobile-menu-bookmark-progress-background: rgb(0 0 0 / 40%);
  --font-smoothing-webkit: subpixel-antialiased;
  --font-smoothing-moz: auto;
  --font-weight-normal: 300;
  --font-weight-strong: 600;
  --font-weight-semi-strong: 400;
  --font-weight-medium: 400;
  --font-weight-heading: 600;
  --font-weight-badge: 600;
  --font-weight-post-meta: 300;
  --font-weight-read-ribbon: 600;
  --font-weight-card-label: 600;
  --font-weight-navigation: 400;
  --font-line-height-base: 1.7;
  --font-letter-spacing-base: 0.017em;
  --fs-xxxs: 0.625rem;
  --fs-xxs: 0.75rem;
  --fs-xs: 0.875rem;
  --fs-s: 1rem;
  --fs-m: 1.125rem;
  --fs-ml: 1.25rem;
  --fs-l: 1.5rem;
  --fs-xl: 1.75rem;
  --fs-xxl: 2.125rem;
  --fs-xxxl: 2.5rem;
  --fs-xxxxl: 3rem;
  --fs-em-xxxs: 0.625em;
  --fs-em-xxs: 0.75em;
  --fs-em-xs: 0.875em;
  --fs-em-s: 1em;
  --fs-em-m: 1.125em;
  --fs-em-ml: 1.25em;
  --fs-em-l: 1.5em;
  --fs-em-xl: 1.75em;
  --fs-em-xxl: 2.125em;
  --fs-em-xxxl: 2.5em;
  --fs-em-xxxxl: 3em;
  --fs-dxxs: clamp(11px, 0.5434782609vw + 8.8260869565px, 13px);
  --fs-dxs: clamp(12px, 0.2717391304vw + 10.9130434783px, 13px);
  --fs-ds: clamp(13px, 0.2717391304vw + 11.9130434783px, 14px);
  --fs-widget: clamp(13.5px, 3.125cqw, 15px);
  --block-fs-h1: clamp(1.5em, 1.0714285714vw + 20.5714285714px, 1.8em);
  --block-fs-h2: clamp(1.35em, 0.8928571429vw + 18.7428571429px, 1.6em);
  --block-fs-h3: clamp(1.2em, 0.7142857143vw + 16.9142857143px, 1.4em);
  --block-fs-h4: clamp(1.1em, 0.3571428571vw + 16.4571428571px, 1.2em);
  --block-fs-h5: clamp(1.05em, 0.2678571429vw + 15.9428571429px, 1.125em);
  --block-fs-h6: var(var(--fs-s));
  --heading-link-color: var(--fg-400);
  --heading-link-color-hover: var(--fg-200);
  --inline-link-color: var(--primary-500);
  --inline-link-color-hover: var(--primary-400);
  --inline-link-color-visited: var(--primary-600);
  --inline-link-text-decoration: underline transparent solid 0.05em;
  --inline-link-text-decoration-hover: underline currentColor solid 0.05em;
  --widget-link-color: inherit;
  --widget-link-color-hover: var(--fg-200);
  --footnote-link-color: var(--primary-500);
  --footnote-link-color-hover: var(--primary-600);
  --bookmark-color-alpha: #7d8497;
  --bookmark-color-beta: #e06552;
  --bookmark-color-gamma: #77bfa3;
  --bookmark-color-delta: #3c91e6;
  --bookmark-line: var(--primary-500);
  --bookmark-button-color-active-alpha: var(--fg-inverted);
  --bookmark-button-color-active-beta: var(--fg-inverted);
  --bookmark-button-color-active-gamma: var(--fg-inverted);
  --bookmark-button-color-active-delta: var(--fg-inverted);
  --bookmark-progress-opacity: 0.15;
  --bookmark-progress-mobile-opacity: 0.75;
  --button-font-weight: 500;
  --button-box-shadow: none;
  --button-color-active: var(--fg-inverted);
  --button-background-active: var(--bg-100);
  --button-border-active: 1px solid transparent;
  --button-barberpole: var(--bg-500);
  --button-oauth-connected: var(--button-background-active);
  --button-primary-background: var(--bg-400);
  --button-primary-background-hover: var(--bg-300);
  --button-primary-background-disabled: var(--bg-500);
  --button-primary-color: var(--fg-400);
  --button-primary-color-hover: var(--fg-300);
  --button-primary-color-disabled: var(--fg-700);
  --button-primary-filter-disabled: saturate(0.7) opacity(0.3) brightness(1.4);
  --button-secondary-background: transparent;
  --button-secondary-background-hover: var(--bg-500);
  --button-secondary-background-disabled: repeating-linear-gradient(
    -45deg,
    rgb(255 255 255 / 6%),
    rgb(255 255 255 / 6%) 2px,
    transparent 2px,
    transparent 4px
  );
  --button-secondary-color: var(--fg-600);
  --button-secondary-color-hover: var(--fg-400);
  --button-secondary-color-disabled: var(--fg-800);
  --button-secondary-border: 1px solid var(--bg-300);
  --button-secondary-border-hover: 1px solid var(--bg-200);
  --button-secondary-border-disabled: 1px solid var(--bg-300);
  --button-warning-background: var(--red-500);
  --button-warning-background-hover: var(--red-600);
  --button-warning-color: #fff;
  --button-warning-color-hover: #fff;
  --button-suggestion-color: var(--fg-inverted);
  --button-suggestion-color-hover: var(--fg-inverted);
  --button-suggestion-background: var(--bg-100);
  --button-suggestion-background-hover: var(--bg-50);
  --button-quick-background: var(--bg-500);
  --button-quick-background-hover: var(--bg-300);
  --button-quick-color: var(--fg-600);
  --button-quick-color-hover: var(--fg-400);
  --post-password-background: var(--input-background);
  --post-password-cutout: var(--bg-700);
  --post-password-submit-color: var(--bg-500);
  --input-placeholder-color: var(--fg-950);
  --input-background: rgb(var(--dark-shade-rgb) / 32%);
  --input-background-disabled: rgb(var(--dark-shade-rgb) / 15%)
    repeating-linear-gradient(
      -45deg,
      rgb(var(--dark-shade-rgb) / 15%),
      rgb(var(--dark-shade-rgb) / 15%) 2px,
      transparent 2px,
      transparent 5px
    );
  --input-color: var(--fg-500);
  --input-color-disabled: var(--fg-800);
  --input-fill: var(--fg-700);
  --input-range-thumb: var(--fg-700);
  --input-range-thumb-hover: var(--fg-300);
  --input-token-background: var(--bg-500);
  --input-token-color: var(--fg-400);
  --popup-menu-background: var(--bg-50);
  --popup-menu-background-hover: var(--bg-100);
  --popup-menu-color: var(--fg-inverted);
  --popup-menu-color-hover: var(--fg-inverted);
  --micro-menu-background: var(--bg-900);
  --micro-menu-color: var(--fg-400);
  --micro-menu-color-hover: var(--fg-200);
  --micro-menu-box-shadow: var(--box-shadow-l);
  --tooltip-background: var(--bg-50);
  --tooltip-text: var(--fg-inverted);
  --notice-default-background: var(--bg-50);
  --notice-default-color: var(--fg-inverted);
  --notice-warning-background: var(--red-500);
  --notice-warning-color: #fff;
  --notice-success-background: var(--green-500);
  --notice-success-color: #fff;
  --notice-box-shadow: var(--box-shadow-l);
  --comment-background: rgb(var(--dark-shade-rgb) / 15%);
  --comment-background-private: var(--comment-background)
    repeating-linear-gradient(
      -45deg,
      rgb(0 0 0 / 10%),
      rgb(0 0 0 / 10%) 3px,
      transparent 3px,
      transparent 6px
    );
  --comment-background-deleted: var(--comment-background)
    repeating-linear-gradient(
      -45deg,
      rgb(255 255 255 / 3%),
      rgb(255 255 255 / 3%) 3px,
      transparent 3px,
      transparent 6px
    );
  --comment-background-offensive: var(--comment-background)
    repeating-linear-gradient(
      45deg,
      rgb(255 255 255 / 3%),
      rgb(255 255 255 / 3%) 3px,
      transparent 3px,
      transparent 6px
    );
  --comment-background-sticky: rgb(var(--dark-shade-rgb) / 20%);
  --comment-border-sticky: 1px dashed rgb(255 255 255 / 20%);
  --load-comments-background: rgb(var(--dark-shade-rgb) / 15%);
  --load-comments-background-hover: rgb(var(--dark-shade-rgb) / 25%);
  --load-comments-color: var(--fg-700);
  --load-comments-color-hover: var(--fg-600);
  --transition-duration: 0.2s;
  --text-selection-background: rgb(255 255 255 / 20%);
  --text-selection-color: var(--fg-100);
  --scrollbar-background: rgb(var(--dark-shade-rgb) / 20%);
  --scrollbar-thumb: var(--fg-950);
  --scrollbar-box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
  --badge-generic-color: var(--fg-400);
  --badge-generic-background: #505062;
  --badge-supporter-color: var(--fg-100);
  --badge-supporter-background: #e4445e;
  --badge-moderator-color: var(--fg-200);
  --badge-moderator-background: #4d628f;
  --badge-admin-color: var(--fg-100);
  --badge-admin-background: #79518d;
  --badge-author-color: var(--fg-200);
  --badge-author-background: #b37819;
  --badge-override-color: var(--fg-300);
  --badge-override-background: #5a5a7f;
  --site-width: 960px;
  --lightness-offset: 0;
  --darken: (1 + var(--lightness-offset));
  --saturation-offset: 0;
  --saturation: (1 + var(--saturation-offset));
  --font-saturation-offset: 0;
  --font-saturation: (1 + var(--font-saturation-offset));
  --font-lightness-offset: 0;
  --font-lightness: (1 + var(--font-lightness-offset));
  --hue-offset: 0deg;
  --hue-rotate: 0deg + var(--hue-offset);
  --sidebar-width: 256px;
  --sidebar-gap: 3rem;
  --sidebar-mobile-divider: 2px solid var(--layout-lineart-color);
  --sidebar-mobile-divider-margin: 1rem var(--layout-spacing-horizontal-small);
  --ff-system: "-apple-system", "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu,
    Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-base: "Open Sans", var(--ff-system);
  --ff-heading: "Open Sans", var(--ff-base);
  --ff-note: "Lato", var(--ff-base);
  --ff-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
    "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
    monospace;
  --ff-input: var(--ff-base);
  --ff-card-title: var(--ff-heading);
  --ff-site-title: var(--ff-heading);
  --ff-story-title: var(--ff-heading);
  --ff-chapter-title: var(--ff-heading);
  --ff-chapter-list-title: var(--ff-base);
  --ff-card-body: var(--ff-note);
  --ff-card-list-link: inherit;
  --ff-nav-item: var(--ff-base);
  --header-image-height: clamp(210px, 42.1875vw + 75px, 480px);
  --header-height: calc(
    clamp(190px, 29.6875vw + 95px, 380px) - var(--page-inset-top, 0px)
  );
  --header-logo-height: 210px;
  --site-title-font-size: clamp(32px, 4.375vw + 18px, 60px);
  --site-title-tagline-font-size: clamp(13px, 0.78125vw + 10.5px, 18px);
  --site-title-heading-color: var(--fg-400);
  --site-title-tagline-color: var(--fg-400);
  --site-title-text-shadow: 0 0 4px rgb(0 0 0 / 80%), 0 0 2px rgb(0 0 0 / 60%);
  --data-image-2x2-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAAAAACMmsGiAAAAC0lEQVQI12NgwAQAABQAAeWGsEoAAAAASUVORK5CYII=");
  --navigation-height: 48px;
  --site-width:960px;
  --main-offset:0px;
  --sidebar-width:256px;
  --sidebar-gap:48px;
  --hue-offset:0deg;
  --saturation-offset:0;
  --lightness-offset:0;
  --font-saturation-offset:0;
  --font-lightness-offset:0;
  --header-image-height:clamp(210px,42.1875vw + (75px),480px);
  --header-height:calc(clamp(190px,29.6875vw + (95px),380px) - var(--page-inset-top,0px));
  --header-logo-height:210px;
  --header-logo-min-height:210;
  --header-logo-max-height:210;
  --site-title-font-size:clamp(32px,4.375vw + (18px),60px);
  --site-title-tagline-font-size:clamp(13px,0.78125vw + (10.5px),18px);
  --grid-columns-min:308px;
  --grid-columns-row-gap-multiplier:1;
  --grid-columns-col-gap-multiplier:1;
  --card-font-size-min-mod:0px;
  --card-font-size-grow-mod:0px;
  --card-font-size-max-mod:0px;
  --ff-base:'Open Sans',var(--ff-system);
  --ff-note:'Lato',var(--ff-base);
  --ff-heading:'Open Sans',var(--ff-base);
  --ff-site-title:var(--ff-heading);
  --ff-story-title:var(--ff-heading);
  --ff-chapter-title:var(--ff-heading);
  --ff-chapter-list-title:var(--ff-base);
  --ff-card-title:var(--ff-heading);
  --ff-card-body:var(--ff-note);
  --ff-card-list-link:var(--ff-note);
  --ff-nav-item:var(--ff-base);
  --card-cover-width-mod:1;
  --card-box-shadow:var(--box-shadow-m);
  --card-drop-shadow:var(--drop-shadow-m);
  --story-cover-box-shadow:var(--box-shadow-xl);
  --recommendation-cover-box-shadow:var(--box-shadow-xl);
  --floating-cover-image-width:clamp(56px,32.1428571429vw + (-46.8571428571px),200px);
  --in-content-cover-image-width:clamp(100px,25.4452926209vw + (4.58015267176px),200px);
  --chapter-group-background-after:'';
  --site-title-heading-color:hsl(calc(222.86deg + var(--hue-rotate)) max(calc(38.89% * (var(--font-saturation) + var(--saturation) - 1)),0%) clamp(0%,calc(92.94% * var(--font-lightness,1)),100%));
  --site-title-tagline-color:hsl(calc(222.86deg + var(--hue-rotate)) max(calc(38.89% * (var(--font-saturation) + var(--saturation) - 1)),0%) clamp(0%,calc(92.94% * var(--font-lightness,1)),100%))
  --header-background-color:transparent
}
/* Áp dụng vào khu vực đọc */
#chapter-content{
  max-width: calc(var(--site-width, 960) * 1px);
  margin-inline: auto;
  font-size: calc(var(--font-size,100) * 1%);
  letter-spacing: calc(var(--letter-spacing,0) * 1em);
  line-height: var(--line-height,1.7);
  color: var(--font-color, gray);
  font-family: var(--font-family);
  font-weight: var(--font-weight, initial);
}

/* Khoảng cách đoạn */
#chapter-content p{ margin: calc(var(--paragraph-spacing,1.5) * 1em) 0; }
#chapter-content.indent-enabled p {
  text-indent: 2em; /* hoặc giá trị bạn muốn */
}
#chapter-content.justify-enabled {
  text-align: justify;
}
.chapter__article .button,
.chapter__article button[type="submit"]:where(:not(._inline)) {
  --this-padding-horizontal: clamp(6px, 1.9047619048vw - 1.1428571429px, 8px);
  --this-height: clamp(26px, 10.9090909091vw - 8.9090909091px, 32px);
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  gap: 0 6px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: var(--button-primary-background);
  color: var(--button-primary-color);
  font: var(--button-font-weight) 12px/1 var(--ff-base);
  letter-spacing: clamp(0.02em,0.3047619048vw - 0.8228571429px,0.04em);
  white-space: nowrap;
  text-shadow: none;
  border: var(--button-primary-border,1px solid transparent);
  border-radius: var(--layout-border-radius-small);
  padding: 0 var(--this-padding-horizontal);
  height: var(--this-height);
  width: fit-content;
  min-width: clamp(26px,10.9090909091vw - 8.9090909091px,32px);
  box-shadow: var(--button-box-shadow);
  outline-offset: 3px;
  transition: color,background,border-color,opacity;
    transition-duration: 0s, 0s, 0s, 0s;
  transition-duration: var(--transition-duration);
}
.chapter__article .button._secondary {
  background:var(--button-secondary-background);
  color:var(--button-secondary-color);
  border:var(--button-secondary-border)
}
.chapter__article .button._secondary:not(.current,
.ajax-in-progress,
[disabled]):hover {
  background:var(--button-secondary-background-hover);
  color:var(--button-secondary-color-hover);
  border:var(--button-secondary-border-hover)
}
.chapter__article .button._secondary :is(i,
.icon) {
  opacity:.95
}
.chapter__article {
  position: relative;
  z-index: 1;
}
.chapter__article .chapter__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  container-type: inline-size;
  contain: layout style;
}

.chapter__article .chapter__actions-left {
  flex-basis: 19%;
}

.chapter__article .chapter__actions-center {
  flex-basis: 56%;
  justify-content: center;
  column-gap: 6px;
}

.chapter__article .chapter__actions-right {
  flex-basis: 19%;
  justify-content: flex-end;
}

.chapter__article .chapter__actions-container {
  display: flex;
  gap: 3px;
}

.chapter__article .chapter__headline {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.chapter__article .chapter__headline > a {
  color: var(--fg-700);
  font-size: var(--fs-s);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.chapter__article .chapter__title {
  font-family: var(--ff-chapter-title);
  font-size: clamp(1.25em, 1.25vw + 16px, 1.75em);
  line-height: 1.3;
  margin-top: 0.25rem;
}

.chapter__article .chapter__author {
  display: block;
  color: var(--fg-700);
  font-size: var(--fs-xs);
  margin-top: 0.5rem;
}

.chapter__article .chapter__content {
  min-height: 400px;
}

.chapter__article .chapter__content p {
  scroll-margin-top: 64px;
  margin-bottom: 1.5em;
}

.chapter__article .chapter__content p:not(:first-of-type):not(.has-text-align-center):not(.has-text-align-left):not(.has-text-align-right):not([align=center]):not([align=right]) {
  text-indent: 1.5rem;
}

.chapter__article .chapter__content .chapter-formatting {
  --paragraph-spacing: 1.5em;
  --text-chapter: var(--fg-tinted);
  letter-spacing: 0.01em;
}

.chapter__article .chapter__footer {
  margin-top: 3rem;
}

.chapter__article .chapter__support {
  color: var(--fg-400);
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-strong);
  text-align: center;
  padding: 1rem 0;
  margin-top: 3rem;
}

.chapter__article .chapter__support-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.chapter__article .chapter__support a {
  color: var(--fg-400);
  font-size: var(--fs-xs);
  line-height: 32px;
  padding: 0 8px;
  border-radius: var(--layout-border-radius-small);
  height: 32px;
  opacity: 0.5;
}

.chapter__article .chapter__support a:hover {
  background: var(--button-secondary-background-hover);
  opacity: 1;
}

.chapter__article .chapter__support a:focus-visible {
  opacity: 1;
}
.chapter__article .chapter__actions>:not(.chapter__actions-center)>.button:first-child {
  border-top-left-radius: var(--layout-border-radius-small);
  border-bottom-left-radius: var(--layout-border-radius-small);
}

.chapter__article .chapter__actions>:not(.chapter__actions-center)>.button:last-child {
  border-top-right-radius: var(--layout-border-radius-small);
  border-bottom-right-radius: var(--layout-border-radius-small);
}

.chapter__article .chapter__actions-right :is(i, .icon) {
  font-size: 16px;
  text-align: center;
  min-width: 6px;
}
.chapter__article .chapter__actions .tooltipped::before {
  content: attr(data-tooltip);
  pointer-events: none;
  user-select: none;
  position: absolute;
  top: -10px;
  left: 50%;
  display: block;
  background: var(--tooltip-background);
  color: var(--tooltip-text);
  font: 400 var(--fs-xxs)/1.2 var(--ff-note);
  text-align: center;
  text-shadow: none;
  white-space: normal;
  padding: 6px 8px;
  border-radius: var(--layout-border-radius-small);
  width: max-content;
  max-width: 160px;
  opacity: 0;
  transform: translate(-50%,-100%);
  transition: opacity .1s;
}
.chapter__article .chapter__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  container-type: inline-size;
  contain: layout style;
}
.chapter__article .chapter__actions-left {
  flex-basis: 19%;
}
.chapter__article .chapter__actions-center {
  flex-basis: 56%;
}
@container (max-width: 600px) {
  .chapter__article .chapter__actions-center .hide-below-tablet {
    display: none !important;
  }
}
.chapter__article .chapter__actions-right {
  flex-basis: 19%;
}
@container (min-width: 500px) {
  .chapter__article .chapter__actions-right {
    flex-basis: 25%;
  }
}
.chapter__article .chapter__actions-container {
  display: flex;
  gap: 3px;
}
.chapter__article .chapter__actions-center {
  justify-content: center;
  column-gap: 6px;
}
.chapter__article .chapter__actions-right {
  justify-content: flex-end;
}
.chapter__article .chapter__actions-right :is(i, .icon) {
  text-align: center;
  min-width: 6px;
  transform: scale(1.25);
}
.chapter__article .chapter__actions > :not(.chapter__actions-center) > .button {
  border-radius: 0;
}
.chapter__article .chapter__actions > :not(.chapter__actions-center) > .button:first-child {
  border-top-left-radius: var(--layout-border-radius-small);
  border-bottom-left-radius: var(--layout-border-radius-small);
}
.chapter__article .chapter__actions > :not(.chapter__actions-center) > .button:last-child {
  border-top-right-radius: var(--layout-border-radius-small);
  border-bottom-right-radius: var(--layout-border-radius-small);
}
.chapter__article .chapter__actions .button:is(.open-fullscreen, .close-fullscreen) {
  padding: 0;
}
@container (max-width: 499.9px) {
  .chapter__article .chapter__actions .button._navigation .on {
    display: none;
  }
}
.chapter__article .chapter__headline {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}
.chapter__article .chapter__headline > a {
  color: var(--fg-700);
  font-size: var(--fs-s);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}
.chapter__article .chapter__headline > a:hover {
  color: var(--fg-400);
}
.chapter__article .chapter__title {
  font-family: var(--ff-chapter-title);
  font-size: clamp(1.25em, 1.25vw + 16px, 1.75em);
  line-height: 1.3;
  margin-top: 0.25rem;
}
.chapter__article .chapter__author {
  display: block;
  color: var(--fg-700);
  font-size: var(--fs-xs);
  margin-top: 0.5rem;
}
.chapter__article .chapter__author a:hover {
  color: var(--fg-400);
}
.chapter__article .chapter__password-note p {
  text-indent: 0 !important;
}
@media only screen and (min-width: 768px) {
  .chapter__article .chapter__content {
    min-height: 400px;
  }
}
.chapter__article .chapter__content p {
  scroll-margin-top: 64px;
}
.chapter__article .chapter__content
  p:not(
    :first-of-type,
    .has-text-align-center,
    [class*="wp-block-"],
    [align="center"],
    [align="right"]
  ) {
  text-indent: 1.5rem;
}
.chapter__article .chapter__content
  p
  :is(
    abbr,
    kbd,
    code,
    table,
    ul,
    ol,
    form,
    del,
    ins,
    mark,
    input,
    select,
    button,
    embed,
    iframe,
    sub,
    sup,
    i,
    em,
    b,
    strong
  ) {
  text-indent: 0;
}
.chapter__article .chapter__content .chapter-formatting.no-indent p {
  text-indent: 0 !important;
}
.chapter__article .chapter__content
  .chapter-formatting.justify
  p:not(
    .has-text-align-center,
    .has-text-align-left,
    .has-text-align-right,
    [align="center"],
    [align="right"]
  ) {
  text-align: justify;
}
.chapter__article .chapter__content
  .chapter-formatting:not(.hide-sensitive)
  .sensitive-alternative,
.chapter__article .chapter__content .chapter-formatting.hide-sensitive .sensitive-content {
  display: none;
  content-visibility: hidden;
}
.chapter__article .chapter__content .chapter-formatting[style*="Garamond"] strong {
  font-weight: 700;
}
.chapter__article .chapter__footer:not(:empty) {
  margin-top: 3rem;
}
.chapter__article .chapter__support {
  color: var(--fg-400);
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-strong);
  text-align: center;
  padding: 1rem 0;
  margin-top: 3rem;
}
.chapter__article .chapter__support-message {
  text-transform: uppercase;
  opacity: 0.5;
}
.chapter__article .chapter__support-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px -8px 0;
}
.chapter__article .chapter__support-links :is(i, .icon) {
  color: var(--fg-500);
  margin-right: 2px;
}
.chapter__article .chapter__support-links .icon--kofi {
  height: 1.3em;
  transform: translateY(-1px);
}
.chapter__article .chapter__support a {
  color: var(--fg-400);
  font-size: var(--fs-xs);
  line-height: 32px;
  padding: 0 8px;
  border-radius: var(--layout-border-radius-small);
  height: 32px;
  opacity: 0.5;
}
.chapter__article .chapter__support a:hover {
  background: var(--button-secondary-background-hover);
  opacity: 1;
}
.chapter__article .chapter__support a:focus-visible {
  opacity: 1;
}
.chapter__article .chapter__support .icon {
  display: inline-block;
}
.chapter__article .infobox {
  font-size: var(--fs-xs);
}
.chapter__article .infobox:not(:first-child) {
  margin-top: 2rem;
}
.chapter__article .chapter__warning.infobox {
  color: var(--chapter-infobox-warning-color, var(--red-400));
  font-weight: var(--font-weight-medium);
}
.chapter__article .chapter__warning.infobox p:not(:last-child) {
  margin-bottom: 0.5em;
}
.chapter__article .chapter__warning.infobox summary strong {
  margin-left: 0.25em;
}
.chapter__article .chapter__warning.infobox label span {
  text-decoration: underline;
}
.chapter__article .chapter__warning.infobox label:hover {
  filter: brightness(1.25);
}
.chapter__article .chapter__warning.infobox label .off {
  display: none;
  content-visibility: hidden;
}
.chapter__article .chapter__warning.infobox label.hide-sensitive .on {
  display: none;
  content-visibility: hidden;
}
.chapter__article .chapter__warning.infobox label.hide-sensitive .off {
  display: initial;
  content-visibility: visible;
}
.chapter__article .current-bookmark {
  position: relative;
}
.chapter__article .current-bookmark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.45rem;
  display: block;
  background: var(--bookmark-line);
  height: 3px;
  width: var(--site-width);
  max-width: 100vw;
  transform: translate(-50%);
}
.chapter__article .current-bookmark[data-bookmark-color="beta"]::before,
.chapter__article .current-bookmark[data-bookmark-color="beta"] #button-set-bookmark {
  color: var(--bookmark-button-color-active-beta);
  background: var(--bookmark-color-beta);
}
.chapter__article .current-bookmark[data-bookmark-color="gamma"]::before,
.chapter__article .current-bookmark[data-bookmark-color="gamma"] #button-set-bookmark {
  color: var(--bookmark-button-color-active-gamma);
  background: var(--bookmark-color-gamma);
}
.chapter__article .current-bookmark[data-bookmark-color="delta"]::before,
.chapter__article .current-bookmark[data-bookmark-color="delta"] #button-set-bookmark {
  color: var(--bookmark-button-color-active-delta);
  background: var(--bookmark-color-delta);
}
.chapter__article .current-bookmark #button-set-bookmark {
  background: var(--button-bookmark-background-active);
  color: var(--bookmark-button-color-active-alpha);
}
.chapter__article .current-reading,
.chapter__article .selected-paragraph {
  position: relative;
}
.chapter__article .current-reading::after,
.chapter__article .selected-paragraph::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  left: 50%;
  z-index: -1;
  display: block;
  background: var(--tts-current-reading-background);
  width: 200%;
  max-width: min(100vw, var(--site-width));
  transform: translate(-50%);
}
.chapter__article .selected-paragraph::after {
  background: var(--paragraph-selection-background);
}
.chapter__article .selected-paragraph .paragraph-tools {
  display: block;
  content-visibility: visible;
}
.chapter__article .chapter-index {
  font-size: 14px;
  line-height: 21px;
}
.chapter__article .chapter-index[data-order="asc"] i.on {
  display: none;
}
.chapter__article .chapter-index[data-order="desc"] i.off {
  display: none;
}
.chapter__article .chapter-index[data-order="desc"] ul {
  flex-direction: column-reverse;
}
.chapter__article .chapter-index :is(i, .icon, .text-icon) {
  display: inline-block;
  color: currentColor;
  line-height: 1;
  text-align: center;
  min-width: 24px;
}
.chapter__article .chapter-index :is(a, a[href]) {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: currentColor;
  text-decoration: none;
}
.chapter__article .chapter-index :is(a, a[href]):hover,
.chapter__article .chapter-index :is(a, a[href]):visited {
  color: currentColor;
  text-decoration: none;
}
.chapter__article .chapter-index li {
  background: var(--chapter-index-li-background, var(--content-li-background));
  border-radius: var(--layout-border-radius-small);
}
.chapter__article .chapter-index li :is(a, a[href]) {
  padding: 6px 8px;
}
.chapter__article .chapter-index li :is(i, .icon, .text-icon) {
  margin-left: -6px;
}
.chapter__article .chapter-index li.current {
  background: var(--current-content-li-background);
}
.chapter__article .chapter-index__list {
  display: flex;
  flex-direction: column;
  gap: var(--chapter-index-list-gap, var(--content-list-gap, 4px));
}
.chapter__article .chapter-index__control {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.chapter__article .chapter-index__back-link {
  font-weight: var(--font-weight-medium);
  padding: 2px 0;
}
.chapter__article .chapter-index__back-link :is(i, .icon, .text-icon) {
  font-size: 15px;
}
.chapter__article  .content-list-style-lines .chapter-index li {
  border-radius: 0;
  border-bottom: var(--content-li-hr-border);
}
.chapter__article  .content-list-style-lines .chapter-index li a {
  border-bottom: var(--content-li-hr-border);
  border-color: rgba(0, 0, 0, 0);
}
.chapter__article  .content-list-style-lines .chapter-index li.current {
  --this-offset: var(--chapter-index-list-gap, var(--content-list-gap, 4px));
  background: linear-gradient(
    to bottom,
    var(--current-content-li-background) 0%,
    var(--current-content-li-background) calc(100% - var(--this-offset)),
    transparent calc(100% - var(--this-offset))
  );
}
.chapter__article .paragraph-tools {
  user-select: none;
  position: absolute;
  top: -0.5rem;
  display: none;
  content-visibility: hidden;
  width: 100%;
}
.chapter__article .paragraph-tools__actions {
  position: absolute;
  right: 0;
  top: 0.5rem;
  display: flex;
  gap: 3px;
  justify-content: flex-end;
  flex-wrap: wrap;
  transform: translateY(-100%);
  max-width: 100vw;
  filter: var(--paragraph-tools-filter);
}
.chapter__article .paragraph-tools__actions .button {
  position: relative;
  border-radius: 0;
}
.chapter__article .paragraph-tools__actions > :first-child {
  border-radius: var(--layout-border-radius-small) 0 0
    var(--layout-border-radius-small);
}
.chapter__article .paragraph-tools__actions > :last-child {
  border-radius: 0 var(--layout-border-radius-small)
    var(--layout-border-radius-small) 0;
}
.chapter__article .paragraph-tools__bookmark-colors {
  pointer-events: none;
  user-select: none;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3px;
  padding: 4px 0;
  width: 100%;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity var(--transition-duration);
}
.chapter__article .paragraph-tools__bookmark-colors-field {
  flex: 1 1 20px;
  border-radius: var(--layout-border-radius-small);
  height: 20px;
  max-width: 20px;
  transition: filter var(--transition-duration);
}
.chapter__article .paragraph-tools__bookmark-colors-field:hover {
  filter: brightness(1.1);
}
.chapter__article .paragraph-tools__bookmark-colors-field[data-color="default"] {
  background: var(--bookmark-line);
}
.chapter__article .paragraph-tools__bookmark-colors-field[data-color="beta"] {
  background: var(--bookmark-color-beta);
}
.chapter__article .paragraph-tools__bookmark-colors-field[data-color="gamma"] {
  background: var(--bookmark-color-gamma);
}
.chapter__article .paragraph-tools__bookmark-colors-field[data-color="delta"] {
  background: var(--bookmark-color-delta);
}
.chapter__article #button-set-bookmark:hover .paragraph-tools__bookmark-colors {
  pointer-events: auto;
  opacity: 1;
}
@media only screen and (max-width: 1023px) {
  .chapter__article .current-bookmark #button-set-bookmark .paragraph-tools__bookmark-colors {
    pointer-events: auto;
    opacity: 1;
  }
}
.chapter__article .recommendation__header {
  margin-bottom: 2rem;
}
.chapter__article .recommendation__taxonomies {
  margin-bottom: 1.5rem;
}
.chapter__article .recommendation__thumbnail {
  float: right;
  max-width: clamp(100px, 25.4452926209vw + 4.5801526718px, 200px);
  margin: 0 0 clamp(10px, 9.6692111959vw - 26.2595419847px, 48px)
    clamp(24px, 6.106870229vw + 1.0992366412px, 48px);
}
.chapter__article .recommendation__thumbnail :is(a, img) {
  display: block;
  cursor: zoom-in;
  border-radius: var(--layout-border-radius-small);
}
.chapter__article .recommendation__thumbnail-image {
  width: inherit;
  box-shadow: var(--recommendation-cover-box-shadow, var(--box-shadow-xl));
}
@media (max-width: 768px) {
  .chapter__article .recommendation__thumbnail-image {
    height: auto;
  }
}
.chapter__article .recommendation__tags {
  margin: 2rem 0 3rem;
}
.chapter__article .recommendation__support,
.chapter__article .recommendation__read-on {
  margin-top: 1.5rem;
}
.chapter__article .recommendation__support h5,
.chapter__article .recommendation__read-on h5 {
  margin-bottom: 0.5rem;
}
.chapter__article .recommendation__support :is(i, .icon),
.chapter__article .recommendation__read-on :is(i, .icon) {
  color: var(--fg-600);
  margin-right: 0.5rem;
}
.chapter__article .recommendation__list-item {
  line-height: 1.3;
}
.chapter__article .recommendation__list-item:not(:last-child) {
  margin-bottom: 0.5rem;
}
.chapter__article .recommendation__footer {
  clear: both;
}
.chapter__article .button-follow-story._followed,
.chapter__article .button-read-later._remembered {
  background: var(--button-background-active) !important;
  color: var(--button-color-active) !important;
  border: var(--button-border-active) !important;
}
.infobox {
  clear: both;
  background: var(--infobox-background);
  color: var(--fg-600);
  border-radius: var(--layout-border-radius-small);
  padding: 1rem;
}
.observer {
  visibility: hidden;
  position: absolute;
}
.main-observer {
  top: var(--layout-spacing-vertical);
}
.tag-pill {
  cursor: pointer;
}

.dialog-modal,
.modal {
  --modal-width: 300px;
  color: var(--fg-500);
  line-height: 1.3;
}
.dialog-modal input:where([type="text"], [type="email"]),
.modal input:where([type="text"], [type="email"]) {
  width: 100%;
}
.dialog-modal
  input:where([type="text"], [type="number"]):not(:first-child):last-child,
.modal
  input:where([type="text"], [type="number"]):not(:first-child):last-child {
  flex-shrink: 0;
  text-align: center;
  border-radius: 0 var(--layout-border-radius-small)
    var(--layout-border-radius-small) 0;
  padding: 0;
  width: 55px;
}
.dialog-modal input[type="range"],
.modal input[type="range"] {
  flex-grow: 1;
  border-radius: var(--layout-border-radius-small) 0 0
    var(--layout-border-radius-small);
}
.dialog-modal__header,
.modal__header {
  color: var(--fg-400);
  font: var(--font-weight-heading) 16px/1 var(--ff-heading);
  text-transform: uppercase;
  padding: 12px 40px 12px 12px;
  margin: 0;
}
.dialog-modal__row > :is(i, .icon),
.dialog-modal__horizontal-input-group > :is(i, .icon),
.modal__row > :is(i, .icon),
.modal__horizontal-input-group > :is(i, .icon) {
  flex-shrink: 0;
  color: var(--fg-600);
  text-align: center;
  min-width: 26px;
}
.dialog-modal__row,
.modal__row {
  padding: 12px;
}
.dialog-modal__row._small-top,
.modal__row._small-top {
  padding-top: 4px;
}
.dialog-modal__row._vertical-shrink-spacing,
.modal__row._vertical-shrink-spacing {
  padding: clamp(6px, 1.25vw + 2px, 8px) 12px;
}
.dialog-modal__row > :is(i, .icon),
.modal__row > :is(i, .icon) {
  font-size: 18px;
  margin: 0 3px 0 -3px;
}
.dialog-modal__row .reset._modified,
.modal__row .reset._modified {
  cursor: pointer;
  box-sizing: content-box;
  display: grid;
  place-content: center;
  background: var(--button-primary-background);
  color: var(--button-primary-color);
  font-size: 14px;
  padding: 2.5px 0;
  border-radius: var(--layout-border-radius-small);
  min-height: 20px;
  box-shadow: var(--button-box-shadow);
  transition: color, background-color;
  transition-duration: var(--transition-duration);
}
.dialog-modal__row .reset._modified:hover,
.modal__row .reset._modified:hover {
  background: var(--button-primary-background-hover);
  color: var(--button-primary-color-hover);
}
.dialog-modal__horizontal-input-group,
.modal__horizontal-input-group {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
}
.dialog-modal__horizontal-input-group:not(:first-child),
.modal__horizontal-input-group:not(:first-child) {
  margin-top: 8px;
}
.dialog-modal__horizontal-input-group._with-checkbox,
.modal__horizontal-input-group._with-checkbox {
  gap: 12px;
}
.dialog-modal__horizontal-input-group :is(i, .icon),
.modal__horizontal-input-group :is(i, .icon) {
  font-size: 15px;
  margin: 0 3px 0 -4px;
}
.dialog-modal__description,
.modal__description {
  font-size: 13px;
  line-height: 1.4;
}
.dialog-modal__description p:not(:last-child),
.modal__description p:not(:last-child) {
  margin-bottom: 8px;
}
.dialog-modal__description._bbcodes > div,
.modal__description._bbcodes > div {
  background: var(--infobox-background);
  font-size: 12px;
  padding: 0.375rem;
  border-radius: var(--layout-border-radius-small);
}
.dialog-modal__description._bbcodes > div:not(:last-child),
.modal__description._bbcodes > div:not(:last-child) {
  margin-bottom: 0.5rem;
}
.dialog-modal__description._bbcodes :is(img, code),
.modal__description._bbcodes :is(img, code) {
  display: inline-block;
}
.dialog-modal__description._bbcodes img,
.modal__description._bbcodes img {
  height: 1.25em;
  width: 1.25em;
  margin-bottom: -3px;
  border-radius: 2px;
}
.dialog-modal__description._bbcodes blockquote,
.modal__description._bbcodes blockquote {
  background: var(--blockquote-background);
  border-left: 2px solid var(--fg-600);
  border-radius: var(--layout-border-radius-small);
  padding: 0.34rem 0.5em;
  margin-bottom: 0.5rem;
}
.dialog-modal__description._bbcodes code,
.modal__description._bbcodes code {
  letter-spacing: -0.03em;
}
.dialog-modal__description._bbcodes code:first-of-type,
.modal__description._bbcodes code:first-of-type {
  margin-right: 2px;
}
.dialog-modal__description._bbcodes code:last-of-type,
.modal__description._bbcodes code:last-of-type {
  margin-left: 2px;
}
.dialog-modal__description._bbcodes li,
.modal__description._bbcodes li {
  margin-top: 0;
  margin-bottom: 0;
}
.dialog-modal__description._large,
.modal__description._large {
  font-size: var(--fs-xs);
}
.dialog-modal__textarea,
.modal__textarea {
  display: block;
  background: rgba(0, 0, 0, 0);
  font-family: var(--ff-mono);
  font-size: 13px;
  padding: 0;
  width: 100%;
  resize: none;
}
.dialog-modal__textarea._changelog,
.modal__textarea._changelog {
  font-size: 11px;
  line-height: 20px;
  white-space: pre;
  height: 300px;
}
.dialog-modal__actions,
.modal__actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 12px 12px;
}
.dialog-modal__actions._age-confirmation,
.modal__actions._age-confirmation {
  gap: 9px;
  padding-top: 12px;
}
.dialog-modal__actions._age-confirmation .button,
.modal__actions._age-confirmation .button {
  flex: 1 1 auto;
}
.dialog-modal__actions .button:not(:first-child),
.modal__actions .button:not(:first-child) {
  margin-left: 3px;
}
.dialog-modal,
.modal__wrapper {
  background-color: var(--modal-bg-color);
  padding: 0;
  border: none;
  border-radius: min(20px, var(--layout-border-radius-large));
  max-height: calc(100% - 32px);
  width: var(--modal-width, 300px);
  max-width: calc(100vw - 20px);
  box-shadow: var(--modal-box-shadow, var(--box-shadow-xl));
  overflow: auto;
}
.dialog-modal ::-webkit-scrollbar-track,
.modal__wrapper ::-webkit-scrollbar-track {
  -webkit-box-shadow: var(--scrollbar-box-shadow);
  background: var(--scrollbar-background);
  border-radius: 1px;
}
.dialog-modal ::-webkit-scrollbar,
.modal__wrapper ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 1px;
}
.dialog-modal ::-webkit-scrollbar-thumb,
.modal__wrapper ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 1px;
}
.dialog-modal hr,
.modal__wrapper hr {
  margin: 0 12px;
}
.dialog-modal__close,
.modal .close {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  color: var(--fg-950);
  font-size: 20px;
  line-height: 1;
  text-shadow: none;
  padding: 7px 12px;
  border-radius: 0 5px 0 5px;
  transition: color var(--transition-duration);
}
.dialog-modal__close:hover,
.modal .close:hover {
  color: var(--fg-300);
}
.dialog-modal::backdrop {
  background: var(--modal-overlay);
}
.dialog-modal._chapter-index {
  display: block;;
  background-color: var(--modal-bg-color);
  --modal-width: 400px;
  max-height: min(100% - 32px, 600px);
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--modal-overlay);
  contain: content;
}
.modal[hidden] {
  content-visibility: hidden;
}
.reader-settings .modal__wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-70%); 
  background-color: var(--modal-bg-color);
  padding: 0;
  border: none;
  border-radius: min(20px,var(--layout-border-radius-large));
  max-height: calc(100% - 32px);
  width: var(--modal-width,300px);
  max-width: calc(100vw - 20px);
  box-shadow: var(--modal-box-shadow,var(--box-shadow-xl));
  overflow: auto;
}
.modal .close {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  color: var(--fg-950);
  font-size: 20px;
  line-height: 1;
  text-shadow: none;
  padding: 7px 12px;
  border-radius: 0 5px;
  transition: color var(--transition-duration);
}
.modal__header {
  color: var(--fg-400);
  font: var(--font-weight-heading) 16px/1 var(--ff-heading);
  text-transform: uppercase;
  padding: 12px 40px 12px 12px;
  margin: 0;
}
.reader-settings button {
  cursor: pointer;
  user-select: none;
}
.reader-settings .reader-settings__toggles {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.reader-settings input[type="checkbox"], .reader-settings input[type="radio"] {
  cursor: pointer;
  position: relative;
  background: var(--input-background);
  flex-shrink: 0;
  line-height: 1;
  border: 1px solid rgba(0,0,0,0);
  border-radius: min(5px,var(--input-border-radius, var(--layout-border-radius-small)));
  margin: 0;
  height: 16px;
  width: 16px;
}
.reader-settings textarea,
.reader-settings select {
  font-size: var(--fs-xs);
  background: var(--input-background);
  color: var(--input-color);
  border: none;
  border-radius: var(--input-border-radius, var(--layout-border-radius-small));
  box-shadow: var(--input-shadow, 0 0 transparent),
    var(--input-validation-shadow, 0 0 transparent);
}
@supports (-webkit-touch-callout: none) {
  .reader-settings input:is(
      [type="text"],
      [type="number"],
      [type="range"],
      [type="password"],
      [type="email"],
      [type="url"],
      [type="search"]
    ),
  .reader-settings textarea,
  .reader-settings select {
    font-size: 16px;
  }
}
.reader-settings input:is(
    [type="text"],
    [type="number"],
    [type="range"],
    [type="password"],
    [type="email"],
    [type="url"],
    [type="search"]
  ):is([disabled], ._disabled),
.reader-settings textarea:is([disabled], ._disabled),
.reader-settings select:is([disabled], ._disabled) {
  cursor: not-allowed;
  pointer-events: none;
  background: var(--input-background-disabled);
  color: var(--input-color-disabled);
}
.reader-settings input:is(
    [type="text"],
    [type="number"],
    [type="range"],
    [type="password"],
    [type="email"],
    [type="url"],
    [type="search"]
  )::placeholder,
.reader-settings textarea::placeholder,
.reader-settings select::placeholder {
  color: var(--input-placeholder-color);
  font-family: var(--ff-input);
  font-size: 13px;
  font-weight: var(--font-weight-normal);
  text-shadow: none;
}
.reader-settings input[type="range"] {
  cursor: pointer;
  padding: 5px;
  margin: 0;
  height: 24px;
}
.reader-settings input[type="range"]::-webkit-slider-thumb {
  cursor: pointer;
  -webkit-appearance: none;
  background: var(--input-range-thumb);
  border-radius: var(--input-border-radius, var(--layout-border-radius-small));
  width: 18px;
  height: 18px;
  transition: background-color var(--transition-duration);
}
@media only screen and (min-width: 1024px) {
  .reader-settings input[type="range"]::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
  }
}
.reader-settings input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--input-range-thumb-hover);
}
.reader-settings input[type="range"]::-moz-range-thumb {
  cursor: pointer;
  background: var(--input-range-thumb);
  border: none;
  border-radius: var(--input-border-radius, var(--layout-border-radius-small));
  width: 14px;
  height: 14px;
  transition: background-color var(--transition-duration);
}
.reader-settings input[type="range"]::-moz-range-thumb:hover {
  background: var(--input-range-thumb-hover);
}
.reader-settings input[type="number"] {
  -moz-appearance: textfield;
}
.reader-settings input[type="number"]::-webkit-outer-spin-button,
.reader-settings input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.reader-settings input[type="checkbox"]::after,
.reader-settings input[type="radio"]::after {
  position: absolute;
  display: block;
}
.reader-settings input[type="checkbox"]:checked {
  background: var(--input-fill);
}
.reader-settings input[type="checkbox"]:checked::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='0 0 27 27' style='margin: 1px 0 0 1px' %3E%3Cpath fill='black' d='m9 19.414l-6.707-6.707l1.414-1.414L9 16.586L20.293 5.293l1.414 1.414z'%3E%3C/path%3E%3C/svg%3E");
  inset: 0;
  filter: var(--invert-filter);
}
.reader-settings input[type="radio"] {
  border-radius: 50%;
}
.reader-settings input[type="radio"]:checked::after {
  content: "";
  inset: 3px;
  background: var(--input-fill);
  border-radius: 50%;
}
.reader-settings .narrow-inputs
  :is([type="text"], [type="number"], [type="range"], .select-wrapper select) {
  font-size: 13px;
  line-height: 26px;
  height: 26px;
}
.reader-settings .checkbox-label,
.reader-settings .radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-600);
  font-size: 13px;
  line-height: 1.3;
  padding: 1px;
  height: 32px;
}
.modal__row._vertical-shrink-spacing {
  padding: clamp(6px, 1.25vw + 2px, 8px) 12px;
}
 .reader-settings__row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.modal__row .reset._modified {
  cursor: pointer;
  box-sizing: content-box;
  display: grid;
  place-content: center;
  background: var(--button-primary-background);
  color: var(--button-primary-color);
  font-size: 14px;
  padding: 2.5px 0;
  border-radius: var(--layout-border-radius-small);
  min-height: 20px;
  box-shadow: var(--button-box-shadow);
  transition: color,background-color;
    transition-duration: 0s, 0s;
  transition-duration: var(--transition-duration);
}
.modal__row > :is(i, .icon) {
  font-size: 18px;
  margin: 0 3px 0 -3px;
}
.modal__row > :is(i, .icon) {
  flex-shrink: 0;
  color: var(--fg-600);
  text-align: center;
  min-width: 26px;
}
.reader-settings :where(input, textarea, button, select) {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(0, 0, 0, 0);
  color: inherit;
  font-family: var(--ff-input);
  font-size: inherit;
  font-weight: var(--font-weight-normal);
  line-height: inherit;
  text-align: left;
  border-style: solid;
}
.reader-settings select {
  cursor: pointer;
}
.reader-settings select option {
  color: #000;
}
.reader-settings .select-wrapper {
  position: relative;
  width: 100%;
}
.reader-settings .select-wrapper::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 53%;
  right: 4px;
  display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3E%3C/svg%3E")
    no-repeat center/contain;
  transform: translateY(-50%);
  height: 14px;
  width: 14px;
  opacity: 0.4;
  filter: invert(1);
}
.reader-settings .select-wrapper select {
  font-size: var(--fs-xs);
  line-height: 30px;
  padding: 0 22px 0 8px;
  height: 32px;
  width: 100%;
}
.reader-settings .button {
  font-size: 16px;
  padding: 0 0 0 2px;
  border-radius: 0 var(--r,0) var(--r,0) 0;
  height: 26px;
  width: 26px;
  min-width: auto;
  --this-padding-horizontal:clamp(6px, 1.9047619048vw - 1.1428571429px, 8px);
  --this-height:clamp(26px, 10.9090909091vw - 8.9090909091px, 32px);
  cursor:pointer;
  user-select:none;
  -webkit-appearance:none;
  appearance:none;
  display:flex;
  gap:0 6px;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  background:var(--button-primary-background);
  color:var(--button-primary-color);
  font:var(--button-font-weight) 12px/1 var(--ff-base);
  letter-spacing:clamp(0.02em,0.3047619048vw - 0.8228571429px,0.04em);
  white-space:nowrap;
  text-shadow:none;
  border:var(--button-primary-border,1px solid transparent);
  box-shadow:var(--button-box-shadow);
  outline-offset:3px;
  transition:color,background,border-color,opacity;
  transition-duration:var(--transition-duration)
}
.reader-settings .toggle{
  --toggle-background: 0 0;
  --toggle-background-checked: var(--bg-100);
  --toggle-background-hover: var(--bg-50);
  --toggle-color: var(--fg-600);
  --toggle-color-hover: var(--fg-300);
  --toggle-color-checked: var(--fg-inverted);
  --toggle-color-checked-hover: var(--fg-inverted);
  --toggle-border: var(--bg-100);
  --toggle-border-checked: var(--bg-100);
  --toggle-border-hover: var(--bg-50);
}
.reader-settings__toggle[aria-checked="true"] .reader-settings__toggle-icon {
  background: var(--toggle-background-checked);
  color: var(--toggle-color-checked);
  border-color: var(--toggle-border-checked);
}
.reader-settings__toggle[aria-checked="true"]
  .reader-settings__toggle-icon:hover {
  background: var(--toggle-background-hover);
  color: var(--toggle-color-checked-hover);
  border-color: var(--toggle-border-hover);
}
.reader-settings__toggle-icon[class] {
  display: grid;
  place-content: center;
  background: var(--toggle-background);
  color: var(--toggle-color);
  font-size: 12px;
  line-height: 1;
  text-shadow: none;
  border: 1.5px solid var(--toggle-border);
  border-radius: 50%;
  height: 26px;
  min-width: 26px;
  transition: border-color,background,color;
    transition-duration: 0s, 0s, 0s;
  transition-duration: var(--transition-duration);
}
.reader-settings__toggle-icon[class]:hover {
  color: var(--toggle-color-hover);
  border-color: var(--toggle-border-hover);
}
.reader-settings__toggle {
  border-radius: 50%;
}
.reader-settings label, .reader-settings button {
  cursor: pointer;
  user-select: none;
}
.reader-settings input:is(
    [type="text"],
    [type="number"],
    [type="range"],
    [type="password"],
    [type="email"],
    [type="url"],
    [type="search"]
  ),
.reader-settings textarea,
.reader-settings select {
  font-size: var(--fs-xs);
  background: var(--input-background);
  color: var(--input-color);
  border: none;
  border-radius: var(--input-border-radius, var(--layout-border-radius-small));
  box-shadow: var(--input-shadow, 0 0 transparent),
    var(--input-validation-shadow, 0 0 transparent);
}

:is(:fullscreen, :-webkit-full-screen) {
  --page-inset-top: 0px;
}
:is(:fullscreen, :-webkit-full-screen) .background-texture {
  background-image: none !important;
}
:is(:fullscreen, :-webkit-full-screen) .site {
  background: var(--fullscreen-background) !important;
}
:is(:fullscreen, :-webkit-full-screen) .progress {
  max-width: unset;
}
:is(:fullscreen, :-webkit-full-screen) .hide-on-fullscreen {
  display: none;
  content-visibility: hidden;
}
:is(:fullscreen, :-webkit-full-screen) .show-on-fullscreen {
  display: grid !important;
  content-visibility: visible;
}
:is(:fullscreen, :-webkit-full-screen) .main {
  --main-offset: 0px;
  filter: none;
}
:is(:fullscreen, :-webkit-full-screen) .main__background {
  background: var(--fullscreen-background) !important;
  box-shadow: none !important;
  filter: none !important;
}
:is(:fullscreen, :-webkit-full-screen) .main__background::before {
  content: none !important;
}
:is(:fullscreen, :-webkit-full-screen) .polygon {
  clip-path: none;
}
@supports (-webkit-touch-callout: none) {
  .hide-on-iOS {
    display: none !important;
    content-visibility: hidden;
  }
}
.dialog-modal::backdrop {
  background: var(--modal-overlay);
}

.chapter-index {
  font-size: 14px;
  line-height: 21px;
}
.chapter-index[data-order="asc"] i.on {
  display: none;
}
.chapter-index[data-order="desc"] i.off {
  display: none;
}
.chapter-index[data-order="desc"] ul {
  flex-direction: column-reverse;
}
.chapter-index :is(i, .icon, .text-icon) {
  display: inline-block;
  color: currentColor;
  line-height: 1;
  text-align: center;
  min-width: 24px;
}
.chapter-index :is(a, a[href]) {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: currentColor;
  text-decoration: none;
}
.chapter-index :is(a, a[href]):hover,
.chapter-index :is(a, a[href]):visited {
  color: currentColor;
  text-decoration: none;
}
.chapter-index li {
  background: var(--chapter-index-li-background, var(--content-li-background));
  border-radius: var(--layout-border-radius-small);
}
.chapter-index li :is(a, a[href]) {
  padding: 6px 8px;
}
.chapter-index li :is(i, .icon, .text-icon) {
  margin-left: -6px;
}
.chapter-index li.current {
  background: var(--current-content-li-background);
}
.chapter-index__list {
  display: flex;
  flex-direction: column;
  gap: var(--chapter-index-list-gap, var(--content-list-gap, 4px));
}
.chapter-index__control {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.chapter-index__back-link {
  font-weight: var(--font-weight-medium);
  padding: 2px 0;
}
.chapter-index__back-link :is(i, .icon, .text-icon) {
  font-size: 15px;
}