@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600;1,8..60,700&display=swap');
/*
  :root = <html/>
  :host > * = the root of the extension shadow DOM contents
*//* SPACING */:host > *,
:root {
  --s1: 10px;
  --s2: 20px;
  --s3: 30px;
  --s4: 40px;
  --s5: 50px;

  --spacer-0: 0;
  --spacer-1: .125rem;/* 2px */
  --spacer-2: .25rem; /* 4px */
  --spacer-3: .5rem;  /* 8px */
  --spacer-4: .75rem; /* 12px */
  --spacer-5: 1rem;   /* 16px */
  --spacer-6: 1.25rem;/* 20px */
  --spacer-7: 1.5rem; /* 24px */
  --spacer-8: 2rem;   /* 32px */
  --spacer-9: 2.5rem; /* 40px */
  --spacer-10: 3rem;  /* 48px */

  --min-left-pad: 32px;
}/* FONTS */:host > *,
:root {
  /* font weights */
  --font-weight-lighter: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  --font-size-xs: 0.6875rem; /* 11px */
  --font-size-sm: 0.75rem; /* 12px */
  --font-size-base: 0.875rem; /* 14px */ /* --f9 */
  --font-size-lg: 1rem; /* 16px */
  --font-size-xl: 1.25rem; /* 20px */

  --line-height-xs: 1rem; /* 16px */
  --line-height-sm: 1.125rem; /* 18px */
  --line-height-base: 1.25rem; /* 20px */
  --line-height-lg: 1.5rem; /* 24px */
  --line-height-xl: 1.5625rem; /* 25px */


  --f2: 3.25rem;/* Deprecated */
  --f3: 1.8rem;/* Deprecated */
  --f4: 1.38rem;/* Deprecated */
  --f5: 1.35rem;/* Deprecated */
  --f6: var(--font-size-2xl); /* Deprecated */
  --f7: var(--font-size-xl); /* Deprecated */
  --f8: var(--font-size-lg); /* Deprecated */
  --f9: var(--font-size-base); /* Deprecated */
  --f10: var(--font-size-sm); /* Deprecated */
  --f11: var(--font-size-xs); /* Deprecated */


  /* letter-spacing that works with the above sizes */

  --ls-6: -0.017em;
  --ls-7: -0.014em;
  --ls-8: -0.011em;
  --ls-9: -0.006em;
  --ls-10: 0em;
  --ls-11: 0.005em;

  --ui-font: "Inter VF", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --mono-font: "Roboto Mono VF", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  --content-line-height: 1.6;
}/* base COLORS (not themed) */:host > *,
:root {

  /*
  Base neutral styles.
https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4ByMArgC4BOEANjiADQgAW5Mj8A2qJLAnAUa9ZiADGAezqTqXbiADEAM1VqxKgBzKAnMogblABmUBGZQCYNMIzADMMAGwa0ptAFY0OjeNPiA7OJwLIoARqahOuJWIRAWEOKh-ho67noQBiGamjoWURqBmu7aGo4w-tl2paaOAckh7gAs7sqOoRqNRXYtGg6d7lUhdsPijc4hFpp2pnbtIeYW-hbKGqbufhaDSqZGNW4aRr6mpvVKRucXIAC6AL5XLJSSYJwICjtGYjqnqZ8fLEViTR-ED%2BdxifzAxxgliOYHuaEgdzA5piRrA7piOzAiwIizAtZiHZiIynIwI87XG5AA
  */

/* Readwise - Neutrals color palette */

  /* neutral */
  --neutral-100: #ffffff;
  --neutral-97: #f8f9fa;
  --neutral-95: #f0f1f2;
  --neutral-90: #e0e3e6;
  --neutral-85: #d1d5d9;
  --neutral-80: #c1c7ce;
  --neutral-75: #b1b9c2;
  --neutral-70: #a2acb7;
  --neutral-65: #959faa;
  --neutral-60: #88929c;
  --neutral-55: #7c858f;
  --neutral-50: #6e7883;
  --neutral-45: #616c77;
  --neutral-40: #545f6b;
  --neutral-35: #48535f;
  --neutral-30: #3e4853;
  --neutral-25: #333c46;
  --neutral-20: #28313b;
  --neutral-15: #1f272f;
  --neutral-10: #151c23;
  --neutral-07: #10161d;
  --neutral-05: #0c1117;
  --neutral-00: #000000;


  /* Readwise - Color color palette
  https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4DCA9gDZkBOIANCABYCuMOCA2qJLAiNTDT0QAY0o128DiADEAMwUA2OQGZh8gJxoRaAEzq5GgEYqIahvICsADg0B2IwcWWRl-RbTWALAAZT6iDsVaxV3WTsQgEZdCHUvPTcfdV0jSMVokABdAF86bmg4RBoIMABzOAYxKmpJaXkRQ0EDCBgfCDlmow1FJIs5CGsjXUt1VEVdSJGLETsvGEiK2Q0IL3SRdSCVSx91iy8hjR8hC10RSLsfSKzc-N5EAE8YCioMYSqJTll%2B-vmDFRgIlc%2BnZtJEOhZ5kY5Dt1GctJFrAEvBEfIsZLZLL4gbJFCY0JFzLJkSkjslrJFDlccnlwAU%2BKUBDAwG9xDVPjIYDA5GhObCvKoRGF0dyRNY0eMjGhFISZF5TCJkeoVAiQlNZFs7ATFMkYJjdGjdCpgob1JMJpEvNcaTxCiAAC6oCgs6q1WRcuRQ46yM6cuSWix2EFi-2yaJnPTqHxtXEhmRR6yKDRCrVyOwaU3WSxbWIWI4qaWOXM%2BXQl7XU262owUVjOj5SL66b7g71yAHcgLWEQiLkbXH6r0yNxJuTYmS6NB2Sy600QSwaUXJTHBZtjuU%2BSzaiwIyKCxzl2l3EBYMBoLClMi1tn1%2BTWVOt0ZzHxyRHTXGttEQEQQVGbpaWEEwC%2BsjWOuGgwLGiYqHIIi-rKMBbGKSrjK4dimvM0pljcB62gADsw1A4RQizvFedTcnIyi7A2aBQkK4FGHYqDqFKGj-L03qKIogjphYRhLmg7HoiIKhfkKnEqMiMpeNEKxAaukQQLoqE5JkDB2mQYBsJ89jCIcwggcIFzCD0wjbMIvjCCo7G6OxkRJDkQA
  */

  /* red */
  --red-97: #fff6f3;
  --red-90: #f9dcd2;
  --red-80: #f9b3a3;
  --red-70: #f5897b;
  --red-60: #f65c52;
  --red-50: #d8403a;
  --red-40: #a73832;
  --red-30: #78312a;
  --red-20: #4d2520;
  --red-10: #2b1612;

  /* orange */
  --orange-97: #fcf9ed;
  --orange-90: #fae0af;
  --orange-80: #fab960;
  --orange-70: #fa8b25;
  --orange-60: #ea6215;
  --orange-50: #c74e1e;
  --orange-40: #9a461c;
  --orange-30: #73350c;
  --orange-20: #4b290d;
  --orange-10: #2c1701;

  /* yellow */
  --yellow-97: #fafae1;
  --yellow-90: #f3e781;
  --yellow-80: #f7dc1f;
  --yellow-70: #e1bf0c;
  --yellow-60: #c19d18;
  --yellow-50: #a4780e;
  --yellow-40: #895401;
  --yellow-30: #6b3d13;
  --yellow-20: #472b0d;
  --yellow-10: #281901;

  /* green */
  --green-97: #eefdee;
  --green-90: #c4f3c2;
  --green-80: #8fdc8e;
  --green-70: #62bd63;
  --green-60: #43ac47;
  --green-50: #318835;
  --green-40: #357136;
  --green-30: #2e542e;
  --green-20: #233823;
  --green-10: #152114;

  /* teal */
  --teal-97: #effbfd;
  --teal-90: #c1eef4;
  --teal-80: #77d8e4;
  --teal-70: #12c1d2;
  --teal-60: #00a6b4;
  --teal-50: #008692;
  --teal-40: #136f79;
  --teal-30: #18535a;
  --teal-20: #0d363b;
  --teal-10: #002226;

  /* blue */
  --blue-97: #f2faff;
  --blue-90: #cfe7fd;
  --blue-80: #a8ccef;
  --blue-70: #76b2ed;
  --blue-60: #5292f1;
  --blue-50: #2d75e5;
  --blue-40: #1a59c8;
  --blue-30: #25438f;
  --blue-20: #243056;
  --blue-10: #181c2b;

  /* indigo */
  --indigo-97: #f8f7fe;
  --indigo-90: #e4e0f8;
  --indigo-80: #c6bfee;
  --indigo-70: #aca0e6;
  --indigo-60: #957de8;
  --indigo-50: #8059e4;
  --indigo-40: #693fc6;
  --indigo-30: #4e358e;
  --indigo-20: #362c57;
  --indigo-10: #1e1636;

  /* purple */
  --purple-97: #fdf6fc;
  --purple-90: #f2dbf2;
  --purple-80: #e4b7ea;
  --purple-70: #d693e0;
  --purple-60: #c66ed9;
  --purple-50: #b543d0;
  --purple-40: #8c3ca2;
  --purple-30: #663473;
  --purple-20: #412a48;
  --purple-10: #241a27;



  /* These will eventually be deprecated. For now they have been remapped to the base styles above. Use functional names like "text-primary" or the root names above */
  --black: var(--neutral-00);
  --white: var(--neutral-100);

  /* New base styles for these colours will come */
  --svg-filter-grey: invert(26%) sepia(19%) saturate(0%) hue-rotate(266deg) brightness(106%) contrast(94%);
  --svg-filter-inbox: invert(76%) sepia(9%) saturate(153%) hue-rotate(169deg) brightness(95%) contrast(90%);
  --svg-filter-black: invert(0%) sepia(4%) saturate(0%) hue-rotate(309deg) brightness(93%) contrast(107%);
  --svg-filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(195deg) brightness(105%) contrast(101%);
  --svg-filter-blue: invert(79%) sepia(56%) saturate(7329%) hue-rotate(191deg) brightness(102%) contrast(94%);
}/* default THEME colors */:host > *,
:root {

  /* FOUNDATIONS */

  /* Naming syntax
    We use the following order when naming css properties. The "default" text can be omitted.

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    background  default       default   default     default     default
    text        button        error     selected    primary     hover
    icon        galleryList   success               secondary   active
    border      toolbar       info


    Button example:

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    background  button        default   default     secondary   hover
    background-button-secondary-hover

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    text        button        default   default     primary     active
    text-button-primary-active
/*

  /* Utility alpha classes */
  --u-alpha-100: rgba(40,49,59,0.03);
  --u-alpha-200: rgba(40,49,59,0.06);
  --u-alpha-300: rgba(40,49,59,0.09);
  --u-alpha-400: rgba(40,49,59,0.12);
  --u-alpha-500: rgba(40,49,59,0.15);

  --u-alpha-blue-100: rgba(26,89,200,0.03);
  --u-alpha-blue-200: rgba(26,89,200,0.06);
  --u-alpha-blue-300: rgba(26,89,200,0.09);
  --u-alpha-blue-400: rgba(26,89,200,0.12);
  --u-alpha-blue-500: rgba(26,89,200,0.15);

  --u-alpha-red-100: rgba(216,64,58,0.03);
  --u-alpha-red-200: rgba(216,64,58,0.06);
  --u-alpha-red-300: rgba(216,64,58,0.09);
  --u-alpha-red-400: rgba(216,64,58,0.12);
  --u-alpha-red-400: rgba(216,64,58,0.15);

  --focus-ring-color: var(--blue-60);


  /* Text */
  --text-primary: var(--neutral-20);
  --text-secondary: var(--neutral-45);
  --text-tertiary: var(--neutral-60);
  --text-placeholder: var(--neutral-65);
  --text-disabled: var(--neutral-75);
  --text-inverse: var(--neutral-90); /* for use on dark backgrounds while in light mode */
  --text-interactive: var(--blue-50);
  --text-backlink: var(--indigo-40);
  --text-error: var(--red-50);
  --text-success: var(--green-50);

  /* Icons */
  --icon-primary: var(--neutral-25);
  --icon-secondary: var(--neutral-45);
  --icon-tertiary: var(--neutral-60);
  --icon-disabled: var(--neutral-75);
  --icon-interactive: var(--blue-50);
  --icon-danger: var(--red-50);
  --icon-success: var(--green-50);
  --icon-inverse: var(--neutral-97);
  --icon-faint: var(--neutral-90);

  /* Extension bar */
  --extension-bar-background-color: var(--neutral-97);

  /* Highlights */
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);

  --highlight-text-color: var(--black);
  --highlight-text-pre-color: var(--white);
  --highlight-text-pre-color--active: var(--white);

  /* Text Selection */
  --selection-color: rgba(0, 114, 255, 0.3);

  /* Borders */
  --border-primary: var(--neutral-80);
  --border-secondary: var(--neutral-90);
  --border-secondary-alpha: var(--u-alpha-400);
  --border-tertiary-alpha: var(--u-alpha-200);
  --border-focus: var(--blue-60);
  --border-error: var(--red-60);

  /* Backgrounds */
  --background-primary: var(--neutral-100);
  --background-secondary: var(--neutral-90);
  --background-tertiary: var(--neutral-95);
  --background-inverse: var(--neutral-10);
  --background-canvas: var(--neutral-97);
  --background-elevated: var(--neutral-100);
  --background-backdrop: var(--u-alpha-300);
  --background-dragging: rgba(f, f, f, 0.7);
  --background-interactive: var(--blue-50);
  --background-error: var(--red-97);
  --background-bulk-actions-header: var(--blue-90);


  /* Shadows */
  --shadow-100: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1px 4px rgba(60, 64, 67, 0.1);
  --shadow-200: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1.5px 4px rgba(60, 64, 67, 0.1), 0px 3px 10px rgba(60, 64, 67, 0.2);
  --shadow-300: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 3px 5px rgba(60, 64, 67, 0.1), 0px 6px 24px rgba(60, 64, 67, 0.2);
  --shadow-400: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 5px 12px rgba(60, 64, 67, 0.1), 0px 12px 32px rgba(60, 64, 67, 0.2), 0px 20px 96px rgba(60, 64, 67, 0.1);


  /* COMPONENTS */

  /* Progress bar */
  --reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
  --reading-progress-background: var(--neutral-90);
  --reading-progress-max-background: var(--neutral-75);
  --reading-progress-point: var(--neutral-40);

  /* Buttons */

  /* primary - deprecated */
  --primary-button-background: var(--u-alpha-blue-200); /* deprecated */
  --primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
  --primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
  --primary-button-color: var(--text-primary); /* deprecated */

  /* primary */
  --background-button-primary: var(--u-alpha-blue-200);
  --background-button-primary-hover: var(--u-alpha-blue-300);
  --background-button-primary-active: var(--u-alpha-blue-400);
  --text-button-primary: var(--text-primary);
  --text-button-primary-disabled: var(--text-disabled);

  /* secondary */
  --background-button-secondary: var(--u-alpha-200);
  --background-button-secondary-hover: var(--u-alpha-300);
  --background-button-secondary-active: var(--u-alpha-400);
  --background-button-secondary-disabled: var(--u-alpha-200);
  --text-button-secondary: var(--text-primary);
  --text-button-secondary-disabled: var(--text-disabled);

  /* accent */
  --text-button-accent-subtle-background: rgba(45, 117, 229, 0.23);
  --text-button-accent-subtle-text: #2675DE;
  --text-button-accent-subtle-disabled-background: rgba(110, 120, 130, 0.1);
  --text-button-accent-subtle-disabled-text: rgba(177, 186, 196, 1);

  --btn-secondary: rgba(235, 237, 238, 0.65); /* used for blur buttons? */

  /* blue */
  --background-button-blue: var(--blue-50);
  --background-button-blue-hover: var(--blue-40);
  --background-button-blue-active: var(--blue-30);
  --background-button-blue-disabled: var(--u-alpha-200);
  --text-button-blue: var(--white);
  --text-button-blue-disabled: var(--text-disabled);

  /* caution */
  --background-button-caution: var(--u-alpha-red-200);

  /* Document card */
  --document-card-width: 208px;
  --document-card-border: var(--border-secondary-alpha);
  --document-card-border-divider: var(--white);
  --document-card-focus-border-color: var(--focus-ring-color);
  --document-card-border-radius: 8px;
  --document-card-background: #fff;
  --document-card-background--hover: var(--document-card-background);
  --document-card-book-image-container-background: var(--background-canvas);
  --document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.03), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.2), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.0715329), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.0484671);
  --document-card-hover-box-shadow: 0px 0px 0px 1px rgba(60, 64, 67, 0.00), 0px 1.5px 4px rgba(60, 64, 67, 0.03), 0px 3px 10px rgba(60, 64, 67, 0.1);

  /* Link card */
  --link-card-background: var(--document-card-background);
  --link-card-border-radius: var(--document-card-border-radius);
  --link-card-border: var(--border-secondary-alpha);
  --link-card-border--hover: var(--border-primary);


  /* Donut progress indicator */
  --donut-progress-indicator-center-color: var(--document-card-background);

  /* Sidebar */
  --sidebar-background: var(--background-canvas);
  --empty-sidebar-background: var(--blue-97);
  --sidebar-button-icon-color: var(--icon-secondary);
  --sidebar-inbox-nav-background: #fff;
  --hide-sidebar-button-background: var(--neutral-95);
  --thumbnail-loading-background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60% ) #ededed;
  --sidebar-logo-color: #000;

  /* Image placeholders */
  --image-placeholder-color: var(--neutral-97);
  --image-placeholder-shadow-color: var(--neutral-85);

  /* Main background surfaces */
  --background-color: var(--background-primary);
  --content-background-color: var(--background-primary);
  --code-background-color: var(--background-tertiary);

  /* Popovers */
  --edit-tags-form-focused-option-background: rgba(43, 46, 55, 0.04);

  --main-highlighter-popover-delete-highlight-action-background: var(--yellow-90);
  --main-highlighter-popover-delete-highlight-icon-color: var(--yellow-40);
  --main-highlighter-popover-action-hover-background: var(--u-alpha-100);
  --highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);

  /* Sort menu */
  --sort-menu-background: #fff;

  /* Tag */
  --tag-background: var(--u-alpha-200);

  /* Misc */
  --content-secondary-color: var(--text-secondary);
  --focus-indicator-color: var(--blue-70);
  --section-border-color: var(--border-secondary-alpha);
  --app-side-drop-shadow-width: 18px;

  /* Appearance panel */
  --appearance-panel-background: var(--background-elevated);
  --appearance-panel-item-hover-background: var(--u-alpha-100);

  /* Command palette */
  --cmd-palette-background: var(--neutral-97);
  --cmd-palette-cmd-container: var(--neutral-97);
  --cmd-palette-section-title: var(--neutral-97);
  --cmd-palette-row-hover: var(--u-alpha-100);
  --cmd-palette-drop-shadow: var(--shadow-400);
  --cmd-palette-scrollbar: var(--neutral-80);
  --cmd-palette-key-background: var(--u-alpha-200);
  --cmd-palette-row-border: var(--blue-50);
  --cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.04) inset;
  --cmd-palette-context-item-background: var(--background-tertiary);
  --cmd-palette-context-item-border: var(--border-secondary);
  --cmd-palette-label-color: var(--text-secondary);
  --cmd-palette-close-icon-color: var(--icon-secondary);

  /* Modal */
  --modal-z-index: 9999;

  /* Quoteshot modal */
  --quoteshot-modal-backdrop: rgba(40, 49, 59, 0.59);
  --quoteshot-modal-background: var(--neutral-00);
  --quoteshot-modal-settings-background: var(--neutral-10);
  --quoteshot-interactive-border: var(--blue-60);
  --quoteshot-ratio-border-inactive: var(--neutral-70);
  --quoteshot-ratio-border-active: var(--neutral-95);
  --quoteshot-save-button-text: var(--neutral-90);
  --quoteshot-save-button-background: rgba(92, 105, 119, 0.26);
  --quoteshot-share-button-text: var(--neutral-00);
  --quoteshot-share-button-background: var(--blue-70);
  --quoteshot-share-dropdown-background: var(--neutral-20);
  --quoteshot-share-dropdown-hover: rgba(110,120,131,0.10);
  --quoteshot-share-dropdown-text: var(--neutral-90);

  /* Wisereads doc discovery modal */
  --wisereads-modal-header-background: rgba(240, 241, 242, 0.9);
  --wisereads-modal-background: var(--background-tertiary);
  --wisereads-modal-card-background: var(--background-elevated);
  --wisereads-modal-card-border-hover: transparent;
  --wisereads-modal-button-background: rgba(45, 117, 229, 0.10);

  /* PDF Search Bar */
  --document-search-input-background: var(--neutral-100);

  /* Find in document matches LIGHT MODE */
  --find-in-document-match-passive: rgba(108, 120, 131, 0.1);
  --find-in-document-match-active: rgba(22, 148, 245, 0.15);

  /* Inbox */

  --inbox-sidebar-background: var(--background-canvas);
  --inbox-icon-color: var(--icon-secondary);
  --inbox-icon-color-disabled: var(--icon-disabled);
  --inbox-icon-color-active: var(--icon-primary);

  --inbox-zero-background-image-filter: opacity(80%) contrast(100%) saturate(80%) sepia(0.1) brightness(65%) drop-shadow(1px 1px 1px black);
  --inbox-zero-foreground-image-filter:
    contrast(84%)
    brightness(80%)
    drop-shadow(0 0 1px rgba(0,0,0,0))
    opacity(100%)
    saturate(25%);
  --inbox-zero-header-items-filter:
    contrast(70%)
    brightness(400%)
    hue-rotate(0)
    drop-shadow(0 0 2px rgba(0,0,0,1))
    opacity(90%)
    saturate(30%);

  --inbox-zero-sidebar-items-filter:
    contrast(98%)
    brightness(500%)
    hue-rotate(0)
    drop-shadow(0px 0px 5px rgba(0,0,0,1))
    opacity(100%)
    saturate(300%);

  --nav-item-filter: var(--svg-filter-inbox);
  --nav-item-active-filter: var(--svg-filter-black);

  --document-list-box-shadow: inset 0 53px 6px -54px var(--neutral-65);
  --inbox-container-drop-shadow: 0px 8px 20px rgb(0 0 0 / 8%), 0px -1px 2px rgb(0 0 0 / 8%);

  --import-link-color: var(--blue-50);

  --tag-color: var(--u-alpha-200);
  --tag-text-color: var(--text-secondary);

  --scrollbar-color: var(--neutral-90);
  --scrollbar-color-hover: var(--neutral-80);

  --separator-color: rgba(0, 0, 0, 0.1);

  --status-dot--unopened-color: var(--text-interactive);

  --toast-background: #151C23;
  --toast-background--error: var(--red-20);
  --toast-background--info: var(--toast-background);
  --toast-background--success: var(--toast-background);
  --toast-background--warning: var(--toast-background);
  --toast-border-radius: 6px;
  --toast-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  --toast-max-width: calc(var(--s1)*40);
  --toast-min-height: calc(var(--s1)*4.4);
  --toast-font-size: var(--font-size-base);
  --toast-gap: var(--s1);
  --toast-icon-height: var(--s2);
  --toast-icon-circle-fill: var(--icon-inverse);
  --toast-icon-circle-fill--error: var(--toast-icon-circle-fill);
  --toast-progress-bar-color: var(--neutral-70);
  --toast-progress-bar-color--error: var(--red-50);
  --toast-progress-bar-color--info: var(--blue-60);
  --toast-progress-bar-color--success: var(--green-60);
  --toast-progress-bar-color--warning: var(--orange-70);
  --toast-text-color: var(--white);
  --toast-text-color-error: var(--toast-text-color);
  --toast-button-color: var(--white);
  --toast-button-color--error: var(--white);
  --toast-button-color--info: var(--white);
  --toast-button-color--success: var(--white);
  --toast-button-color--warning: var(--white);

  --tooltip-background--default: #3E4046;
  --tooltip-background--error: var(--red-10);
  --tooltip-background--info: var(--blue-10);
  --tooltip-background--success: #021100;
  --tooltip-background--warning: #4c2b00;
  --tooltip-color--default: var(--text-inverse);
  --tooltip-shortcut-background: var(--neutral-40);
  --tooltip-shortcut-color:var(--text-inverse);

  --document-list-focus-color: var(--u-alpha-100);

  --primary-icon-filter: var(--svg-filter-black);

  --action-button-border-color: var(--neutral-85);
  --action-button-background: var(--neutral-97);
  --action-button-shadow: var(--neutral-85);
  --action-button-svg-color: var(--svg-filter-grey);

  /* Metadata */
  --summary-text: var(--text-primary);
  --metadata-title: var(--text-secondary);
  --metadata-value: var(--text-primary);
  --metadata-input-background: var(--white);
  --metadata-input-focus-background: var(--white);
  --metadata-footer-button-background: rgba(255, 255, 255, 0.25);
  --metadata-footer-color: var(--white);
  --notebook-highlight-color: #344255;

  --default-button-text-color: var(--text-primary);
  --default-button-background: var(--u-alpha-200);
  --default-button-hover-background: var(--u-alpha-300);
  --default-button-active-background: var(--u-alpha-400);
  --default-blurred-button-background: rgba(235, 237, 238, 0.7);
  --default-blurred-button: 20px;

  --inbox-header-tab-text-color: var(--text-tertiary);
  --inbox-header-active-tab-text-color: var(--text-primary);
  --inbox-header-search-icon: var(--icon-primary);
  --inbox-header-tab-count-background: var(--u-alpha-200);
  --inbox-header-tab-count-text-color: var(--text-secondary);
  --inbox-header-tab-active-count-text-color: var(--text-secondary);

  --document-list-title-color: var(--text-primary);
  --document-list-item-tertiary-text-color: var(--text-secondary);
  --document-list-doc-icon-color: var(--icon-tertiary);
  --document-list-info-color: var(--text-secondary);
  --document-list-action-button-color: var(--icon-primary);

  --table-of-contents-item-color: var(--text-secondary);
  --table-of-contents-bar-color: var(--border-secondary);
  --table-of-contents-bar-active-color: #B5C3FB;

  --search-input-background: var(--u-alpha-200);

  --placeholder-fill-color: #A1AAC4;
  --placeholder-bg-1: url("/assets/placeholder-bg-light-1.7ea5e3de.png");
  --placeholder-bg-2: url("/assets/placeholder-bg-light-2.2d35b895.png");
  --placeholder-bg-3: url("/assets/placeholder-bg-light-3.930a7a17.png");
  --placeholder-bg-4: url("/assets/placeholder-bg-light-4.f53e8fcb.png");

  --empty-feed-image: url("/assets/empty-state-feed-light.3b1ccfe5.png");

  /* Document share */
  --document-share-width-popovers-float-at: 700px;

  /* Radio group */
  --radio-group-indicator-width: 20px;
  --radio-group-indicator-background-color: var(--surface-primary);
  --radio-group-indicator-border-color: var(--neutral-60);
  --radio-group-indicator-active-color: var(--background-interactive);
  --radio-group-indicator-hover-color: var(--neutral-97);

  /* Badge */
  --badge-background-color: var(--green-90);
  --badge-text-color: var(--green-30);

  /* TTS / audio player */
  --tts-trigger-button-color: var(--text-secondary);
  --tts-trigger-border-color: var(--u-alpha-300);

  --tts-player-background: var(--white);
  --tts-player-box-shadow:
    0px 3px 10px 0px rgba(60, 64, 67, 0.2),
    0px 1.5px 4px 0px rgba(60, 64, 67, 0.1),
    0px 0px 0px 1px rgba(60, 64, 67, 0.05);
  --tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);

  /* Slider */
  --slider-track-background: var(--neutral-80);
  --slider-range-background: var(--neutral-50);
  --slider-hover-range-background-color: var(--blue-50);
  --slider-range-border-right-color: var(--white);
  --slider-thumb-background: var(--white);
  --slider-thumb-box-shadow:
    0px 1px 4px 0px rgba(60, 64, 67, 0.4),
    0px 0px 0px 1px rgba(0, 0, 0, 0.08);

  /* These text variables will eventually be deprecated */
  --text: var(--text-primary);
  --text-grey: var(--text-secondary);
  --text-grey-medium: var(--text-secondary);
  --text-grey-lightish: var(--neutral-70);
  --text-grey-lighter: var(--neutral-80);
  --text-grey-dark: var(--text-primary);
  --text-grey-darker: var(--text-primary);
  --box-shadow-color: rgba(0, 0, 0, 0.15);


  --file-dropzone-background: rgba(0, 0, 0, 0.7);
  --file-dropzone-color: var(--white);

  --transcript-teleprompt-background: rgba(89,142,244, .3);
  --transcript-teleprompt-color: black;

  --onboarding-background-image: url("/onboarding/onboarding-background.webp");
  --onboarding-container-box-shadow: 0px 9px 67px rgba(19, 13, 40, 0.0199343), 0px 3.75998px 27.991px rgba(19, 13, 40, 0.0289288), 0px 2.01027px 14.9653px rgba(19, 13, 40, 0.0364916), 0px 1.12694px 8.38944px rgba(19, 13, 40, 0.0438708), 0px 0.598509px 4.45557px rgba(19, 13, 40, 0.052216), 0px 0.249053px 1.85406px rgba(19, 13, 40, 0.07);
  --onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01.webp");
  --onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02.webp");
  --onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03.webp");
  --onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04.webp");

  --checkbox-icon-color: var(--icon-inverse);

  --component-text-input-background: #fff;
  --component-button-accent-subtle-background: rgba(0, 121, 245, 0.10);
  --component-button-accent-subtle-background-disabled: rgba(105, 120, 132, 0.10);
  --component-button-neutral-subtle-background: rgba(105, 120, 132, 0.10);
}@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {:host > *,
:root {
    --default-blurred-button-background: #F2F3F4;
    --default-blurred-button: 0px;
}
  }:host > * .high-contrast, :root .high-contrast {
    --highlight-background-color--normal: hsl(50deg 96.24% 67.14%);
    --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 75%);
    --highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
    --highlight-background-color--active: hsl(50, 100%, 50%);

    --highlight-image-background-color--normal: hsl(50, 100%, 50%);
    --highlight-image-background-color--active: hsl(50, 100%, 50%);
    --selection-color: rgb(74, 153, 255);
    --text-primary: black;
  }.theme--dark {

  /* FOUNDATIONS */

  /* Utility alpha classes */
  --u-alpha-100: rgba(110,120,131,0.10); /* neutral-50 equivalent */
  --u-alpha-200: rgba(110,120,131,0.15);
  --u-alpha-300: rgba(110,120,131,0.20);
  --u-alpha-400: rgba(110,120,131,0.25);
  --u-alpha-500: rgba(110,120,131,0.30);

  --u-alpha-blue-100: rgba(45,117,229,0.10); /* blue-50 equivalent */
  --u-alpha-blue-200: rgba(45,117,229,0.15);
  --u-alpha-blue-300: rgba(45,117,229,0.20);
  --u-alpha-blue-400: rgba(45,117,229,0.25);
  --u-alpha-blue-500: rgba(45,117,229,0.30);

  --u-alpha-red-100: rgba(216,64,58,0.10); /* red-50 equivalent */
  --u-alpha-red-200: rgba(216,64,58,0.15);
  --u-alpha-red-300: rgba(216,64,58,0.20);
  --u-alpha-red-400: rgba(216,64,58,0.25);
  --u-alpha-red-500: rgba(216,64,58,0.30);



  /* Text */
  --text-primary: var(--neutral-90);
  --text-secondary: var(--neutral-65);
  --text-tertiary: var(--neutral-50);
  --text-placeholder: var(--neutral-45);
  --text-disabled: var(--neutral-40);
  --text-inverse: var(--neutral-20); /* for use on dark backgrounds while in light mode */
  --text-interactive: var(--blue-70);
  --text-backlink: var(--indigo-70);
  --text-error: var(--red-60);
  --text-success: var(--green-60);

  /* Icons */
  --icon-primary: var(--neutral-80);
  --icon-secondary: var(--neutral-70);
  --icon-tertiary: var(--neutral-45);
  --icon-placeholder: var(--neutral-45);
  --icon-disabled: var(--neutral-40);
  --icon-interactive: var(--blue-70);
  --icon-danger: var(--red-60);
  --icon-success: var(--green-60);
  --icon-inverse: var(--neutral-20);
  --icon-faint: var(--neutral-30);

  /* Highlights */
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 80%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);

  --highlight-text-color: var(--white);
  --highlight-text-pre-color: var(--white);
  --highlight-text-pre-color--active: var(--white);

  /* Borders */
  --border-primary: var(--neutral-65);
  --border-secondary: var(--neutral-20);
  --border-secondary-alpha: var(--u-alpha-400);
  --border-tertiary-alpha: var(--u-alpha-200);
  --border-focus: var(--blue-60);
  --border-error: var(--red-40);

   /* Backgrounds */
  --background-primary: var(--neutral-10);
  --background-secondary: var(--neutral-15);
  --background-tertiary: var(--neutral-20);
  --background-inverse: var(--neutral-90);
  --background-canvas: var(--neutral-07);
  --background-elevated: var(--neutral-20);
  --background-backdrop: rgba(0,0,0,0.4);
  --background-dragging: rgba(40, 49, 59, 0.7);
  --background-interactive: var(--blue-70);
  --background-error: var(--red-10);
  --background-bulk-actions-header: var(--blue-30);

  /* Shadows */
  --shadow-100: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-200: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1.5px 4px rgba(0, 0, 0, 0.1), 0px 3px 10px rgba(0, 0, 0, 0.2);
  --shadow-300: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 3px 5px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.25);
  --shadow-400: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 5px 12px rgba(0, 0, 0, 0.1), 0px 12px 32px rgba(0, 0, 0, 0.2), 0px 20px 96px rgba(0, 0, 0, 0.4);


  /* COMPONENTS */

  /* Progress bar */
  --reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
  --reading-progress-background: var(--neutral-20);
  --reading-progress-max-background: var(--neutral-35);
  --reading-progress-point: var(--neutral-90);

  /* Buttons */

  /* primary - deprecated */
  --primary-button-background: var(--u-alpha-blue-200); /* deprecated */
  --primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
  --primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
  --primary-button-color: var(--text-primary); /* deprecated */

  /* primary */
  --background-button-primary: var(--u-alpha-blue-200);
  --background-button-primary-hover: var(--u-alpha-blue-300);
  --background-button-primary-active: var(--u-alpha-blue-400);
  --text-button-primary: var(--text-primary);
  --text-button-primary-disabled: var(--text-disabled);

  /* secondary */
  --background-button-secondary: var(--u-alpha-200);
  --background-button-secondary-hover: var(--u-alpha-300);
  --background-button-secondary-active: var(--u-alpha-400);
  --text-button-secondary: var(--text-primary);
  --text-button-secondary-disabled: var(--text-disabled);

  /* accent */
  --text-button-accent-subtle-background:rgba(45, 117, 229, 0.23);
  --text-button-accent-subtle-text: rgba(124, 174, 236, 1);
  --text-button-accent-subtle-disabled-background: rgba(110, 120, 130, 0.2);
  --text-button-accent-subtle-disabled-text: rgba(84, 96, 108, 1);

  --btn-secondary: rgba(62, 72, 83, 0.7); /* used for blur buttons? */

  /* blue button */
  --background-button-blue: var(--blue-60);
  --background-button-blue-hover: var(--blue-70);
  --background-button-blue-active: var(--blue-80);
  --background-button-blue-disabled: var(--u-alpha-200);
  --text-button-blue: var(--black);
  --text-button-blue-disabled: var(--text-disabled);

  /* caution */
  --background-button-caution: var(--u-alpha-red-200);

  /* Document card */
  --document-card-border: rgba(0,0,0,0);
  --document-card-border-divider: rgba(0,0,0,.2);
  --document-card-height: var(--background-elevated);
  --document-card-background: var(--neutral-15);
  --document-card-background--hover: var(--neutral-20);
  --document-card-book-image-container-background: var(--background-secondary);
  --document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.43), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.5), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.3715), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.3485), inset 0px 1px 0px rgba(255, 255, 255, 0.2);

  --document-card-hover-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.00), 0px 1.5px 4px rgba(0, 0, 0, 0.03), 0px 2px 8px rgba(0, 0, 0, .3);

  /* Link card */
  --link-card-border--hover: var(--neutral-40);

  /* Donut progress indicator */
  --donut-progress-indicator-center-color: var(--document-card-background);

  /* Sidebar */
  --sidebar-background: var(--background-canvas);
  --empty-sidebar-background: var(--neutral-07);
  --hide-sidebar-button-background: #445064;
  --sidebar-button-icon-color: var(--inbox-icon-color);
  --sidebar-inbox-nav-background: var(--neutral-20);
  --thumbnail-loading-background: linear-gradient( 100deg, rgba(62, 72, 83, 0) 40%, rgba(62, 72, 83, .5) 50%, rgba(62, 72, 83, 0) 60% ) var(--u-alpha-200);
  --sidebar-logo-color: #fff;

  /* Image placeholders */
  --image-placeholder-color: var(--neutral-80);
  --image-placeholder-shadow-color: var(--black);

  /* Main background surfaces */
  --background-color: var(--background-primary);
  --content-background-color: var(--background-primary);
  --code-background-color: var(--neutral-25);

  /* Popovers */
  --edit-tags-form-focused-option-background: var(--neutral-25);
  --main-highlighter-popover-action-hover-background: var(--u-alpha-100);
  --main-highlighter-popover-delete-highlight-action-background: var(--yellow-30);
  --main-highlighter-popover-delete-highlight-icon-color: var(--yellow-70);
  --highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);

  /* Sort menu */
  --sort-menu-background: var(--background-elevated);

  /* Misc */
  --content-secondary-color: var(--text-secondary);
  --focus-indicator-color: var(--blue-50);
  --section-border-color: var(--border-secondary-alpha);
  --app-side-drop-shadow: rgba(40, 40, 40, 0.75);

  /* Appearance panel */
  --appearance-panel-background: var(--background-elevated);
  --appearance-panel-item-hover-background: var(--u-alpha-100);

  /* Command palette */
  --cmd-palette-background: var(--neutral-15);
  --cmd-palette-cmd-container: var(--neutral-15);
  --cmd-palette-section-title: var(--neutral-15);
  --cmd-palette-row-hover: var(--u-alpha-100);
  --cmd-palette-drop-shadow: var(--shadow-400);
  --cmd-palette-scrollbar: var(--neutral-40);
  --cmd-palette-key-background: var(--u-alpha-200);
  --cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.16) inset;
  --cmd-palette-context-item-background:var(--background-primary);
  --cmd-palette-context-item-border: var(--border-secondary);
  --cmd-palette-label-color: var(--text-secondary);
  --cmd-palette-close-icon-color: #B6B9BF;

  /* Wisereads doc discovery modal */
  --wisereads-modal-header-background: rgba(31, 39, 47, 0.9);
  --wisereads-modal-background: var(--background-secondary);
  --wisereads-modal-card-background: var(--background-tertiary);
  --wisereads-modal-card-border-hover: var(--border-secondary-alpha);
  --wisereads-modal-button-background: rgba(45, 117, 229, 0.23);

  /* Inbox */

  --inbox-sidebar-background: #12171C;
  --inbox-icon-color: var(--icon-secondary);
  --inbox-icon-color-disabled: var(--icon-disabled);
  --inbox-icon-color-active: var(--icon-primary);

  --inbox-zero-background-image-filter: opacity(30%) saturate(0%);
  --inbox-zero-foreground-image-filter:
    brightness(300%)
    opacity(50%)
    contrast(30%)
    saturate(100%);

  --inbox-zero-header-items-filter:
    contrast(70%)
    brightness(200%)
    hue-rotate(0)
    drop-shadow(0 0 2px rgba(0,0,0,1))
    opacity(70%)
    saturate(30%);

  --inbox-zero-sidebar-items-filter:
    contrast(98%)
    brightness(500%)
    hue-rotate(0)
    drop-shadow(0px 0px 5px rgba(0,0,0,1))
    opacity(100%)
    saturate(300%);

  --nav-item-filter: var(--svg-filter-inbox);
  --nav-item-active-filter: var(--svg-filter-white);

  --document-list-box-shadow: inset -2px 53px 16px -54px var(--black);
  --inbox-container-drop-shadow:  0px 8px 20px rgba(0, 0, 0, 0.08), 0px -1px 2px rgba(0, 0, 0, 0.08);

  --import-link-color: var(--blue-50);

  --tag-color: var(--u-alpha-200);
  --tag-text-color: var(--text-secondary);

  --scrollbar-color:var(--neutral-40);
  --scrollbar-color-hover: var(--neutral-50);

  --separator-color: rgba(255, 255, 255, 0.1);

  --toast-background: var(--white);
  --toast-background--error: var(--red-90);
  --toast-background--info: var(--toast-background);
  --toast-background--success: var(--toast-background);
  --toast-background--warning: var(--toast-background);
  --toast-button-color: var(--text-inverse);
  --toast-button-color--error: var(--text-error);
  --toast-button-color--info: var(--toast-button-color);
  --toast-button-color--success: var(--toast-button-color);
  --toast-button-color--warning: var(--toast-button-color);
  --toast-box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.1), 0 2px 5px 0 rgba(255, 255, 255, 0.05);
  --toast-icon-circle-fill--error: var(--icon-danger);
  --toast-text-color: var(--text-inverse);
  --toast-text-color--error: var(--red-20);

  --tooltip-background--default: var(--white);
  --tooltip-color--default: #202226;
  --tooltip-shortcut-background: #ECECED;
  --tooltip-shortcut-color: rgba(32, 34, 38, 0.64);

  --document-list-focus-color: var(--u-alpha-100);


  --primary-icon-filter: var(--svg-filter-white);
  --action-button-border-color: var(--neutral-15);
  --action-button-background: var(--neutral-10);
  --action-button-shadow: var(--black);
  --action-button-svg-color: var(--svg-filter-white);


  /* PDF Search Bar */
  --document-search-input-background: var(--neutral-00);

  /* Find in document matches DARK MODE */
  --find-in-document-match-passive: rgba(108, 120, 131, 0.42);
  --find-in-document-match-active: rgba(22, 148, 245, 0.3);

  /* Metadata */
  --summary-text: var(--text-primary);
  --metadata-title: var(--text-secondary);
  --metadata-value: var(--text-primary);
  --metadata-input-background: var(--background-secondary);
  --metadata-input-focus-background: var(--background-primary);
  --metadata-footer-button-background: rgba(43, 46, 55, 0.05);
  --metadata-footer-color: var(--background-canvas);
  --notebook-highlight-color: var(--black);

  --default-button-text-color: var(--text-primary);
  --default-button-background: var(--u-alpha-200);
  --default-button-hover-background: var(--u-alpha-300);
  --default-button-active-background: var(--u-alpha-400);
  --default-blurred-button-background: rgba(62, 72, 83, 0.7);
  --default-blurred-button: 20px;

  --inbox-header-tab-text-color: var(--text-grey-medium);
  --inbox-header-active-tab-text-color: var(--text-primary);
  --inbox-header-search-icon: var(--white);
  --inbox-header-tab-count-background: var(--u-alpha-200);
  --inbox-header-tab-count-text-color: var(--text-grey-lighter);
  --inbox-header-tab-active-count-text-color: var(--text-grey-darker);

  --document-list-title-color: var(--text-primary);
  --document-list-item-tertiary-text-color: var(--text-secondary);
  --document-list-doc-icon-color: var(--icon-secondary);
  --document-list-info-color: var(--text-secondary);
  --document-list-action-button-color: rgba(255, 255, 255, 0.8);

  --table-of-contents-item-color: var(--text-secondary);
  --table-of-contents-bar-color: #464851;
  --table-of-contents-bar-active-color: #4E94FD;

  --search-input-background: var(--u-alpha-200);

  --transcript-teleprompt-background: rgba(89,142,244, .4);
  --transcript-teleprompt-color: white;

  --placeholder-fill-color: #7F8494;
  --placeholder-bg-1: url("/assets/placeholder-bg-dark-1.6e58967f.png");
  --placeholder-bg-2: url("/assets/placeholder-bg-dark-2.9f7c66c5.png");
  --placeholder-bg-3: url("/assets/placeholder-bg-dark-3.3fb3a36d.png");
  --placeholder-bg-4: url("/assets/placeholder-bg-dark-4.1b679a5e.png");

  --empty-feed-image: url("/assets/empty-state-feed-dark.14291346.png");

  /* Radio group */

  --radio-group-indicator-hover-color: var(--neutral-20);

  /* Badge */
  --badge-background-color: var(--green-30);
  --badge-text-color: var(--green-90);

  /* TTS / audio player */
  --tts-trigger-button-color: var(--neutral-70);
  --tts-trigger-border-color: var(--u-alpha-300);

  --tts-player-background: var(--neutral-10);
  --tts-player-box-shadow:
    0px 3px 10px 0px rgba(0, 0, 0, 0.3),
    0px 1.5px 4px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 1px rgba(0, 0, 0, 0.15);
  --tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);

  /* Slider */
  --slider-track-background: var(--neutral-30);
  --slider-range-background: var(--neutral-50);
  --slider-hover-range-background-color: var(--blue-50);
  --slider-range-border-right-color: var(--neutral-10);
  --slider-thumb-background: var(--white);
  --slider-thumb-box-shadow:
    0px 1px 4px 0px rgba(60, 64, 67, 0.4),
    0px 0px 0px 1px rgba(0, 0, 0, 0.08);

  /* These text variables will eventually be deprecated */
  --text: var(--text-primary);
  --text-grey-lighter: var(--neutral-80);
  --text-grey: var(--text-secondary);
  --text-grey-medium: var(--text-secondary);
  --text-grey-lightish: var(--neutral-70);
  --text-grey-lighter: var(--neutral-80);
  --text-grey-dark: var(--text-primary);
  --text-grey-darker: var(--text-primary);

  --onboarding-background-image: url("/onboarding/onboarding-background-dark.webp");
  --onboarding-container-box-shadow: 0px 9px 67px rgb(19 13 40 / 20%), 0px 3.75998px 27.991px rgb(19 13 40 / 12%), 0px 2.01027px 14.9653px rgb(19 13 40 / 4%), 0px 1.12694px 8.38944px rgb(9 6 18 / 19%), 0px 0.598509px 4.45557px rgb(7 7 7 / 40%), 0px 0.249053px 1.85406px rgb(6 4 12 / 18%);
  --onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01-dark.webp");
  --onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02-dark.webp");
  --onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03-dark.webp");
  --onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04-dark.webp");

  --checkbox-icon-color: var(--neutral-00);

  --component-text-input-background: rgba(105, 120, 132, 0.12);
  --component-button-accent-subtle-background: rgba(0, 121, 245, 0.23);
  --component-button-accent-subtle-background-disabled: rgba(105, 120, 132, 0.20);
  --component-button-neutral-subtle-background: rgba(105, 120, 132, 0.20);
}@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {.theme--dark {
    --default-blurred-button-background: #2B323A;
    --default-blurred-button: 0px;
}
  }.theme--dark.high-contrast {
  --text-primary: white;
}/* Component variables (NO COLORS) */:host > *,
:root {
  --animation-duration--imply-interactivity: 0;
  --animation-duration--move: 0;
  --animation-duration--reveal: 0;
  --content-gutter: var(--s3);
  --reading-editable-line-length: 648px;
  --document-list-item-height: calc(var(--f1) * 11.3);
  --document-list-item-height_js: 113px; /* JS can't parse the above easily */
  --document-list-item-horizontal-padding: calc(var(--s1) * 1.7);
  --document-list-image-height: 62px;
  --document-list-image-width: 62px;
  --document-list-padding-top: 8px;
  --focus-indicator-width: 3px;
  --inbox-header-height: 65px;
  --inbox-header-height_js: 65px; /* JS can't parse the above easily */
  --inbox-sidebar-width: 240px;
  --person-card-image-size: 40px;
  --sidebar-padding-vertical: 0.5rem;
  --sidebar-nav-height: 64px;
  --sidebar-padding-horizontal: 24px;
  --sidebar-padding: var(--sidebar-padding-vertical) var(--sidebar-padding-horizontal);

  --popover-max-width: 305px;
  --popover-background: var(--background-elevated);
  --popover-z-index: 100;
  --popover-focused-z-index: 101;

  --sidebars-max-width: 296px;
  --progress-bar-large-height: 3px;

  --table-of-contents-font-size: 0.875rem;
  --table-of-contents-bar-margin-right: 16px;
  --table-of-contents-bar-height: 4px;
  --table-of-contents-max-bar-width: 32px;
  --table-of-contents-width-diff: 8px;
  --scrollbar-border-radius: 12px;
  --scrollbar-thickness: 14px;
  --status-dot-size: 6px;
  --appearance-panel-width: 292px;
  --feed-icon-in-palette: 16px;
  --action-button-border-radius: 31px;
  --theme-transition-time: 0s;
  --panels-transition-time: 0.2s;

  --tts-player-height: 96px;
  --js__tts-player-current-height: 0; /* Updated by JS */
  --safe100vh: calc(100vh - var(--js__tts-player-current-height));
  --safeBottom0: calc(0px + var(--js__tts-player-current-height));
}@media (prefers-reduced-motion: no-preference) {:host > *,
:root {
    --animation-duration--imply-interactivity: 0.15s;
    --animation-duration--move: 0.25s;
    --animation-duration--reveal: 0.15s;
}
  }:host > * .high-contrast, :root .high-contrast {
    --highlight-text-color: black;
  }/*
  Pseudo-elements are not meant to react to pointer events but we found an issue in Firefox which was
  fixed by adding `pointer-events: none`, so let's make sure it's done for all.
*/:scope::before,:scope::after,
  ::before,
  ::after {
    pointer-events: none !important;
  }/* Reset html elements. */.document-content div, .document-content span, .document-content applet, .document-content object, .document-content iframe, .document-content h1, .document-content h2, .document-content h3, .document-content h4, .document-content h5, .document-content h6, .document-content p, .document-content blockquote, .document-content pre, .document-content a, .document-content abbr, .document-content acronym, .document-content address, .document-content big, .document-content cite, .document-content code, .document-content del, .document-content dfn, .document-content em, .document-content img, .document-content ins, .document-content kbd, .document-content q, .document-content s, .document-content samp, .document-content small, .document-content strike, .document-content strong, .document-content tt, .document-content var, .document-content b, .document-content u, .document-content i, .document-content center, .document-content dl, .document-content dt, .document-content dd, .document-content ol, .document-content ul, .document-content li, .document-content fieldset, .document-content form, .document-content label, .document-content legend, .document-content table, .document-content caption, .document-content tbody, .document-content tfoot, .document-content thead, .document-content tr, .document-content th, .document-content td, .document-content article, .document-content aside, .document-content canvas, .document-content details, .document-content embed, .document-content figure, .document-content figcaption, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content output, .document-content ruby, .document-content section, .document-content summary, .document-content time, .document-content mark, .document-content audio, .document-content video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }.document-content style {
    display: none;
    user-select: none;
    -webkit-user-select: none;
  }/* HTML5 display-role reset for older browsers */.document-content article, .document-content aside, .document-content details, .document-content figcaption, .document-content figure, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content section {
    display: block;
  }.document-content ol, .document-content ul {
    list-style: none;
  }.document-content blockquote, .document-content q {
    quotes: none;
  }.document-content blockquote:before, .document-content blockquote:after, .document-content q:before, .document-content q:after {
    content: '';
    content: none;
  }.document-content table {
    border-collapse: collapse;
    border-spacing: 0;
  }.document-content span[data-rw-start] {
    cursor: pointer;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
  }.document-content span[data-rw-start]:hover {
      border-radius: 4px;
      background: var(--u-alpha-400);
      color: var(--transcript-teleprompt-color);
    }.document-content span[data-rw-start]:has(.rw-highlight:hover) {
      background: none;
      color: inherit;
    }@media (max-width: 768px) {
      .document-content span.touchstart[data-rw-start] {
        border-radius: 4px;
        background: var(--u-alpha-400) !important;
        color: var(--transcript-teleprompt-color) !important;
      }

      .document-content span[data-rw-start]:hover {
        background: none;
        color: inherit;
      }
    }/* End of Reset */:root #document-header {
  --reading-text-primary: #0C1117;
  --reading-border: #F0F1F2;
  --reading-icon: #606C79;
}.theme--dark #document-header {
  --reading-text-primary: #F0F1F2;
  --reading-border: rgba(92, 105, 119, 0.3);
  --reading-icon: #F0F1F2;
}.theme--dark .document-content  img, .theme--dark .document-content figure img {
  opacity: .7;
  transition: opacity 500ms;
}:root .document-content { /* Light theme */

  /* Reading colours */
  --reading-text-title: var(--black);
  --reading-text-primary: var(--text-primary);
  --reading-text-secondary: var(--text-secondary);
  --reading-text-primary-inverse: var(--text-inverse);
  --reading-text-link: 13 30 142;
  --reading-text-link-highlight: 0 0 0;
  --reading-text-primary-link-highlight: var(--black);
  --reading-text-code: var(--red-40);

  /* Surface colors */
  --reading-surface-primary-inverse: #1E272F;
  --reading-surface-tertiary: rgba(92, 105, 119, 0.06);
  --reading-surface-code: #333C46;

  /* Border colors */
  --reading-border-secondary: rgba(40, 49, 59, 0.12);
  --text-selection-background-color: rgba(70, 147, 254, 0.18);
}.theme--dark .document-content { /* Dark theme */
  --reading-text-title: var(--white);
  --reading-text-primary: var(--neutral-80);
  --reading-text-secondary: var(--text-secondary);
  --reading-text-primary-inverse: var(--text-primary);
  --reading-text-link: 174 200 241;
  --reading-text-link-highlight: 255 255 255;
  --reading-text-primary-link-highlight: var(--neutral-100);
  --reading-text-code: var(--orange-80);

  /* Surface colors */
  --reading-surface-primary-inverse: #10161D;
  --reading-surface-tertiary: rgba(92, 105, 119, 0.15);
  --reading-surface-code: #E2E8F0;

  /* Border colors */
  --reading-border-secondary: rgba(92, 105, 119, 0.3);
}.theme--dark.high-contrast .document-content {
  --reading-text-primary: var(--text-primary);
}.theme--sepia .document-content {
  --reading-text-title: #3C2D23;
  --reading-text-primary: #3C2D23;
  --reading-text-secondary: #7A6755;
}:root {
  --reading-editable-font-size: 20;
  --reading-editable-text-justify: start;
  --reading-editable-line-height: 1.6; /* should land on 4px increments. 20, 24, 28, 32, 36 */
  --reading-editable-font-family: "Source Serif VF", Georgia, Serif;
  /* auto generate */

  --reading-scale: 1.2;
  --reading-root-size: 16; /* This is to replicate the browser base size for math purposes */

  --reading-base-fs: calc(var(--reading-editable-font-size) / var(--reading-root-size)); /* fs is unitless and is only used for calculations*/
  --reading-base-font-size: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
  --reading-base-line-height: var(--reading-editable-line-height);
  --reading-base-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);

  /* Caption = table divided by scale */
  --reading-caption-fs: calc(var(--reading-table-fs) / var(--reading-scale)  / var(--reading-scale));
  --reading-caption-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
  --reading-caption-line-height: var(--reading-editable-line-height);
  --reading-caption-margin: calc(var(--reading-editable-line-height) / calc(var(--reading-root-size) * var(--reading-p-fs)) * 1em);

  /* Table = base size divided by scale */
  --reading-table-fs: calc(var(--reading-base-fs) / var(--reading-scale) );
  --reading-table-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
  --reading-table-line-height: var(--reading-editable-line-height);
  --reading-table-margin: calc(var(--reading-editable-font-size)*.75);

  /* P = base size */
  --reading-p-fs: calc(var(--reading-base-fs));
  --reading-p-font-size: calc(var(--reading-base-fs) * 1rem);
  --reading-p-line-height: var(--reading-editable-line-height);
  --reading-p-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
  --reading-p-margin-v: calc( var(--reading-editable-font-size) / var(--reading-root-size) * calc(var(--reading-editable-line-height) - 0.5) *1rem );


  /* H3 = base size x scale */
  --reading-h3-fs: var(--reading-p-fs);
  --reading-h3-font-size: calc(var(--reading-p-fs) * 1rem);
  --reading-h3-line-height: var(--reading-editable-line-height);
  --reading-h3-margin: calc(var(--reading-h3-line-height) * 1em);

  /* H2 = H3 size x scale */
  --reading-h2-fs: calc(var(--reading-h3-fs) * var(--reading-scale));
  --reading-h2-font-size: calc(var(--reading-h3-fs) * var(--reading-scale) * 1rem);
  --reading-h2-line-height: calc(var(--reading-h3-line-height) * .925);

  /* H1 = H2 size x scale */
  --reading-h1-fs: calc(var(--reading-h2-fs) * var(--reading-scale));
  --reading-h1-font-size: calc(var(--reading-h2-fs) * var(--reading-scale) * 1rem);
  --reading-h1-line-height: calc(var(--reading-h2-line-height) * .925);
  --reading-h1-margin: calc(var(--reading-h1-line-height) * 1em);


  /* Typefaces */
  --reading-font-body: var(--reading-editable-font-family);
  --reading-font-title: var(--reading-editable-font-family);
  --reading-font-caption: "Inter VF", sans-serif;

  --reading-font-monospace: "Roboto Mono VF","SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}.is-reader-mobile-app .document-header-title {
    width: 100%;
    text-align: center;
    font-size: 30px;
    line-height: 32px;
  }.is-reader-mobile-app .document-header-domain {
    width: 100%;
    gap: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }.is-reader-mobile-app .header-top-row {
    margin-bottom: var(--spacer-4);
  }.is-reader-mobile-app hr {
    color: var(--reading-border);
  }.is-reader-mobile-app .summary-top-line {
    height: 1px;
    background-color: var(--reading-border);
    margin: 18px auto;
    transition: width 0.3s ease-in-out;
    width: 0;
  }.is-reader-mobile-app .summary-top-line-expanded {
    width: 32px;
  }.is-reader-mobile-app .summary-section {
    margin-top: 12px;
  }.is-reader-mobile-app .document-header-mobile-separator {
    display: flex;
    align-items: center;
    justify-content: center;
  }.is-reader-mobile-app .document-header-mobile-separator::before,
    .is-reader-mobile-app .document-header-mobile-separator::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid var(--reading-border);
    }.is-reader-mobile-app .document-header-mobile-separator .toggle-icon {
      margin: 8px 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--reading-icon);
      background-color: var(--reading-border);
      border-radius: 50%;
      transition: transform 0.3s ease-in-out;
    }.is-reader-mobile-app .document-header-mobile-separator .toggle-icon-expanded {
      transform: rotate(180deg);
    }.is-reader-mobile-app .document-header-metadata-row {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
  }.is-reader-mobile-app .document-header-metadata-row span {
      font-size: 13px;
      color: var(--text-secondary);
    }.is-reader-mobile-app .document-header-metadata-row .metadata-author {
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 0 1 auto;
    }.is-reader-mobile-app .document-header-tags {
    margin-top: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
  }#document-header {
  margin-bottom: 0;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--ui-font);
}#document-header h1 {
    margin: 0;
    font-size: 40px;
    line-height: 46px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--reading-text-primary);
    font-family: var(--reading-editable-font-family);
    font-feature-settings: "onum" 1;
    font-variation-settings: "opsz" 41; /* optical size needs to be set close to font-size but it can't be the exact same - Safari bug */
    text-rendering: optimizeLegibility;
    text-wrap: balance;
  }@media (max-width: 768px) {#document-header {
    margin-bottom: -6px;
}
    #document-header h1 {
      font-size: 32px;
      line-height: 36.8px;
      letter-spacing: -0.015em;
    }

  }#document-header .header-top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--spacer-5);
  }#document-header .header-source-container {
    flex: 1;
  }#document-header .document-header-domain {
    display: flex;
    overflow: hidden;

    gap: 12px;
  }#document-header .document-header-domain span {
      color: var(--text-secondary);
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 100%;
      text-align: center;
    }#document-header .document-header-domain .document-header-domain-favicon, #document-header .document-header-domain svg {
      background-size: cover;
      height: 16px;
      width: 16px;
      fill: var(--icon-secondary);
    }#document-header hr {
    border: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-color: var(--border-secondary-alpha);
    margin: 0;
    margin-top: 20px;
  }@media (max-width: 768px) {#document-header hr {
      margin-top: 16px;
  }
    }#document-header .document-header-metadata-row {
    word-break: break-word;
    overflow: hidden;
  }#document-header .document-header-metadata-row span {
      font-weight: 400;
      font-size: 14px;
    }#document-header .document-header-metadata-row .document-header-author-content {
      white-space: nowrap;
      margin-right: 8px;
      color: var(--text-secondary);
      /* The true value for line-height should be 20px, but because we want the tags to flow with the author text,
          the tags and author are effectively in one long span that flows properly around the date span which is fixed to the right

        57 = 17px true size of text + 20px * 2 for 20px margin above and below

        if I am correct, the 20px line-height makes no effect anymore, effectively we are using line-height
        when we should use margins, but sadly we cannot pull that off because you cannot create margins between
        two lines of text in one span, thats the job of line height
       */
      line-height: 57px;
    }@media (max-width: 768px) {#document-header .document-header-metadata-row .document-header-author-content {
        /* 48 = 16px + 16 * 2 for margins */
        line-height: 48px;
    }
      }#document-header .document-header-metadata-row .document-header-author-content .document-header-author-text {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }#document-header .document-header-metadata-row .document-header-published-date {
      float: right;
      white-space: nowrap;
      color: var(--text-secondary);
      /* See above as to why this is 57px */
      line-height: 57px;
    }@media (max-width: 768px) {#document-header .document-header-metadata-row .document-header-published-date {
        /* 48 = 16px + 16 * 2 for margins */
        line-height: 48px;
    }
      }#document-header .document-header-metadata-row .document-header-separator {
      display: inline-flex;
      background: var(--border-primary);
      width: 4px;
      height: 4px;
      min-width: 4px;
      min-height: 4px;
      border-radius: 100%;
      margin: 0 6px;
      margin-bottom: 3px;
    }#document-header .document-header-tags {
    display: inline-flex;
    flex-wrap: wrap;
  }#document-header .document-header-tags a {
      margin-right: 4px;
      margin-bottom: 4px;
    }#document-header .summary-container-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
  }#document-header .summary-container-expanded {
    grid-template-rows: 1fr;
  }#document-header .summary-container {
    overflow: hidden;
  }#document-header .summary-container .summary-content {
      display: flex;
      flex-direction: column;
      margin: 16px 0;
      gap: 8px;
    }#document-header .summary-container .summary-content .summary-text {
        white-space: pre-line;
        color: var(--reading-text-primary);
        margin: 0;
        font-size: 15px;
        line-height: 20px;
        font-weight: 400;
      }#document-header .summary-container .summary-content .summary-attribution {
        margin: 0;
        color: var(--text-tertiary);
        font-size: 13px;
        line-height: 18px;
      }#document-header rw-spacer {
    display: block;
    width: 100%;
  }#document-header rw-spacer:not([size]) {
    height: var(--spacer-4);
  }#document-header rw-spacer[size="1"] {
    height: var(--spacer-1);
  }#document-header rw-spacer[size="2"] {
    height: var(--spacer-2);
  }#document-header rw-spacer[size="3"] {
    height: var(--spacer-3);
  }#document-header rw-spacer[size="4"] {
    height: var(--spacer-4);
  }#document-header rw-spacer[size="5"] {
    height: var(--spacer-5);
  }#document-header rw-spacer[size="6"] {
    height: var(--spacer-6);
  }#document-header rw-spacer[size="7"] {
    height: var(--spacer-7);
  }#document-header rw-spacer[size="8"] {
    height: var(--spacer-8);
  }.document-content {
  box-sizing: border-box;
  padding: 0 var(--content-gutter) 0; /* needs to be adjusted */
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  font-variation-settings: "opsz" calc(var(--reading-editable-font-size) + 1); /* optical size needs to be set close to font-size but it
   can't be the exact same - Safari bug */
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;

  /* full justification
  text-align: justify; */

  /* hyphenation */
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;
  -webkit-hyphenate-limit-zone: 8%;
  -moz-hyphens: auto;
  -moz-hyphenate-limit-chars: 6 3 3;
  -moz-hyphenate-limit-lines: 2;
  -moz-hyphenate-limit-last: always;
  -moz-hyphenate-limit-zone: 8%;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: 6 3 3;
  -ms-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-last: always;
  -ms-hyphenate-limit-zone: 8%;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;

}@supports (font-kerning: normal) and (font-variant ligatures: common-ligatures contextual) {.document-content {
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;

}
  }/* This is required for emulating selection but it breaks the content focus indicator on web */.document-content.rw-mobile-web-view,
  .document-content.is-emulating-selection {
    position: relative;
  }.document-content p {
    margin-bottom: var(--reading-p-margin);
    margin-top: var(--reading-p-margin);
  }.document-content p.rw-hide {
      display: none;
    }.document-content h1 {
    margin-top: calc(var(--reading-base-margin) * 3);
    margin-bottom: var(--reading-base-margin);
    letter-spacing: -0.019em;
    font-variation-settings: "opsz" calc(var(--reading-h1-fs) * 16 + 1 );
    font-weight: 600;
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top: 96px;
  }.document-content h2 {
    margin-top: calc(var(--reading-base-margin) * 2);
    margin-bottom: var(--reading-base-margin);
    letter-spacing: -0.011em;
    font-variation-settings: "opsz" calc(var(--reading-h2-fs) * 16 + 1);
    font-weight: 600;
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top:96px;
  }.document-content h3 {
    font-weight: 600;
    margin-top: calc(var(--reading-base-margin) * 1.5);
    margin-bottom: calc(var(--reading-base-margin) * .5);
    letter-spacing: -0.011em;
    font-variation-settings: "opsz" calc(var(--reading-h3-fs) * 16 + 1);
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top:96px;
  }.document-content h4,
  .document-content h5,
  .document-content h6 {
    font-weight: 600;
    margin-top: var(--reading-p-margin);
    margin-bottom: calc(var(--reading-p-margin) * 0.5);
    scroll-margin-top:96px;
  }.document-content h2 + * {
    margin-top: 0;
  }.document-content h3 + * {
    margin-top: 0;
  }.document-content h4 + * {
    margin-top: 0;
  }.document-content h1 code,
  .document-content h2 code,
  .document-content h3 code,
  .document-content h4 code,
  .document-content h5 code,
  .document-content h6 code {
    font-size: .9em;
  }.document-content h4 code {
    font-size: .9em;
    font-weight: 600;
  }.document-content em, .document-content i {
    font-style: italic;
  }.document-content strong, .document-content b {
    font-weight: 600;
  }.document-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }.document-content hr {
    border-top-width: 1px;
    border-top-style: solid;
    margin-top: calc(var(--reading-base-margin) * 3);
    margin-bottom: calc(var(--reading-base-margin) * 3);
    border-bottom: none;
  }.document-content hr + * {
    margin-top: 0;
  }.document-content sub, .document-content sup {
    line-height: 0;
  }/* -- Lists --*/.document-content ol {
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    list-style-type: decimal;
  }.document-content ol li {
      margin-top: .5rem;
      margin-bottom: .5rem;
    }.document-content ol > li {
      margin-left: calc(var(--reading-base-margin) * 2);
      padding-left: .5rem;
    }.document-content ol > li p {
      margin-top: calc(var(--reading-base-margin) / 4);
      margin-bottom: calc(var(--reading-base-margin) / 4);
    }.document-content ol > li > *:first-child {
    margin-top: calc(var(--reading-base-margin));
  }.document-content ol > li > *:last-child {
    margin-bottom: calc(var(--reading-base-margin));
  }.document-content ul {
    font-family: var(--reading-font-body);
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    font-size: var(--reading-base-font-size);
    list-style-type: disc;
  }.document-content ul li {
      margin-top: calc(var(--reading-base-margin) / 2);
      margin-bottom: calc(var(--reading-base-margin) / 2);
      font-size: var(--reading-base-font-size);
    }.document-content ul > li {
      margin-left: calc(var(--reading-base-margin) * 2);
      padding-left: .5rem;
    }.document-content ul > li p {
      margin-top: calc(var(--reading-base-margin) / 4);
      margin-bottom: calc(var(--reading-base-margin) / 4);
    }.document-content ul > li > *:first-child {
    margin-top: calc(var(--reading-base-margin) / 2);
  }.document-content ul > li > *:last-child {
    margin-bottom: calc(var(--reading-base-margin));
  }.document-content ul ul,
  .document-content ul ol,
  .document-content ol ul,
  .document-content ol ol {
    margin-top: .5em;
    margin-bottom: .5em;
  }/*  description list */.document-content dt {
    margin-top: var(--reading-p-margin);
  }/* make sure to not delete this because pagination relies on this CSS */.document-content * :last-child {
    margin-bottom: 0;
  }/* Tables */.document-content table {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 2em;
    margin-bottom: 2em;
    font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 0; /* changes back to lining figures */
  }.document-content table caption {
    margin-top: var(--reading-base-margin);
    margin-bottom: calc(var(--reading-base-margin) * 1em);
  }.document-content thead {
    font-weight: 600;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--reading-border-secondary);
  }.document-content thead th {
    vertical-align: bottom;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
  }.document-content tbody tr {
    border-bottom-width: 1px;
    border-style: solid;
  }.document-content tbody tr:last-child {
    border-bottom-width: 0;
  }.document-content tbody td {
    vertical-align: top;
    padding-top: 0.75em;
    padding-right: 0.5em;
    padding-bottom: 0.75em;
    padding-left: 0.5em;
  }.document-content tfoot {
    font-weight: 600;
    border-top-width: 1px;
    border-top-style: solid;
  }.document-content tfoot th {
    vertical-align: top;
    padding-right: 0.5em;
    padding-top: 0.5em;
    padding-left: 0.5em;
  }.document-content thead th:first-child {
    padding-left: 0;
  }.document-content tfoot th:first-child {
    padding-left: 0;
  }.document-content tbody td:first-child {
    padding-left: 0;
  }.document-content tbody td:last-child {
    padding-right: 0;
  }/* Fix for newsletters that use tables for layout */.document-content table table,
  .document-content table table tr,
  .document-content table table td,
  .document-content table table figure {
    margin: 0;
    padding: 0;
  }.document-content table table,
  .document-content table table tr,
  .document-content table table td {
    border: none;
  }/* Figure and Img */.document-content img:not(p img, li img, img.allow-image-styles) {
    margin: auto;
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
    border-radius: .25rem;
  }.document-content video {
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    margin-left: auto;
    margin-right: auto;
  }.document-content embed {
    display: none;
  }.document-content div.rw-embed-wrapper {
    position: relative;
    padding-bottom: 18.14rem;  /* for 16:9 aspect ratio */
  }.document-content div.rw-embed-wrapper embed {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%!important;
    }.document-content article.rw-discussion-post {
    padding: .4em .4em 0;
    margin: 0;
    border-left: 1px solid var(--border-secondary);
  }.document-content article.rw-discussion-post h1 {
      margin-top: 0;
      margin-bottom: 0;
    }.document-content article.rw-discussion-post small {
      font-size: 75%;
    }.document-content article.rw-discussion-post:not(:has(article.rw-discussion-post)) {
    margin-bottom: 1em;
  }.document-content div.rw-soundcloud-wrapper {
    padding-bottom: 9rem;
  }.document-content div.rw-soundcloud-wrapper embed {
      height: 166px;
    }.document-content div.rw-infogram-wrapper {
    padding-bottom: 9rem;
  }.document-content div.rw-infogram-wrapper embed {
      height: 300px!important;
    }.document-content figure {
    margin-top: calc(var(--reading-base-margin) * 2);
    margin-bottom: calc(var(--reading-base-margin) * 2);
    line-height: 1.33336;
    display: block;
  }.document-content svg:empty {
    display: none;
  }.document-content figure figcaption {
    line-height: 1.5;
    margin-top: calc(var(--reading-base-margin) / 2);
  }.document-content figure:not(li figure) img + figcaption {
    margin-top: -16px;
  }.document-content figure > * {
    margin-top: 0;
    margin-bottom: 0;
  }/* Blockquotes */.document-content blockquote {
    font-style: italic;
    font-size: var(--reading-p-font-size);
    color: var(--reading-text-blockquote);
    margin: 0;
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    hanging-punctuation: first;
    padding: 0 var(--reading-base-margin);
  }/* Make sure nested images are not block */.document-content blockquote img, .document-content figure img, .document-content ol img, .document-content p img, .document-content table img, .document-content ul img {
      display: initial;
      max-width: 100%!important;
    }.document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
    margin-top: 200px;
    padding-top: 0;
    display: block;
    break-before: column;
  }.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
      text-decoration: none;
    }.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
      content: "***";
      position: relative;
      width: 100%;
      display: block;
      top: -100px;
      text-align: center;
      font-size: 48px;
      letter-spacing: 1em;
      font-weight: 200;
      color: var(--text-tertiary);
    }/* highlights *//* This code is repeated in extension/source/injection/index.css */.document-content .rw-image-highlight {
    border-radius: 2px;
    outline: 12px solid var(--highlight-image-background-color--normal);
  }.document-content .rw-image-highlight.rw-image-highlight--active {
    outline-color: var(--highlight-image-background-color--active);
  }.document-content pre .rw-highlight {
    color: var(--highlight-text-pre-color) !important;
  }/* All of the mandatory styles that cannot be overwritten by epub styles *//* the specific classes make sure that the rules below win out on specificity */.document-content,
  .document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10 {
    font-size: var(--reading-p-font-size);
    color: var(--reading-text-primary);
    font-family: var(--reading-font-body);
    line-height: var(--reading-base-line-height);
    font-weight: 400;
  }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) * {
      min-height: auto;
      height: auto;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .chunk-boundary-border,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-chunk-container {
      margin-top: auto!important;
      margin-bottom: auto!important;
      margin-left: auto!important;
      margin-right: auto!important;
    }/* make sure to not delete this because pagination relies on this CSS */:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) :last-child {
      margin-bottom: 0;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) nav {
      display: block;
      visibility: visible;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .auto-height {
      height: auto !important;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 99999999;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation * {
        position: absolute;
      }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::selection,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation * {
      background-color: var(--text-selection-background-color) !important;
    }:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
    :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
      background-color: var(--highlight-background-color--normal-with-alpha) !important;
    }:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) ::selection,
      :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) #selection-emulation * {
        background-color: var(--highlight-background-color--alternative) !important;
      }:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
        :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
          color: var(--highlight-text-color) !important;
        }.is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10)::selection,
      .is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::selection {
        background-color: transparent !important;
        color: inherit !important;
      }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) p:not(figcaption p) {
      font-family: var(--reading-font-body);
      font-weight: 400;
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-primary);
      text-align: var(--reading-editable-text-justify);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) p.rw-hide:not(figcaption p) {
        display: none;
      }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) span {
      font-family: var(--reading-font-body);
      font-weight: 400;
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-primary);
      text-align: var(--reading-editable-text-justify);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h1 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h1-font-size);
      line-height: var(--reading-h1-line-height);
      color: var(--reading-text-title);
      scroll-margin-top: 96px;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h2 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h2-font-size);
      line-height: var(--reading-h2-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h3 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h3-font-size);
      line-height: var(--reading-h3-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h4,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h5,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h6 {
      font-family: var(--reading-font-body);
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a {
      text-decoration-color: rgb(var(--reading-text-link) / 50%);
      color: rgb(var(--reading-text-link));
      text-align: var(--reading-editable-text-justify);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a:has(+ .rw-highlight) {
      text-decoration: none !important;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a .rw-highlight {
      text-decoration-color: rgb(var(--reading-text-link-highlight) / 50%);
      color: var(--reading-text-primary-link-highlight) !important;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a .rw-highlight:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-decoration-color: rgb(var(--reading-text-link-highlight) / 100%);
      color: var(--reading-text-primary-link-highlight) !important;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) hr {
      border-color: var(--reading-border-secondary);
    }/* -- Lists --*/:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ol {
      font-family: var(--reading-font-body);
      font-size: var(--reading-base-font-size);
      text-align: var(--reading-editable-text-justify);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ol li {
        font-size: var(--reading-base-font-size);
        text-align: var(--reading-editable-text-justify);
      }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ul {
      font-family: var(--reading-font-body);
      font-size: var(--reading-base-font-size);
      text-align: var(--reading-editable-text-justify);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ul li {
        font-size: var(--reading-base-font-size);
      }/* Tables */:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) table {
      font-family: var(--reading-font-caption);
      font-size: var(--reading-table-font-size);
      text-align: var(--reading-editable-text-justify);
      line-height: var(--reading-table-line-height);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) thead {
      color: var(--reading-text-primary);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) tbody tr {
      border-bottom-color: var(--reading-border-secondary);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) tfoot {
      color: var(--reading-text-primary);
      border-top-color: var(--reading-border-secondary);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) table table {
      font-family: var(--reading-font-body);
      font-size: var(--reading-p-font-size);
    }/* Figure and Img */:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) img:not(p img, li img, img.allow-image-styles, figcaption img) {
      display: block; /* Allows them to be highlighted independently. This is undone for nested images */
      max-width: 100% !important;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) svg:has(image) {
      max-width: 100% !important;
      height: auto;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) video {
      display: block;
      max-width: 100% !important;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure {
      font-size: var(--reading-caption-font-size);
      font-family: var(--reading-font-caption);
      text-align: var(--reading-editable-text-justify);
      color: var(--reading-text-secondary);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure figcaption {
      color: var(--reading-text-secondary);
      font-family: var(--reading-font-caption);
      font-size: var(--reading-caption-font-size);
      text-align: var(--reading-editable-text-justify);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure figcaption img {
        display: inline;
        margin-top: 0;
        margin-bottom: 0;
      }/* Code blocks */:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) code {
      color: var(--reading-text-code);
      font-size: .8em;
      font-family: var(--reading-font-monospace);
      word-wrap: break-word;
      -webkit-box-decoration-break: clone;
              box-decoration-break: clone;
      background-color: var(--reading-surface-tertiary);
      border-radius: .25rem;
      line-height: 1.1em;
      border: 1px solid var(--reading-border-secondary);
      padding: 0 .2rem;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a code {
      color: var(--reading-text-link);
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p {
      color: var(--reading-text-primary-inverse);
      background-color: var(--reading-surface-primary-inverse);
      font-family: var(--reading-font-monospace);
      overflow-x: auto;
      font-size: calc(var(--reading-editable-font-size) * .8px);
      line-height: var(--reading-base-line-height);
      margin-top: calc(var(--reading-base-margin) * 2);
      margin-bottom: calc(var(--reading-base-margin) * 2);
      border-radius: .25rem;
      padding-top: var(--reading-base-margin);
      padding-right: var(--reading-base-margin);
      padding-bottom: var(--reading-base-margin);
      padding-left: var(--reading-base-margin);
      white-space: pre-wrap;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre span, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) code span {
      color: var(--reading-text-primary-inverse) !important;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p {
      background-color: transparent;
      font-family: var(--reading-font-monospace);
      border-width: 0;
      border-radius: 0;
      padding: 0;
      -webkit-overflow-scrolling: touch;
      font-weight: 400;
      font-size: calc(var(--reading-editable-font-size) * .8px);
      color: inherit;
      line-height: inherit;
      min-width: 100px;
      margin: 0;
    }:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) a {
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.2);
        color: var(--blue-70);
      }:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) a:hover {
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.5);
        color: var(--blue-80);
      }:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) p {
        display: inline;
        /*
          We sometimes end up with <p>s instead of our code tags.
          Prevent them from breaking everything.
        */
      }/* Blockquotes */:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) blockquote {
      font-size: var(--reading-p-font-size);
      color: var(--reading-text-blockquote);
      text-align: var(--reading-editable-text-justify);
    }/* Tweet styles need to override */:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet {
      border: 1px solid var(--border-secondary);
      border-radius: 8px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      max-width: 550px;
      margin: var(--reading-base-margin) auto;
      font-style: initial;
    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet > span {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        line-height: 16px;

      }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet > span > a {
          display: flex;
          color: var(--text-secondary);
          gap: 4px;
          line-height: 16px;
          text-decoration: none;
          margin-bottom: 8px;
          width: fit-content;
        }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header {
        display: flex;
        gap: 8px;
      }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header img {
          aspect-ratio: 1 / 1;
          min-height: 48px;
          max-height: 48px!important;
          width: 48px;
          height: auto;
          margin: unset;
          border-radius: 9999px;
        }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header a {
          text-decoration: none;
          font-size: 16px;
        }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div {
        }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) {
          font-size: 14px;
          flex: 1;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
        }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:first-child {
            font-weight: 600;
            line-height: 18px;
            padding-top: 6px;
          }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:first-child a {
              color: var(--reading-text-primary);
            }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) {
            line-height: 18px;
            color: var(--text-secondary);
          }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) a {
              color: var(--text-secondary)
            }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header svg * {
            fill: var(--icon-tertiary);
          }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > :first-child {
          margin-top: 18px;
        }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > span:first-of-type {
          color: var(--text-secondary);
          font-weight: 400;
          font-size: 12px;
          display: block;
          margin-top: 8px;
          margin-bottom: -6px;
        }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > span:first-of-type a {
            color: var(--text-interactive);
            text-decoration: none;
          }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main p {
          line-height: var(--reading-editable-line-height);
          margin-top: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          margin-bottom: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          font-size: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          letter-spacing: -.01em;
        }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main video {
          border-radius: 4px;
        }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer {
        margin-top: -4px;
      }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer,
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer a,
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer span a {
          color: var(--text-secondary);
          font-weight: 400;
          font-size: 12px;
          line-height: 20px;
        }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer a {
          text-decoration: none;
          color: var(--text-secondary);
        }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed {
      border: 1px solid var(--border-secondary);
      border-radius: 8px;
      max-width: 550px;
      min-width: 90%;
      padding: 20px;
      width: fit-content;
      margin: var(--reading-base-margin) auto;
      font-style: initial;

    }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed img {
        float: left;
        width: 96px !important;
        height: 96px !important;
        object-fit: cover;
        object-position: center;
        margin: 0 20px 0 0;
      }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed * {
        font-size: 16px;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        /*margin: 10px;*/
      }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed div.rw-embed-title {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        font-size: var(--reading-base-font-size);
      }@media (max-width: 768px) {:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed {
        display: block;

    }
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed img {
          float: none;
          display: block;
          margin: 0 auto 20px auto;
        }
      }:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed:has(img) {
      min-height: 136px;
    }/* end of ID wrapper *//* PDF Specific Class code */#readwise-reader-root .pageContainer {
    box-shadow: var(--shadow-100);
    position: relative;
  }#readwise-reader-root .pageContainer canvas {
    }#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight {
      position: absolute;
      opacity: 0.2;
      transition: opacity 0.3s ease !important;
      background: none !important;
      z-index: 100;
    }#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight .rw-highlight-icon-wrapper {
        position: absolute;
        right: -22px;
        top: -10px;
      }#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight:hover {
        opacity: 1;
      }.document-content .twitter-thread-delimiter {
  width: 40px;
  border-top: 2px solid var(--border-secondary);
  margin: 20px 0px;
}.rw-thread-heading {
  display: none;
}.document-content .rw-outer-content {
  border: dashed 2px var(--border-secondary-alpha);
  border-radius: 8px;
  padding: 16px;
  font-size: var(--font-size-base);
  color: var(--reading-text-secondary);

}.document-content .rw-outer-content a {
    text-decoration: none;
    color: var(--reading-text-primary);
    margin-left: 16px;
  }.document-content .rw-digest-thread-wrapper {
  margin: 36px auto 32px;
  font-style: initial;
  max-width: 550px;
}.document-content .rw-digest-thread-wrapper > h6 {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--ui-font) !important;
  }.document-content .rw-digest-thread-wrapper > span:last-of-type {
    color: var(--text-tertiary);
    font-weight: 400;
    font-size: 12px;
    font-family: var(--ui-font) !important;
    display: block;
    margin-top: -8px;
  }/* handle fonts here because adding the fonts to above rules makes the file names too long */.document-content .rw-embedded-tweet {
  font-family: var(--ui-font) !important;
}.document-content .rw-embedded-tweet > span {
    font-family: var(--ui-font) !important;
  }.document-content .rw-embedded-tweet header img {
    }.document-content .rw-embedded-tweet header a {
      font-family: var(--ui-font) !important;
    }.document-content .rw-embedded-tweet header div {
      font-family: var(--ui-font) !important;
    }.document-content .rw-embedded-tweet main > span:first-of-type {
      font-family: var(--ui-font) !important;
    }.document-content .rw-embedded-tweet main p {
      font-family: var(--ui-font) !important;
    }.document-content .rw-embedded-tweet footer a {
      font-family: var(--ui-font) !important;
    }.document-content .rw-ai {
    background-color: #CBC3E3;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid #A39EBA;
  }.document-content .rw-ai-highlighted {
    font-weight: bold;
  }.document-content .rw-ai-explainer {
    background-color: #CBC3E3;
  }/*
    Needed for DISCOVER_WISEREADS_DOC_URL post
    Ensures the "Discover new documents" button displays properly by:
    1. Setting correct image dimensions and positioning
    2. Showing/hiding images based on the current theme (light/dark)
  */.document-content [data-rw-theme] [data-rw-button="discover-wisereads"] img {
      background: none !important;
      opacity: 1 !important;
      width: 207px !important;
      margin: 0 auto !important;
    }.document-content [data-rw-theme="dark"] {
    display: none !important;
  }.document-content [data-rw-theme="dark"] [data-rw-button="discover-wisereads"] img {
      display: none !important;
    }.theme--dark .document-content [data-rw-theme="light"] {
      display: none !important;
    }.theme--dark .document-content [data-rw-theme="light"] [data-rw-button="discover-wisereads"] img {
        display: none !important;
      }.theme--dark .document-content [data-rw-theme="dark"] {
      display: block !important;
    }.theme--dark .document-content [data-rw-theme="dark"] [data-rw-button="discover-wisereads"] img {
        display: block !important;
      }.theme--dark .document-content .rw-ai,
    .theme--dark .document-content .rw-ai-explainer {
      color: var(--text-inverse);
    }.document-content.is-youtube-video {
  padding-top: 135px;
}/* https://linear.app/readwise/issue/RW-26751/bug-youtube-transcripts-sometimes-send-missing-spaces-to-readwise-10
The YouTube parser originally didn't add spaces to the end of each transcript, so we were using margin-right.
After fixing the parser, we removed the margin-right but we still need to add it for old videos. */.document-content span[data-rw-start] {
  margin-right: .25rem;
}.document-content span[data-rw-transcript-version] {
  margin-right: 0;
}.document-content .rw-email-parsed {
  display: none;
}/* Pagination */.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
      margin-top: 0;
      padding-top: 0;
      display: block;
      break-before: column;
    }.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
        text-decoration: none;
      }.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:first-child {
        break-before: auto;
      }.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
        display: none;
      }.document-content--original-email {
  background: white !important;
  color: initial;
  word-break: break-word;
  max-width: calc(100% - 2 * var(--content-gutter)) !important;
  margin: 0 auto;

  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}.document-content--original-email table, .document-content--original-email tr, .document-content--original-email tbody {
    width: 100% !important;
  }.document-content--original-email table {
    border-collapse: collapse !important;
  }.document-content--original-email img {
    background: initial;
    max-width: 100%;
  }.document-content--original-email rw-highlight {
    color: initial !important;
  }.document-content--original-email div, .document-content--original-email table, .document-content--original-email tr, .document-content--original-email td, .document-content--original-email tbody, .document-content--original-email a, .document-content--original-email hr, .document-content--original-email pre {
    /* The value below is width of header in px - how i calculate this:
      its .textContentWrapper width
      minus --content-gutter variable which takes padding in #document-header
      minus - 1rem which is a padding in textContentWrapper
      minus 10px * 2 of padding that we add to .document-content--original-email */
    max-width: calc(var(--reading-editable-line-length) - 1rem - 20px) !important;
  }.document-content--original-email pre {
    display: block;
    overflow-x: scroll !important;
  }.allow-annotation-bar-popover-overlay .annotation-bar-popover {
    z-index: 500 !important;
}/*
  !important is added to all rules in this file when running in the extension.
*/html {
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 20%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);
  --highlight-resize-handle-background-color: rgb(220, 185, 0);
  --highlight-resize-handle-background-color--alternative: #767ccc;
  --js_highlight-normal: #fcf6bf; /* needs to be hex */
  --highlight-background-color--alternative: #CDCDFE; /* alternative colours always are opague to be safe */
  --highlight-background-color--alternative--active: #b1b7fe;
  /*
    NOTE: we overwrite the following variable in the extension with JS depending on the site's colors
  */
  --highlight-text-color: #000;
  --highlight-icon-color:  rgba(0, 0, 0, 0.60);
}.theme--dark {
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 80%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);

  --highlight-text-color: var(--white);
  --highlight-icon-color: rgba(255, 255, 255, 0.60);
}/* Unset the default text fragment highlighting */::target-text {
  color: unset;
  background: unset;
}readwise-tooltip-container {
  position: fixed;
  inset: auto;
  z-index: 2147483647;
  isolation: isolate;
}/*
  <rw-highlight/>s are text highlights. They also have `.rw-highlight` added.
  .rw-image-highlight is added to image highlights. They do not have `.rw-highlight`.
  .rw-highlight--* classes are added to both.
*/rw-highlight,
.rw-image-highlight,
.rw-pseudo-highlight {
  cursor: pointer;
  visibility: visible;
}:is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight)::before,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight)::after,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight) ::before,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight) ::after {
    pointer-events: none !important;
  }:is(.isDev rw-highlight,.isDev .rw-image-highlight):not([data-highlight-id]) {
      outline: 1px solid red;
    }rw-highlight,
.rw-pseudo-highlight {
  background-image: linear-gradient(
     0deg,
     var(--highlight-background-color-underline) 0%,
     var(--highlight-background-color-underline) 2px,
     var(--highlight-background-color--normal) 2px,
     var(--highlight-background-color--normal) 100%
   );
  background-repeat: no-repeat;
  background-size: 100% 90%;
  background-position: 0 75%;
  color: var(--highlight-text-color);
}a rw-highlight, .rw-pseudo-highlight a {
  text-decoration: underline;
}.rw-image-highlight {
  border-radius: 2px;
  outline: 12px solid var(--highlight-background-color--normal);
}rw-highlight.rw-highlight--active {
  background-image: linear-gradient(
     0deg,
     var(--highlight-background-color-underline) 0%,
     var(--highlight-background-color-underline) 2px,
     var(--highlight-background-color--active) 2px,
     var(--highlight-background-color--active) 100%
   );
}.rw-image-highlight.rw-image-highlight--active {
  outline-color: var(--highlight-background-color--active);
}rw-highlight.rw-highlight--alternative-color {
  background: var(--highlight-background-color--alternative);
}.rw-image-highlight.rw-highlight--alternative-color {
  outline-color: var(--highlight-background-color--alternative);
}rw-highlight.rw-highlight--alternative-color.rw-highlight--active {
  background: var(--highlight-background-color--alternative--active);
}.rw-image-highlight.rw-highlight--alternative-color.rw-image-highlight--active {
  outline-color: var(--highlight-background-color--alternative--active);
}rw-highlight.rw-highlight--alternative-color .rw-highlight-icon-wrapper svg path {
  fill: var(--highlight-text-color);
}rw-highlight .rw-highlight-icon-wrapper {
  display: none;
}rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
  display: inline-block;
}rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
#document-text-content  rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
  padding-right: 0.2em;
  text-indent: initial !important; /* block epub styles from adding indents to highlight elements */
}rw-highlight .rw-highlight-icon-wrapper svg {
  position: relative;
  top: 1px;
  display: none;
}rw-highlight .rw-highlight-icon-wrapper svg,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight .rw-highlight-icon-wrapper svg {
  margin-left: 0.4em;
}:is(rw-highlight .rw-highlight-icon-wrapper svg,#document-text-content rw-highlight .rw-highlight-icon-wrapper svg):first-child {
    margin-left: 0.2em;
  }rw-highlight .rw-highlight-icon-wrapper svg path {
  fill: var(--highlight-icon-color);
}rw-highlight.rw-highlight--has-note .rw-highlight-note-icon {
  display: inline;
  width: 16px !important;
}rw-highlight.rw-highlight--has-tag .rw-highlight-tag-icon {
  display: inline;
  width: 16px !important;
}.rw-highlight,
.rw-image-highlight {
  -webkit-tap-highlight-color: transparent;
}/* Effectively hide the highlight / make it like it was before it was highlighted */.rw-highlight:where([data-resize-status]):not([data-resize-status="inactive"]),
    .rw-image-highlight:where([data-resize-status]):not([data-resize-status="inactive"]),
    .rw-highlight:where([data-resize-status]):not([data-resize-status="inactive"]):hover,
    .rw-image-highlight:where([data-resize-status]):not([data-resize-status="inactive"]):hover {
      background: inherit;
      border: inherit;
      color: inherit;
      cursor: inherit;
      outline: inherit;
    }.rw-highlight[data-resize-status="actively-resizing"] .rw-highlight-icon-wrapper, .rw-image-highlight[data-resize-status="actively-resizing"] .rw-highlight-icon-wrapper, .rw-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-icon-wrapper, .rw-image-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-icon-wrapper {
      display: none;
    }.rw-highlight-resize-handle {
  opacity: 0; /* Hidden by default */
  pointer-events: none; /* Make sure you can't tap them when they're meant to be hidden */

  position: relative;
  cursor: col-resize;
}.rw-highlight-resize-handle,
  .rw-highlight-resize-handle span {
    /* https://linear.app/readwise/issue/RW-38790/when-highlighting-text-with-some-super-script-the-text-moves */
    line-height: 1;
    font-size: inherit;
  }/*
    This is the tap target.
    The pseudo-elements are what you see visually; `::before` is the bar/body, `::after` is the head.
    The head is styled with the end handle in mind, and later in the code the start handle's head is
    flipped upside-down.
  */.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper {
    position: absolute;
    left: -12px;
    right: -12px;
    top: -8px;
    bottom: -15px;

    opacity: 0.6;
  }.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper,
    .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before {
      border-radius: 10px;
      transition: all 0.1s;
    }.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before,
    .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      content: ' ';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--highlight-resize-handle-background-color);
    }.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before {
      top: 8px;
      bottom: 12px;
      width: 4px;
    }.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      border-radius: 10px;
      height: 12px;
      width: 12px;
      bottom: 7px;
    }.rw-highlight--alternative-color .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before,
    .rw-highlight--alternative-color .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      background-color: var(--highlight-resize-handle-background-color--alternative);
    }.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper {
      opacity: 0.8;
    }.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper::before {
        bottom: 6px;
        width: 5px;
      }.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper::after {
        bottom: 5px;
        height: 14px;
        width: 14px;
      }.rw-highlight[data-resize-status="actively-resizing"] .rw-highlight-resize-handle,
  .rw-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-resize-handle {
    opacity: 0;
  }.rw-highlight-resize-handle:hover,
  .rw-highlight--active .rw-highlight-resize-handle,
  .rw-highlight--hover .rw-highlight-resize-handle {
    pointer-events: auto;
    opacity: 1;

    /*
      Cases where the handles are momentarily hidden.
      E.g. during a resize, we hide all other highlights' handles so that they don't get shown if we drag
      the cursor over those other highlights and their hover styles are applied.
    */
  }.document-content[data-rw-highlight-resize-status="actively-resizing"] .rw-highlight-resize-handle:hover, .document-content[data-rw-highlight-resize-status="actively-resizing"] :is(.rw-highlight--active .rw-highlight-resize-handle), .document-content[data-rw-highlight-resize-status="actively-resizing"] :is(.rw-highlight--hover .rw-highlight-resize-handle) {
      opacity: 0;
    }/* Why this list of selectors? Basically we want this always and we're being extra safe *//*
      Otherwise the (transparent) handle can get in the way when getting the cursor point and drawing the
      selection
    */.document-content.is-emulating-selection:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) :is(.rw-highlight-resize-handle,.rw-highlight-resize-handle:hover,.rw-highlight--active .rw-highlight-resize-handle,.rw-highlight--hover .rw-highlight-resize-handle) {
      pointer-events: none;
      -webkit-user-select: none;
              user-select: none;
    }/*
    Cases where the handles are permanently hidden. JS needs to also cover these cases.
  */.app--document-share-app .rw-highlight-resize-handle,
  .rw-app--extension .rw-highlight-resize-handle {
    display: none;
  }.document-content[data-rw-highlight-resize-status="native-selection-made-but-user-hasnt-started-resizing-yet"],
  .document-content[data-rw-highlight-resize-status="actively-resizing"],
  .document-content[data-rw-highlight-resize-status="native-selection-made-but-user-hasnt-started-resizing-yet"] *,
  .document-content[data-rw-highlight-resize-status="actively-resizing"] * {
    /* !important is required because we need to change the cursor for everything */
    cursor: col-resize !important;
  }.rw-highlight-resize-handle--start .rw-highlight-resize-handle__inner-wrapper {
  transform: rotate(180deg);
  top: -15px;
  bottom: -8px;
}.rw-mobile-web-view img.rw-image-highlight {
  outline: 0px !important;
  box-shadow: 0px 0px 0px 4px rgba(255, 213, 0, 0.2);
}.rw-mobile-web-view img.rw-image-highlight.rw-image-highlight--active {
  outline: 0px !important;
  box-shadow: 0px 0px 0px 6px rgba(255, 213, 0, 0.5);
}:is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
    :is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
      background-color: var(--highlight-background-color--normal-with-alpha) !important;
    }:is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) ::selection,
      :is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) #selection-emulation * {
        background-color: var(--highlight-background-color--alternative) !important;
      }:root{ /* documentTextContent.css overrides */
  --reading-font-body: "Source Serif 4", Georgia, Serif;
  --reading-font-title: "Source Serif 4", Georgia, Serif;
  --reading-editable-font-size: 18;
  --reading-editable-line-height: 27;
  --mono-font: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  --reading-font-monospace: var(--mono-font);
  --reading-font-caption: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --reading-table-line-height: 1.4;
}@media(min-width: 672px) {
  :root {
    --reading-editable-font-size: 20;
    --reading-editable-line-height: 30;
  }
}body {
  background: var(--background-primary);
  padding: 0;
  margin: 0;
  font-family: var(--ui-font);
}/* We added this after finding some clashes between this and the main app's CSS (e.g. https://linear.app/readwise/issue/RW-36798/bug-header-and-content-should-be-aligned-on-shared-links) */#document-share-app p {
    margin-left: 0;
    margin-right: 0;
  }#document-share-app #document-text-content {
    font-family: var(--reading-font-body);
  }#document-share-app .hideAccessibly {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }#document-share-app #document-text-content,
  #document-share-app .pageHeader {
    padding-left: 16px;
    padding-right: 16px;

    /* 700 (content max width) +16*2 */
  }@media(min-width: 672px) {#document-share-app #document-text-content,
  #document-share-app .pageHeader {
      padding-left: 0;
      padding-right: 0;
  }
    }#document-share-app #document-text-content,
  #document-share-app .originalDocumentLink,
  #document-share-app .pageHeader {
    max-width: 640px;
    -webkit-font-smoothing: antialiased;

    /* 700 (content max width) +16*2 */
  }@media(min-width: 672px) {#document-share-app #document-text-content,
  #document-share-app .originalDocumentLink,
  #document-share-app .pageHeader {
      margin-left: auto;
      margin-right: auto;
  }
    }#document-share-app .originalDocumentAncestor {
    position: sticky;
    inset: 0;
    bottom: auto;
    background: var(--background-primary);
    border-bottom: 1px solid var(--border-secondary-alpha);
    z-index: 1000;
  }#document-share-app .originalDocumentAncestor:has(.originalDocumentLink:hover) {
      background: var(--background-tertiary);
    }#document-share-app .originalDocumentLink {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    font-size: 11px;
    line-height: 16px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: 0.1s background-color;
  }#document-share-app .originalDocumentFavicon {
    height: 16px;
    width: 16px;
  }#document-share-app .originalDocumentDomain {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 12px;
    text-transform: uppercase;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }#document-share-app .originalDocumentButton {
    display: flex;
    align-items: center;
    background: var(--background-interactive);
    padding: 2px 10px;
    border-radius: 48px;
    font-weight: 700;
    font-size: var(--f10);
    line-height: 20px;
    color: var(--text-inverse);
  }#document-share-app .originalDocumentButtonExtraText {
    display: none;
    margin-left: 0.3em;

    /* TODO */
  }@media(min-width: 500px) {#document-share-app .originalDocumentButtonExtraText {
      display: inline;
  }
    }#document-share-app .originalDocumentButtonIcon {
    margin-left: 4px;
  }#document-share-app .title {
    font-family: var(--reading-font-title);
    margin: 0;
    padding-bottom: 12px;
    font-weight: 700;
    font-size: 2rem;
    line-height: 115%;
    letter-spacing: -0.015em;
    color: var(--text-primary);
  }@media(min-width: 672px) {#document-share-app .title {
      font-size: 2.5rem;
      padding-bottom: 16px;
  }
    }#document-share-app .pageHeader {
    -webkit-font-smoothing: antialiased;
    margin-top: 36px;
    margin-bottom: 32px;
  }@media(min-width: 672px) {#document-share-app .pageHeader {
      margin-top: 72px;
      margin-bottom: 40px;
  }
    }#document-share-app .pageHeader hr {
      border: 0;
      border-top: 1px solid var(--border-secondary-alpha);
      margin: 8px 0;
    }#document-share-app .pageHeaderMeta {
    display: flex;
    flex-direction: row;
    margin-top: 4px;
    font-size: .8125rem;
    color: var(--text-secondary);
  }@media(min-width: 672px) {#document-share-app .pageHeaderMeta {
      font-size: .875rem;
  }
    }#document-share-app .pageHeaderMeta,
  #document-share-app .timeToRead {
    gap: 6px;
  }#document-share-app .pageHeaderSpacer {
    flex: 1;
  }#document-share-app .annotatedBy {
    margin-top: 0;
    font-size: 13px;
    color: var(--text-secondary);
  }@media(min-width: 672px) {#document-share-app .annotatedBy {
      font-size: .875rem;
  }
    }#document-share-app .notesContainer {
    margin-top: 32px;
    margin-bottom: -16px;
    padding: 12px 16px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
  }#document-share-app .notesContainer svg {
    fill: var(--icon-primary);
    min-width: 16px;
    min-height: 16px;
    top: 3px;
    position: relative;
  }#document-share-app .notesContainer .saverName {
    font-weight: 600;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--text-primary);
  }#document-share-app .notesContainer p {
    color: var(--text-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
  }#document-share-app .endHr {
    max-width: 700px;
    margin-top: 40px;
    margin-bottom: 120px;
    border: none;
    border-top: 1px solid var(--border-secondary-alpha);
  }
._button_15y81_1 {
  margin: 0;
  border: none;
  cursor: pointer;
  border-radius: 48px;
  font-family: var(--ui-font);
  font-weight: var(--font-weight-medium);
}

._button_15y81_1[disabled] {
    cursor: default;
    pointer-events: none;
    color: var(--text-disabled);
    background: var(--background-button-secondary-disabled);
  }

._button_15y81_1[disabled]:hover {
    background: var(--background-button-secondary-disabled);
  }

._buttonDefault_15y81_21,
._buttonPrimary_15y81_22,
._buttonSecondary_15y81_23,
._buttonUnstyled_15y81_24 {
  margin: 0;
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
}

._buttonDefault_15y81_21[disabled], ._buttonPrimary_15y81_22[disabled], ._buttonSecondary_15y81_23[disabled], ._buttonUnstyled_15y81_24[disabled] {
    cursor: default;
    pointer-events: none;
  }

._buttonDefault_15y81_21:focus-visible, ._buttonPrimary_15y81_22:focus-visible, ._buttonSecondary_15y81_23:focus-visible, ._buttonUnstyled_15y81_24:focus-visible {
    box-shadow: 0 0 0 2px var(--focus-ring-color);
  }

._buttonUnstyled_15y81_24 {
  padding: 0;
  margin: 0;
  background: none;
  font-weight: normal;
  border-radius: 0;
}

._buttonUnstyled_15y81_24[disabled] {
    background: none;
  }

._buttonDefault_15y81_21,
._buttonPrimary_15y81_22,
._buttonSecondary_15y81_23 {
  background: var(--btn-secondary);
}

._buttonDefault_15y81_21[disabled], ._buttonPrimary_15y81_22[disabled], ._buttonSecondary_15y81_23[disabled] {
    color: var(--text-disabled);
  }

._buttonDefault_15y81_21 {
  display: flex;
  justify-content: center;
  line-height: 20px;
  align-items: center;
  padding: 0.375rem .75rem;
  font-size: var(--font-size-base);
  transition: background-color 0.2s ease-in-out;
  color: var(--default-button-text-color);
}

._buttonDefault_15y81_21 svg {
    fill: currentColor;
  }

._buttonDefault_15y81_21 svg * {
      fill: currentColor;
    }

._buttonDefault_15y81_21._activeButton_15y81_80,
  ._buttonDefault_15y81_21:active {
    background: var(--default-button-active-background);
  }

._buttonDefault_15y81_21:not(:active):hover {
    background: var(--default-button-hover-background);
  }

._buttonDefault_15y81_21,
  ._buttonDefault_15y81_21[disabled]:hover {
    background: var(--default-button-background);
  }

._buttonPrimary_15y81_22 {
  background: var(--primary-button-background);
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-interactive);
}

._buttonPrimary_15y81_22,
  ._buttonPrimary_15y81_22[disabled]:hover {
    background: var(--btn-secondary);
  }

._buttonSecondary_15y81_23 {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

._buttonSecondary_15y81_23[disabled] svg {
      color: var(--icon-disabled)
    }

._buttonSecondary_15y81_23 svg {
    color: var(--icon-secondary)
  }

._buttonSecondary_15y81_23:not(:active):hover {
    background: var(--u-alpha-300);
  }

._buttonSecondary_15y81_23[disabled]:hover {
    background: var(--btn-secondary);
  }


._buttonBlue_15y81_134 {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  background: var(--background-interactive);
  color: var(--text-inverse);
  font-weight: 500;
}


._buttonBlue_15y81_134[disabled] svg {
      color: var(--icon-disabled)
    }


._buttonBlue_15y81_134 svg {
    color: var(--icon-inverse)
  }


._buttonBlue_15y81_134:active {
    background: var(--background-button-blue-active);
  }


._buttonBlue_15y81_134:not(:active):hover {
    background: var(--background-button-blue-hover);
  }


._buttonNeutral_15y81_163 {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  background: var(--background-interactive);
  color: var(--text-inverse);
  font-weight: 500;
}


._buttonNeutral_15y81_163[disabled] svg {
      color: var(--icon-disabled)
    }


._buttonNeutral_15y81_163 svg {
    color: var(--icon-inverse)
  }


._buttonNeutral_15y81_163:active {
    background: var(--background-button-blue-active);
  }


._buttonNeutral_15y81_163:not(:active):hover {
    background: var(--background-button-blue-hover);
  }

._buttonDanger_15y81_191 {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  background: var(--background-button-caution);
  color: var(--text-error);
  font-weight: 500;
  text-decoration: none;
}

._buttonDanger_15y81_191[disabled] svg {
      color: var(--icon-disabled)
    }

._buttonDanger_15y81_191 svg {
    color: var(--icon-inverse)
  }

._buttonDanger_15y81_191:active {
    background: var(--background-button-caution);
  }

._buttonDanger_15y81_191:not(:active):hover {
    background: var(--background-button-caution);
  }
._spinner_3mzut_1 {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

._spinner_3mzut_1 div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 55px;
    height: 55px;
    margin: 8px;
    border: 4px solid var(--text-secondary);
    border-radius: 50%;
    animation: _lds-ring_3mzut_1 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--text-secondary) transparent transparent transparent;
  }

._spinner_3mzut_1 div:nth-child(1) {
      animation-delay: -0.45s;
    }

._spinner_3mzut_1 div:nth-child(2) {
      animation-delay: -0.3s;
    }

._spinner_3mzut_1 div:nth-child(3) {
      animation-delay: -0.15s;
    }

@keyframes _lds-ring_3mzut_1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
._dialogWrapper_n47il_1 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: var(--modal-z-index);
  background-color: var(--background-backdrop);
  pointer-events: all;
}

._dialogBox_n47il_15 {
  width: 385px;
  background-color: var(--background-elevated);
  padding: var(--spacer-7) var(--spacer-6) var(--spacer-6) var(--spacer-6);
  margin: 0;
  box-shadow: var(--shadow-400);
  border-radius: var(--spacer-3);
  position: absolute;
  top: 25%;
  z-index: 20;
}

._title_n47il_27 {
  font-family: var(--ui-font);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-bottom: var(--spacer-3);
}

._text_n47il_36 {
}

._subtitle_n47il_39 {
  font-family: var(--ui-font);
  font-style: normal;
  margin-top: var(--spacer-3);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.25rem;
}

._buttons_n47il_49 {
  float: right;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacer-3);
  margin-top: var(--spacer-6);
}

._cancelButton_n47il_58 {
  background: none;
}

._buttonText_n47il_62 {
  margin-left: auto;
  margin-right: auto;
  font-family: var(--ui-font);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

._redButton_n47il_70 {
  color: var(--text-error);
  background: var(--background-button-caution);
}

._darkRedButton_n47il_75 {
  background: var(--red-50);
  color: var(--neutral-100);
}

._blueButton_n47il_80 {
  color: var(--text-interactive);
  background: var(--background-button-primary);
}

._inputWrapper_n47il_85 {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

._inputWrapper_n47il_85 p {
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary);
  }

._inputWrapper_n47il_85 input {
    margin-top: 7px;
    height: 32px;
    width: 100%;
    padding: 2px 8px;
    color: var(--inbox-header-active-tab-text-color);
    font-size: 14px;
    background: var(--background-color);
    font-family: var(--ui-font);
    outline: none;
    box-shadow: 0 0 0 1px var(--border-secondary);
    border-radius: 4px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    border: none;
  }

._inputWrapper_n47il_85 input:focus {
      box-shadow: 0 0 0 2px var(--border-focus);
    }
/*
  :root = <html/>
  :host > * = the root of the extension shadow DOM contents
*/

/* SPACING */

:host > *,
:root {
  --s1: 10px;
  --s2: 20px;
  --s3: 30px;
  --s4: 40px;
  --s5: 50px;

  --spacer-0: 0;
  --spacer-1: .125rem;/* 2px */
  --spacer-2: .25rem; /* 4px */
  --spacer-3: .5rem;  /* 8px */
  --spacer-4: .75rem; /* 12px */
  --spacer-5: 1rem;   /* 16px */
  --spacer-6: 1.25rem;/* 20px */
  --spacer-7: 1.5rem; /* 24px */
  --spacer-8: 2rem;   /* 32px */
  --spacer-9: 2.5rem; /* 40px */
  --spacer-10: 3rem;  /* 48px */

  --min-left-pad: 32px;
}

/* FONTS */

:host > *,
:root {
  /* font weights */
  --font-weight-lighter: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  --font-size-xs: 0.6875rem; /* 11px */
  --font-size-sm: 0.75rem; /* 12px */
  --font-size-base: 0.875rem; /* 14px */ /* --f9 */
  --font-size-lg: 1rem; /* 16px */
  --font-size-xl: 1.25rem; /* 20px */

  --line-height-xs: 1rem; /* 16px */
  --line-height-sm: 1.125rem; /* 18px */
  --line-height-base: 1.25rem; /* 20px */
  --line-height-lg: 1.5rem; /* 24px */
  --line-height-xl: 1.5625rem; /* 25px */


  --f2: 3.25rem;/* Deprecated */
  --f3: 1.8rem;/* Deprecated */
  --f4: 1.38rem;/* Deprecated */
  --f5: 1.35rem;/* Deprecated */
  --f6: var(--font-size-2xl); /* Deprecated */
  --f7: var(--font-size-xl); /* Deprecated */
  --f8: var(--font-size-lg); /* Deprecated */
  --f9: var(--font-size-base); /* Deprecated */
  --f10: var(--font-size-sm); /* Deprecated */
  --f11: var(--font-size-xs); /* Deprecated */


  /* letter-spacing that works with the above sizes */

  --ls-6: -0.017em;
  --ls-7: -0.014em;
  --ls-8: -0.011em;
  --ls-9: -0.006em;
  --ls-10: 0em;
  --ls-11: 0.005em;

  --ui-font: "Inter VF", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --mono-font: "Roboto Mono VF", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  --content-line-height: 1.6;
}

/* base COLORS (not themed) */

:host > *,
:root {

  /*
  Base neutral styles.
https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4ByMArgC4BOEANjiADQgAW5Mj8A2qJLAnAUa9ZiADGAezqTqXbiADEAM1VqxKgBzKAnMogblABmUBGZQCYNMIzADMMAGwa0ptAFY0OjeNPiA7OJwLIoARqahOuJWIRAWEOKh-ho67noQBiGamjoWURqBmu7aGo4w-tl2paaOAckh7gAs7sqOoRqNRXYtGg6d7lUhdsPijc4hFpp2pnbtIeYW-hbKGqbufhaDSqZGNW4aRr6mpvVKRucXIAC6AL5XLJSSYJwICjtGYjqnqZ8fLEViTR-ED%2BdxifzAxxgliOYHuaEgdzA5piRrA7piOzAiwIizAtZiHZiIynIwI87XG5AA
  */

/* Readwise - Neutrals color palette */

  /* neutral */
  --neutral-100: #ffffff;
  --neutral-97: #f8f9fa;
  --neutral-95: #f0f1f2;
  --neutral-90: #e0e3e6;
  --neutral-85: #d1d5d9;
  --neutral-80: #c1c7ce;
  --neutral-75: #b1b9c2;
  --neutral-70: #a2acb7;
  --neutral-65: #959faa;
  --neutral-60: #88929c;
  --neutral-55: #7c858f;
  --neutral-50: #6e7883;
  --neutral-45: #616c77;
  --neutral-40: #545f6b;
  --neutral-35: #48535f;
  --neutral-30: #3e4853;
  --neutral-25: #333c46;
  --neutral-20: #28313b;
  --neutral-15: #1f272f;
  --neutral-10: #151c23;
  --neutral-07: #10161d;
  --neutral-05: #0c1117;
  --neutral-00: #000000;


  /* Readwise - Color color palette
  https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4DCA9gDZkBOIANCABYCuMOCA2qJLAiNTDT0QAY0o128DiADEAMwUA2OQGZh8gJxoRaAEzq5GgEYqIahvICsADg0B2IwcWWRl-RbTWALAAZT6iDsVaxV3WTsQgEZdCHUvPTcfdV0jSMVokABdAF86bmg4RBoIMABzOAYxKmpJaXkRQ0EDCBgfCDlmow1FJIs5CGsjXUt1VEVdSJGLETsvGEiK2Q0IL3SRdSCVSx91iy8hjR8hC10RSLsfSKzc-N5EAE8YCioMYSqJTll%2B-vmDFRgIlc%2BnZtJEOhZ5kY5Dt1GctJFrAEvBEfIsZLZLL4gbJFCY0JFzLJkSkjslrJFDlccnlwAU%2BKUBDAwG9xDVPjIYDA5GhObCvKoRGF0dyRNY0eMjGhFISZF5TCJkeoVAiQlNZFs7ATFMkYJjdGjdCpgob1JMJpEvNcaTxCiAAC6oCgs6q1WRcuRQ46yM6cuSWix2EFi-2yaJnPTqHxtXEhmRR6yKDRCrVyOwaU3WSxbWIWI4qaWOXM%2BXQl7XU262owUVjOj5SL66b7g71yAHcgLWEQiLkbXH6r0yNxJuTYmS6NB2Sy600QSwaUXJTHBZtjuU%2BSzaiwIyKCxzl2l3EBYMBoLClMi1tn1%2BTWVOt0ZzHxyRHTXGttEQEQQVGbpaWEEwC%2BsjWOuGgwLGiYqHIIi-rKMBbGKSrjK4dimvM0pljcB62gADsw1A4RQizvFedTcnIyi7A2aBQkK4FGHYqDqFKGj-L03qKIogjphYRhLmg7HoiIKhfkKnEqMiMpeNEKxAaukQQLoqE5JkDB2mQYBsJ89jCIcwggcIFzCD0wjbMIvjCCo7G6OxkRJDkQA
  */

  /* red */
  --red-97: #fff6f3;
  --red-90: #f9dcd2;
  --red-80: #f9b3a3;
  --red-70: #f5897b;
  --red-60: #f65c52;
  --red-50: #d8403a;
  --red-40: #a73832;
  --red-30: #78312a;
  --red-20: #4d2520;
  --red-10: #2b1612;

  /* orange */
  --orange-97: #fcf9ed;
  --orange-90: #fae0af;
  --orange-80: #fab960;
  --orange-70: #fa8b25;
  --orange-60: #ea6215;
  --orange-50: #c74e1e;
  --orange-40: #9a461c;
  --orange-30: #73350c;
  --orange-20: #4b290d;
  --orange-10: #2c1701;

  /* yellow */
  --yellow-97: #fafae1;
  --yellow-90: #f3e781;
  --yellow-80: #f7dc1f;
  --yellow-70: #e1bf0c;
  --yellow-60: #c19d18;
  --yellow-50: #a4780e;
  --yellow-40: #895401;
  --yellow-30: #6b3d13;
  --yellow-20: #472b0d;
  --yellow-10: #281901;

  /* green */
  --green-97: #eefdee;
  --green-90: #c4f3c2;
  --green-80: #8fdc8e;
  --green-70: #62bd63;
  --green-60: #43ac47;
  --green-50: #318835;
  --green-40: #357136;
  --green-30: #2e542e;
  --green-20: #233823;
  --green-10: #152114;

  /* teal */
  --teal-97: #effbfd;
  --teal-90: #c1eef4;
  --teal-80: #77d8e4;
  --teal-70: #12c1d2;
  --teal-60: #00a6b4;
  --teal-50: #008692;
  --teal-40: #136f79;
  --teal-30: #18535a;
  --teal-20: #0d363b;
  --teal-10: #002226;

  /* blue */
  --blue-97: #f2faff;
  --blue-90: #cfe7fd;
  --blue-80: #a8ccef;
  --blue-70: #76b2ed;
  --blue-60: #5292f1;
  --blue-50: #2d75e5;
  --blue-40: #1a59c8;
  --blue-30: #25438f;
  --blue-20: #243056;
  --blue-10: #181c2b;

  /* indigo */
  --indigo-97: #f8f7fe;
  --indigo-90: #e4e0f8;
  --indigo-80: #c6bfee;
  --indigo-70: #aca0e6;
  --indigo-60: #957de8;
  --indigo-50: #8059e4;
  --indigo-40: #693fc6;
  --indigo-30: #4e358e;
  --indigo-20: #362c57;
  --indigo-10: #1e1636;

  /* purple */
  --purple-97: #fdf6fc;
  --purple-90: #f2dbf2;
  --purple-80: #e4b7ea;
  --purple-70: #d693e0;
  --purple-60: #c66ed9;
  --purple-50: #b543d0;
  --purple-40: #8c3ca2;
  --purple-30: #663473;
  --purple-20: #412a48;
  --purple-10: #241a27;



  /* These will eventually be deprecated. For now they have been remapped to the base styles above. Use functional names like "text-primary" or the root names above */
  --black: var(--neutral-00);
  --white: var(--neutral-100);

  /* New base styles for these colours will come */
  --svg-filter-grey: invert(26%) sepia(19%) saturate(0%) hue-rotate(266deg) brightness(106%) contrast(94%);
  --svg-filter-inbox: invert(76%) sepia(9%) saturate(153%) hue-rotate(169deg) brightness(95%) contrast(90%);
  --svg-filter-black: invert(0%) sepia(4%) saturate(0%) hue-rotate(309deg) brightness(93%) contrast(107%);
  --svg-filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(195deg) brightness(105%) contrast(101%);
  --svg-filter-blue: invert(79%) sepia(56%) saturate(7329%) hue-rotate(191deg) brightness(102%) contrast(94%);
}

/* default THEME colors */

:host > *,
:root {

  /* FOUNDATIONS */

  /* Naming syntax
    We use the following order when naming css properties. The "default" text can be omitted.

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    background  default       default   default     default     default
    text        button        error     selected    primary     hover
    icon        galleryList   success               secondary   active
    border      toolbar       info


    Button example:

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    background  button        default   default     secondary   hover
    background-button-secondary-hover

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    text        button        default   default     primary     active
    text-button-primary-active
/*

  /* Utility alpha classes */
  --u-alpha-100: rgba(40,49,59,0.03);
  --u-alpha-200: rgba(40,49,59,0.06);
  --u-alpha-300: rgba(40,49,59,0.09);
  --u-alpha-400: rgba(40,49,59,0.12);
  --u-alpha-500: rgba(40,49,59,0.15);

  --u-alpha-blue-100: rgba(26,89,200,0.03);
  --u-alpha-blue-200: rgba(26,89,200,0.06);
  --u-alpha-blue-300: rgba(26,89,200,0.09);
  --u-alpha-blue-400: rgba(26,89,200,0.12);
  --u-alpha-blue-500: rgba(26,89,200,0.15);

  --u-alpha-red-100: rgba(216,64,58,0.03);
  --u-alpha-red-200: rgba(216,64,58,0.06);
  --u-alpha-red-300: rgba(216,64,58,0.09);
  --u-alpha-red-400: rgba(216,64,58,0.12);
  --u-alpha-red-400: rgba(216,64,58,0.15);

  --focus-ring-color: var(--blue-60);


  /* Text */
  --text-primary: var(--neutral-20);
  --text-secondary: var(--neutral-45);
  --text-tertiary: var(--neutral-60);
  --text-placeholder: var(--neutral-65);
  --text-disabled: var(--neutral-75);
  --text-inverse: var(--neutral-90); /* for use on dark backgrounds while in light mode */
  --text-interactive: var(--blue-50);
  --text-backlink: var(--indigo-40);
  --text-error: var(--red-50);
  --text-success: var(--green-50);

  /* Icons */
  --icon-primary: var(--neutral-25);
  --icon-secondary: var(--neutral-45);
  --icon-tertiary: var(--neutral-60);
  --icon-disabled: var(--neutral-75);
  --icon-interactive: var(--blue-50);
  --icon-danger: var(--red-50);
  --icon-success: var(--green-50);
  --icon-inverse: var(--neutral-97);
  --icon-faint: var(--neutral-90);

  /* Extension bar */
  --extension-bar-background-color: var(--neutral-97);

  /* Highlights */
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);

  --highlight-text-color: var(--black);
  --highlight-text-pre-color: var(--white);
  --highlight-text-pre-color--active: var(--white);

  /* Text Selection */
  --selection-color: rgba(0, 114, 255, 0.3);

  /* Borders */
  --border-primary: var(--neutral-80);
  --border-secondary: var(--neutral-90);
  --border-secondary-alpha: var(--u-alpha-400);
  --border-tertiary-alpha: var(--u-alpha-200);
  --border-focus: var(--blue-60);
  --border-error: var(--red-60);

  /* Backgrounds */
  --background-primary: var(--neutral-100);
  --background-secondary: var(--neutral-90);
  --background-tertiary: var(--neutral-95);
  --background-inverse: var(--neutral-10);
  --background-canvas: var(--neutral-97);
  --background-elevated: var(--neutral-100);
  --background-backdrop: var(--u-alpha-300);
  --background-dragging: rgba(f, f, f, 0.7);
  --background-interactive: var(--blue-50);
  --background-error: var(--red-97);
  --background-bulk-actions-header: var(--blue-90);


  /* Shadows */
  --shadow-100: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1px 4px rgba(60, 64, 67, 0.1);
  --shadow-200: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1.5px 4px rgba(60, 64, 67, 0.1), 0px 3px 10px rgba(60, 64, 67, 0.2);
  --shadow-300: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 3px 5px rgba(60, 64, 67, 0.1), 0px 6px 24px rgba(60, 64, 67, 0.2);
  --shadow-400: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 5px 12px rgba(60, 64, 67, 0.1), 0px 12px 32px rgba(60, 64, 67, 0.2), 0px 20px 96px rgba(60, 64, 67, 0.1);


  /* COMPONENTS */

  /* Progress bar */
  --reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
  --reading-progress-background: var(--neutral-90);
  --reading-progress-max-background: var(--neutral-75);
  --reading-progress-point: var(--neutral-40);

  /* Buttons */

  /* primary - deprecated */
  --primary-button-background: var(--u-alpha-blue-200); /* deprecated */
  --primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
  --primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
  --primary-button-color: var(--text-primary); /* deprecated */

  /* primary */
  --background-button-primary: var(--u-alpha-blue-200);
  --background-button-primary-hover: var(--u-alpha-blue-300);
  --background-button-primary-active: var(--u-alpha-blue-400);
  --text-button-primary: var(--text-primary);
  --text-button-primary-disabled: var(--text-disabled);

  /* secondary */
  --background-button-secondary: var(--u-alpha-200);
  --background-button-secondary-hover: var(--u-alpha-300);
  --background-button-secondary-active: var(--u-alpha-400);
  --background-button-secondary-disabled: var(--u-alpha-200);
  --text-button-secondary: var(--text-primary);
  --text-button-secondary-disabled: var(--text-disabled);

  /* accent */
  --text-button-accent-subtle-background: rgba(45, 117, 229, 0.23);
  --text-button-accent-subtle-text: #2675DE;
  --text-button-accent-subtle-disabled-background: rgba(110, 120, 130, 0.1);
  --text-button-accent-subtle-disabled-text: rgba(177, 186, 196, 1);

  --btn-secondary: rgba(235, 237, 238, 0.65); /* used for blur buttons? */

  /* blue */
  --background-button-blue: var(--blue-50);
  --background-button-blue-hover: var(--blue-40);
  --background-button-blue-active: var(--blue-30);
  --background-button-blue-disabled: var(--u-alpha-200);
  --text-button-blue: var(--white);
  --text-button-blue-disabled: var(--text-disabled);

  /* caution */
  --background-button-caution: var(--u-alpha-red-200);

  /* Document card */
  --document-card-width: 208px;
  --document-card-border: var(--border-secondary-alpha);
  --document-card-border-divider: var(--white);
  --document-card-focus-border-color: var(--focus-ring-color);
  --document-card-border-radius: 8px;
  --document-card-background: #fff;
  --document-card-background--hover: var(--document-card-background);
  --document-card-book-image-container-background: var(--background-canvas);
  --document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.03), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.2), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.0715329), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.0484671);
  --document-card-hover-box-shadow: 0px 0px 0px 1px rgba(60, 64, 67, 0.00), 0px 1.5px 4px rgba(60, 64, 67, 0.03), 0px 3px 10px rgba(60, 64, 67, 0.1);

  /* Link card */
  --link-card-background: var(--document-card-background);
  --link-card-border-radius: var(--document-card-border-radius);
  --link-card-border: var(--border-secondary-alpha);
  --link-card-border--hover: var(--border-primary);


  /* Donut progress indicator */
  --donut-progress-indicator-center-color: var(--document-card-background);

  /* Sidebar */
  --sidebar-background: var(--background-canvas);
  --empty-sidebar-background: var(--blue-97);
  --sidebar-button-icon-color: var(--icon-secondary);
  --sidebar-inbox-nav-background: #fff;
  --hide-sidebar-button-background: var(--neutral-95);
  --thumbnail-loading-background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60% ) #ededed;
  --sidebar-logo-color: #000;

  /* Image placeholders */
  --image-placeholder-color: var(--neutral-97);
  --image-placeholder-shadow-color: var(--neutral-85);

  /* Main background surfaces */
  --background-color: var(--background-primary);
  --content-background-color: var(--background-primary);
  --code-background-color: var(--background-tertiary);

  /* Popovers */
  --edit-tags-form-focused-option-background: rgba(43, 46, 55, 0.04);

  --main-highlighter-popover-delete-highlight-action-background: var(--yellow-90);
  --main-highlighter-popover-delete-highlight-icon-color: var(--yellow-40);
  --main-highlighter-popover-action-hover-background: var(--u-alpha-100);
  --highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);

  /* Sort menu */
  --sort-menu-background: #fff;

  /* Tag */
  --tag-background: var(--u-alpha-200);

  /* Misc */
  --content-secondary-color: var(--text-secondary);
  --focus-indicator-color: var(--blue-70);
  --section-border-color: var(--border-secondary-alpha);
  --app-side-drop-shadow-width: 18px;

  /* Appearance panel */
  --appearance-panel-background: var(--background-elevated);
  --appearance-panel-item-hover-background: var(--u-alpha-100);

  /* Command palette */
  --cmd-palette-background: var(--neutral-97);
  --cmd-palette-cmd-container: var(--neutral-97);
  --cmd-palette-section-title: var(--neutral-97);
  --cmd-palette-row-hover: var(--u-alpha-100);
  --cmd-palette-drop-shadow: var(--shadow-400);
  --cmd-palette-scrollbar: var(--neutral-80);
  --cmd-palette-key-background: var(--u-alpha-200);
  --cmd-palette-row-border: var(--blue-50);
  --cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.04) inset;
  --cmd-palette-context-item-background: var(--background-tertiary);
  --cmd-palette-context-item-border: var(--border-secondary);
  --cmd-palette-label-color: var(--text-secondary);
  --cmd-palette-close-icon-color: var(--icon-secondary);

  /* Modal */
  --modal-z-index: 9999;

  /* Quoteshot modal */
  --quoteshot-modal-backdrop: rgba(40, 49, 59, 0.59);
  --quoteshot-modal-background: var(--neutral-00);
  --quoteshot-modal-settings-background: var(--neutral-10);
  --quoteshot-interactive-border: var(--blue-60);
  --quoteshot-ratio-border-inactive: var(--neutral-70);
  --quoteshot-ratio-border-active: var(--neutral-95);
  --quoteshot-save-button-text: var(--neutral-90);
  --quoteshot-save-button-background: rgba(92, 105, 119, 0.26);
  --quoteshot-share-button-text: var(--neutral-00);
  --quoteshot-share-button-background: var(--blue-70);
  --quoteshot-share-dropdown-background: var(--neutral-20);
  --quoteshot-share-dropdown-hover: rgba(110,120,131,0.10);
  --quoteshot-share-dropdown-text: var(--neutral-90);

  /* Wisereads doc discovery modal */
  --wisereads-modal-header-background: rgba(240, 241, 242, 0.9);
  --wisereads-modal-background: var(--background-tertiary);
  --wisereads-modal-card-background: var(--background-elevated);
  --wisereads-modal-card-border-hover: transparent;
  --wisereads-modal-button-background: rgba(45, 117, 229, 0.10);

  /* PDF Search Bar */
  --document-search-input-background: var(--neutral-100);

  /* Find in document matches LIGHT MODE */
  --find-in-document-match-passive: rgba(108, 120, 131, 0.1);
  --find-in-document-match-active: rgba(22, 148, 245, 0.15);

  /* Inbox */

  --inbox-sidebar-background: var(--background-canvas);
  --inbox-icon-color: var(--icon-secondary);
  --inbox-icon-color-disabled: var(--icon-disabled);
  --inbox-icon-color-active: var(--icon-primary);

  --inbox-zero-background-image-filter: opacity(80%) contrast(100%) saturate(80%) sepia(0.1) brightness(65%) drop-shadow(1px 1px 1px black);
  --inbox-zero-foreground-image-filter:
    contrast(84%)
    brightness(80%)
    drop-shadow(0 0 1px rgba(0,0,0,0))
    opacity(100%)
    saturate(25%);
  --inbox-zero-header-items-filter:
    contrast(70%)
    brightness(400%)
    hue-rotate(0)
    drop-shadow(0 0 2px rgba(0,0,0,1))
    opacity(90%)
    saturate(30%);

  --inbox-zero-sidebar-items-filter:
    contrast(98%)
    brightness(500%)
    hue-rotate(0)
    drop-shadow(0px 0px 5px rgba(0,0,0,1))
    opacity(100%)
    saturate(300%);

  --nav-item-filter: var(--svg-filter-inbox);
  --nav-item-active-filter: var(--svg-filter-black);

  --document-list-box-shadow: inset 0 53px 6px -54px var(--neutral-65);
  --inbox-container-drop-shadow: 0px 8px 20px rgb(0 0 0 / 8%), 0px -1px 2px rgb(0 0 0 / 8%);

  --import-link-color: var(--blue-50);

  --tag-color: var(--u-alpha-200);
  --tag-text-color: var(--text-secondary);

  --scrollbar-color: var(--neutral-90);
  --scrollbar-color-hover: var(--neutral-80);

  --separator-color: rgba(0, 0, 0, 0.1);

  --status-dot--unopened-color: var(--text-interactive);

  --toast-background: #151C23;
  --toast-background--error: var(--red-20);
  --toast-background--info: var(--toast-background);
  --toast-background--success: var(--toast-background);
  --toast-background--warning: var(--toast-background);
  --toast-border-radius: 6px;
  --toast-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  --toast-max-width: calc(var(--s1)*40);
  --toast-min-height: calc(var(--s1)*4.4);
  --toast-font-size: var(--font-size-base);
  --toast-gap: var(--s1);
  --toast-icon-height: var(--s2);
  --toast-icon-circle-fill: var(--icon-inverse);
  --toast-icon-circle-fill--error: var(--toast-icon-circle-fill);
  --toast-progress-bar-color: var(--neutral-70);
  --toast-progress-bar-color--error: var(--red-50);
  --toast-progress-bar-color--info: var(--blue-60);
  --toast-progress-bar-color--success: var(--green-60);
  --toast-progress-bar-color--warning: var(--orange-70);
  --toast-text-color: var(--white);
  --toast-text-color-error: var(--toast-text-color);
  --toast-button-color: var(--white);
  --toast-button-color--error: var(--white);
  --toast-button-color--info: var(--white);
  --toast-button-color--success: var(--white);
  --toast-button-color--warning: var(--white);

  --tooltip-background--default: #3E4046;
  --tooltip-background--error: var(--red-10);
  --tooltip-background--info: var(--blue-10);
  --tooltip-background--success: #021100;
  --tooltip-background--warning: #4c2b00;
  --tooltip-color--default: var(--text-inverse);
  --tooltip-shortcut-background: var(--neutral-40);
  --tooltip-shortcut-color:var(--text-inverse);

  --document-list-focus-color: var(--u-alpha-100);

  --primary-icon-filter: var(--svg-filter-black);

  --action-button-border-color: var(--neutral-85);
  --action-button-background: var(--neutral-97);
  --action-button-shadow: var(--neutral-85);
  --action-button-svg-color: var(--svg-filter-grey);

  /* Metadata */
  --summary-text: var(--text-primary);
  --metadata-title: var(--text-secondary);
  --metadata-value: var(--text-primary);
  --metadata-input-background: var(--white);
  --metadata-input-focus-background: var(--white);
  --metadata-footer-button-background: rgba(255, 255, 255, 0.25);
  --metadata-footer-color: var(--white);
  --notebook-highlight-color: #344255;

  --default-button-text-color: var(--text-primary);
  --default-button-background: var(--u-alpha-200);
  --default-button-hover-background: var(--u-alpha-300);
  --default-button-active-background: var(--u-alpha-400);
  --default-blurred-button-background: rgba(235, 237, 238, 0.7);
  --default-blurred-button: 20px;

  --inbox-header-tab-text-color: var(--text-tertiary);
  --inbox-header-active-tab-text-color: var(--text-primary);
  --inbox-header-search-icon: var(--icon-primary);
  --inbox-header-tab-count-background: var(--u-alpha-200);
  --inbox-header-tab-count-text-color: var(--text-secondary);
  --inbox-header-tab-active-count-text-color: var(--text-secondary);

  --document-list-title-color: var(--text-primary);
  --document-list-item-tertiary-text-color: var(--text-secondary);
  --document-list-doc-icon-color: var(--icon-tertiary);
  --document-list-info-color: var(--text-secondary);
  --document-list-action-button-color: var(--icon-primary);

  --table-of-contents-item-color: var(--text-secondary);
  --table-of-contents-bar-color: var(--border-secondary);
  --table-of-contents-bar-active-color: #B5C3FB;

  --search-input-background: var(--u-alpha-200);

  --placeholder-fill-color: #A1AAC4;
  --placeholder-bg-1: url("/assets/placeholder-bg-light-1.7ea5e3de.png");
  --placeholder-bg-2: url("/assets/placeholder-bg-light-2.2d35b895.png");
  --placeholder-bg-3: url("/assets/placeholder-bg-light-3.930a7a17.png");
  --placeholder-bg-4: url("/assets/placeholder-bg-light-4.f53e8fcb.png");

  --empty-feed-image: url("/assets/empty-state-feed-light.3b1ccfe5.png");

  /* Document share */
  --document-share-width-popovers-float-at: 700px;

  /* Radio group */
  --radio-group-indicator-width: 20px;
  --radio-group-indicator-background-color: var(--surface-primary);
  --radio-group-indicator-border-color: var(--neutral-60);
  --radio-group-indicator-active-color: var(--background-interactive);
  --radio-group-indicator-hover-color: var(--neutral-97);

  /* Badge */
  --badge-background-color: var(--green-90);
  --badge-text-color: var(--green-30);

  /* TTS / audio player */
  --tts-trigger-button-color: var(--text-secondary);
  --tts-trigger-border-color: var(--u-alpha-300);

  --tts-player-background: var(--white);
  --tts-player-box-shadow:
    0px 3px 10px 0px rgba(60, 64, 67, 0.2),
    0px 1.5px 4px 0px rgba(60, 64, 67, 0.1),
    0px 0px 0px 1px rgba(60, 64, 67, 0.05);
  --tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);

  /* Slider */
  --slider-track-background: var(--neutral-80);
  --slider-range-background: var(--neutral-50);
  --slider-hover-range-background-color: var(--blue-50);
  --slider-range-border-right-color: var(--white);
  --slider-thumb-background: var(--white);
  --slider-thumb-box-shadow:
    0px 1px 4px 0px rgba(60, 64, 67, 0.4),
    0px 0px 0px 1px rgba(0, 0, 0, 0.08);

  /* These text variables will eventually be deprecated */
  --text: var(--text-primary);
  --text-grey: var(--text-secondary);
  --text-grey-medium: var(--text-secondary);
  --text-grey-lightish: var(--neutral-70);
  --text-grey-lighter: var(--neutral-80);
  --text-grey-dark: var(--text-primary);
  --text-grey-darker: var(--text-primary);
  --box-shadow-color: rgba(0, 0, 0, 0.15);


  --file-dropzone-background: rgba(0, 0, 0, 0.7);
  --file-dropzone-color: var(--white);

  --transcript-teleprompt-background: rgba(89,142,244, .3);
  --transcript-teleprompt-color: black;

  --onboarding-background-image: url("/onboarding/onboarding-background.webp");
  --onboarding-container-box-shadow: 0px 9px 67px rgba(19, 13, 40, 0.0199343), 0px 3.75998px 27.991px rgba(19, 13, 40, 0.0289288), 0px 2.01027px 14.9653px rgba(19, 13, 40, 0.0364916), 0px 1.12694px 8.38944px rgba(19, 13, 40, 0.0438708), 0px 0.598509px 4.45557px rgba(19, 13, 40, 0.052216), 0px 0.249053px 1.85406px rgba(19, 13, 40, 0.07);
  --onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01.webp");
  --onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02.webp");
  --onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03.webp");
  --onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04.webp");

  --checkbox-icon-color: var(--icon-inverse);

  --component-text-input-background: #fff;
  --component-button-accent-subtle-background: rgba(0, 121, 245, 0.10);
  --component-button-accent-subtle-background-disabled: rgba(105, 120, 132, 0.10);
  --component-button-neutral-subtle-background: rgba(105, 120, 132, 0.10);
}

@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {

:host > *,
:root {
    --default-blurred-button-background: #F2F3F4;
    --default-blurred-button: 0px;
}
  }

:host > * .high-contrast, :root .high-contrast {
    --highlight-background-color--normal: hsl(50deg 96.24% 67.14%);
    --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 75%);
    --highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
    --highlight-background-color--active: hsl(50, 100%, 50%);

    --highlight-image-background-color--normal: hsl(50, 100%, 50%);
    --highlight-image-background-color--active: hsl(50, 100%, 50%);
    --selection-color: rgb(74, 153, 255);
    --text-primary: black;
  }

.theme--dark {

  /* FOUNDATIONS */

  /* Utility alpha classes */
  --u-alpha-100: rgba(110,120,131,0.10); /* neutral-50 equivalent */
  --u-alpha-200: rgba(110,120,131,0.15);
  --u-alpha-300: rgba(110,120,131,0.20);
  --u-alpha-400: rgba(110,120,131,0.25);
  --u-alpha-500: rgba(110,120,131,0.30);

  --u-alpha-blue-100: rgba(45,117,229,0.10); /* blue-50 equivalent */
  --u-alpha-blue-200: rgba(45,117,229,0.15);
  --u-alpha-blue-300: rgba(45,117,229,0.20);
  --u-alpha-blue-400: rgba(45,117,229,0.25);
  --u-alpha-blue-500: rgba(45,117,229,0.30);

  --u-alpha-red-100: rgba(216,64,58,0.10); /* red-50 equivalent */
  --u-alpha-red-200: rgba(216,64,58,0.15);
  --u-alpha-red-300: rgba(216,64,58,0.20);
  --u-alpha-red-400: rgba(216,64,58,0.25);
  --u-alpha-red-500: rgba(216,64,58,0.30);



  /* Text */
  --text-primary: var(--neutral-90);
  --text-secondary: var(--neutral-65);
  --text-tertiary: var(--neutral-50);
  --text-placeholder: var(--neutral-45);
  --text-disabled: var(--neutral-40);
  --text-inverse: var(--neutral-20); /* for use on dark backgrounds while in light mode */
  --text-interactive: var(--blue-70);
  --text-backlink: var(--indigo-70);
  --text-error: var(--red-60);
  --text-success: var(--green-60);

  /* Icons */
  --icon-primary: var(--neutral-80);
  --icon-secondary: var(--neutral-70);
  --icon-tertiary: var(--neutral-45);
  --icon-placeholder: var(--neutral-45);
  --icon-disabled: var(--neutral-40);
  --icon-interactive: var(--blue-70);
  --icon-danger: var(--red-60);
  --icon-success: var(--green-60);
  --icon-inverse: var(--neutral-20);
  --icon-faint: var(--neutral-30);

  /* Highlights */
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 80%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);

  --highlight-text-color: var(--white);
  --highlight-text-pre-color: var(--white);
  --highlight-text-pre-color--active: var(--white);

  /* Borders */
  --border-primary: var(--neutral-65);
  --border-secondary: var(--neutral-20);
  --border-secondary-alpha: var(--u-alpha-400);
  --border-tertiary-alpha: var(--u-alpha-200);
  --border-focus: var(--blue-60);
  --border-error: var(--red-40);

   /* Backgrounds */
  --background-primary: var(--neutral-10);
  --background-secondary: var(--neutral-15);
  --background-tertiary: var(--neutral-20);
  --background-inverse: var(--neutral-90);
  --background-canvas: var(--neutral-07);
  --background-elevated: var(--neutral-20);
  --background-backdrop: rgba(0,0,0,0.4);
  --background-dragging: rgba(40, 49, 59, 0.7);
  --background-interactive: var(--blue-70);
  --background-error: var(--red-10);
  --background-bulk-actions-header: var(--blue-30);

  /* Shadows */
  --shadow-100: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-200: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1.5px 4px rgba(0, 0, 0, 0.1), 0px 3px 10px rgba(0, 0, 0, 0.2);
  --shadow-300: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 3px 5px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.25);
  --shadow-400: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 5px 12px rgba(0, 0, 0, 0.1), 0px 12px 32px rgba(0, 0, 0, 0.2), 0px 20px 96px rgba(0, 0, 0, 0.4);


  /* COMPONENTS */

  /* Progress bar */
  --reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
  --reading-progress-background: var(--neutral-20);
  --reading-progress-max-background: var(--neutral-35);
  --reading-progress-point: var(--neutral-90);

  /* Buttons */

  /* primary - deprecated */
  --primary-button-background: var(--u-alpha-blue-200); /* deprecated */
  --primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
  --primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
  --primary-button-color: var(--text-primary); /* deprecated */

  /* primary */
  --background-button-primary: var(--u-alpha-blue-200);
  --background-button-primary-hover: var(--u-alpha-blue-300);
  --background-button-primary-active: var(--u-alpha-blue-400);
  --text-button-primary: var(--text-primary);
  --text-button-primary-disabled: var(--text-disabled);

  /* secondary */
  --background-button-secondary: var(--u-alpha-200);
  --background-button-secondary-hover: var(--u-alpha-300);
  --background-button-secondary-active: var(--u-alpha-400);
  --text-button-secondary: var(--text-primary);
  --text-button-secondary-disabled: var(--text-disabled);

  /* accent */
  --text-button-accent-subtle-background:rgba(45, 117, 229, 0.23);
  --text-button-accent-subtle-text: rgba(124, 174, 236, 1);
  --text-button-accent-subtle-disabled-background: rgba(110, 120, 130, 0.2);
  --text-button-accent-subtle-disabled-text: rgba(84, 96, 108, 1);

  --btn-secondary: rgba(62, 72, 83, 0.7); /* used for blur buttons? */

  /* blue button */
  --background-button-blue: var(--blue-60);
  --background-button-blue-hover: var(--blue-70);
  --background-button-blue-active: var(--blue-80);
  --background-button-blue-disabled: var(--u-alpha-200);
  --text-button-blue: var(--black);
  --text-button-blue-disabled: var(--text-disabled);

  /* caution */
  --background-button-caution: var(--u-alpha-red-200);

  /* Document card */
  --document-card-border: rgba(0,0,0,0);
  --document-card-border-divider: rgba(0,0,0,.2);
  --document-card-height: var(--background-elevated);
  --document-card-background: var(--neutral-15);
  --document-card-background--hover: var(--neutral-20);
  --document-card-book-image-container-background: var(--background-secondary);
  --document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.43), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.5), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.3715), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.3485), inset 0px 1px 0px rgba(255, 255, 255, 0.2);

  --document-card-hover-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.00), 0px 1.5px 4px rgba(0, 0, 0, 0.03), 0px 2px 8px rgba(0, 0, 0, .3);

  /* Link card */
  --link-card-border--hover: var(--neutral-40);

  /* Donut progress indicator */
  --donut-progress-indicator-center-color: var(--document-card-background);

  /* Sidebar */
  --sidebar-background: var(--background-canvas);
  --empty-sidebar-background: var(--neutral-07);
  --hide-sidebar-button-background: #445064;
  --sidebar-button-icon-color: var(--inbox-icon-color);
  --sidebar-inbox-nav-background: var(--neutral-20);
  --thumbnail-loading-background: linear-gradient( 100deg, rgba(62, 72, 83, 0) 40%, rgba(62, 72, 83, .5) 50%, rgba(62, 72, 83, 0) 60% ) var(--u-alpha-200);
  --sidebar-logo-color: #fff;

  /* Image placeholders */
  --image-placeholder-color: var(--neutral-80);
  --image-placeholder-shadow-color: var(--black);

  /* Main background surfaces */
  --background-color: var(--background-primary);
  --content-background-color: var(--background-primary);
  --code-background-color: var(--neutral-25);

  /* Popovers */
  --edit-tags-form-focused-option-background: var(--neutral-25);
  --main-highlighter-popover-action-hover-background: var(--u-alpha-100);
  --main-highlighter-popover-delete-highlight-action-background: var(--yellow-30);
  --main-highlighter-popover-delete-highlight-icon-color: var(--yellow-70);
  --highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);

  /* Sort menu */
  --sort-menu-background: var(--background-elevated);

  /* Misc */
  --content-secondary-color: var(--text-secondary);
  --focus-indicator-color: var(--blue-50);
  --section-border-color: var(--border-secondary-alpha);
  --app-side-drop-shadow: rgba(40, 40, 40, 0.75);

  /* Appearance panel */
  --appearance-panel-background: var(--background-elevated);
  --appearance-panel-item-hover-background: var(--u-alpha-100);

  /* Command palette */
  --cmd-palette-background: var(--neutral-15);
  --cmd-palette-cmd-container: var(--neutral-15);
  --cmd-palette-section-title: var(--neutral-15);
  --cmd-palette-row-hover: var(--u-alpha-100);
  --cmd-palette-drop-shadow: var(--shadow-400);
  --cmd-palette-scrollbar: var(--neutral-40);
  --cmd-palette-key-background: var(--u-alpha-200);
  --cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.16) inset;
  --cmd-palette-context-item-background:var(--background-primary);
  --cmd-palette-context-item-border: var(--border-secondary);
  --cmd-palette-label-color: var(--text-secondary);
  --cmd-palette-close-icon-color: #B6B9BF;

  /* Wisereads doc discovery modal */
  --wisereads-modal-header-background: rgba(31, 39, 47, 0.9);
  --wisereads-modal-background: var(--background-secondary);
  --wisereads-modal-card-background: var(--background-tertiary);
  --wisereads-modal-card-border-hover: var(--border-secondary-alpha);
  --wisereads-modal-button-background: rgba(45, 117, 229, 0.23);

  /* Inbox */

  --inbox-sidebar-background: #12171C;
  --inbox-icon-color: var(--icon-secondary);
  --inbox-icon-color-disabled: var(--icon-disabled);
  --inbox-icon-color-active: var(--icon-primary);

  --inbox-zero-background-image-filter: opacity(30%) saturate(0%);
  --inbox-zero-foreground-image-filter:
    brightness(300%)
    opacity(50%)
    contrast(30%)
    saturate(100%);

  --inbox-zero-header-items-filter:
    contrast(70%)
    brightness(200%)
    hue-rotate(0)
    drop-shadow(0 0 2px rgba(0,0,0,1))
    opacity(70%)
    saturate(30%);

  --inbox-zero-sidebar-items-filter:
    contrast(98%)
    brightness(500%)
    hue-rotate(0)
    drop-shadow(0px 0px 5px rgba(0,0,0,1))
    opacity(100%)
    saturate(300%);

  --nav-item-filter: var(--svg-filter-inbox);
  --nav-item-active-filter: var(--svg-filter-white);

  --document-list-box-shadow: inset -2px 53px 16px -54px var(--black);
  --inbox-container-drop-shadow:  0px 8px 20px rgba(0, 0, 0, 0.08), 0px -1px 2px rgba(0, 0, 0, 0.08);

  --import-link-color: var(--blue-50);

  --tag-color: var(--u-alpha-200);
  --tag-text-color: var(--text-secondary);

  --scrollbar-color:var(--neutral-40);
  --scrollbar-color-hover: var(--neutral-50);

  --separator-color: rgba(255, 255, 255, 0.1);

  --toast-background: var(--white);
  --toast-background--error: var(--red-90);
  --toast-background--info: var(--toast-background);
  --toast-background--success: var(--toast-background);
  --toast-background--warning: var(--toast-background);
  --toast-button-color: var(--text-inverse);
  --toast-button-color--error: var(--text-error);
  --toast-button-color--info: var(--toast-button-color);
  --toast-button-color--success: var(--toast-button-color);
  --toast-button-color--warning: var(--toast-button-color);
  --toast-box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.1), 0 2px 5px 0 rgba(255, 255, 255, 0.05);
  --toast-icon-circle-fill--error: var(--icon-danger);
  --toast-text-color: var(--text-inverse);
  --toast-text-color--error: var(--red-20);

  --tooltip-background--default: var(--white);
  --tooltip-color--default: #202226;
  --tooltip-shortcut-background: #ECECED;
  --tooltip-shortcut-color: rgba(32, 34, 38, 0.64);

  --document-list-focus-color: var(--u-alpha-100);


  --primary-icon-filter: var(--svg-filter-white);
  --action-button-border-color: var(--neutral-15);
  --action-button-background: var(--neutral-10);
  --action-button-shadow: var(--black);
  --action-button-svg-color: var(--svg-filter-white);


  /* PDF Search Bar */
  --document-search-input-background: var(--neutral-00);

  /* Find in document matches DARK MODE */
  --find-in-document-match-passive: rgba(108, 120, 131, 0.42);
  --find-in-document-match-active: rgba(22, 148, 245, 0.3);

  /* Metadata */
  --summary-text: var(--text-primary);
  --metadata-title: var(--text-secondary);
  --metadata-value: var(--text-primary);
  --metadata-input-background: var(--background-secondary);
  --metadata-input-focus-background: var(--background-primary);
  --metadata-footer-button-background: rgba(43, 46, 55, 0.05);
  --metadata-footer-color: var(--background-canvas);
  --notebook-highlight-color: var(--black);

  --default-button-text-color: var(--text-primary);
  --default-button-background: var(--u-alpha-200);
  --default-button-hover-background: var(--u-alpha-300);
  --default-button-active-background: var(--u-alpha-400);
  --default-blurred-button-background: rgba(62, 72, 83, 0.7);
  --default-blurred-button: 20px;

  --inbox-header-tab-text-color: var(--text-grey-medium);
  --inbox-header-active-tab-text-color: var(--text-primary);
  --inbox-header-search-icon: var(--white);
  --inbox-header-tab-count-background: var(--u-alpha-200);
  --inbox-header-tab-count-text-color: var(--text-grey-lighter);
  --inbox-header-tab-active-count-text-color: var(--text-grey-darker);

  --document-list-title-color: var(--text-primary);
  --document-list-item-tertiary-text-color: var(--text-secondary);
  --document-list-doc-icon-color: var(--icon-secondary);
  --document-list-info-color: var(--text-secondary);
  --document-list-action-button-color: rgba(255, 255, 255, 0.8);

  --table-of-contents-item-color: var(--text-secondary);
  --table-of-contents-bar-color: #464851;
  --table-of-contents-bar-active-color: #4E94FD;

  --search-input-background: var(--u-alpha-200);

  --transcript-teleprompt-background: rgba(89,142,244, .4);
  --transcript-teleprompt-color: white;

  --placeholder-fill-color: #7F8494;
  --placeholder-bg-1: url("/assets/placeholder-bg-dark-1.6e58967f.png");
  --placeholder-bg-2: url("/assets/placeholder-bg-dark-2.9f7c66c5.png");
  --placeholder-bg-3: url("/assets/placeholder-bg-dark-3.3fb3a36d.png");
  --placeholder-bg-4: url("/assets/placeholder-bg-dark-4.1b679a5e.png");

  --empty-feed-image: url("/assets/empty-state-feed-dark.14291346.png");

  /* Radio group */

  --radio-group-indicator-hover-color: var(--neutral-20);

  /* Badge */
  --badge-background-color: var(--green-30);
  --badge-text-color: var(--green-90);

  /* TTS / audio player */
  --tts-trigger-button-color: var(--neutral-70);
  --tts-trigger-border-color: var(--u-alpha-300);

  --tts-player-background: var(--neutral-10);
  --tts-player-box-shadow:
    0px 3px 10px 0px rgba(0, 0, 0, 0.3),
    0px 1.5px 4px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 1px rgba(0, 0, 0, 0.15);
  --tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);

  /* Slider */
  --slider-track-background: var(--neutral-30);
  --slider-range-background: var(--neutral-50);
  --slider-hover-range-background-color: var(--blue-50);
  --slider-range-border-right-color: var(--neutral-10);
  --slider-thumb-background: var(--white);
  --slider-thumb-box-shadow:
    0px 1px 4px 0px rgba(60, 64, 67, 0.4),
    0px 0px 0px 1px rgba(0, 0, 0, 0.08);

  /* These text variables will eventually be deprecated */
  --text: var(--text-primary);
  --text-grey-lighter: var(--neutral-80);
  --text-grey: var(--text-secondary);
  --text-grey-medium: var(--text-secondary);
  --text-grey-lightish: var(--neutral-70);
  --text-grey-lighter: var(--neutral-80);
  --text-grey-dark: var(--text-primary);
  --text-grey-darker: var(--text-primary);

  --onboarding-background-image: url("/onboarding/onboarding-background-dark.webp");
  --onboarding-container-box-shadow: 0px 9px 67px rgb(19 13 40 / 20%), 0px 3.75998px 27.991px rgb(19 13 40 / 12%), 0px 2.01027px 14.9653px rgb(19 13 40 / 4%), 0px 1.12694px 8.38944px rgb(9 6 18 / 19%), 0px 0.598509px 4.45557px rgb(7 7 7 / 40%), 0px 0.249053px 1.85406px rgb(6 4 12 / 18%);
  --onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01-dark.webp");
  --onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02-dark.webp");
  --onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03-dark.webp");
  --onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04-dark.webp");

  --checkbox-icon-color: var(--neutral-00);

  --component-text-input-background: rgba(105, 120, 132, 0.12);
  --component-button-accent-subtle-background: rgba(0, 121, 245, 0.23);
  --component-button-accent-subtle-background-disabled: rgba(105, 120, 132, 0.20);
  --component-button-neutral-subtle-background: rgba(105, 120, 132, 0.20);
}

@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {

.theme--dark {
    --default-blurred-button-background: #2B323A;
    --default-blurred-button: 0px;
}
  }

.theme--dark.high-contrast {
  --text-primary: white;
}

/* Component variables (NO COLORS) */

:host > *,
:root {
  --animation-duration--imply-interactivity: 0;
  --animation-duration--move: 0;
  --animation-duration--reveal: 0;
  --content-gutter: var(--s3);
  --reading-editable-line-length: 648px;
  --document-list-item-height: calc(var(--f1) * 11.3);
  --document-list-item-height_js: 113px; /* JS can't parse the above easily */
  --document-list-item-horizontal-padding: calc(var(--s1) * 1.7);
  --document-list-image-height: 62px;
  --document-list-image-width: 62px;
  --document-list-padding-top: 8px;
  --focus-indicator-width: 3px;
  --inbox-header-height: 65px;
  --inbox-header-height_js: 65px; /* JS can't parse the above easily */
  --inbox-sidebar-width: 240px;
  --person-card-image-size: 40px;
  --sidebar-padding-vertical: 0.5rem;
  --sidebar-nav-height: 64px;
  --sidebar-padding-horizontal: 24px;
  --sidebar-padding: var(--sidebar-padding-vertical) var(--sidebar-padding-horizontal);

  --popover-max-width: 305px;
  --popover-background: var(--background-elevated);
  --popover-z-index: 100;
  --popover-focused-z-index: 101;

  --sidebars-max-width: 296px;
  --progress-bar-large-height: 3px;

  --table-of-contents-font-size: 0.875rem;
  --table-of-contents-bar-margin-right: 16px;
  --table-of-contents-bar-height: 4px;
  --table-of-contents-max-bar-width: 32px;
  --table-of-contents-width-diff: 8px;
  --scrollbar-border-radius: 12px;
  --scrollbar-thickness: 14px;
  --status-dot-size: 6px;
  --appearance-panel-width: 292px;
  --feed-icon-in-palette: 16px;
  --action-button-border-radius: 31px;
  --theme-transition-time: 0s;
  --panels-transition-time: 0.2s;

  --tts-player-height: 96px;
  --js__tts-player-current-height: 0; /* Updated by JS */
  --safe100vh: calc(100vh - var(--js__tts-player-current-height));
  --safeBottom0: calc(0px + var(--js__tts-player-current-height));
}

@media (prefers-reduced-motion: no-preference) {

:host > *,
:root {
    --animation-duration--imply-interactivity: 0.15s;
    --animation-duration--move: 0.25s;
    --animation-duration--reveal: 0.15s;
}
  }

:host > * .high-contrast, :root .high-contrast {
    --highlight-text-color: black;
  }

/*
  Pseudo-elements are not meant to react to pointer events but we found an issue in Firefox which was
  fixed by adding `pointer-events: none`, so let's make sure it's done for all.
*/

:scope::before,:scope::after,
  ::before,
  ::after {
    pointer-events: none !important;
  }

/* Reset html elements. */

.document-content div, .document-content span, .document-content applet, .document-content object, .document-content iframe, .document-content h1, .document-content h2, .document-content h3, .document-content h4, .document-content h5, .document-content h6, .document-content p, .document-content blockquote, .document-content pre, .document-content a, .document-content abbr, .document-content acronym, .document-content address, .document-content big, .document-content cite, .document-content code, .document-content del, .document-content dfn, .document-content em, .document-content img, .document-content ins, .document-content kbd, .document-content q, .document-content s, .document-content samp, .document-content small, .document-content strike, .document-content strong, .document-content tt, .document-content var, .document-content b, .document-content u, .document-content i, .document-content center, .document-content dl, .document-content dt, .document-content dd, .document-content ol, .document-content ul, .document-content li, .document-content fieldset, .document-content form, .document-content label, .document-content legend, .document-content table, .document-content caption, .document-content tbody, .document-content tfoot, .document-content thead, .document-content tr, .document-content th, .document-content td, .document-content article, .document-content aside, .document-content canvas, .document-content details, .document-content embed, .document-content figure, .document-content figcaption, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content output, .document-content ruby, .document-content section, .document-content summary, .document-content time, .document-content mark, .document-content audio, .document-content video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

.document-content style {
    display: none;
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
  }

/* HTML5 display-role reset for older browsers */

.document-content article, .document-content aside, .document-content details, .document-content figcaption, .document-content figure, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content section {
    display: block;
  }

.document-content ol, .document-content ul {
    list-style: none;
  }

.document-content blockquote, .document-content q {
    quotes: none;
  }

.document-content blockquote:before, .document-content blockquote:after, .document-content q:before, .document-content q:after {
    content: '';
    content: none;
  }

.document-content table {
    border-collapse: collapse;
    border-spacing: 0;
  }

.document-content span[data-rw-start] {
    cursor: pointer;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
  }

.document-content span[data-rw-start]:hover {
      border-radius: 4px;
      background: var(--u-alpha-400);
      color: var(--transcript-teleprompt-color);
    }

.document-content span[data-rw-start]:has(.rw-highlight:hover) {
      background: none;
      color: inherit;
    }

@media (max-width: 768px) {
      .document-content span.touchstart[data-rw-start] {
        border-radius: 4px;
        background: var(--u-alpha-400) !important;
        color: var(--transcript-teleprompt-color) !important;
      }

      .document-content span[data-rw-start]:hover {
        background: none;
        color: inherit;
      }
    }

/* End of Reset */

:root #document-header {
  --reading-text-primary: #0C1117;
  --reading-border: #F0F1F2;
  --reading-icon: #606C79;
}

.theme--dark #document-header {
  --reading-text-primary: #F0F1F2;
  --reading-border: rgba(92, 105, 119, 0.3);
  --reading-icon: #F0F1F2;
}

.theme--dark .document-content  img, .theme--dark .document-content figure img {
  opacity: .7;
  transition: opacity 500ms;
}

:root .document-content { /* Light theme */

  /* Reading colours */
  --reading-text-title: var(--black);
  --reading-text-primary: var(--text-primary);
  --reading-text-secondary: var(--text-secondary);
  --reading-text-primary-inverse: var(--text-inverse);
  --reading-text-link: 13 30 142;
  --reading-text-link-highlight: 0 0 0;
  --reading-text-primary-link-highlight: var(--black);
  --reading-text-code: var(--red-40);

  /* Surface colors */
  --reading-surface-primary-inverse: #1E272F;
  --reading-surface-tertiary: rgba(92, 105, 119, 0.06);
  --reading-surface-code: #333C46;

  /* Border colors */
  --reading-border-secondary: rgba(40, 49, 59, 0.12);
  --text-selection-background-color: rgba(70, 147, 254, 0.18);
}

.theme--dark .document-content { /* Dark theme */
  --reading-text-title: var(--white);
  --reading-text-primary: var(--neutral-80);
  --reading-text-secondary: var(--text-secondary);
  --reading-text-primary-inverse: var(--text-primary);
  --reading-text-link: 174 200 241;
  --reading-text-link-highlight: 255 255 255;
  --reading-text-primary-link-highlight: var(--neutral-100);
  --reading-text-code: var(--orange-80);

  /* Surface colors */
  --reading-surface-primary-inverse: #10161D;
  --reading-surface-tertiary: rgba(92, 105, 119, 0.15);
  --reading-surface-code: #E2E8F0;

  /* Border colors */
  --reading-border-secondary: rgba(92, 105, 119, 0.3);
}

.theme--dark.high-contrast .document-content {
  --reading-text-primary: var(--text-primary);
}

.theme--sepia .document-content {
  --reading-text-title: #3C2D23;
  --reading-text-primary: #3C2D23;
  --reading-text-secondary: #7A6755;
}

:root {
  --reading-editable-font-size: 20;
  --reading-editable-text-justify: start;
  --reading-editable-line-height: 1.6; /* should land on 4px increments. 20, 24, 28, 32, 36 */
  --reading-editable-font-family: "Source Serif VF", Georgia, Serif;
  /* auto generate */

  --reading-scale: 1.2;
  --reading-root-size: 16; /* This is to replicate the browser base size for math purposes */

  --reading-base-fs: calc(var(--reading-editable-font-size) / var(--reading-root-size)); /* fs is unitless and is only used for calculations*/
  --reading-base-font-size: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
  --reading-base-line-height: var(--reading-editable-line-height);
  --reading-base-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);

  /* Caption = table divided by scale */
  --reading-caption-fs: calc(var(--reading-table-fs) / var(--reading-scale)  / var(--reading-scale));
  --reading-caption-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
  --reading-caption-line-height: var(--reading-editable-line-height);
  --reading-caption-margin: calc(var(--reading-editable-line-height) / calc(var(--reading-root-size) * var(--reading-p-fs)) * 1em);

  /* Table = base size divided by scale */
  --reading-table-fs: calc(var(--reading-base-fs) / var(--reading-scale) );
  --reading-table-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
  --reading-table-line-height: var(--reading-editable-line-height);
  --reading-table-margin: calc(var(--reading-editable-font-size)*.75);

  /* P = base size */
  --reading-p-fs: calc(var(--reading-base-fs));
  --reading-p-font-size: calc(var(--reading-base-fs) * 1rem);
  --reading-p-line-height: var(--reading-editable-line-height);
  --reading-p-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
  --reading-p-margin-v: calc( var(--reading-editable-font-size) / var(--reading-root-size) * calc(var(--reading-editable-line-height) - 0.5) *1rem );


  /* H3 = base size x scale */
  --reading-h3-fs: var(--reading-p-fs);
  --reading-h3-font-size: calc(var(--reading-p-fs) * 1rem);
  --reading-h3-line-height: var(--reading-editable-line-height);
  --reading-h3-margin: calc(var(--reading-h3-line-height) * 1em);

  /* H2 = H3 size x scale */
  --reading-h2-fs: calc(var(--reading-h3-fs) * var(--reading-scale));
  --reading-h2-font-size: calc(var(--reading-h3-fs) * var(--reading-scale) * 1rem);
  --reading-h2-line-height: calc(var(--reading-h3-line-height) * .925);

  /* H1 = H2 size x scale */
  --reading-h1-fs: calc(var(--reading-h2-fs) * var(--reading-scale));
  --reading-h1-font-size: calc(var(--reading-h2-fs) * var(--reading-scale) * 1rem);
  --reading-h1-line-height: calc(var(--reading-h2-line-height) * .925);
  --reading-h1-margin: calc(var(--reading-h1-line-height) * 1em);


  /* Typefaces */
  --reading-font-body: var(--reading-editable-font-family);
  --reading-font-title: var(--reading-editable-font-family);
  --reading-font-caption: "Inter VF", sans-serif;

  --reading-font-monospace: "Roboto Mono VF","SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.is-reader-mobile-app .document-header-title {
    width: 100%;
    text-align: center;
    font-size: 30px;
    line-height: 32px;
  }

.is-reader-mobile-app .document-header-domain {
    width: 100%;
    gap: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

.is-reader-mobile-app .header-top-row {
    margin-bottom: var(--spacer-4);
  }

.is-reader-mobile-app hr {
    color: var(--reading-border);
  }

.is-reader-mobile-app .summary-top-line {
    height: 1px;
    background-color: var(--reading-border);
    margin: 18px auto;
    transition: width 0.3s ease-in-out;
    width: 0;
  }

.is-reader-mobile-app .summary-top-line-expanded {
    width: 32px;
  }

.is-reader-mobile-app .summary-section {
    margin-top: 12px;
  }

.is-reader-mobile-app .document-header-mobile-separator {
    display: flex;
    align-items: center;
    justify-content: center;
  }

.is-reader-mobile-app .document-header-mobile-separator::before,
    .is-reader-mobile-app .document-header-mobile-separator::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid var(--reading-border);
    }

.is-reader-mobile-app .document-header-mobile-separator .toggle-icon {
      margin: 8px 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--reading-icon);
      background-color: var(--reading-border);
      border-radius: 50%;
      transition: transform 0.3s ease-in-out;
    }

.is-reader-mobile-app .document-header-mobile-separator .toggle-icon-expanded {
      transform: rotate(180deg);
    }

.is-reader-mobile-app .document-header-metadata-row {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
  }

.is-reader-mobile-app .document-header-metadata-row span {
      font-size: 13px;
      color: var(--text-secondary);
    }

.is-reader-mobile-app .document-header-metadata-row .metadata-author {
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 0 1 auto;
    }

.is-reader-mobile-app .document-header-tags {
    margin-top: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

#document-header {
  margin-bottom: 0;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  font-family: var(--ui-font);
}

#document-header h1 {
    margin: 0;
    font-size: 40px;
    line-height: 46px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--reading-text-primary);
    font-family: var(--reading-editable-font-family);
    font-feature-settings: "onum" 1;
    font-variation-settings: "opsz" 41; /* optical size needs to be set close to font-size but it can't be the exact same - Safari bug */
    text-rendering: optimizeLegibility;
    text-wrap: balance;
  }

@media (max-width: 768px) {

#document-header {
    margin-bottom: -6px;
}
    #document-header h1 {
      font-size: 32px;
      line-height: 36.8px;
      letter-spacing: -0.015em;
    }

  }

#document-header .header-top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--spacer-5);
  }

#document-header .header-source-container {
    flex: 1;
  }

#document-header .document-header-domain {
    display: flex;
    overflow: hidden;

    gap: 12px;
  }

#document-header .document-header-domain span {
      color: var(--text-secondary);
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 100%;
      text-align: center;
    }

#document-header .document-header-domain .document-header-domain-favicon, #document-header .document-header-domain svg {
      background-size: cover;
      height: 16px;
      width: 16px;
      fill: var(--icon-secondary);
    }

#document-header hr {
    border: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-color: var(--border-secondary-alpha);
    margin: 0;
    margin-top: 20px;
  }

@media (max-width: 768px) {

#document-header hr {
      margin-top: 16px;
  }
    }

#document-header .document-header-metadata-row {
    word-break: break-word;
    overflow: hidden;
  }

#document-header .document-header-metadata-row span {
      font-weight: 400;
      font-size: 14px;
    }

#document-header .document-header-metadata-row .document-header-author-content {
      white-space: nowrap;
      margin-right: 8px;
      color: var(--text-secondary);
      /* The true value for line-height should be 20px, but because we want the tags to flow with the author text,
          the tags and author are effectively in one long span that flows properly around the date span which is fixed to the right

        57 = 17px true size of text + 20px * 2 for 20px margin above and below

        if I am correct, the 20px line-height makes no effect anymore, effectively we are using line-height
        when we should use margins, but sadly we cannot pull that off because you cannot create margins between
        two lines of text in one span, thats the job of line height
       */
      line-height: 57px;
    }

@media (max-width: 768px) {

#document-header .document-header-metadata-row .document-header-author-content {
        /* 48 = 16px + 16 * 2 for margins */
        line-height: 48px;
    }
      }

#document-header .document-header-metadata-row .document-header-author-content .document-header-author-text {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

#document-header .document-header-metadata-row .document-header-published-date {
      float: right;
      white-space: nowrap;
      color: var(--text-secondary);
      /* See above as to why this is 57px */
      line-height: 57px;
    }

@media (max-width: 768px) {

#document-header .document-header-metadata-row .document-header-published-date {
        /* 48 = 16px + 16 * 2 for margins */
        line-height: 48px;
    }
      }

#document-header .document-header-metadata-row .document-header-separator {
      display: inline-flex;
      background: var(--border-primary);
      width: 4px;
      height: 4px;
      min-width: 4px;
      min-height: 4px;
      border-radius: 100%;
      margin: 0 6px;
      margin-bottom: 3px;
    }

#document-header .document-header-tags {
    display: inline-flex;
    flex-wrap: wrap;
  }

#document-header .document-header-tags a {
      margin-right: 4px;
      margin-bottom: 4px;
    }

#document-header .summary-container-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
  }

#document-header .summary-container-expanded {
    grid-template-rows: 1fr;
  }

#document-header .summary-container {
    overflow: hidden;
  }

#document-header .summary-container .summary-content {
      display: flex;
      flex-direction: column;
      margin: 16px 0;
      gap: 8px;
    }

#document-header .summary-container .summary-content .summary-text {
        white-space: pre-line;
        color: var(--reading-text-primary);
        margin: 0;
        font-size: 15px;
        line-height: 20px;
        font-weight: 400;
      }

#document-header .summary-container .summary-content .summary-attribution {
        margin: 0;
        color: var(--text-tertiary);
        font-size: 13px;
        line-height: 18px;
      }

#document-header rw-spacer {
    display: block;
    width: 100%;
  }

#document-header rw-spacer:not([size]) {
    height: var(--spacer-4);
  }

#document-header rw-spacer[size="1"] {
    height: var(--spacer-1);
  }

#document-header rw-spacer[size="2"] {
    height: var(--spacer-2);
  }

#document-header rw-spacer[size="3"] {
    height: var(--spacer-3);
  }

#document-header rw-spacer[size="4"] {
    height: var(--spacer-4);
  }

#document-header rw-spacer[size="5"] {
    height: var(--spacer-5);
  }

#document-header rw-spacer[size="6"] {
    height: var(--spacer-6);
  }

#document-header rw-spacer[size="7"] {
    height: var(--spacer-7);
  }

#document-header rw-spacer[size="8"] {
    height: var(--spacer-8);
  }

.document-content {
  box-sizing: border-box;
  padding: 0 var(--content-gutter) 0; /* needs to be adjusted */
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  font-variation-settings: "opsz" calc(var(--reading-editable-font-size) + 1); /* optical size needs to be set close to font-size but it
   can't be the exact same - Safari bug */
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;

  /* full justification
  text-align: justify; */

  /* hyphenation */
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;
  -webkit-hyphenate-limit-zone: 8%;
  -moz-hyphens: auto;
  -moz-hyphenate-limit-chars: 6 3 3;
  -moz-hyphenate-limit-lines: 2;
  -moz-hyphenate-limit-last: always;
  -moz-hyphenate-limit-zone: 8%;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: 6 3 3;
  -ms-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-last: always;
  -ms-hyphenate-limit-zone: 8%;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;

}

@supports (font-kerning: normal) and (font-variant ligatures: common-ligatures contextual) {

.document-content {
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;

}
  }

/* This is required for emulating selection but it breaks the content focus indicator on web */

.document-content.rw-mobile-web-view,
  .document-content.is-emulating-selection {
    position: relative;
  }

.document-content p {
    margin-bottom: var(--reading-p-margin);
    margin-top: var(--reading-p-margin);
  }

.document-content p.rw-hide {
      display: none;
    }

.document-content h1 {
    margin-top: calc(var(--reading-base-margin) * 3);
    margin-bottom: var(--reading-base-margin);
    letter-spacing: -0.019em;
    font-variation-settings: "opsz" calc(var(--reading-h1-fs) * 16 + 1 );
    font-weight: 600;
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top: 96px;
  }

.document-content h2 {
    margin-top: calc(var(--reading-base-margin) * 2);
    margin-bottom: var(--reading-base-margin);
    letter-spacing: -0.011em;
    font-variation-settings: "opsz" calc(var(--reading-h2-fs) * 16 + 1);
    font-weight: 600;
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top:96px;
  }

.document-content h3 {
    font-weight: 600;
    margin-top: calc(var(--reading-base-margin) * 1.5);
    margin-bottom: calc(var(--reading-base-margin) * .5);
    letter-spacing: -0.011em;
    font-variation-settings: "opsz" calc(var(--reading-h3-fs) * 16 + 1);
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top:96px;
  }

.document-content h4,
  .document-content h5,
  .document-content h6 {
    font-weight: 600;
    margin-top: var(--reading-p-margin);
    margin-bottom: calc(var(--reading-p-margin) * 0.5);
    scroll-margin-top:96px;
  }

.document-content h2 + * {
    margin-top: 0;
  }

.document-content h3 + * {
    margin-top: 0;
  }

.document-content h4 + * {
    margin-top: 0;
  }

.document-content h1 code,
  .document-content h2 code,
  .document-content h3 code,
  .document-content h4 code,
  .document-content h5 code,
  .document-content h6 code {
    font-size: .9em;
  }

.document-content h4 code {
    font-size: .9em;
    font-weight: 600;
  }

.document-content em, .document-content i {
    font-style: italic;
  }

.document-content strong, .document-content b {
    font-weight: 600;
  }

.document-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

.document-content hr {
    border-top-width: 1px;
    border-top-style: solid;
    margin-top: calc(var(--reading-base-margin) * 3);
    margin-bottom: calc(var(--reading-base-margin) * 3);
    border-bottom: none;
  }

.document-content hr + * {
    margin-top: 0;
  }

.document-content sub, .document-content sup {
    line-height: 0;
  }

/* -- Lists --*/

.document-content ol {
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    list-style-type: decimal;
  }

.document-content ol li {
      margin-top: .5rem;
      margin-bottom: .5rem;
    }

.document-content ol > li {
      margin-left: calc(var(--reading-base-margin) * 2);
      padding-left: .5rem;
    }

.document-content ol > li p {
      margin-top: calc(var(--reading-base-margin) / 4);
      margin-bottom: calc(var(--reading-base-margin) / 4);
    }

.document-content ol > li > *:first-child {
    margin-top: calc(var(--reading-base-margin));
  }

.document-content ol > li > *:last-child {
    margin-bottom: calc(var(--reading-base-margin));
  }

.document-content ul {
    font-family: var(--reading-font-body);
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    font-size: var(--reading-base-font-size);
    list-style-type: disc;
  }

.document-content ul li {
      margin-top: calc(var(--reading-base-margin) / 2);
      margin-bottom: calc(var(--reading-base-margin) / 2);
      font-size: var(--reading-base-font-size);
    }

.document-content ul > li {
      margin-left: calc(var(--reading-base-margin) * 2);
      padding-left: .5rem;
    }

.document-content ul > li p {
      margin-top: calc(var(--reading-base-margin) / 4);
      margin-bottom: calc(var(--reading-base-margin) / 4);
    }

.document-content ul > li > *:first-child {
    margin-top: calc(var(--reading-base-margin) / 2);
  }

.document-content ul > li > *:last-child {
    margin-bottom: calc(var(--reading-base-margin));
  }

.document-content ul ul,
  .document-content ul ol,
  .document-content ol ul,
  .document-content ol ol {
    margin-top: .5em;
    margin-bottom: .5em;
  }

/*  description list */

.document-content dt {
    margin-top: var(--reading-p-margin);
  }

/* make sure to not delete this because pagination relies on this CSS */

.document-content * :last-child {
    margin-bottom: 0;
  }

/* Tables */

.document-content table {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 2em;
    margin-bottom: 2em;
    font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 0; /* changes back to lining figures */
  }

.document-content table caption {
    margin-top: var(--reading-base-margin);
    margin-bottom: calc(var(--reading-base-margin) * 1em);
  }

.document-content thead {
    font-weight: 600;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--reading-border-secondary);
  }

.document-content thead th {
    vertical-align: bottom;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
  }

.document-content tbody tr {
    border-bottom-width: 1px;
    border-style: solid;
  }

.document-content tbody tr:last-child {
    border-bottom-width: 0;
  }

.document-content tbody td {
    vertical-align: top;
    padding-top: 0.75em;
    padding-right: 0.5em;
    padding-bottom: 0.75em;
    padding-left: 0.5em;
  }

.document-content tfoot {
    font-weight: 600;
    border-top-width: 1px;
    border-top-style: solid;
  }

.document-content tfoot th {
    vertical-align: top;
    padding-right: 0.5em;
    padding-top: 0.5em;
    padding-left: 0.5em;
  }

.document-content thead th:first-child {
    padding-left: 0;
  }

.document-content tfoot th:first-child {
    padding-left: 0;
  }

.document-content tbody td:first-child {
    padding-left: 0;
  }

.document-content tbody td:last-child {
    padding-right: 0;
  }

/* Fix for newsletters that use tables for layout */

.document-content table table,
  .document-content table table tr,
  .document-content table table td,
  .document-content table table figure {
    margin: 0;
    padding: 0;
  }

.document-content table table,
  .document-content table table tr,
  .document-content table table td {
    border: none;
  }

/* Figure and Img */

.document-content img:not(p img, li img, img.allow-image-styles) {
    margin: auto;
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
    border-radius: .25rem;
  }

.document-content video {
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    margin-left: auto;
    margin-right: auto;
  }

.document-content embed {
    display: none;
  }

.document-content div.rw-embed-wrapper {
    position: relative;
    padding-bottom: 18.14rem;  /* for 16:9 aspect ratio */
  }

.document-content div.rw-embed-wrapper embed {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%!important;
    }

.document-content article.rw-discussion-post {
    padding: .4em .4em 0;
    margin: 0;
    border-left: 1px solid var(--border-secondary);
  }

.document-content article.rw-discussion-post h1 {
      margin-top: 0;
      margin-bottom: 0;
    }

.document-content article.rw-discussion-post small {
      font-size: 75%;
    }

.document-content article.rw-discussion-post:not(:has(article.rw-discussion-post)) {
    margin-bottom: 1em;
  }

.document-content div.rw-soundcloud-wrapper {
    padding-bottom: 9rem;
  }

.document-content div.rw-soundcloud-wrapper embed {
      height: 166px;
    }

.document-content div.rw-infogram-wrapper {
    padding-bottom: 9rem;
  }

.document-content div.rw-infogram-wrapper embed {
      height: 300px!important;
    }

.document-content figure {
    margin-top: calc(var(--reading-base-margin) * 2);
    margin-bottom: calc(var(--reading-base-margin) * 2);
    line-height: 1.33336;
    display: block;
  }

.document-content svg:empty {
    display: none;
  }

.document-content figure figcaption {
    line-height: 1.5;
    margin-top: calc(var(--reading-base-margin) / 2);
  }

.document-content figure:not(li figure) img + figcaption {
    margin-top: -16px;
  }

.document-content figure > * {
    margin-top: 0;
    margin-bottom: 0;
  }

/* Blockquotes */

.document-content blockquote {
    font-style: italic;
    font-size: var(--reading-p-font-size);
    color: var(--reading-text-blockquote);
    margin: 0;
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    hanging-punctuation: first;
    padding: 0 var(--reading-base-margin);
  }

/* Make sure nested images are not block */

.document-content blockquote img, .document-content figure img, .document-content ol img, .document-content p img, .document-content table img, .document-content ul img {
      display: initial;
      max-width: 100%!important;
    }

.document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
    margin-top: 200px;
    padding-top: 0;
    display: block;
    -moz-column-break-before: column;
         break-before: column;
  }

.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
      text-decoration: none;
    }

.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
      content: "***";
      position: relative;
      width: 100%;
      display: block;
      top: -100px;
      text-align: center;
      font-size: 48px;
      letter-spacing: 1em;
      font-weight: 200;
      color: var(--text-tertiary);
    }

/* highlights */

/* This code is repeated in extension/source/injection/index.css */

.document-content .rw-image-highlight {
    border-radius: 2px;
    outline: 12px solid var(--highlight-image-background-color--normal);
  }

.document-content .rw-image-highlight.rw-image-highlight--active {
    outline-color: var(--highlight-image-background-color--active);
  }

.document-content pre .rw-highlight {
    color: var(--highlight-text-pre-color) !important;
  }

/* All of the mandatory styles that cannot be overwritten by epub styles */

/* the specific classes make sure that the rules below win out on specificity */

.document-content,
  .document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10 {
    font-size: var(--reading-p-font-size);
    color: var(--reading-text-primary);
    font-family: var(--reading-font-body);
    line-height: var(--reading-base-line-height);
    font-weight: 400;
  }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) * {
      min-height: auto;
      height: auto;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .chunk-boundary-border,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-chunk-container {
      margin-top: auto!important;
      margin-bottom: auto!important;
      margin-left: auto!important;
      margin-right: auto!important;
    }

/* make sure to not delete this because pagination relies on this CSS */

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) :last-child {
      margin-bottom: 0;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) nav {
      display: block;
      visibility: visible;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .auto-height {
      height: auto !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 99999999;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation * {
        position: absolute;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::-moz-selection {
      background-color: var(--text-selection-background-color) !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::selection,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation * {
      background-color: var(--text-selection-background-color) !important;
    }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::-moz-selection {
      background-color: var(--highlight-background-color--normal-with-alpha) !important;
    }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
    :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
      background-color: var(--highlight-background-color--normal-with-alpha) !important;
    }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) ::-moz-selection {
        background-color: var(--highlight-background-color--alternative) !important;
      }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) ::selection,
      :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) #selection-emulation * {
        background-color: var(--highlight-background-color--alternative) !important;
      }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::-moz-selection {
          color: var(--highlight-text-color) !important;
        }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
        :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
          color: var(--highlight-text-color) !important;
        }

.is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10)::-moz-selection, .is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::-moz-selection {
        background-color: transparent !important;
        color: inherit !important;
      }

.is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10)::selection,
      .is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::selection {
        background-color: transparent !important;
        color: inherit !important;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) p:not(figcaption p) {
      font-family: var(--reading-font-body);
      font-weight: 400;
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-primary);
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) p.rw-hide:not(figcaption p) {
        display: none;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) span {
      font-family: var(--reading-font-body);
      font-weight: 400;
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-primary);
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h1 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h1-font-size);
      line-height: var(--reading-h1-line-height);
      color: var(--reading-text-title);
      scroll-margin-top: 96px;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h2 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h2-font-size);
      line-height: var(--reading-h2-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h3 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h3-font-size);
      line-height: var(--reading-h3-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h4,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h5,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h6 {
      font-family: var(--reading-font-body);
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a {
      text-decoration-color: rgb(var(--reading-text-link) / 50%);
      color: rgb(var(--reading-text-link));
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a:has(+ .rw-highlight) {
      text-decoration: none !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a .rw-highlight {
      text-decoration-color: rgb(var(--reading-text-link-highlight) / 50%);
      color: var(--reading-text-primary-link-highlight) !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a .rw-highlight:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-decoration-color: rgb(var(--reading-text-link-highlight) / 100%);
      color: var(--reading-text-primary-link-highlight) !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) hr {
      border-color: var(--reading-border-secondary);
    }

/* -- Lists --*/

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ol {
      font-family: var(--reading-font-body);
      font-size: var(--reading-base-font-size);
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ol li {
        font-size: var(--reading-base-font-size);
        text-align: var(--reading-editable-text-justify);
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ul {
      font-family: var(--reading-font-body);
      font-size: var(--reading-base-font-size);
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ul li {
        font-size: var(--reading-base-font-size);
      }

/* Tables */

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) table {
      font-family: var(--reading-font-caption);
      font-size: var(--reading-table-font-size);
      text-align: var(--reading-editable-text-justify);
      line-height: var(--reading-table-line-height);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) thead {
      color: var(--reading-text-primary);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) tbody tr {
      border-bottom-color: var(--reading-border-secondary);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) tfoot {
      color: var(--reading-text-primary);
      border-top-color: var(--reading-border-secondary);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) table table {
      font-family: var(--reading-font-body);
      font-size: var(--reading-p-font-size);
    }

/* Figure and Img */

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) img:not(p img, li img, img.allow-image-styles, figcaption img) {
      display: block; /* Allows them to be highlighted independently. This is undone for nested images */
      max-width: 100% !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) svg:has(image) {
      max-width: 100% !important;
      height: auto;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) video {
      display: block;
      max-width: 100% !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure {
      font-size: var(--reading-caption-font-size);
      font-family: var(--reading-font-caption);
      text-align: var(--reading-editable-text-justify);
      color: var(--reading-text-secondary);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure figcaption {
      color: var(--reading-text-secondary);
      font-family: var(--reading-font-caption);
      font-size: var(--reading-caption-font-size);
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure figcaption img {
        display: inline;
        margin-top: 0;
        margin-bottom: 0;
      }

/* Code blocks */

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) code {
      color: var(--reading-text-code);
      font-size: .8em;
      font-family: var(--reading-font-monospace);
      word-wrap: break-word;
      -webkit-box-decoration-break: clone;
              box-decoration-break: clone;
      background-color: var(--reading-surface-tertiary);
      border-radius: .25rem;
      line-height: 1.1em;
      border: 1px solid var(--reading-border-secondary);
      padding: 0 .2rem;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a code {
      color: var(--reading-text-link);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p {
      color: var(--reading-text-primary-inverse);
      background-color: var(--reading-surface-primary-inverse);
      font-family: var(--reading-font-monospace);
      overflow-x: auto;
      font-size: calc(var(--reading-editable-font-size) * .8px);
      line-height: var(--reading-base-line-height);
      margin-top: calc(var(--reading-base-margin) * 2);
      margin-bottom: calc(var(--reading-base-margin) * 2);
      border-radius: .25rem;
      padding-top: var(--reading-base-margin);
      padding-right: var(--reading-base-margin);
      padding-bottom: var(--reading-base-margin);
      padding-left: var(--reading-base-margin);
      white-space: pre-wrap;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre span, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) code span {
      color: var(--reading-text-primary-inverse) !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p {
      background-color: transparent;
      font-family: var(--reading-font-monospace);
      border-width: 0;
      border-radius: 0;
      padding: 0;
      -webkit-overflow-scrolling: touch;
      font-weight: 400;
      font-size: calc(var(--reading-editable-font-size) * .8px);
      color: inherit;
      line-height: inherit;
      min-width: 100px;
      margin: 0;
    }

:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) a {
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.2);
        color: var(--blue-70);
      }

:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) a:hover {
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.5);
        color: var(--blue-80);
      }

:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) p {
        display: inline;
        /*
          We sometimes end up with <p>s instead of our code tags.
          Prevent them from breaking everything.
        */
      }

/* Blockquotes */

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) blockquote {
      font-size: var(--reading-p-font-size);
      color: var(--reading-text-blockquote);
      text-align: var(--reading-editable-text-justify);
    }

/* Tweet styles need to override */

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet {
      border: 1px solid var(--border-secondary);
      border-radius: 8px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      max-width: 550px;
      margin: var(--reading-base-margin) auto;
      font-style: initial;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet > span {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        line-height: 16px;

      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet > span > a {
          display: flex;
          color: var(--text-secondary);
          gap: 4px;
          line-height: 16px;
          text-decoration: none;
          margin-bottom: 8px;
          width: -moz-fit-content;
          width: fit-content;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header {
        display: flex;
        gap: 8px;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header img {
          aspect-ratio: 1 / 1;
          min-height: 48px;
          max-height: 48px!important;
          width: 48px;
          height: auto;
          margin: unset;
          border-radius: 9999px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header a {
          text-decoration: none;
          font-size: 16px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div {
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) {
          font-size: 14px;
          flex: 1;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:first-child {
            font-weight: 600;
            line-height: 18px;
            padding-top: 6px;
          }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:first-child a {
              color: var(--reading-text-primary);
            }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) {
            line-height: 18px;
            color: var(--text-secondary);
          }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) a {
              color: var(--text-secondary)
            }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header svg * {
            fill: var(--icon-tertiary);
          }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > :first-child {
          margin-top: 18px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > span:first-of-type {
          color: var(--text-secondary);
          font-weight: 400;
          font-size: 12px;
          display: block;
          margin-top: 8px;
          margin-bottom: -6px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > span:first-of-type a {
            color: var(--text-interactive);
            text-decoration: none;
          }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main p {
          line-height: var(--reading-editable-line-height);
          margin-top: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          margin-bottom: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          font-size: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          letter-spacing: -.01em;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main video {
          border-radius: 4px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer {
        margin-top: -4px;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer,
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer a,
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer span a {
          color: var(--text-secondary);
          font-weight: 400;
          font-size: 12px;
          line-height: 20px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer a {
          text-decoration: none;
          color: var(--text-secondary);
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed {
      border: 1px solid var(--border-secondary);
      border-radius: 8px;
      max-width: 550px;
      min-width: 90%;
      padding: 20px;
      width: -moz-fit-content;
      width: fit-content;
      margin: var(--reading-base-margin) auto;
      font-style: initial;

    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed img {
        float: left;
        width: 96px !important;
        height: 96px !important;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center;
        margin: 0 20px 0 0;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed * {
        font-size: 16px;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        /*margin: 10px;*/
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed div.rw-embed-title {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        font-size: var(--reading-base-font-size);
      }

@media (max-width: 768px) {

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed {
        display: block;

    }
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed img {
          float: none;
          display: block;
          margin: 0 auto 20px auto;
        }
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed:has(img) {
      min-height: 136px;
    }

/* end of ID wrapper */

/* PDF Specific Class code */

#readwise-reader-root .pageContainer {
    box-shadow: var(--shadow-100);
    position: relative;
  }

#readwise-reader-root .pageContainer canvas {
    }

#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight {
      position: absolute;
      opacity: 0.2;
      transition: opacity 0.3s ease !important;
      background: none !important;
      z-index: 100;
    }

#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight .rw-highlight-icon-wrapper {
        position: absolute;
        right: -22px;
        top: -10px;
      }

#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight:hover {
        opacity: 1;
      }

.document-content .twitter-thread-delimiter {
  width: 40px;
  border-top: 2px solid var(--border-secondary);
  margin: 20px 0px;
}

.rw-thread-heading {
  display: none;
}

.document-content .rw-outer-content {
  border: dashed 2px var(--border-secondary-alpha);
  border-radius: 8px;
  padding: 16px;
  font-size: var(--font-size-base);
  color: var(--reading-text-secondary);

}

.document-content .rw-outer-content a {
    text-decoration: none;
    color: var(--reading-text-primary);
    margin-left: 16px;
  }

.document-content .rw-digest-thread-wrapper {
  margin: 36px auto 32px;
  font-style: initial;
  max-width: 550px;
}

.document-content .rw-digest-thread-wrapper > h6 {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--ui-font) !important;
  }

.document-content .rw-digest-thread-wrapper > span:last-of-type {
    color: var(--text-tertiary);
    font-weight: 400;
    font-size: 12px;
    font-family: var(--ui-font) !important;
    display: block;
    margin-top: -8px;
  }

/* handle fonts here because adding the fonts to above rules makes the file names too long */

.document-content .rw-embedded-tweet {
  font-family: var(--ui-font) !important;
}

.document-content .rw-embedded-tweet > span {
    font-family: var(--ui-font) !important;
  }

.document-content .rw-embedded-tweet header img {
    }

.document-content .rw-embedded-tweet header a {
      font-family: var(--ui-font) !important;
    }

.document-content .rw-embedded-tweet header div {
      font-family: var(--ui-font) !important;
    }

.document-content .rw-embedded-tweet main > span:first-of-type {
      font-family: var(--ui-font) !important;
    }

.document-content .rw-embedded-tweet main p {
      font-family: var(--ui-font) !important;
    }

.document-content .rw-embedded-tweet footer a {
      font-family: var(--ui-font) !important;
    }

.document-content .rw-ai {
    background-color: #CBC3E3;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid #A39EBA;
  }

.document-content .rw-ai-highlighted {
    font-weight: bold;
  }

.document-content .rw-ai-explainer {
    background-color: #CBC3E3;
  }

/*
    Needed for DISCOVER_WISEREADS_DOC_URL post
    Ensures the "Discover new documents" button displays properly by:
    1. Setting correct image dimensions and positioning
    2. Showing/hiding images based on the current theme (light/dark)
  */

.document-content [data-rw-theme] [data-rw-button="discover-wisereads"] img {
      background: none !important;
      opacity: 1 !important;
      width: 207px !important;
      margin: 0 auto !important;
    }

.document-content [data-rw-theme="dark"] {
    display: none !important;
  }

.document-content [data-rw-theme="dark"] [data-rw-button="discover-wisereads"] img {
      display: none !important;
    }

.theme--dark .document-content [data-rw-theme="light"] {
      display: none !important;
    }

.theme--dark .document-content [data-rw-theme="light"] [data-rw-button="discover-wisereads"] img {
        display: none !important;
      }

.theme--dark .document-content [data-rw-theme="dark"] {
      display: block !important;
    }

.theme--dark .document-content [data-rw-theme="dark"] [data-rw-button="discover-wisereads"] img {
        display: block !important;
      }

.theme--dark .document-content .rw-ai,
    .theme--dark .document-content .rw-ai-explainer {
      color: var(--text-inverse);
    }

.document-content.is-youtube-video {
  padding-top: 135px;
}

/* https://linear.app/readwise/issue/RW-26751/bug-youtube-transcripts-sometimes-send-missing-spaces-to-readwise-10
The YouTube parser originally didn't add spaces to the end of each transcript, so we were using margin-right.
After fixing the parser, we removed the margin-right but we still need to add it for old videos. */

.document-content span[data-rw-start] {
  margin-right: .25rem;
}

.document-content span[data-rw-transcript-version] {
  margin-right: 0;
}

.document-content .rw-email-parsed {
  display: none;
}

/* Pagination */

.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
      margin-top: 0;
      padding-top: 0;
      display: block;
      -moz-column-break-before: column;
           break-before: column;
    }

.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
        text-decoration: none;
      }

.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:first-child {
        -moz-column-break-before: auto;
             break-before: auto;
      }

.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
        display: none;
      }

.document-content--original-email {
  background: white !important;
  color: initial;
  word-break: break-word;
  max-width: calc(100% - 2 * var(--content-gutter)) !important;
  margin: 0 auto;

  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

.document-content--original-email table, .document-content--original-email tr, .document-content--original-email tbody {
    width: 100% !important;
  }

.document-content--original-email table {
    border-collapse: collapse !important;
  }

.document-content--original-email img {
    background: initial;
    max-width: 100%;
  }

.document-content--original-email rw-highlight {
    color: initial !important;
  }

.document-content--original-email div, .document-content--original-email table, .document-content--original-email tr, .document-content--original-email td, .document-content--original-email tbody, .document-content--original-email a, .document-content--original-email hr, .document-content--original-email pre {
    /* The value below is width of header in px - how i calculate this:
      its .textContentWrapper width
      minus --content-gutter variable which takes padding in #document-header
      minus - 1rem which is a padding in textContentWrapper
      minus 10px * 2 of padding that we add to .document-content--original-email */
    max-width: calc(var(--reading-editable-line-length) - 1rem - 20px) !important;
  }

.document-content--original-email pre {
    display: block;
    overflow-x: scroll !important;
  }

.allow-annotation-bar-popover-overlay .annotation-bar-popover {
    z-index: 500 !important;
}
/*
  !important is added to all rules in this file when running in the extension.
*/

/*
  Pseudo-elements are not meant to react to pointer events but we found an issue in Firefox which was
  fixed by adding `pointer-events: none`, so let's make sure it's done for all.
*/

html {
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%) !important;
  --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%) !important;
  --highlight-background-color-underline: hsl(50deg 100% 50% / 100%) !important;
  --highlight-background-color--active: hsl(50deg 100% 50% / 20%) !important;

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%) !important;
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%) !important;
  --highlight-resize-handle-background-color: rgb(220, 185, 0) !important;
  --highlight-resize-handle-background-color--alternative: #767ccc !important;
  --js_highlight-normal: #fcf6bf !important; /* needs to be hex */
  --highlight-background-color--alternative: #CDCDFE !important; /* alternative colours always are opague to be safe */
  --highlight-background-color--alternative--active: #b1b7fe !important;
  /*
    NOTE: we overwrite the following variable in the extension with JS depending on the site's colors
  */
  --highlight-text-color: #000 !important;
  --highlight-icon-color:  rgba(0, 0, 0, 0.60) !important;
}

.theme--dark {
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%) !important;
  --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%) !important;
  --highlight-background-color-underline: hsl(50deg 100% 50% / 80%) !important;
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%) !important;

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%) !important;
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%) !important;

  --highlight-text-color: var(--white) !important;
  --highlight-icon-color: rgba(255, 255, 255, 0.60) !important;
}

/* Unset the default text fragment highlighting */

::target-text {
  color: unset !important;
  background: unset !important;
}

readwise-tooltip-container {
  position: fixed !important;
  inset: auto !important;
  z-index: 2147483647 !important;
  isolation: isolate !important;
}

/*
  <rw-highlight/>s are text highlights. They also have `.rw-highlight` added.
  .rw-image-highlight is added to image highlights. They do not have `.rw-highlight`.
  .rw-highlight--* classes are added to both.
*/

rw-highlight,
.rw-image-highlight,
.rw-pseudo-highlight {
  cursor: pointer !important;
  visibility: visible !important;
}

:is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight)::before,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight)::after,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight) ::before,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight) ::after {
    pointer-events: none !important;
  }

:is(.isDev rw-highlight,.isDev .rw-image-highlight):not([data-highlight-id]) {
      outline: 1px solid red !important;
    }

rw-highlight,
.rw-pseudo-highlight {
  background-image: linear-gradient(
     0deg,
     var(--highlight-background-color-underline) 0%,
     var(--highlight-background-color-underline) 2px,
     var(--highlight-background-color--normal) 2px,
     var(--highlight-background-color--normal) 100%
   ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 90% !important;
  background-position: 0 75% !important;
  color: var(--highlight-text-color) !important;
}

a rw-highlight, .rw-pseudo-highlight a {
  text-decoration: underline !important;
}

.rw-image-highlight {
  border-radius: 2px !important;
  outline: 12px solid var(--highlight-background-color--normal) !important;
}

rw-highlight.rw-highlight--active {
  background-image: linear-gradient(
     0deg,
     var(--highlight-background-color-underline) 0%,
     var(--highlight-background-color-underline) 2px,
     var(--highlight-background-color--active) 2px,
     var(--highlight-background-color--active) 100%
   ) !important;
}

.rw-image-highlight.rw-image-highlight--active {
  outline-color: var(--highlight-background-color--active) !important;
}

rw-highlight.rw-highlight--alternative-color {
  background: var(--highlight-background-color--alternative) !important;
}

.rw-image-highlight.rw-highlight--alternative-color {
  outline-color: var(--highlight-background-color--alternative) !important;
}

rw-highlight.rw-highlight--alternative-color.rw-highlight--active {
  background: var(--highlight-background-color--alternative--active) !important;
}

.rw-image-highlight.rw-highlight--alternative-color.rw-image-highlight--active {
  outline-color: var(--highlight-background-color--alternative--active) !important;
}

rw-highlight.rw-highlight--alternative-color .rw-highlight-icon-wrapper svg path {
  fill: var(--highlight-text-color) !important;
}

rw-highlight .rw-highlight-icon-wrapper {
  display: none !important;
}

rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
  display: inline-block !important;
}

rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
#document-text-content  rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
  padding-right: 0.2em !important;
  text-indent: initial !important; /* block epub styles from adding indents to highlight elements */
}

rw-highlight .rw-highlight-icon-wrapper svg {
  position: relative !important;
  top: 1px !important;
  display: none !important;
}

rw-highlight .rw-highlight-icon-wrapper svg,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight .rw-highlight-icon-wrapper svg {
  margin-left: 0.4em !important;
}

:is(rw-highlight .rw-highlight-icon-wrapper svg,#document-text-content rw-highlight .rw-highlight-icon-wrapper svg):first-child {
    margin-left: 0.2em !important;
  }

rw-highlight .rw-highlight-icon-wrapper svg path {
  fill: var(--highlight-icon-color) !important;
}

rw-highlight.rw-highlight--has-note .rw-highlight-note-icon {
  display: inline !important;
  width: 16px !important;
}

rw-highlight.rw-highlight--has-tag .rw-highlight-tag-icon {
  display: inline !important;
  width: 16px !important;
}

.rw-highlight,
.rw-image-highlight {
  -webkit-tap-highlight-color: transparent !important;
}

/* Effectively hide the highlight / make it like it was before it was highlighted */

.rw-highlight:where([data-resize-status]):not([data-resize-status="inactive"]),
    .rw-image-highlight:where([data-resize-status]):not([data-resize-status="inactive"]),
    .rw-highlight:where([data-resize-status]):not([data-resize-status="inactive"]):hover,
    .rw-image-highlight:where([data-resize-status]):not([data-resize-status="inactive"]):hover {
      background: inherit !important;
      border: inherit !important;
      color: inherit !important;
      cursor: inherit !important;
      outline: inherit !important;
    }

.rw-highlight[data-resize-status="actively-resizing"] .rw-highlight-icon-wrapper, .rw-image-highlight[data-resize-status="actively-resizing"] .rw-highlight-icon-wrapper, .rw-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-icon-wrapper, .rw-image-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-icon-wrapper {
      display: none !important;
    }

.rw-highlight-resize-handle {
  opacity: 0 !important; /* Hidden by default */
  pointer-events: none !important; /* Make sure you can't tap them when they're meant to be hidden */

  position: relative !important;
  cursor: col-resize !important;
}

.rw-highlight-resize-handle,
  .rw-highlight-resize-handle span {
    /* https://linear.app/readwise/issue/RW-38790/when-highlighting-text-with-some-super-script-the-text-moves */
    line-height: 1 !important;
    font-size: inherit !important;
  }

/*
    This is the tap target.
    The pseudo-elements are what you see visually; `::before` is the bar/body, `::after` is the head.
    The head is styled with the end handle in mind, and later in the code the start handle's head is
    flipped upside-down.
  */

.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper {
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: -8px !important;
    bottom: -15px !important;

    opacity: 0.6 !important;
  }

.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper,
    .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before {
      border-radius: 10px !important;
      transition: all 0.1s !important;
    }

.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before,
    .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      content: ' ' !important;
      position: absolute !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      background-color: var(--highlight-resize-handle-background-color) !important;
    }

.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before {
      top: 8px !important;
      bottom: 12px !important;
      width: 4px !important;
    }

.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      border-radius: 10px !important;
      height: 12px !important;
      width: 12px !important;
      bottom: 7px !important;
    }

.rw-highlight--alternative-color .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before,
    .rw-highlight--alternative-color .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      background-color: var(--highlight-resize-handle-background-color--alternative) !important;
    }

.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper {
      opacity: 0.8 !important;
    }

.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper::before {
        bottom: 6px !important;
        width: 5px !important;
      }

.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper::after {
        bottom: 5px !important;
        height: 14px !important;
        width: 14px !important;
      }

.rw-highlight[data-resize-status="actively-resizing"] .rw-highlight-resize-handle,
  .rw-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-resize-handle {
    opacity: 0 !important;
  }

.rw-highlight-resize-handle:hover,
  .rw-highlight--active .rw-highlight-resize-handle,
  .rw-highlight--hover .rw-highlight-resize-handle {
    pointer-events: auto !important;
    opacity: 1 !important;

    /*
      Cases where the handles are momentarily hidden.
      E.g. during a resize, we hide all other highlights' handles so that they don't get shown if we drag
      the cursor over those other highlights and their hover styles are applied.
    */
  }

.document-content[data-rw-highlight-resize-status="actively-resizing"] .rw-highlight-resize-handle:hover, .document-content[data-rw-highlight-resize-status="actively-resizing"] :is(.rw-highlight--active .rw-highlight-resize-handle), .document-content[data-rw-highlight-resize-status="actively-resizing"] :is(.rw-highlight--hover .rw-highlight-resize-handle) {
      opacity: 0 !important;
    }

/* Why this list of selectors? Basically we want this always and we're being extra safe */

/*
      Otherwise the (transparent) handle can get in the way when getting the cursor point and drawing the
      selection
    */

.document-content.is-emulating-selection:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) :is(.rw-highlight-resize-handle,.rw-highlight-resize-handle:hover,.rw-highlight--active .rw-highlight-resize-handle,.rw-highlight--hover .rw-highlight-resize-handle) {
      pointer-events: none !important;
      -webkit-user-select: none !important;
              user-select: none !important;
    }

/*
    Cases where the handles are permanently hidden. JS needs to also cover these cases.
  */

.app--document-share-app .rw-highlight-resize-handle,
  .rw-app--extension .rw-highlight-resize-handle {
    display: none !important;
  }

.document-content[data-rw-highlight-resize-status="native-selection-made-but-user-hasnt-started-resizing-yet"],
  .document-content[data-rw-highlight-resize-status="actively-resizing"],
  .document-content[data-rw-highlight-resize-status="native-selection-made-but-user-hasnt-started-resizing-yet"] *,
  .document-content[data-rw-highlight-resize-status="actively-resizing"] * {
    /* !important is required because we need to change the cursor for everything */
    cursor: col-resize !important;
  }

.rw-highlight-resize-handle--start .rw-highlight-resize-handle__inner-wrapper {
  transform: rotate(180deg) !important;
  top: -15px !important;
  bottom: -8px !important;
}

.rw-mobile-web-view img.rw-image-highlight {
  outline: 0px !important;
  box-shadow: 0px 0px 0px 4px rgba(255, 213, 0, 0.2) !important;
}

.rw-mobile-web-view img.rw-image-highlight.rw-image-highlight--active {
  outline: 0px !important;
  box-shadow: 0px 0px 0px 6px rgba(255, 213, 0, 0.5) !important;
}

:is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
    :is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
      background-color: var(--highlight-background-color--normal-with-alpha) !important;
    }

:is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) ::selection,
      :is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) #selection-emulation * {
        background-color: var(--highlight-background-color--alternative) !important;
      }
._paletteWrapper_29opr_2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 9999;
  background-color: var(--background-backdrop);
}

._palette_29opr_2 {
  border-radius: .5rem;
  background: var(--cmd-palette-background);
  transition: background-color var(--theme-transition-time) ease-in-out;
  box-shadow: var(--cmd-palette-drop-shadow);
  max-height: 100%;
  overflow: hidden;
  position: relative;
  width: 680px;
  top: calc(34% - 200px);
  scrollbar-color: var(--cmd-palette-scrollbar) transparent;
}

._palette_29opr_2 ::-webkit-scrollbar-thumb {
    border-radius: .625rem;
    background-color: var(--cmd-palette-scrollbar);
  }

._paletteActionRow_29opr_33 {
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  border-radius: 0 .25rem .25rem 0;
  border-left: .125rem solid var(--cmd-palette-cmd-container);
  align-items: center;
  font-size: .875rem;
  line-height: 1.25rem;
  padding-left: .75rem;
}

._paletteActionRow_29opr_33 > span {
    padding: .75rem 1rem;
    padding-left: 0;
  }

._paletteActionRow_29opr_33._focused_29opr_51 {
    background-color: var(--cmd-palette-row-hover);
    border-left: .125rem solid var(--icon-interactive);
    padding-left: .625rem;
  }

._paletteActionRow_29opr_33._focused_29opr_51 > span:first-child {
      padding-left: .125rem;
    }

._paletteActionRow_29opr_33._notClickable_29opr_61 {
    cursor: default;
  }

._paletteActionRow_29opr_33 ._actionKey_29opr_65 {
    background-color: var(--cmd-palette-key-background);
    display: flex;
    font-size: var(--font-size-sm);
    align-items: center;
    border-radius: .25rem;
    min-width: 1.25rem;
    padding: .125rem 0.3125rem;
    margin-right: 0.5rem;
    justify-content: center;
  }

._paletteActionRow_29opr_33 ._actionIcon_29opr_77 {
    display: flex;
    font-size: var(--font-size-sm);
    align-items: center;
    min-width: 1.25rem;
    padding: .125rem 0.3125rem;
    margin-right: 0.5rem;
    justify-content: center;
  }

._commandsContainer_29opr_88 {
  overflow-y: auto;
  max-height: 300px;
  position: relative;
  background: var(--cmd-palette-cmd-container);
  padding: 1rem;
  padding-left: .75rem;
  padding-right: .75rem;
  border-radius: 0 0 .5rem .5rem;
}

._commandsContainer_29opr_88._withTitle_29opr_98 {
    padding-top: 0;
  }

._inputContainer_29opr_103 {
  padding: 0.8125rem 1.5rem;
  background: var(--background-elevated);
  display: flex;
  justify-content: center;
  align-items: center;
}

._inputContainer_29opr_103 ._paletteInput_29opr_110 {
    font-size: 1rem;
    color: var(--text);
    background: transparent;
    border: 0;
    width: 100%;
    height: 1.875rem;
    font-family: inherit;
  }

._inputContainer_29opr_103 ._paletteInput_29opr_110:focus {
      outline: none;
    }

._inputContainer_29opr_103 ._paletteInput_29opr_110::placeholder {
      color: var(--text-placeholder);
    }

._inputContainer_29opr_103 ._paletteInputTextArea_29opr_127 {
    font-size: var(--f6);
    min-height: 200px;
  }

._inputContainer_29opr_103 ._paletteInputTextAreaWithRecordButton_29opr_132 {
    margin-top: 30px;
  }

._inputContainer_29opr_103 ._clearWrapper_29opr_136 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-right: .75rem;
  }

._inputContainer_29opr_103 ._clearWrapper_29opr_136 ._clearInput_29opr_143 {
      cursor: pointer;
      font-size: .875rem;
      color: var(--text-secondary);
      position: relative;
      bottom: 1px;
      padding-right: .75rem;
      border-right: 1px solid var(--border-primary);
    }

._inputContainer_29opr_103 ._closeIcon_29opr_154 {
    cursor: pointer;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    color: var(--icon-secondary);
  }

._title_29opr_164 {
  color: var(--text);
  font-size: var(--f5);
  padding-left: var(--s3);
  font-weight: var(--font-weight-lighter);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--grey-dark);
}

._customComponentContainer_29opr_173 {
  padding: var(--s1) 1.5rem;
  margin-bottom: var(--s1);
  margin-top: var(--s1);
}

._customComponentContainer_29opr_173 .tagItem { /* adds spacing between tags */
    margin-right: .25rem;
  }

._shortcutsPalette_29opr_182 {
  width: 400px;
  max-height: 80%;
  overflow-y: scroll;
  top: 8%;
}

._shortcutsPalette_29opr_182 ._commandsContainer_29opr_88 {
    max-height: 100%;
  }

._contextContainer_29opr_193 {
  display: flex;
  align-items: center;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

._contextItem_29opr_201 {
  padding: .25rem .75rem;
  color: var(--text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  background: var(--cmd-palette-context-item-background);
  border: 1px solid var(--cmd-palette-context-item-border);
  border-radius: 4.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  margin-right: .5rem;
}

._sectionTitle_29opr_216 {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  padding: 8px 1.525rem;
  background: var(--cmd-palette-section-title);
  z-index: 1;
  position: inherit;
  box-shadow: var(--shadow-100);
}

._paletteLabel_29opr_228 {
  color: var(--text-secondary);
  margin-bottom: .5rem;
  margin-top: .75rem;
  font-weight: 400;
  font-size: 0.75rem;
  padding-left: .75rem;
}

._truncatePaletteItem_29opr_237 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

._recordButton_29opr_243 {
  position: absolute;
  top: 8px;
  right: 8px;
}
._checkbox_d6f52_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border-primary);
  background: transparent;
  transition: background 80ms ease-in, border 80ms ease-in;
  cursor: pointer;
}

._checkbox_d6f52_1:focus {
    outline: none;
  }

._checkboxChecked_d6f52_18 {
  border: 1px solid var(--background-interactive);
  background: var(--background-interactive);
}

._checkboxChecked_d6f52_18 span {
    display: flex;
    justify-content: center;
    align-items: center;
  }

._checkboxChecked_d6f52_18 svg {
    width: 16px;
    height: 16px;
    position: relative;
  }

._checkboxChecked_d6f52_18 svg._isMinusIcon_d6f52_33 {
      width: 10px;
      height: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 0;
    }

._checkboxChecked_d6f52_18 svg * {
      fill: var(--checkbox-icon-color);
    }

._checkboxContainer_d6f52_48 {
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
._checkboxContainer_d6f52_48 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
._checkmark_d6f52_70 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border-primary);
  background: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
._checkmark_d6f52_70 svg {
  display: none;
}

/* When the checkbox is checked, add a blue background */
._checkboxContainer_d6f52_48 input:checked ~ ._checkmark_d6f52_70 {
  border: 1px solid var(--background-interactive);
  background: var(--background-interactive);
}
._checkboxContainer_d6f52_48 input:checked ~ ._checkmark_d6f52_70 svg {
    display: flex;
    position: relative;
    left: -1px;
    top: -1px;
  }
._checkboxContainer_d6f52_48 input:checked ~ ._checkmark_d6f52_70 svg * {
      fill: var(--checkbox-icon-color);
    }
.button._actionButton_jtidl_1 {
  background: none;
  outline: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  transition: background 150ms ease-in, box-shadow 150ms ease;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  padding: 0;
}

._actionButton_jtidl_1.button svg {
    height: 20px;
    min-height: 20px;
    width: 20px;
    min-width: 20px;
    color: var(--icon-secondary);
    fill: var(--icon-secondary);
  }

._actionButton_jtidl_1._isActive_jtidl_25.button:not(._isDisabled_jtidl_25) svg,
    ._actionButton_jtidl_1._isActive_jtidl_25.button:not(._isDisabled_jtidl_25) svg * {
      color: var(--icon-primary);
      fill: var(--icon-primary);
    }

._actionButton_jtidl_1._isDisabled_jtidl_25.button {
    cursor: default;
  }

._actionButton_jtidl_1._isDisabled_jtidl_25.button svg,
    ._actionButton_jtidl_1._isDisabled_jtidl_25.button svg * {
      color: var(--icon-disabled);
      fill: var(--icon-disabled);
    }

._actionButton_jtidl_1.button:hover:not(._isDisabled_jtidl_25) {
    background: var(--u-alpha-200);
  }

._actionButton_jtidl_1.button:hover:not(._isDisabled_jtidl_25) svg,
    ._actionButton_jtidl_1.button:hover:not(._isDisabled_jtidl_25) svg * {
      color: var(--icon-primary);
      fill: var(--icon-primary);
    }

._documentLocationActionButton_jtidl_52 {
  border-radius: 0;
}

._documentLocationActionButton_jtidl_52:first-child {
    border-radius: var(--action-button-border-radius) 0 0 var(--action-button-border-radius);
    padding-left: var(--spacer-2);
  }

._documentLocationActionButton_jtidl_52:last-child {
    border-radius: 0 var(--action-button-border-radius) var(--action-button-border-radius) 0;
    padding-right: var(--spacer-2);
  }

._pdfActionButtonsContainer_jtidl_66 {
  display: flex;
  position: fixed;
  top: 0.875rem;
  padding: 0.3em 0;
  left: 0;
  right: 0;
  margin: auto;
  width: max-content;
  flex-direction: column;
  opacity: 0.2;
  transition: opacity 0.2s ease-in-out;
  z-index: 100;
}

._pdfActionButtonsContainer_jtidl_66:hover {
    opacity: 1;
  }


._pdfActionButtons_jtidl_66 {
  background: var(--default-blurred-button-background);
  -webkit-backdrop-filter: blur(var(--default-blurred-button));
          backdrop-filter: blur(var(--default-blurred-button));
  border-radius: 31px;
  justify-content: center;
  display: flex;
  align-items: center;
}


._pdfActionButtons_jtidl_66 svg {
    fill: var(--icon-secondary);
  }


._pdfActionButtons_jtidl_66 ._actionButton_jtidl_1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }
.tippy-content:has(._shortcut_1yawj_1) {
  padding-right: 5px;
}

.tippy-content:has(._onlyShortcut_1yawj_5) {
  padding: 0;
}

.tippy-content:has(._onlyShortcut_1yawj_5) ._shortcut_1yawj_1 {
    margin-left: 0;
    border-radius: 4px;
    background: var(--background-inverse);
  }

._tooltip_1yawj_15 {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: var(--ui-font);
  white-space: nowrap;
}

._tooltip_1yawj_15 svg{
    opacity: .5;
    scale: .8333;
    margin: 0 -2px;
  }

._shortcut_1yawj_1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  background: var(--tooltip-shortcut-background);
  color: var(--tooltip-shortcut-color);
  border-radius: 2px;
  padding: 2px 5px;
  margin-left: 8px;
}

._shortcut_1yawj_1 svg {
    margin-right: 6px;
  }
._triggerButton_1j6f0_1 {
  background-color: var(--background-elevated);
  padding: 0;
  border: 0;
  border-radius: 100%;
  box-shadow: var(--shadow-100);
  outline: none;
}

._triggerButton_1j6f0_1 svg * {
    fill: var(--icon-secondary);
  }

._scrollableOptions_1j6f0_14 {
  max-height: 300px;
  overflow-y: auto;
  /* avoid separator margin */
  margin-top: -4px;
  margin-bottom: -4px;
}

._scrollableOptions_1j6f0_14 ._item_1j6f0_21:first-child {
    border-radius: 0;
  }

._scrollableOptions_1j6f0_14 ._item_1j6f0_21:last-child {
    border-radius: 0;
  }

._isActive_1j6f0_30 {
  background: var(--u-alpha-200);
}

._isActive_1j6f0_30 svg * {
    fill: var(--icon-primary);
  }

._content_1j6f0_38 {
  border-radius: 8px;
  background-color: var(--background-elevated);
  box-shadow: var(--shadow-200);
  min-width: 278px;
  padding: 4px 0;
  z-index: 3;
  max-height: 80vh;
  overflow-y: auto;
}

._enablePointerEvents_1j6f0_49 {
  pointer-events: auto !important;
}

._item_1j6f0_21 {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 3px 16px;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  outline: none;
  transition: background 80ms ease-in;
  cursor: pointer;
}

._item_1j6f0_21 label {
    cursor: pointer;
  }

._item_1j6f0_21._isDisabled_1j6f0_68 {
    cursor: default;
    pointer-events: none;
  }

._item_1j6f0_21._isDisabled_1j6f0_68 ._shortcut_1j6f0_72 {
      color: var(--text-disabled);
    }

._item_1j6f0_21._isCreate_1j6f0_77 {
    color: var(--text-interactive);
    font-weight: 500;
  }

._item_1j6f0_21._isCreate_1j6f0_77 svg {
      margin-right: 8px;
      fill: var(--icon-interactive);
    }

._item_1j6f0_21 ._isDanger_1j6f0_87 {
    color: var(--text-error);
  }

._item_1j6f0_21 ._isDisabled_1j6f0_68 {
    color: var(--text-disabled);
  }

._item_1j6f0_21 ._isDisabled_1j6f0_68 svg * {
      fill: var(--text-disabled);
    }

._item_1j6f0_21 ._ghostreaderPrompt_1j6f0_99 {
    margin-left: auto;
    padding-left: 20px;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
  }

._item_1j6f0_21 ._optionContent_1j6f0_106 {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: row;
  }

._item_1j6f0_21 ._optionContent_1j6f0_106 small {
      display: inline-block;
      padding: var(--spacer-1) 0;
    }

._item_1j6f0_21 ._optionContent_1j6f0_106 svg {
      margin-right: 8px;
    }

._item_1j6f0_21 ._optionContent_1j6f0_106 svg * {
        color: var(--icon-secondary) !important;
      }

._item_1j6f0_21:hover,
  ._item_1j6f0_21:focus-visible {
    background: var(--u-alpha-100);
  }

._item_1j6f0_21:first-child {
    border-radius: 8px 8px 0 0;
  }

._item_1j6f0_21:last-child {
    border-radius: 0 0 8px 8px;
  }

._item_1j6f0_21 ._checkbox_1j6f0_139 {
    margin-right: 10px;
  }

._checkIcon_1j6f0_144 {
  margin-right: 4px;
  margin-left: -20px;
}

._checkIcon_1j6f0_144 * {
    fill: var(--icon-primary);
  }

._title_1j6f0_153 {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 12px;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

._separator_1j6f0_163 {
  height: 1px;
  margin: 4px 0;
  background-color: var(--u-alpha-400);
}

._contentWithChecks_1j6f0_169 ._item_1j6f0_21,
._contentWithChecks_1j6f0_169 ._title_1j6f0_153 {
  padding: 0 26px;
}

._editTagsPopover_1j6f0_174 {
  /* To match the dropdown width: */
  max-width: 278px !important;
  width: 278px !important;
}

._triggerElement_1j6f0_180 {
  background: var(--btn-secondary) !important;
}

._triggerElement_1j6f0_180 svg * {
    fill: var(--icon-secondary) !important;
  }

._dropdownContent_1j6f0_188 {
  width: 410px;
}

._itemDescription_1j6f0_192 {
  height: 48px !important;
  font-size: 14px !important;
}

._itemDescription_1j6f0_192 ._optionContent_1j6f0_106 {
    flex-direction: column;
    align-items: start;
  }

._itemDescription_1j6f0_192._isDisabled_1j6f0_68 ._optionContent_1j6f0_106 {
      color: var(--text-disabled);
    }

._itemDescription_1j6f0_192._isDisabled_1j6f0_68 ._optionContent_1j6f0_106 small {
        color: var(--text-disabled);
      }

._itemDescription_1j6f0_192 ._checkIcon_1j6f0_144 {
    margin-top: -17px;
  }

._itemDescription_1j6f0_192 ._optionContent_1j6f0_106 {
    color: var(--text-primary);
  }

._itemDescription_1j6f0_192 ._optionContent_1j6f0_106 small {
      color: var(--text-secondary);
    }

  ._button_1076y_1,
  ._button_1076y_1 button,
  ._button_1076y_1 .contentWrapper {
    height: 24px;
    width: 24px;
  }

._content_1076y_4 {
  max-width: 230px;
}

._deleteOption_1076y_14 {
  color: var(--text-error);
}

._savedAtOption_1076y_18 {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 16px;
  cursor: default;
}

._savedAtOption_1076y_18:hover,
  ._savedAtOption_1076y_18[data-highlighted] {
    background: none;
  }
/* Needs some extra specifivity */
._root_quz1d_2[class] {
  color: var(--icon-secondary);
  border-radius: 28px;
}

._actions_quz1d_7 {
  display: flex;
}

._action_quz1d_7 {
  margin: 2px;
}

._actionButton_quz1d_15 {
  display: flex;
  align-content: center;
  padding: 6px;
  border-radius: 28px;
  color: inherit;
  outline: none;
}

._actionButton_quz1d_15:focus:not(:active) {
    outline: none;
    /* The outline was square in Safari */
    box-shadow: 0 0 0 1px var(--border-focus);
  }

/* Duplicated because this selector breaks in Safari so it doesn't run */

._actionButton_quz1d_15:focus-visible:not(:active) {
    outline: none;
    /* The outline was square in Safari */
    box-shadow: 0 0 0 1px var(--border-focus);
  }

._actionButton_quz1d_15:hover {
    background: var(--main-highlighter-popover-action-hover-background);
  }

._actionIcon_quz1d_41 {
  height: 20px;
}

._actionIcon_quz1d_41 path {
    fill: currentColor;
  }

._deleteHighlightAction_quz1d_49 ._actionButton_quz1d_15 {
    color: var(--main-highlighter-popover-delete-highlight-icon-color);
    background: var(--main-highlighter-popover-delete-highlight-action-background);
  }

._deleteHighlightAction_quz1d_49 ._actionButton_quz1d_15:hover {
      opacity: 0.9;
    }

._actionsHasNote_quz1d_60 ._noteAction_quz1d_60,
._actionsHasTag_quz1d_61 ._tagAction_quz1d_61 {
  position: relative;
}

._actionsHasNote_quz1d_60 ._noteAction_quz1d_60::after, ._actionsHasTag_quz1d_61 ._tagAction_quz1d_61::after {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translate(-50%, 0);
    content: '∙';
    font-size: 30px;
    line-height: 0;
    pointer-events: none;
  }

._subPopover_quz1d_76 {
  border-radius: 8px;
  font-family: var(--ui-font);
  padding: 4px 0;
}


._subPopoverListItem_quz1d_83:not(._subPopoverListItemDisabled_quz1d_83):hover {
  background: var(--highlighter-sub-popover-list-item-focused-background);
}

._subPopoverListItem_quz1d_83 + ._subPopoverAutoHighlightListItem_quz1d_87 {
  border-top: 1px solid var(--border-secondary-alpha);
  margin-top: 4px;
}

._subPopoverButton_quz1d_92 {
  gap: 8px;
  padding: 6px 16px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  border-left: 1px solid transparent;
}

._subPopoverButton_quz1d_92:focus-visible {
    outline: none;
    border-color: var(--focus-indicator-color);
  }

._subPopoverButtonPreContent_quz1d_107 {
  display: none;
}

._rootAutoHighlightingEnabled_quz1d_111:not(._rootAutoHighlightingAlwaysEnabled_quz1d_111) ._subPopoverButtonPreContent_quz1d_107 {
  display: block;
  width: 14px;
}

._subPopoverAutoHighlightListItemEnabled_quz1d_116 ._subPopoverButtonPreContent_quz1d_107 {
  color: red;
}

._subPopoverButtonPrimaryContent_quz1d_120 {
  flex: 1;
  text-align: left;
  font-size: 14px;
  font-weight: var(--font-weight-normal);
  line-height: 20px;
  display: flex;
  flex-direction: column;
  width: 168px;
}

._subPopoverButtonPrimaryContentDescription_quz1d_131 {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: initial;
}

._subPopoverKeyboardShortcut_quz1d_138 {
  color: var(--text-tertiary);
  text-align: right;
  font-size: var(--font-size-sm);
  display: inline-block;
  width: 48px;
}

._subPopoverListItemDisabled_quz1d_83 ._subPopoverKeyboardShortcut_quz1d_138 {
  color: var(--text-disabled);
}

._shortcut_quz1d_150 {
  color: var(--text);
  background: var(--u-alpha-200);
  padding: 0 3px;
}

._checkmarkIcon_quz1d_156 {
  color: var(--icon-interactive);
}
._root_6jnjf_1 {
  box-shadow: var(--shadow-200);
  background: var(--popover-background);
  color: var(--text-primary);
  border-radius: 8px;
  max-width: var(--popover-max-width);
  overflow: hidden;
  z-index: var(--popover-z-index);
}

._root_6jnjf_1:is(.is-youtube-video ~ *) {
    z-index: 0 !important;
  }

._root_6jnjf_1:focus-within {
  z-index: var(--popover-focused-z-index);
}

._rootWithOverflowAllowed_6jnjf_19 {
  overflow: visible;
}

._rootHidden_6jnjf_23 {
  display: none;
}
._root_w4rn6_1 {
  border-radius: 8px;
  overflow: hidden;

  transition: 0.1s box-shadow;
}

._fieldWrapper_w4rn6_8,
._field_w4rn6_8 {
  background: none;
  min-height: 60px;
  max-width: 248px;
}

._buttonsContainer_w4rn6_15 {
  padding: 8px;

  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  border-top: 1px solid var(--border-tertiary);
  max-height: 48px;

  transition: 0.1s max-height, 0.1s padding-bottom, 0.1s padding-top;
}

._buttonsContainer_w4rn6_15 button:first-of-type {
    background: none;
  }

._buttonsContainer_w4rn6_15 button:focus-visible {
    outline-offset: -1px;
  }

._buttonsContainer_w4rn6_15 button + button {
    margin-left: 4px;
  }

._root_w4rn6_1._rootShownInMargin_w4rn6_39 {
  border: none;
  box-shadow: none;
  width: auto;
}

._root_w4rn6_1._rootShownInMargin_w4rn6_39:not(._rootInReadOnlyMode_w4rn6_44) {
    background: var(--popover-background);
    box-shadow: -0.0687094px 1.99882px 10px rgba(25, 26, 28, 0.1), -0.0264658px 0.769916px 3.18519px rgba(25, 26, 28, 0.0607407), -0.00559855px 0.162867px 0.814815px rgba(25, 26, 28, 0.0392593);
  }

._rootShownInMargin_w4rn6_39._rootWhenFollowingFormIsActive_w4rn6_52:not(._rootInReadOnlyMode_w4rn6_44) {
      margin-bottom: 4px;
      opacity: 0.5;
    }

._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 {
    border: none;
    box-shadow: none;
  }

._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._buttonsContainer_w4rn6_15 {
      padding: 0;
      max-height: 0;
      opacity: 0;
    }

._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._fieldWrapper_w4rn6_8,
    ._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._field_w4rn6_8 {
      min-height: 0;
      width: auto;
    }

._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._fieldWrapper_w4rn6_8::after,
    ._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._field_w4rn6_8 {
      padding-bottom: 0;
    }

._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._field_w4rn6_8 {
      color: var(--text-primary);
    }
._wrapper_vhvsl_1 {
  /*
    `.grow-wrap`, etc. taken from
    https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ and modified
  */
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
  
  width: 305px;
  max-width: 100%;
}
._wrapper_vhvsl_1::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
  }
._wrapper_vhvsl_1 > textarea {
    border: 0;
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
  }
._wrapper_vhvsl_1 > textarea:focus {
      /* TODO */
      outline: 0;
    }
._wrapper_vhvsl_1 > textarea::placeholder {
      color: var(--text-placeholder);
    }
._wrapper_vhvsl_1 > textarea,
  ._wrapper_vhvsl_1::after {
    /* Identical styling required!! */
    font: inherit;
    font-family: var(--ui-font);
    overflow-y: scroll;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
  }._selectRoot_q3h11_1 {
  font-family: var(--ui-font);
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

._selectRoot_q3h11_1 > span {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

._selectRoot_q3h11_1 .select__control {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-secondary-alpha);
    border-radius: 0;
    box-shadow: none;
  }

._selectRoot_q3h11_1 .select__control:focus {
      border: 0;
      border-bottom: 1px solid var(--border-secondary-alpha);
      box-shadow: none;
    }

._selectRoot_q3h11_1 .select__control:hover,
    ._selectRoot_q3h11_1 .select__control.select__control--is-focused:hover {
      border-color: var(--border-secondary-alpha);
      box-shadow: none;
    }

._selectRoot_q3h11_1 .select__input::placeholder,
  ._selectRoot_q3h11_1 .select__placeholder {
    font-size: 14px;
    font-family: inherit;
    color: var(--text-placeholder);
  }

._selectRoot_q3h11_1 .select__placeholder {
    grid-area: 1 / 1 / 2 / 3;
  }

._selectRoot_q3h11_1 .select__value-container {
    display: grid;
    padding: 12px;
    font-size: 14px;
  }

._selectRoot_q3h11_1 .select__input-container {
    flex: 1;
    display: flex;
    color: var(--text-primary);
    cursor: text;
    grid-area: 1 / 1 / 2 / 3;
    font-size: 14px;
  }

._selectRoot_q3h11_1 .select__value-container--has-value {
    display: flex;
    flex: 1 1 0%;
    flex-wrap: wrap;
    padding: 8px 12px;
  }

._selectRoot_q3h11_1 .select__input {
    font-size: 14px;
  }

._selectRoot_q3h11_1 .select__menu {
    background: var(--popover-background);
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 4px 0;
    position: static;
  }

._selectRoot_q3h11_1 .select__menu-list {
    max-height: 400px;
    overflow-y: scroll;
  }

._selectedTag_q3h11_89 {
  margin: 4px 6px 4px 0;
}

._option_q3h11_93 {
  cursor: pointer;
  font-size: 12px;
}

._optionInner_q3h11_98 {
  padding: 4px 12px;
}

._optionInner_q3h11_98 * {
    cursor: pointer;
  }

._optionFocused_q3h11_106 ._optionInner_q3h11_98 {
    background: var(--edit-tags-form-focused-option-background);
  }

/* 
  This is an option like any other in the list but we want to make it look
  like it's in a separate section below the list
*/
._optionNew_q3h11_116 {
  border-top: 1px solid var(--border-secondary);
  margin-top: 8px;
}
._optionNew_q3h11_116 ._optionInner_q3h11_98 {
    margin-top: 8px;
  }
/*
    If it's the only item in the list, collapse
  */
._optionNew_q3h11_116._option_q3h11_93:first-child {
    border-top: 0;
    margin-top: 0;
  }
._optionNew_q3h11_116._option_q3h11_93:first-child ._optionInner_q3h11_98 {
      margin-top: 0;
    }

._optionPrefix_q3h11_137 {
  color: var(--text-secondary);
  margin-right: 0.5em;
}

._selectRootShownInMargin_q3h11_142:not(._selectRootInReadOnlyMode_q3h11_143) {
    background: var(--popover-background);
    box-shadow: -0.0687094px 1.99882px 10px rgba(25, 26, 28, 0.1), -0.0264658px 0.769916px 3.18519px rgba(25, 26, 28, 0.0607407), -0.00559855px 0.162867px 0.814815px rgba(25, 26, 28, 0.0392593);
  }

._selectRootInReadOnlyMode_q3h11_143 {
  width: auto;
}

._selectRootInReadOnlyMode_q3h11_143 .select__control {
    border-bottom: 0;
    box-shadow: none;
    cursor: pointer;
  }

._selectRootInReadOnlyMode_q3h11_143 .select__control:hover {
      border-bottom: 0;
    }

._selectRootInReadOnlyMode_q3h11_143 .select__control.select__input-container {
      display: none;
    }

._selectRootInReadOnlyMode_q3h11_143 .select__control button {
      pointer-events: none;
      padding-right: 6px;
    }

._selectRootInReadOnlyMode_q3h11_143 .select__control button span[aria-hidden="true"] {
        display: none;
      }

._selectRootInReadOnlyMode_q3h11_143 .select__menu {
    display: none;
  }._root_1lg1m_1 {
  background: var(--tag-background);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  cursor: default;
  height: 20px;
  display: inline-flex;
}

._rootHasHoverStyle_1lg1m_16 {
  cursor: pointer;
  transition: opacity 200ms linear;
}

._rootHasHoverStyle_1lg1m_16:hover {
    opacity: 0.8;
  }

._hasActionButton_1lg1m_25 {
  padding-right: 0;
}

._icon_1lg1m_29 svg * {
    fill: var(--icon-secondary);
  }
._root_1p15o_1._rootShownInMargin_1p15o_1 {
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
  background-color: var(--background-primary) !important;
}

._root_1p15o_1._rootIsReadOnly_1p15o_9 {
  background: var(--background-elevated);
}

._root_1p15o_1._rootIsReadOnly_1p15o_9:not(._rootIsNotFixedToScreenEdge_1p15o_12) {
    position: fixed;
    inset: 0;
    top: auto;
    max-width: none;
    border-radius: 0;
    padding-bottom: 32px;
  }

._root_1p15o_1._rootIsReadOnly_1p15o_9._rootShownInMargin_1p15o_1::after {
      content: ' ';
      position: absolute;
      inset: 0;
      right: auto;
      width: 1px;
      border-left: 1px solid var(--border-secondary-alpha);
    }

._readOnlyNote_1p15o_33 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text-primary);
}

._rootShownInMargin_1p15o_1 ._readOnlyNote_1p15o_33 {
  padding-top: 0;
  padding-bottom: 0;
}

._readOnlyHeader_1p15o_46 {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

._readOnlyAuthor_1p15o_52 {
  flex: 1;
  margin: 0;
  padding: 0;

  font-size: var(--font-size-sm);
  line-height: 150%;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._readOnlyCloseButton_1p15o_68 {
  color: var(--icon-secondary);
}

._readOnlyCloseButton_1p15o_68:focus-visible {
    outline: none;
  }

._rootIsNotFixedToScreenEdge_1p15o_12._rootShownInMargin_1p15o_1 ._readOnlyCloseButton_1p15o_68 {
  display: none;
}

._readOnlyNoteContents_1p15o_80 {
  font-size: 15px;
  line-height: 150%;
  overflow-y: auto;
  max-height: 33vh;
}
._root_104qh_1 {
  max-width: 305px;
  width: 305px;
}

._rootInReadOnlyMode_104qh_6 {
  border: none;
  box-shadow: none;
  width: auto;
}._popoverBackdrop_kbwmy_1 {
  position: fixed;
  inset: 0;
  background: var(--background-backdrop);
}

@media(min-width: 700px) {

._popoverBackdrop_kbwmy_1 { /* --document-share-width-popovers-float-at  */
    display: none;
}
  }

@media(min-width: 1900px) {

rw-highlight { /* When popovers are shown in margin */
    cursor: default;
}
  }

rw-highlight:not(.rw-highlight--has-note) {
    cursor: default;
  }

rw-highlight.rw-highlight--has-tag .rw-highlight-tag-icon {
  display: none;
}