@charset "UTF-8";@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');
/* Designed to be called inside a top-level selector like `html` or `:host` *//*
  :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);

  /* 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);

  --scroll-target-highlight-background-color: var(--find-in-document-match-active);

  /* 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);

  /* Highlights */
}:host > *, :root {
    --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
    /* This is used for the yellow selection background for example */
    --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%);
    --highlight-resize-handle-background-color: rgb(220, 185, 0);

    --highlight-background-color--active: hsl(50deg 100% 50% / 20%);

    --highlight-text-color: #000;
    --highlight-text-underline-color: hsl(50deg 100% 50% / 100%);
    
    --highlight-icon-color:  rgba(0, 0, 0, 0.60);
  }:host > *.high-contrast:not(.readwise-extension-active),
      .high-contrast:root:not(.readwise-extension-active),
      :host > *:not(.readwise-extension-active) .high-contrast,
      :root:not(.readwise-extension-active) .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--active: hsl(50, 100%, 50%);
        
        --highlight-text-color: black;
        --highlight-text-underline-color: hsl(50deg 100% 50% / 100%);
      }:host > *.theme--dark:not(.readwise-extension-active),
      .theme--dark:root:not(.readwise-extension-active),
      :host > *:not(.readwise-extension-active) .theme--dark,
      :root:not(.readwise-extension-active) .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--active: hsl(50deg 100% 50% / 30%);

        --highlight-text-color: #ffffff;
        --highlight-text-underline-color: hsl(50deg 100% 50% / 80%);
      
        --highlight-icon-color: rgba(255, 255, 255, 0.60);
      }:host > *.readwise-extension-active, .readwise-extension-active:root {
      /* Highlight related colors are opague. The alpha didn't look good enough on a lot of sites */
      --highlight-background-color--normal: #FFF3B0;
      --highlight-background-color--active: #FFF0A3;

      --highlight-background-color--alternative: #CDCDFE;
      --highlight-background-color--alternative--active: #b1b7fe;

      --highlight-resize-handle-background-color--alternative: #767ccc;

      --highlight-text-underline-color: #FFCC00;
      --highlight-text-underline-color--alternative: #767ccc;
    }@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 {
    --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);

  /* 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);

  --scroll-target-highlight-background-color: var(--find-in-document-match-active);

  /* 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-min-width: 296px;
  --right-sidebar-default-width: 400px;
  --right-sidebar-width: var(--right-sidebar-default-width);
  --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;
}
  }/*
  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;
    touch-action: none;
    pointer-events: none;
    -webkit-user-select: none;
  }.document-content #end-of-content * {
      opacity: 0;
      user-select: none;
      -webkit-user-select: none;
    }.document-content [hidden] {
    display: none !important;
  }/* 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);
  /* Same as `--find-in-document-match-active` but full opacity */
  --text-selection-background-color: rgba(22, 148, 245, 1);
}.high-contrast .document-content {
  /* Same as `--find-in-document-match-active` but double the opacity */
  --text-selection-background-color: rgba(22, 148, 245, 0.3);
}.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;

  /* Helpful variables */
  /* The value below is width of header in px (also .document-text-content width - padding) -> 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 */
  --reading-text-content-width: calc(var(--reading-editable-line-length) - 1rem - 20px);
}.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 ((-webkit-font-kerning: normal) or (font-kerning: normal)) and (font-variant ligatures: common-ligatures contextual) {.document-content {
    -webkit-font-kerning: normal;
            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;
    text-align: start;
    -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;
    text-align: start;
    -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;
    text-align: start;
    -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);
    text-align: start;
    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;
  }/* DiffBot splits the NYT author-byline thumbnail block into separate <figure>s, which then
     stack as full-width rows. merge_author_thumbnail_figures (nytimes postprocessing) collapses
     a run into one figure.rw-author-byline; flex lays the avatars out inline as a byline row. */.document-content figure.rw-author-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }/* Older saves nested the byline figure inside <p><i>; browsers re-parse that into an
     <i> *inside* the figure wrapping the avatars. Lay that wrapper out as a flex row too
     so the avatars stay inline instead of stacking (newer parses have no such wrapper). */.document-content figure.rw-author-byline > i {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }.document-content figure.rw-author-byline a img {
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
  }/* 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);
  }/* When a blockquote carries its own inline emphasis — e.g. a transcript where
     italics mark stage directions vs. plain dialogue — the blanket italic above
     erases that contrast (everything reads italic). Render such blockquotes
     upright so the <em>/<i> emphasis stays visible (PAR-75013). Plain pull-quotes
     have no inline emphasis and keep the decorative italic. */.document-content blockquote:has(em, i) {
    font-style: normal;
  }/* 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);
    }/* 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 *,
    :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) ::highlight(selection-emulation) {
      background-color: var(--text-selection-background-color) !important;
    }:is(.document-text-content--would-auto-highlight-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),: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--would-auto-highlight-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) 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--would-auto-highlight-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),: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--would-auto-highlight-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) 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--would-auto-highlight-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):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--would-auto-highlight-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):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--would-auto-highlight-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):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--would-auto-highlight-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):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--would-auto-highlight-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),: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--would-auto-highlight-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) 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--would-auto-highlight-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),: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--would-auto-highlight-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) 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 *,
        :is(.document-text-content--would-auto-highlight-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),: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--would-auto-highlight-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) 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) ::highlight(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) div {
      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) 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 {
      -webkit-text-decoration-color: rgb(var(--reading-text-link) / 50%);
      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 {
      -webkit-text-decoration-color: rgb(var(--reading-text-link-highlight) / 50%);
      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;
      -webkit-text-decoration-color: rgb(var(--reading-text-link-highlight) / 100%);
      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);
      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) ol li {
        font-family: var(--reading-font-body);
        font-size: var(--reading-base-font-size);
        text-align: var(--reading-editable-text-justify);
        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) ul {
      font-family: var(--reading-font-body);
      font-size: var(--reading-base-font-size);
      text-align: var(--reading-editable-text-justify);
      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) ul li {
        font-family: var(--reading-font-body);
        font-size: var(--reading-base-font-size);
        color: var(--reading-text-primary);
      }/* 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);
      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) 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);
      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) 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);
      color: var(--reading-text-primary);
    }/* 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;
      max-width: var(--reading-text-content-width);
    }/* Tighten the gap between a code block and its caption when the
       figcaption is a "see the original GitHub gist" attribution: pre's
       default 2x bottom margin leaves the link visually orphaned. */: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:has(> figcaption) > pre {
      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) 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;
    }/* RW-42899: EPUB/email content ships its own code styling (highlight themes,
       inline backgrounds, coloured <b>/<i>/<font>). Those won the cascade and
       produced dark-on-dark code in light mode. Force the theme's colour and the
       dark "code card" background on every descendant so content styles can't
       break contrast. Anchors keep a readable link colour. Renders code
       monochrome, extending the existing `pre span` rule to all element types. */: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 *:not(a) {
      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 a {
      color: var(--blue-70) !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 * {
      background-color: transparent !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 {
      background-color: var(--reading-surface-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;
      -webkit-hyphens: none;
              hyphens: none;
    }: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-secondary);
      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: -webkit-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 figure {
          margin-top: 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-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: -webkit-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.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);

        /* Substack Notes / similar digest cards put an inline author avatar inside the title's anchor
           (see _build_substack_note_rw_embed_indicator in reader/parsing/emails/helpers.py).
           The broad `img:not(p img, …)` rule above forces `display: block` on it and the default margins
           push it onto its own line below the author name. Pin it inline with a small right margin so it sits
           next to "Author · timestamp", and round it so the avatar reads as a chat-style icon. */
      }: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 a img {
          display: inline-block;
          vertical-align: middle;
          margin: 0 6px 0 0;
          border-radius: 50%;
        }@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;
        }
        /* Same inline-avatar exception as above — keep the title's avatar
           sitting next to the author name on narrow viewports too. */
        :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 a img {
          display: inline-block;
          margin: 0 6px 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:has(img) {
      min-height: 136px;
    }: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) ::highlight(scroll-target-highlight) {
      background-color: var(--scroll-target-highlight-background-color);
    }/* 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;
    }.document-content [data-rw-button="load-podcast-transcript"] {
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    color: var(--text-interactive);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    border-radius: 48px;
    font-family: var(--ui-font);
    background: var(--btn-secondary);
    padding: 6px 12px;
    display: flex;
    width: -webkit-max-content;
    width: max-content;
    margin: 0 auto;
    margin-top: 40px;
  }.document-content span.rw-podcast-timestamp {
    -webkit-user-select: none;
            user-select: none;
  }.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;
      }.pagination-body .document-content .rw-podcast-timestamp {
    -webkit-user-select: none;
            user-select: 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 #end-of-content * {
      opacity: 0;
      user-select: none;
      -webkit-user-select: none;
    }.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, .document-content--original-email code {
    max-width: var(--reading-text-content-width) !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%);
    /* This is used for the yellow selection background for example */
    --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%);
    --highlight-resize-handle-background-color: rgb(220, 185, 0);

    --highlight-background-color--active: hsl(50deg 100% 50% / 20%);

    --highlight-text-color: #000;
    --highlight-text-underline-color: hsl(50deg 100% 50% / 100%);
    
    --highlight-icon-color:  rgba(0, 0, 0, 0.60);
  }html.high-contrast:not(.readwise-extension-active),
      html:not(.readwise-extension-active) .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--active: hsl(50, 100%, 50%);
        
        --highlight-text-color: black;
        --highlight-text-underline-color: hsl(50deg 100% 50% / 100%);
      }html.theme--dark:not(.readwise-extension-active),
      html:not(.readwise-extension-active) .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--active: hsl(50deg 100% 50% / 30%);

        --highlight-text-color: #ffffff;
        --highlight-text-underline-color: hsl(50deg 100% 50% / 80%);
      
        --highlight-icon-color: rgba(255, 255, 255, 0.60);
      }html.readwise-extension-active {
      /* Highlight related colors are opague. The alpha didn't look good enough on a lot of sites */
      --highlight-background-color--normal: #FFF3B0;
      --highlight-background-color--active: #FFF0A3;

      --highlight-background-color--alternative: #CDCDFE;
      --highlight-background-color--alternative--active: #b1b7fe;

      --highlight-resize-handle-background-color--alternative: #767ccc;

      --highlight-text-underline-color: #FFCC00;
      --highlight-text-underline-color--alternative: #767ccc;
    }/* Unset the default text fragment highlighting */html.readwise-extension-active ::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-text-underline-color) 0%,
     var(--highlight-text-underline-color) 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-text-underline-color) 0%,
     var(--highlight-text-underline-color) 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-image: linear-gradient(
     0deg,
     var(--highlight-text-underline-color--alternative) 0%,
     var(--highlight-text-underline-color--alternative) 2px,
     var(--highlight-background-color--alternative) 2px,
     var(--highlight-background-color--alternative) 100%
   );
}.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: -webkit-sticky;
    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);
    }
/* Designed to be called inside a top-level selector like `html` or `:host` */
/*
  :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);

  /* 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);

  --scroll-target-highlight-background-color: var(--find-in-document-match-active);

  /* 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);

  /* Highlights */
}
:host > *, :root {
    --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
    /* This is used for the yellow selection background for example */
    --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%);
    --highlight-resize-handle-background-color: rgb(220, 185, 0);

    --highlight-background-color--active: hsl(50deg 100% 50% / 20%);

    --highlight-text-color: #000;
    --highlight-text-underline-color: hsl(50deg 100% 50% / 100%);
    
    --highlight-icon-color:  rgba(0, 0, 0, 0.60);
  }
:host > *.high-contrast:not(.readwise-extension-active),
      .high-contrast:root:not(.readwise-extension-active),
      :host > *:not(.readwise-extension-active) .high-contrast,
      :root:not(.readwise-extension-active) .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--active: hsl(50, 100%, 50%);
        
        --highlight-text-color: black;
        --highlight-text-underline-color: hsl(50deg 100% 50% / 100%);
      }
:host > *.theme--dark:not(.readwise-extension-active),
      .theme--dark:root:not(.readwise-extension-active),
      :host > *:not(.readwise-extension-active) .theme--dark,
      :root:not(.readwise-extension-active) .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--active: hsl(50deg 100% 50% / 30%);

        --highlight-text-color: #ffffff;
        --highlight-text-underline-color: hsl(50deg 100% 50% / 80%);
      
        --highlight-icon-color: rgba(255, 255, 255, 0.60);
      }
:host > *.readwise-extension-active, .readwise-extension-active:root {
      /* Highlight related colors are opague. The alpha didn't look good enough on a lot of sites */
      --highlight-background-color--normal: #FFF3B0;
      --highlight-background-color--active: #FFF0A3;

      --highlight-background-color--alternative: #CDCDFE;
      --highlight-background-color--alternative--active: #b1b7fe;

      --highlight-resize-handle-background-color--alternative: #767ccc;

      --highlight-text-underline-color: #FFCC00;
      --highlight-text-underline-color--alternative: #767ccc;
    }
@supports not (backdrop-filter: blur(5px)) {
:host > *,
:root {
    --default-blurred-button-background: #F2F3F4;
    --default-blurred-button: 0px;
}
  }
:host > * .high-contrast, :root .high-contrast {
    --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);

  /* 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);

  --scroll-target-highlight-background-color: var(--find-in-document-match-active);

  /* 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 (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-min-width: 296px;
  --right-sidebar-default-width: 400px;
  --right-sidebar-width: var(--right-sidebar-default-width);
  --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;
}
  }
/*
  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;
    touch-action: none;
    pointer-events: none;
    -webkit-user-select: none;
  }
.document-content #end-of-content * {
      opacity: 0;
      -moz-user-select: none;
           user-select: none;
      -webkit-user-select: none;
    }
.document-content [hidden] {
    display: none !important;
  }
/* 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);
  /* Same as `--find-in-document-match-active` but full opacity */
  --text-selection-background-color: rgba(22, 148, 245, 1);
}
.high-contrast .document-content {
  /* Same as `--find-in-document-match-active` but double the opacity */
  --text-selection-background-color: rgba(22, 148, 245, 0.3);
}
.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;

  /* Helpful variables */
  /* The value below is width of header in px (also .document-text-content width - padding) -> 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 */
  --reading-text-content-width: calc(var(--reading-editable-line-length) - 1rem - 20px);
}
.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;
    text-align: start;
    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;
    text-align: start;
    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;
    text-align: start;
    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);
    text-align: start;
    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;
  }
/* DiffBot splits the NYT author-byline thumbnail block into separate <figure>s, which then
     stack as full-width rows. merge_author_thumbnail_figures (nytimes postprocessing) collapses
     a run into one figure.rw-author-byline; flex lays the avatars out inline as a byline row. */
.document-content figure.rw-author-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
/* Older saves nested the byline figure inside <p><i>; browsers re-parse that into an
     <i> *inside* the figure wrapping the avatars. Lay that wrapper out as a flex row too
     so the avatars stay inline instead of stacking (newer parses have no such wrapper). */
.document-content figure.rw-author-byline > i {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
.document-content figure.rw-author-byline a img {
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
  }
/* 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);
  }
/* When a blockquote carries its own inline emphasis — e.g. a transcript where
     italics mark stage directions vs. plain dialogue — the blanket italic above
     erases that contrast (everything reads italic). Render such blockquotes
     upright so the <em>/<i> emphasis stays visible (PAR-75013). Plain pull-quotes
     have no inline emphasis and keep the decorative italic. */
.document-content blockquote:has(em, i) {
    font-style: normal;
  }
/* 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);
    }
/* 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 *,
    :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) ::highlight(selection-emulation) {
      background-color: var(--text-selection-background-color) !important;
    }
:is(.document-text-content--would-auto-highlight-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),: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--would-auto-highlight-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) 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--would-auto-highlight-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),: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--would-auto-highlight-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) 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--would-auto-highlight-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),: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--would-auto-highlight-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) 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--would-auto-highlight-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):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--would-auto-highlight-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):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--would-auto-highlight-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):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--would-auto-highlight-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):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--would-auto-highlight-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):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--would-auto-highlight-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):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--would-auto-highlight-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),: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--would-auto-highlight-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) 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--would-auto-highlight-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),: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--would-auto-highlight-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) 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--would-auto-highlight-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),: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--would-auto-highlight-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) 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 *,
        :is(.document-text-content--would-auto-highlight-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),: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--would-auto-highlight-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) 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) ::highlight(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) div {
      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) 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);
      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) ol li {
        font-family: var(--reading-font-body);
        font-size: var(--reading-base-font-size);
        text-align: var(--reading-editable-text-justify);
        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) ul {
      font-family: var(--reading-font-body);
      font-size: var(--reading-base-font-size);
      text-align: var(--reading-editable-text-justify);
      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) ul li {
        font-family: var(--reading-font-body);
        font-size: var(--reading-base-font-size);
        color: var(--reading-text-primary);
      }
/* 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);
      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) 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);
      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) 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);
      color: var(--reading-text-primary);
    }
/* 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;
      max-width: var(--reading-text-content-width);
    }
/* Tighten the gap between a code block and its caption when the
       figcaption is a "see the original GitHub gist" attribution: pre's
       default 2x bottom margin leaves the link visually orphaned. */
: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:has(> figcaption) > pre {
      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) 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;
    }
/* RW-42899: EPUB/email content ships its own code styling (highlight themes,
       inline backgrounds, coloured <b>/<i>/<font>). Those won the cascade and
       produced dark-on-dark code in light mode. Force the theme's colour and the
       dark "code card" background on every descendant so content styles can't
       break contrast. Anchors keep a readable link colour. Renders code
       monochrome, extending the existing `pre span` rule to all element types. */
: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 *:not(a) {
      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 a {
      color: var(--blue-70) !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 * {
      background-color: transparent !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 {
      background-color: var(--reading-surface-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;
      hyphens: none;
    }
: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-secondary);
      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 figure {
          margin-top: 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-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.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);

        /* Substack Notes / similar digest cards put an inline author avatar inside the title's anchor
           (see _build_substack_note_rw_embed_indicator in reader/parsing/emails/helpers.py).
           The broad `img:not(p img, …)` rule above forces `display: block` on it and the default margins
           push it onto its own line below the author name. Pin it inline with a small right margin so it sits
           next to "Author · timestamp", and round it so the avatar reads as a chat-style icon. */
      }
: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 a img {
          display: inline-block;
          vertical-align: middle;
          margin: 0 6px 0 0;
          border-radius: 50%;
        }
@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;
        }
        /* Same inline-avatar exception as above — keep the title's avatar
           sitting next to the author name on narrow viewports too. */
        :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 a img {
          display: inline-block;
          margin: 0 6px 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:has(img) {
      min-height: 136px;
    }
: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) ::highlight(scroll-target-highlight) {
      background-color: var(--scroll-target-highlight-background-color);
    }
/* 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;
    }
.document-content [data-rw-button="load-podcast-transcript"] {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    color: var(--text-interactive);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    border-radius: 48px;
    font-family: var(--ui-font);
    background: var(--btn-secondary);
    padding: 6px 12px;
    display: flex;
    width: -moz-max-content;
    width: max-content;
    margin: 0 auto;
    margin-top: 40px;
  }
.document-content span.rw-podcast-timestamp {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.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;
      }
.pagination-body .document-content .rw-podcast-timestamp {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: 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 #end-of-content * {
      opacity: 0;
      -moz-user-select: none;
           user-select: none;
      -webkit-user-select: none;
    }
.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, .document-content--original-email code {
    max-width: var(--reading-text-content-width) !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.
*/

/* Designed to be called inside a top-level selector like `html` or `:host` */

html {
    --highlight-background-color--normal: hsl(50deg 100% 50% / 15%) !important;
    /* This is used for the yellow selection background for example */
    --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%) !important;
    --highlight-resize-handle-background-color: rgb(220, 185, 0) !important;

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

    --highlight-text-color: #000 !important;
    --highlight-text-underline-color: hsl(50deg 100% 50% / 100%) !important;
    
    --highlight-icon-color:  rgba(0, 0, 0, 0.60) !important;
  }

html.high-contrast:not(.readwise-extension-active),
      html:not(.readwise-extension-active) .high-contrast {
        --highlight-background-color--normal: hsl(50deg 96.24% 67.14%) !important;
        --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 75%) !important;
        
        --highlight-background-color--active: hsl(50, 100%, 50%) !important;
        
        --highlight-text-color: black !important;
        --highlight-text-underline-color: hsl(50deg 100% 50% / 100%) !important;
      }

html.theme--dark:not(.readwise-extension-active),
      html:not(.readwise-extension-active) .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--active: hsl(50deg 100% 50% / 30%) !important;

        --highlight-text-color: #ffffff !important;
        --highlight-text-underline-color: hsl(50deg 100% 50% / 80%) !important;
      
        --highlight-icon-color: rgba(255, 255, 255, 0.60) !important;
      }

html.readwise-extension-active {
      /* Highlight related colors are opague. The alpha didn't look good enough on a lot of sites */
      --highlight-background-color--normal: #FFF3B0 !important;
      --highlight-background-color--active: #FFF0A3 !important;

      --highlight-background-color--alternative: #CDCDFE !important;
      --highlight-background-color--alternative--active: #b1b7fe !important;

      --highlight-resize-handle-background-color--alternative: #767ccc !important;

      --highlight-text-underline-color: #FFCC00 !important;
      --highlight-text-underline-color--alternative: #767ccc !important;
    }

/* Unset the default text fragment highlighting */

html.readwise-extension-active ::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-text-underline-color) 0%,
     var(--highlight-text-underline-color) 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-text-underline-color) 0%,
     var(--highlight-text-underline-color) 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-image: linear-gradient(
     0deg,
     var(--highlight-text-underline-color--alternative) 0%,
     var(--highlight-text-underline-color--alternative) 2px,
     var(--highlight-background-color--alternative) 2px,
     var(--highlight-background-color--alternative) 100%
   ) !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: -webkit-max-content;
  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_1kfv6_1 {
  background-color: var(--background-elevated);
  padding: 0;
  border: 0;
  border-radius: 100%;
  box-shadow: var(--shadow-100);
  outline: none;
}

._triggerButton_1kfv6_1 svg * {
    fill: var(--icon-secondary);
  }

._scrollableOptions_1kfv6_14 {
  max-height: 300px;
  overflow-y: auto;
  /* avoid separator margin */
  margin-top: -4px;
  margin-bottom: -4px;
}

._scrollableOptions_1kfv6_14 ._item_1kfv6_21:first-child {
    border-radius: 0;
  }

._scrollableOptions_1kfv6_14 ._item_1kfv6_21:last-child {
    border-radius: 0;
  }

._isActive_1kfv6_30 {
  background: var(--u-alpha-200);
}

._isActive_1kfv6_30 svg * {
    fill: var(--icon-primary);
  }

._content_1kfv6_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_1kfv6_49 {
  pointer-events: auto !important;
}

._item_1kfv6_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_1kfv6_21 label {
    cursor: pointer;
  }

._item_1kfv6_21._isDisabled_1kfv6_68 {
    cursor: default;
    pointer-events: none;
  }

._item_1kfv6_21._isDisabled_1kfv6_68 ._shortcut_1kfv6_72 {
      color: var(--text-disabled);
    }

._item_1kfv6_21._isCreate_1kfv6_77 {
    color: var(--text-interactive);
    font-weight: 500;
  }

._item_1kfv6_21._isCreate_1kfv6_77 svg {
      margin-right: 8px;
      fill: var(--icon-interactive);
    }

._item_1kfv6_21 ._isDanger_1kfv6_87 {
    color: var(--text-error);
  }

._item_1kfv6_21 ._isDisabled_1kfv6_68 {
    color: var(--text-disabled);
  }

._item_1kfv6_21 ._isDisabled_1kfv6_68 svg * {
      fill: var(--text-disabled);
    }

._item_1kfv6_21 ._ghostreaderPrompt_1kfv6_99 {
    margin-left: auto;
    padding-left: 20px;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
  }

._item_1kfv6_21 ._optionContent_1kfv6_106 {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: row;
  }

._item_1kfv6_21 ._optionContent_1kfv6_106 small {
      display: inline-block;
      padding: var(--spacer-1) 0;
    }

._item_1kfv6_21 ._optionContent_1kfv6_106 svg {
      margin-right: 8px;
    }

._item_1kfv6_21 ._optionContent_1kfv6_106 svg * {
        color: var(--icon-secondary) !important;
      }

._item_1kfv6_21:hover,
  ._item_1kfv6_21:focus-visible,
  ._item_1kfv6_21[data-highlighted] {
    background: var(--u-alpha-100);
  }

._item_1kfv6_21:first-child {
    border-radius: 8px 8px 0 0;
  }

._item_1kfv6_21:last-child {
    border-radius: 0 0 8px 8px;
  }

._item_1kfv6_21 ._checkbox_1kfv6_140 {
    margin-right: 10px;
  }

._checkIcon_1kfv6_145 {
  margin-right: 4px;
  margin-left: -20px;
}

._checkIcon_1kfv6_145 * {
    fill: var(--icon-primary);
  }

._title_1kfv6_154 {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 12px;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

._separator_1kfv6_164 {
  height: 1px;
  margin: 4px 0;
  background-color: var(--u-alpha-400);
}

._contentWithChecks_1kfv6_170 ._item_1kfv6_21,
._contentWithChecks_1kfv6_170 ._title_1kfv6_154 {
  padding: 0 26px;
}

._editTagsPopover_1kfv6_175 {
  /* To match the dropdown width: */
  max-width: 278px !important;
  width: 278px !important;
}

._triggerElement_1kfv6_181 {
  background: var(--btn-secondary) !important;
}

._triggerElement_1kfv6_181 svg * {
    fill: var(--icon-secondary) !important;
  }

._dropdownContent_1kfv6_189 {
  width: 410px;
}

._itemDescription_1kfv6_193 {
  height: 48px !important;
  font-size: 14px !important;
}

._itemDescription_1kfv6_193 ._optionContent_1kfv6_106 {
    flex-direction: column;
    align-items: start;
  }

._itemDescription_1kfv6_193._isDisabled_1kfv6_68 ._optionContent_1kfv6_106 {
      color: var(--text-disabled);
    }

._itemDescription_1kfv6_193._isDisabled_1kfv6_68 ._optionContent_1kfv6_106 small {
        color: var(--text-disabled);
      }

._itemDescription_1kfv6_193 ._checkIcon_1kfv6_145 {
    margin-top: -17px;
  }

._itemDescription_1kfv6_193 ._optionContent_1kfv6_106 {
    color: var(--text-primary);
  }

._itemDescription_1kfv6_193 ._optionContent_1kfv6_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;
}._count_1l1q7_1 {
  background: var(--inbox-header-tab-count-background);
  color: var(--inbox-header-tab-count-text-color);
  font-size: var(--font-size-sm);
  border-radius: 4px;
  padding: 2px 6px;
  margin: 1px 0 0 5px;
  font-weight: 400;
}

._activeCount_1l1q7_11 {
  color: var(--inbox-header-tab-active-count-text-color);
}
/* This tells Safari to render animations with the GPU instead of the CPU */

/* More info: */

/* https://michaeluloth.com/css-translate-z/ */

/* https://x.com/andyngo/status/1263056084719202304 */

._babyGhost_4fgzj_3 {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity 250ms;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

._babyGhost_4fgzj_3 img {
    background: none;
  }

._show_4fgzj_18 {
  opacity: 1;
}

._hide_4fgzj_22 {
  animation: _babyghost-hide_4fgzj_1 0.5s ease-out forwards;
}

@keyframes _babyghost-hide_4fgzj_1 {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(5px);
  }
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  margin-left: -4px;
  position: absolute;
  width: 0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  border-top: none;
  border-bottom-color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  top: 0;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  bottom: 0;
  margin-bottom: -8px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
  border-bottom: none;
  border-top-color: #fff;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
  bottom: 0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
}

.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px;
}
.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 1;
}
.react-datepicker-popper[data-placement^=bottom] {
  padding-top: 10px;
}
.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
  left: auto;
  right: 50px;
}
.react-datepicker-popper[data-placement^=top] {
  padding-bottom: 10px;
}
.react-datepicker-popper[data-placement^=right] {
  padding-left: 8px;
}
.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}
.react-datepicker-popper[data-placement^=left] {
  padding-right: 8px;
}
.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: #a6a6a6;
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,
.react-datepicker__week-number--keyboard-selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__week-number--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}
.react-datepicker__week-number--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day-names {
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover,
.react-datepicker__year-text--highlighted:hover {
  background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .holiday-overlay,
.react-datepicker__month-text--holidays .holiday-overlay,
.react-datepicker__quarter-text--holidays .holiday-overlay,
.react-datepicker__year-text--holidays .holiday-overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:hover,
.react-datepicker__month-text--holidays:hover,
.react-datepicker__quarter-text--holidays:hover,
.react-datepicker__year-text--holidays:hover {
  background-color: #cf5300;
}
.react-datepicker__day--holidays:hover .holiday-overlay,
.react-datepicker__month-text--holidays:hover .holiday-overlay,
.react-datepicker__quarter-text--holidays:hover .holiday-overlay,
.react-datepicker__year-text--holidays:hover .holiday-overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #bad9f1;
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
  background-color: transparent;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}
.react-datepicker-wrapper {
    width: 100%;
}

._calendar-wrapper_h8xp5_5{
    width: 248px;
    min-height: 305px;
    height: -webkit-fit-content;
    height: fit-content;
    border-radius: 8px;
    font-family: var(--ui-font);
    border: none;
    box-shadow: 0 0 0 1px var(--border-secondary);;
    background-color: var(--popover-background);
}

._calendar-wrapper_h8xp5_5 .react-datepicker__triangle {
        display: none;
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__header{
        border: none;
        background-color: var(--popover-background);
        padding-bottom: 0;
        border-radius: 8px;
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__navigation {
        top: 14px;
        padding: 0 10px;
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__navigation-icon::before {
        border-color: var(--icon-primary);
        border-width: 2px 2px 0 0;
        border-radius: 1px;
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__month-container {
        margin-bottom: 45px;
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__current-month {
        padding: 12px 0;
        font-weight: 550;
        color: var(--text-primary);
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__day-names {
        padding-bottom: 0;
        font-weight: 500;
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__day-name {
        color: var(--text-primary);
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__day {
        width: 28px;
        height: 28px;
        padding: 4px;
        border-radius: 4px;
        line-height: 20px;
        color: var(--text-primary);
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__day:hover {
        background-color: var(--default-button-hover-background);
        color: var(--text-interactive);
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__day--keyboard-selected {
        background: none;
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__day--outside-month {
        color: var(--text-disabled);
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__day--selected {
        background-color: var(--icon-interactive);
        color: var(--text-button-blue);
    }

._calendar-wrapper_h8xp5_5 .react-datepicker__day--today {
        text-decoration: underline;
        text-underline-position: under;
        font-weight: bold;
    }

._date-input_h8xp5_89 input {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: none;
        background: var(--metadata-input-background);
        box-shadow: 0 0 0 1px var(--border-secondary);
        border-radius: 4px;
        padding: 6px 8px;
        color: var(--text-primary);
        margin-top: 0;
        font-size: 0.8125rem;
        line-height: 1.125rem;
        width: 100%;
        outline: none;
        transition: box-shadow 0.2s ease-in-out;
    }

._date-input_h8xp5_89 input:focus {
            box-shadow: 0 0 0 2px var(--border-focus);
        }

._date-input_h8xp5_89 svg {
        position: absolute;
        right: 6px;
        top: 4px;
        fill: var(--icon-secondary);
    }

._date-input_h8xp5_89 svg * {
            fill: var(--icon-secondary);
        }

._button-container_h8xp5_124 {
    border-top: 1px solid var(--separator-color);
    width: 100%;
    position: absolute;
    height: 45px;
    right: 0;
    bottom: 4px;
}

._button-container_h8xp5_124 ._buttons_h8xp5_133 {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--spacer-3);
        position: absolute;
        right: 10px;
        bottom: 4px;
    }

._button-container_h8xp5_124 ._buttons_h8xp5_133 ._disabled-button_h8xp5_142 {
            color: var(--text-secondary);
            background: none;
            padding: 8px 12px;
            pointer-events: none;
            font-family: var(--ui-font);
            font-size: var(--font-size-base);
            font-weight: 500;
        }

._button-container_h8xp5_124 ._buttons_h8xp5_133 ._cancel-button_h8xp5_152 {
            color: var(--text-primary);
            font-size: var(--font-size-base);
            font-weight: 500;
            font-family: var(--ui-font);
        }

._button-container_h8xp5_124 ._buttons_h8xp5_133 ._blue-button_h8xp5_159 {
            color: var(--text-interactive);
            background: var(--background-button-primary);
            margin-left: auto;
            margin-right: auto;
            padding: 8px 12px;
            border-radius: 48px;
            font-family: var(--ui-font);
            font-size: var(--font-size-base);
            font-weight: 500;
        }

._calendar-icon_h8xp5_173 svg {
        fill: var(--icon-secondary);
        position: absolute;
        top: 4px;
        right: 6px;
    }
._overlay_1698a_1 {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1;
}
/* This tells Safari to render animations with the GPU instead of the CPU */
/* More info: */
/* https://michaeluloth.com/css-translate-z/ */
/* https://x.com/andyngo/status/1263056084719202304 */
._sidebar_cyrdg_4 {
  display: flex;
  background-color: var(--sidebar-background);
  transition: opacity var(--theme-transition-time) ease-in-out, transform var(--panels-transition-time) ease-in-out, max-width var(--panels-transition-time) ease-in-out, min-width var(--panels-transition-time) ease-in-out, width var(--panels-transition-time) ease-in-out;
  height: var(--safe100vh);
  flex-direction: column;
  padding-top: 0;
  flex: 0 0 auto;
  position: fixed;
  width: var(--right-sidebar-width);
  right: 0;
  border-left: 1px solid var(--border-tertiary-alpha);
  z-index: 101;
  box-sizing: border-box;
}
@media (min-width: 1080px) {
._sidebar_cyrdg_4 {
    position: relative;
    /* Hidden by default on wider screens - shown via .showSidebar */
    width: 0;
    min-width: 0;
    border-left: none;
    overflow: hidden;
}
  }
@media (max-width: 1080px) {
._sidebar_cyrdg_4 {
    transform: translateX(100%);
}
  }
._sidebar_cyrdg_4 ._documentNoteForm_cyrdg_31, ._sidebar_cyrdg_4 ._highlightNoteWrapper_cyrdg_31, ._sidebar_cyrdg_4 ._highlightNoteTextarea_cyrdg_31 {
    max-width: 100%;
    width: 100%;
  }
._sidebar_cyrdg_4._isResizing_cyrdg_36 {
    transition: none;
  }
._sidebar_cyrdg_4 ._copyButton_cyrdg_40 {
    margin-left: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
  }
._sidebar_cyrdg_4 ._content_cyrdg_47 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-grow: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._header_cyrdg_55 {
      display: flex;
      flex-direction: column;
      margin-bottom: var(--spacer-6);
      max-width: 100%;
      min-width: 0;
    }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._header_cyrdg_55 ._articleTitle_cyrdg_62 {
        font-size: var(--font-size-lg);
        letter-spacing: var(--ls-8);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--spacer-2);
        line-height: 1.25;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        text-wrap: balance;
        max-width: 100%;
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._header_cyrdg_55 ._articleTitle_cyrdg_62 ._copyButton_cyrdg_40 {
          opacity: 1;
          display: none;
          position: absolute;
          pointer-events: auto;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._header_cyrdg_55 ._articleTitle_cyrdg_62 ._copyButton_cyrdg_40._visible_cyrdg_80 {
            display: initial;
          }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._header_cyrdg_55 ._articleSource_cyrdg_86 {
        color: var(--text-secondary);
        font-size: var(--font-size-base);
        line-height: var(--f6);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._header_cyrdg_55 ._articleSource_cyrdg_86 a {
          line-height: 20px;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._header_cyrdg_55 ._articleSource_cyrdg_86:hover ._copyButton_cyrdg_40 {
            opacity: 1;
            pointer-events: auto;
          }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._coverImage_cyrdg_109 {
      max-width: 248px;
      max-height: 160px;
      border: 1px;
      border-radius: 8px;
      margin-bottom: 12px;
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._subheading_cyrdg_117 {
      color: var(--text-grey);
      font-weight: var(--font-weight-medium);
      font-size: var(--font-size-sm);
      letter-spacing: var(--ls-10);
      margin-top: var(--spacer-7);
      padding-bottom: var(--spacer-2);
      line-height: 1.6666666667;
      transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      text-transform: uppercase;
    }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._summary_cyrdg_133 {
      color: var(--summary-text);
      font-size: var(--font-size-base);
      letter-spacing: var(--ls-9);
      line-height: 1.4285714286;
      margin-bottom: var(--s2);
      overflow-wrap: break-word;
      word-wrap: break-word;
      max-width: 100%;
    }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._metaData_cyrdg_144 {
      padding-bottom: var(--s2);
      margin-bottom: var(--s2);
    }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._metaData_cyrdg_144 ._metaDataRow_cyrdg_148 {
        display: flex;
        font-size: var(--font-size-base);
        letter-spacing: var(--ls-9);
        padding: 0 12px;
        margin: 0 -12px;
        line-height: 20px;
        border-radius: 16px;
        position: relative;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._metaData_cyrdg_144 ._metaDataRow_cyrdg_148._metaDataRowClickable_cyrdg_159:hover {
          background-color: var(--u-alpha-200);
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._metaData_cyrdg_144 ._metaDataRow_cyrdg_148._metaDataRowClickable_cyrdg_159:hover::after{
          position: absolute;
          content: "→";
          width: 20px;
          height: 20px;
          text-align: center;
          right: 4px;
          top:4px;
          background-color: var(--background-canvas);
          color: var(--text-secondary);
          padding: 2px;
          border-radius: 12px;
          font-size: 14px;
          line-height: 20px;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._metaData_cyrdg_144 ._metaDataRow_cyrdg_148 ._metaDataName_cyrdg_179 {
          flex: 0 1 100px;
          color: var(--text-secondary);
          padding: calc(var(--s1) * 0.6) 0;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._metaData_cyrdg_144 ._metaDataRow_cyrdg_148 ._metaDataValue_cyrdg_185 {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          color: var(--text-primary);
          padding: calc(var(--s1) * 0.6) 0;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._metaData_cyrdg_144 ._metaDataRow_cyrdg_148 a {
          color: var(--text-primary);
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;

          /* https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container */
          overflow-wrap: break-word;
          word-wrap: break-word;
          word-break: break-word;
          /* Adds a hyphen where the word breaks, if supported (No Blink) */
          -webkit-hyphens: auto;
          hyphens: auto;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._tagsContainer_cyrdg_216 {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: -8px;
    }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._tagsContainer_cyrdg_216 span {
        margin-bottom: 4px;
        margin-left: 8px;
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkSectionHeading_cyrdg_228 {
      display: flex;
      justify-content: space-between;
      color: var(--text-grey);
      font-weight: var(--font-weight-medium);
      font-size: var(--font-size-sm);
      letter-spacing: var(--ls-10);
      line-height: 1.6666666667;
    }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkSectionHeading_cyrdg_228:not(:first-child) {
        margin-top: var(--spacer-6);
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkSectionHeading_cyrdg_228._clickable_cyrdg_241 {
        cursor: pointer;
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246 {
      display: flex;
      margin: 12px -8px 0;
      font-size: var(--font-size-base);
      background: var(--link-card-background);
      border-radius: var(--link-card-border-radius);
      border: 1px solid var(--link-card-border);
      overflow: hidden;
      line-height: 16px;
    }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246 ._showOnHover_cyrdg_256 {
        display: none;
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246 ._overflowTextOnHover_cyrdg_260 {
        white-space: normal;
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246:hover {
        border-color: var(--link-card-border--hover);
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246:hover ._showOnHover_cyrdg_256 {
          display: flex;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246:hover ._overflowTextOnHover_cyrdg_260 {
          white-space: nowrap;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withMetadata_cyrdg_276 {
        padding: 12px;
        flex-direction: column;
        justify-content: space-between;
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withMetadata_cyrdg_276 ._linkHeader_cyrdg_281 {
          height: 20px;
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withMetadata_cyrdg_276 ._linkHeader_cyrdg_281 ._domain_cyrdg_288 {
            display: -webkit-box;
            line-clamp: 1;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            flex-grow: 1;
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            text-transform: uppercase;
          }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withMetadata_cyrdg_276 ._linkHeader_cyrdg_281 ._linkActions_cyrdg_297 {
          }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withMetadata_cyrdg_276 ._linkBody_cyrdg_301 {
          line-height: 20px;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withMetadata_cyrdg_276 ._linkBody_cyrdg_301 > *:not(:first-child) {
            margin-top: 6px;
          }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withMetadata_cyrdg_276 ._linkBody_cyrdg_301 ._title_cyrdg_308 {
            font-weight: 600;
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
          }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withMetadata_cyrdg_276 ._linkBody_cyrdg_301 ._context_cyrdg_313 {
            height: auto;
            display: -webkit-box;
            line-clamp: 3;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
          }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withMetadata_cyrdg_276 ._linkBody_cyrdg_301 ._context_cyrdg_313 > a {
              color: var(--text-backlink);
              font-style: italic;
            }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withMetadata_cyrdg_276 ._linkFooter_cyrdg_324 {
          margin-top: 6px;
          height: 16px;
          display: flex;
          justify-content: space-between;
          font-size: var(--font-size-sm);
          color: var(--text-secondary);
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withMetadata_cyrdg_276 ._linkFooter_cyrdg_324 ._author_cyrdg_332 {
            display: -webkit-box;
            line-clamp: 1;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
          }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withoutMetadata_cyrdg_338 {
        padding: 8px 12px;
        height: 52px;
        flex-direction: row;
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withoutMetadata_cyrdg_338 ._linkBody_cyrdg_301 {
          overflow: hidden;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withoutMetadata_cyrdg_338 ._linkBody_cyrdg_301 ._context_cyrdg_313 {
            display: -webkit-box;
            line-clamp: 1;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
          }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withoutMetadata_cyrdg_338 ._linkBody_cyrdg_301 ._context_cyrdg_313 > a {
              font-weight: 600;
            }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withoutMetadata_cyrdg_338 ._linkBody_cyrdg_301 ._linkUrl_cyrdg_353 {
            display: -webkit-box;
            line-clamp: 1;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            margin-top: 4px;
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
          }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246._withoutMetadata_cyrdg_338 ._linkActions_cyrdg_297 {
          height: 100%;
          align-items: center;
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246 ._linkActions_cyrdg_297 {
        display: flex;
      }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246 ._linkActions_cyrdg_297 ._inMyLibraryIcon_cyrdg_371 {
          color: var(--icon-interactive);
        }
._sidebar_cyrdg_4 ._content_cyrdg_47 ._linkCard_cyrdg_246 ._linkActions_cyrdg_297 ._linkAction_cyrdg_297 {
          margin-left: 15px;
          display: flex;
          align-items: center;
        }
._sidebar_cyrdg_4 ._bottom_cyrdg_384 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem var(--sidebar-padding-horizontal);
    border-top: 1px solid var(--border-secondary);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 46px;
    min-height: 46px;
  }
._sidebar_cyrdg_4 ._bottom_cyrdg_384 > button {
      margin-left: -6px;
    }
._sidebar_cyrdg_4 ._bottom_cyrdg_384 button, ._sidebar_cyrdg_4 ._bottom_cyrdg_384 ._button_cyrdg_400 {
      color: var(--text-primary);
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      border-radius: 48px;
      padding: 6px 12px;
    }
._sidebar_cyrdg_4 ._bottom_cyrdg_384 ._disabledButton_cyrdg_409 {
      color: var(--text-secondary);
      background: none;
      font-size: 14px;
      padding: 6px 12px;
      pointer-events: none;
    }
._sidebar_cyrdg_4 ._bottom_cyrdg_384 ._helpButton_cyrdg_418,
    ._sidebar_cyrdg_4 ._bottom_cyrdg_384 ._closeButton_cyrdg_419 {
      display: flex;
      padding-right: 0;
    }
._sidebar_cyrdg_4 ._bottom_cyrdg_384 ._helpButton_cyrdg_418 svg, ._sidebar_cyrdg_4 ._bottom_cyrdg_384 ._closeButton_cyrdg_419 svg {
        fill: var(--icon-primary);
        width: 24px;
        height: 24px;
      }
._sidebar_cyrdg_4 ._bottom_cyrdg_384 ._closeButton_cyrdg_419 {
      margin-left: auto;
    }
._sidebar_cyrdg_4._metadataSidebar_cyrdg_435 {
    z-index: 102;

    width: var(--right-sidebar-width) !important;
  }
._sidebar_cyrdg_4._metadataSidebar_cyrdg_435 ._bottom_cyrdg_384 {
      background: var(--background-primary);
    }
._panelContainer_cyrdg_446 {
  padding: var(--sidebar-padding);
  padding-top: 1.5rem;
  /* Remove space taken up by scrollbar */
  /* padding-right: calc(var(--sidebar-padding-horizontal) - 13px); */

  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  box-sizing: border-box;
  min-width: 0;
}
._panelContainer_cyrdg_446 ._noItemSelected_cyrdg_458 {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: -1.5rem;
  }
._panelContainer_cyrdg_446 ._noItemSelected_cyrdg_458 p {
      margin: 0;
      margin-top: 11px;
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      color: var(--text-tertiary);
    }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 {
    margin: 0 -1px;
    padding-bottom: 1.5rem;
  }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 img {
      width: 295px;
      min-width: 295px;
      margin-left: -24px;
      background: none;
    }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._emptyBlock_cyrdg_487:not(:last-child) {
        margin-bottom: 24px;
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._emptyBlock_cyrdg_487 h3 {
        margin-top: 0;
        margin-bottom: 8px;
        font-family: var(--ui-font);
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.05px;
        color: var(--text-primary);
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._emptyBlock_cyrdg_487 p {
        margin: 0;
        font-family: var(--ui-font);
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.05px;
        color: var(--text-secondary);
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._buttons_cyrdg_516 {
      margin-bottom: 24px;
    }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._buttons_cyrdg_516 a,
      ._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._buttons_cyrdg_516 button {
        margin-top: 12px;
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._buttons_cyrdg_516 button {
        display: inline-block;
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._buttons_cyrdg_516 button:first-child {
          margin-right: 8px;
        }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._buttons_cyrdg_516 a {
        height: 32px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._buttons_cyrdg_516 a:first-child {
          margin-right: 8px;
        }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._buttons_cyrdg_516 a svg {
          margin-right: 6px;
        }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._primary_cyrdg_548 {
      border-radius: 48px;
      color: var(--text-interactive);
      background: var(--primary-button-background);
      padding: 6px 12px;
      font-family: var(--ui-font);
      font-style: normal;
      font-weight: var(--font-weight-medium);
      font-size: 14px;
      line-height: 20px;
    }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._primary_cyrdg_548 svg {
        fill: var(--text-interactive);
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._primary_cyrdg_548._discoverButton_cyrdg_563 {
        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(--text-interactive);
        background: var(--primary-button-background);
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._primary_cyrdg_548._discoverButton_cyrdg_563 ._readwiseLogo_cyrdg_574 {
          width: 20px;
          height: 20px;
          fill: none;
          margin-right: 6px;
        }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._browseButton_cyrdg_583 {
      margin: 0 auto;
    }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._ghostreaderPrompt_cyrdg_587 {
      background: var(--tooltip-shortcut-background);
      color: var(--tooltip-shortcut-color);
      border-radius: 2px;
      padding: 2px 5px;
    }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._dedicatedEmail_cyrdg_594 {
      display: flex;
      justify-content: center;
      align-items: center;
    }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._dedicatedEmail_cyrdg_594 span {
        font-family: var(--mono-font);
        font-style: normal;
        font-weight: bold;
        font-size: var(--font-size-sm);
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 10px;
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._dedicatedEmail_cyrdg_594 button {
        margin-left: auto;
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._link_cyrdg_228 {
      text-decoration: underline;
      cursor: pointer;
      color: var(--text-interactive);
      font-size: 14px;
    }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._copyEmailSection_cyrdg_624 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 8px 0;
    }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._copyEmailSection_cyrdg_624 span._emailAddress_cyrdg_630 {
        font-weight: bold;
        font-size: var(--font-size-sm);
        color: var(--text);
        padding-right: 8px;
        word-wrap: break-word;
        font-family: var(--mono-font);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._copyEmailSection_cyrdg_624 button._copyEmailButton_cyrdg_642 {
        font: inherit;
        padding: 2px 10px;
        color: var(--blue-50);
        font-size: var(--font-size-sm);
        line-height: 20px;
        font-weight: var(--font-weight-medium);
        background: rgba(24, 90, 189, 0.06);
        border-radius: 48px;
        border: none;
        cursor: pointer;
        outline: inherit;
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 ._copyEmailSection_cyrdg_624 button._copyEmailButton_cyrdg_642:active {
          background: rgba(24, 90, 189, 0.2);
        }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476 button._sendReminderButton_cyrdg_661 {
      font: inherit;
      background: none;
      padding: 0;
      color: var(--blue-50);
      border: none;
      cursor: pointer;
      outline: inherit;
    }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476._isEmptyArticlesCategory_cyrdg_671 img {
        width: 295px;
        min-width: 295px;
        margin-left: -24px;
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476._isEmptyEmailsCategory_cyrdg_679 img {
        width: 295px;
        min-width: 295px;
        margin-left: -24px;
        margin-bottom: 27px;
      }
._panelContainer_cyrdg_446 ._emptyStateContent_cyrdg_476._isEmptyTweetsCategory_cyrdg_688 img {
        width: 295px;
        min-width: 295px;
        margin-left: -24px;
      }
._panelContainer_cyrdg_446:has(> .chatPanelContainer) {
  padding: 12px;
  padding-bottom: 12px;
}
._panelContainer_cyrdg_446:has(> .chatPanelContainer) + .trialMessageContainer,
    ._panelContainer_cyrdg_446:has(> .chatPanelContainer) + ._sidebar_cyrdg_4.trialMessageContainer {
      margin-top: 0;
    }
._panelContainer_cyrdg_446:has(> .chatPanelV2Container) {
  padding: 0;
  overflow: hidden;
}
._highlight_cyrdg_31 {
  padding: 0;
  position: relative;
}
._highlight_cyrdg_31 ._highlightMenuButton_cyrdg_719 {
    display: none;
    position: absolute;
    top: -12px;
    right: -12px;
  }
._highlight_cyrdg_31:hover ._highlightMenuButton_cyrdg_719,
  ._highlight_cyrdg_31 ._highlightMenuButton_cyrdg_719[aria-expanded="true"] {
    display: block;
  }
._highlight_cyrdg_31 ._highlightContentWrapper_cyrdg_731 {
    cursor: pointer;
    padding: 0 24px;
    margin: 0 -24px;

    /* Direct children only: the transcript span and the timestamp span. Non-transcript highlights
       render through HighlightMarkdownContent, which styles its own content. */
  }
._highlight_cyrdg_31 ._highlightContentWrapper_cyrdg_731 > span {
      margin: 0;
      font-size: var(--font-size-base);
      letter-spacing: var(--ls-9);
      color: var(--highlight-text-color);
      background-color: var(--highlight-background-color--normal);
      line-height: 1.4;
      margin-bottom: 8px;
    }
._highlight_cyrdg_31 ._highlightContentWrapper_cyrdg_731 :first-child {
      margin-top: 0;
    }
._highlight_cyrdg_31 ._highlightContentWrapper_cyrdg_731 :last-child {
      margin-bottom: 0;
    }
._highlight_cyrdg_31 ._highlightContentWrapper_cyrdg_731 ._highlightTimestamp_cyrdg_756 {
      margin-right: 3px;
      padding: 2px 4px 1px;
      border-radius: 4px;
      background: var(--u-alpha-200);
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
      line-height: 16px;
    }
._highlight_cyrdg_31 ._highlightContentWrapper_cyrdg_731 ._highlightTimestamp_cyrdg_756 svg {
        position: relative;
        bottom: 1.5px;
        max-height: 6px;
        color: var(--icon-secondary);
      }
._highlight_cyrdg_31 ._editTagsForm_cyrdg_774.hideAccessibly + ._notes_cyrdg_774 {
    margin-top: 8px;
  }
._highlight_cyrdg_31 ._notes_cyrdg_774 {
    font-size: var(--font-size-sm);
    line-height: 16px;
    color: var(--text-primary);
  }
._highlight_cyrdg_31 ._notes_cyrdg_774._hasTags_cyrdg_783 {
      margin-top: 0;
    }
._highlight_cyrdg_31 ._notes_cyrdg_774 > :first-child {
      margin-top: 0;
    }
._highlight_cyrdg_31 ._notes_cyrdg_774 > :last-child {
      margin-bottom: 0;
    }
._highlight_cyrdg_31 ._tagsContainer_cyrdg_216 {
    margin: 8px -8px;
  }
._fadeHighlight_cyrdg_801 {
  opacity: 0.7;
}
._innerContentDivider_cyrdg_805 {
  height: 1px;
  width: 20px;
  background: var(--border-primary);
  margin: 20px 0;
}
._titleContainer_cyrdg_812 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-height: 65px;
  border-bottom: 1px solid var(--border-secondary-alpha);
  padding: 0 24px;
}
._titleContainer_cyrdg_812 h1 {
    margin: 0;
    font-family: var(--ui-font);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -0.02em;
  }
._titleContainer_cyrdg_812._isEditMetadata_cyrdg_831 {
    padding: 0;
    margin: 0 24px;
  }
._titleContainer_cyrdg_812._isEditMetadata_cyrdg_831 h1 {
      font-size: 14px;
    }
._titleContainer_cyrdg_812 svg {
    fill: var(--icon-primary);
  }
._navContainer_cyrdg_845 {
  padding-left: var(--sidebar-padding-horizontal);
  padding-right: var(--sidebar-padding-horizontal);
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: flex-start;
  max-height: 64px;
  height: 100%;
}
._navContainer_cyrdg_845 ._toggleRightPanelWrapper_cyrdg_858 {
    cursor: pointer;
    margin-left: auto;
    padding-top: 1.4rem;
    padding-bottom: 1.24rem;
  }
._navContainer_cyrdg_845 ._toggleRightPanelWrapper_cyrdg_858 svg {
      width: 20px;
      min-width: 20px;
      height: 20px;
      min-height: 20px;
    }
._navContainer_cyrdg_845 ._toggleRightPanelWrapper_cyrdg_858 svg path {
      fill: var(--icon-secondary);
    }
._navContainer_cyrdg_845 ._navButton_cyrdg_876 {
    margin-right: 1.125rem;
    display: flex;
    align-items: center;
    z-index: 2;
    border-bottom: 1px solid transparent;
    height: 66px;
    white-space: nowrap;
  }
._navContainer_cyrdg_845 ._active_cyrdg_886 {
    border-bottom: 1px solid var(--icon-primary);
  }
._navContainer_cyrdg_845 ._active_cyrdg_886 button {
      font-weight: 550;
      color: var(--text-primary);
      letter-spacing: -0.015em;
    }
._navContainer_cyrdg_845 button {
    background: none;
    outline: none;
    border: none;
    cursor: pointer;
    font-family: var(--ui-font);
    font-size: var(--font-size-base);
    line-height: 1.5;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1.4rem;
    padding-bottom: 1.3rem;
    color: var(--text-secondary);
    letter-spacing: -0.011em;
    margin: 0;
  }
._dividerWrapper_cyrdg_914 {
  width: 100%;
  position: absolute;
  top: 65px;
  z-index: 1;
  padding: 0 var(--sidebar-padding-horizontal);
}
._divider_cyrdg_914 {
  background: var(--border-secondary);
  width: 100%;
  height: 1px;
}
._showSidebar_cyrdg_21 {
  transform: none;
}
@media (min-width: 1080px) {
._showSidebar_cyrdg_21 {
    width: var(--right-sidebar-width);
    min-width: var(--right-sidebar-width);
    border-left: 1px solid var(--border-tertiary-alpha);
    overflow: visible;
}
  }
/* Pinned at the open-state width so panel content doesn't re-wrap as the
   outer .sidebar's width animates to 0; combined with .sidebar's
   overflow:hidden this slides content off-screen instead of squeezing it. */
._sidebarInner_cyrdg_942 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  width: var(--right-sidebar-width);
  min-width: var(--right-sidebar-width);
  height: 100%;
  /* Containing block for absolutely-positioned descendants, so their % widths
     resolve against the pinned inner — not the shrinking outer .sidebar. */
  position: relative;
  opacity: 1;
  transition: opacity var(--panels-transition-time) ease-in-out;
}
._sidebarInnerHidden_cyrdg_957 {
  opacity: 0;
}
/* Pin direct children too — the .sidebar prefix is needed to beat the
   nested `.sidebar .bottom { min-width: 0 }` rule above.
   Exclude the trial notice: pinning it to the full width overrides its
   flex-stretch sizing, so its horizontal margins overflow on the right. */
._sidebar_cyrdg_4 ._sidebarInner_cyrdg_942 > *:not(.trialMessageContainer) {
  min-width: var(--right-sidebar-width);
}
._sidebarReaderView_cyrdg_969 {
  display: flex;
}
._authorInfo_cyrdg_973 {
  margin-bottom: var(--s2);
}
._hidden_cyrdg_977 {
  transition: filter var(--panels-transition-time) ease-in;
  filter: opacity(0);
  pointer-events: none;
  max-width: 0;
}
._documentRssSubBtn_cyrdg_984 {
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
  margin: 0;
  border-radius: 19px;
  border: none;
  background-color: var(--btn-secondary);
  border: 1px solid var(--border-secondary-alpha);
  color: var(--text-primary);
  font-size: .75rem;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
._documentRssSubBtn_cyrdg_984._subscribed_cyrdg_1000 {
    background-color: unset;
  }
._documentRssSubBtn_cyrdg_984._subscribed_cyrdg_1000::after {
      content: "Subscribed" !important;
    }
._documentRssSubBtn_cyrdg_984._subscribed_cyrdg_1000._unsubscribable_cyrdg_1005:hover::after {
        content: "Unsubscribe" !important;
        color: var(--text-error);
      }
._staticSVG_cyrdg_1015 {
  animation-play-state: paused;
}
._staticSVG_cyrdg_1015 g {
    animation-play-state: paused;
  }
._staticSVG_cyrdg_1015 g path {
      animation-play-state: paused;
    }
._animateSVG_cyrdg_1027 {
  animation-play-state: running;
}
._animateSVG_cyrdg_1027 g {
    animation-play-state: running;
  }
._animateSVG_cyrdg_1027 g path {
      animation-play-state: running;
    }
._a0_o_animation_cyrdg_1039 {
  /* white-space: pre; animation: 1.733s linear both a0_o;*/
  white-space: pre;
  animation: 1.733s linear both _a0_o_cyrdg_1039;
}
._a2_t_animation_cyrdg_1045 {
  animation: 1.733s linear both _a2_t_cyrdg_1045;
}
._a1_t_animation_cyrdg_1049 {
  animation: 1.733s linear both _a1_t_cyrdg_1049, 1.733s linear both _a1_o_cyrdg_1;
}
._a4_t_animation_cyrdg_1053 {
  animation: 1.733s linear both _a4_t_cyrdg_1053;
}
._a3_t_animation_cyrdg_1057 {
  animation: 1.733s linear both _a3_t_cyrdg_1057, 1.733s linear both _a3_o_cyrdg_1;
}
._a6_t_animation_cyrdg_1061 {
  animation: 1.733s linear both _a6_t_cyrdg_1061;
}
._a7_t_animation_cyrdg_1065 {
  animation: 1.733s linear both _a7_t_cyrdg_1065;
}
._a5_t_animation_cyrdg_1069 {
  animation: 1.733s linear both _a5_t_cyrdg_1069, 1.733s linear both _a5_o_cyrdg_1;
}
._a8_t_animation_cyrdg_1073 {
  animation: 1.733s linear both _a8_t_cyrdg_1073;
}
._a9_t_animation_cyrdg_1077 {
  animation: 1.733s linear both _a9_t_cyrdg_1077;
}
._check_t_animation_cyrdg_1081 {
  animation: 1.733s linear both _check-2_t_cyrdg_1, 1.733s linear both _check-2_o_cyrdg_1;
}
@keyframes _a0_o_cyrdg_1039 {
  0% {
    opacity: 1;
  }
  5.7703% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes _a2_t_cyrdg_1045 {
  0% {
    transform: translate(6.58544px, 4.657081px);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }
  11.5406% {
    transform: translate(6.58544px, 6.657081px);
  }
  57.7034% {
    transform: translate(6.585465px, 4.657056px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  100% {
    transform: translate(6.585465px, 4.657056px);
  }
}
@keyframes _a1_t_cyrdg_1049 {
  0% {
    transform: rotate(0deg) translate(-8px, -8px);
    animation-timing-function: cubic-bezier(0.668692, -0.323797, 0.58, 1);
  }
  11.5406% {
    transform: rotate(110deg) translate(-8px, -8px);
  }
  57.7034% {
    transform: rotate(0deg) translate(-8px, -8px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  100% {
    transform: rotate(0deg) translate(-8px, -8px);
  }
}
@keyframes _a1_o_cyrdg_1 {
  0% {
    opacity: 1;
  }
  8.6555% {
    opacity: 0;
  }
  57.7034% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  100% {
    opacity: 1;
  }
}
@keyframes _a4_t_cyrdg_1053 {
  0% {
    transform: translate(6.58544px, 4.657081px);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }
  11.5406% {
    transform: translate(6.58544px, 6.657081px);
  }
  57.7034% {
    transform: translate(6.585465px, 4.657056px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  100% {
    transform: translate(6.585465px, 4.657056px);
  }
}
@keyframes _a3_t_cyrdg_1057 {
  0% {
    transform: rotate(-0.267408deg) translate(-8px, -8px);
    animation-timing-function: cubic-bezier(0.650029, -0.341485, 0.58, 1);
  }
  11.5406% {
    transform: rotate(110deg) translate(-8px, -8px);
  }
  57.7034% {
    transform: rotate(0deg) translate(-8px, -8px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  100% {
    transform: rotate(0deg) translate(-8px, -8px);
  }
}
@keyframes _a3_o_cyrdg_1 {
  0% {
    opacity: 1;
  }
  5.7703% {
    opacity: 0;
  }
  57.7034% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  100% {
    opacity: 1;
  }
}
@keyframes _a6_t_cyrdg_1061 {
  0% {
    transform: translate(6.58544px, 4.657081px);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }
  11.5406% {
    transform: translate(6.58544px, 6.657081px);
  }
  57.7034% {
    transform: translate(6.585465px, 4.657056px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  100% {
    transform: translate(6.585465px, 4.657056px);
  }
}
@keyframes _a7_t_cyrdg_1065 {
  0% {
    transform: rotate(1.37112deg);
    animation-timing-function: cubic-bezier(0.689236, -0.34284, 0.461372, 0.956269);
  }
  11.5406% {
    transform: rotate(111.37112deg);
  }
  57.7034% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes _a5_t_cyrdg_1069 {
  0% {
    transform: scale(1, 1) translate(-8px, -8px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  7.6745% {
    transform: scale(1.189681, 1.172273) translate(-8px, -8px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.969798, 0.235759);
  }
  13.4448% {
    transform: scale(1, 1) translate(-8px, -8px);
  }
  57.7034% {
    transform: scale(1, 1) translate(-8px, -8px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  100% {
    transform: scale(1, 1) translate(-8px, -8px);
  }
}
@keyframes _a5_o_cyrdg_1 {
  0% {
    opacity: 1;
  }
  9.6365% {
    opacity: 0;
  }
  57.7034% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  100% {
    opacity: 1;
  }
}
@keyframes _a8_t_cyrdg_1073 {
  0% {
    transform: translate(8.96673px, 5.20561px);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }
  16.4454% {
    transform: translate(8.96673px, 7.20561px);
  }
  48.0669% {
    transform: translate(8.96673px, 7.20561px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  84.6508% {
    transform: translate(8.96673px, 7.20561px);
  }
  100% {
    transform: translate(8.96673px, 7.20561px);
  }
}
@keyframes _a9_t_cyrdg_1077 {
  0% {
    transform: rotate(1.37112deg);
    animation-timing-function: cubic-bezier(0.689236, -0.34284, 0.461372, 0.956269);
  }
  16.4454% {
    transform: rotate(111.37112deg);
  }
  48.0669% {
    transform: rotate(111.37112deg);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  84.6508% {
    transform: rotate(111.37112deg);
  }
  100% {
    transform: rotate(111.37112deg);
  }
}
@keyframes _check-2_t_cyrdg_1 {
  0% {
    transform: scale(1, 1) translate(-8px, -8px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  10.9636% {
    transform: scale(1.189681, 1.172273) translate(-8px, -8px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.969798, 0.235759);
  }
  19.2152% {
    transform: scale(1, 1) translate(-8px, -8px);
  }
  48.0669% {
    transform: scale(1, 1) translate(-8px, -8px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  84.6508% {
    transform: scale(1, 1) translate(-8px, -8px);
  }
  100% {
    transform: scale(1, 1) translate(-8px, -8px);
  }
}
@keyframes _check-2_o_cyrdg_1 {
  0% {
    opacity: 0;
  }
  5.4818% {
    opacity: 0;
  }
  17.311% {
    opacity: 1;
  }
  19.2152% {
    opacity: 1;
  }
  21.1771% {
    opacity: 1;
  }
  48.0669% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  84.6509% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
._safariIcon_cyrdg_1361 {
  height: 16px;
}
._emptyStateSidebarOverlay_cyrdg_1365 {
  background: var(--background-backdrop);
}
._notebookPanel_cyrdg_1369 {
  height: 100%;
}
._notebookPanel_cyrdg_1369 ._title_cyrdg_308 {
    font-family: 'Inter VF';
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: 16px;
    color: var(--text-secondary);
    margin: 0;
    margin-bottom: 8px;
    padding: 8px 0;
  }
._notebookPanel_cyrdg_1369 ._title_cyrdg_308._documentNoteTitle_cyrdg_1382 {
      padding-top: 0;
    }
._notebookPanel_cyrdg_1369 ._higlightsContainer_cyrdg_1387 {
    margin-top: 24px;
  }
._notebookPanel_cyrdg_1369 ._higlightsContainer_cyrdg_1387 ._emptyHighlights_cyrdg_1390 p {
      margin: 0;
      font-size: 14px;
      color: var(--text-tertiary);
      letter-spacing: -0.08px;
      line-height: 16px;
    }
._editTagsForm_cyrdg_774 {
  margin-left: -16px;
  width: calc(100% + 16px);
}
._editTagsForm_cyrdg_774.hideAccessibly + ._editNoteForm_cyrdg_1405 {
  margin-top: 4px;
}
._pseudoFocusUnit_cyrdg_1409 {
  position: relative;
}
._pseudoFocusUnit_cyrdg_1409:focus,
  ._pseudoFocusUnit_cyrdg_1409:focus-visible {
    outline: none;
  }
._pseudoFocusUnit_cyrdg_1409 ._pseudoFocusUnitBorder_cyrdg_1417 {
    display: none;
    position: absolute;
    top: -8px;
    right: -11px;
    bottom: -8px;
    left: -11px;
    border-radius: 8px;
    border: 2px solid var(--border-focus);
    pointer-events: none;
    z-index: -1;
  }
._pseudoFocusUnit_cyrdg_1409:focus-within ._pseudoFocusUnitBorder_cyrdg_1417 {
    display: block;
  }
._documentNotePseudoFocusUnit_cyrdg_1435:has(textarea:focus) ._pseudoFocusUnitBorder_cyrdg_1417 {
    background: var(--metadata-input-background);
  }
._documentNotePseudoFocusUnit_cyrdg_1435:has(textarea:empty:not(:focus))::after {
      content: ' ';
      position: absolute;
      top: -8px;
      right: -11px;
      bottom: -8px;
      left: -11px;
      background: var(--u-alpha-100);
      border-radius: 8px;
      z-index: -1;
    }
._highlightPseudoFocusUnit_cyrdg_1455 {
  margin-bottom: 8px;
}
._highlightPseudoFocusUnit_cyrdg_1455:has(textarea:focus) ._pseudoFocusUnitBorder_cyrdg_1417 {
    background: var(--background-primary);
  }
._loadMoreContainer_cyrdg_1465 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 0 24px;
}
._loadMoreCount_cyrdg_1473 {
  font-size: 12px;
  color: var(--text-tertiary);
}
._ghostAnimation_cyrdg_1478 {
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(1);
  transition: top 250ms ease-out, right 250ms ease-out, transform 250ms ease-out;
}
._ghostAnimation_cyrdg_1478._generating_cyrdg_1485 {
    top: 50px;
    right: 50%;
    transform: scale(1.2);
  }
._developerSection_cyrdg_1492 > * {
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
  }
._chatLink_cyrdg_1500 {
  background: green;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}
._chatLink_cyrdg_1500:hover {
    opacity: 0.9;
  }
._chatLink_cyrdg_1500:active {
    position: relative;
    top: 1px;
  }
/* This tells Safari to render animations with the GPU instead of the CPU */

/* More info: */

/* https://michaeluloth.com/css-translate-z/ */

/* https://x.com/andyngo/status/1263056084719202304 */

._summary_cgk2a_3 {
  position: relative;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  opacity: 1;
  -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%;
}

._summary_cgk2a_3._hide_cgk2a_30 {
    animation: _summary-hide_cgk2a_1 .5s ease-out forwards;
    transition: height 0.25s ease-out;
  }

._summary_cgk2a_3._show_cgk2a_35 {
    animation: _summary-show_cgk2a_1 .5s ease-out forwards;
    transition: height 0.25s ease-out;
  }

._summary_cgk2a_3 ._summarizationHint_cgk2a_40 {
    display: inline-block;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--spacer-2);
  }

@keyframes _summary-hide_cgk2a_1 {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  50% {
    opacity: 0;
  }

  to {
    opacity: 0;
    transform: translateY(15px);
  }
}

@keyframes _summary-show_cgk2a_1 {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }

  50% {
    opacity: 0;
  }

  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

  ._metadataSidebar_11awc_1 button:focus-visible,
  ._metadataSidebar_11awc_1 button:focus-within,
  ._metadataSidebar_11awc_1 button:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }

._documentMetadata_11awc_10 {
  display: flex;
  flex-direction: column;
  padding-bottom: 100px;
}

._documentMetadata_11awc_10._hidden_11awc_15 {
    transition: filter var(--panels-transition-time) ease-in;
    filter: opacity(0);
    pointer-events: none;
  }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 {
    margin-bottom: 20px;
    width:100%;
  }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._label_11awc_25 {
      color: var(--text-secondary);
      display: block;
      margin-bottom: 4px;
      font-weight: 500;
      font-size: 12px;
      height: 16px;
    }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._summaryHeader_11awc_34 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      margin-bottom: 4px;
    }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 input {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 textarea {
      resize: none;
    }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 input, ._documentMetadata_11awc_10 ._metadataItem_11awc_21 textarea {
      border: none;
      background: var(--metadata-input-background);
      box-shadow: 0 0 0 1px var(--border-secondary);
      border-radius: 4px;
      padding: 6px 8px;
      font-family: var(--ui-font);
      color: var(--text-primary);
      margin-top: 0;
      font-size: 0.8125rem;
      line-height: 1.125rem;
      width: 100%;
      outline: none;
      transition: box-shadow 0.2s ease-in-out;
    }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 input:focus, ._documentMetadata_11awc_10 ._metadataItem_11awc_21 textarea:focus {
        box-shadow: 0 0 0 2px var(--border-focus);
      }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._tagsContainer_11awc_72 button {
        margin-right: 4px;
        margin-top: 4px;
      }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._tagsContainer_11awc_72 button._removedTag_11awc_77 {
          opacity: .5;
        }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._readOnlyField_11awc_83 {
      position: relative;
    }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._readOnlyField_11awc_83 input {
        border: none;
        background: transparent;
        cursor: not-allowed;
        box-shadow: 0 0 0 1px var(--border-secondary);
      }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._readOnlyField_11awc_83 input:focus {
          box-shadow: 0 0 0 1px var(--border-secondary);
        }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._readOnlyField_11awc_83 svg {
        position: absolute;
        right: 8px;
        top: 8px;
      }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._readOnlyField_11awc_83 svg * {
          fill: var(--icon-secondary);
        }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._progressWrapper_11awc_108 {
      display: flex;
      align-items: center;
    }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._progressWrapper_11awc_108 input {
        max-width: 107px;
      }

._documentMetadata_11awc_10 ._metadataItem_11awc_21 ._progressWrapper_11awc_108 button {
        margin-left: 8px;
      }

._documentMetadataOverlay_11awc_123 {
  background: var(--background-backdrop);
  z-index: 101;
}

._saveButton_11awc_128 {
  background: var(--icon-interactive);
  color: var(--icon-inverse) !important;
  font-weight: 500;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  border: 0;
  cursor: pointer;
  margin-left: auto;
}

._saveButton_11awc_128._isDisabled_11awc_139 {
    opacity: .5;
    background: var(--default-button-background);
    color: var(--text-disabled) !important;
    pointer-events: none;
  }

._ghostAnimation_11awc_147 {
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(1);
  transition: top 250ms ease-out, right 250ms ease-out, transform 250ms ease-out;
}

._ghostAnimation_11awc_147._generating_11awc_154 {
    top: 50px;
    right: 50%;
    transform: scale(1.2);
  }._editableImage_sq7h6_1 {
  position: relative;
  --editableImage-width: 91px;
  --editableImage-height: 91px;
}
._editableImage_sq7h6_1 ._label_sq7h6_6 {
    color: var(--text-secondary);
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 12px;
    height: 16px;
  }
._editableImage_sq7h6_1 > button {
    border: 0;
    padding: 0;
    background: transparent;
    border-radius: 4px;
    width: var(--editableImage-width);
    max-width: var(--editableImage-width);
    height: var(--editableImage-height);
    box-shadow: 0 0 0 1px var(--border-secondary);
  }
._editableImage_sq7h6_1 > button button:focus-visible ._imageWrapper_sq7h6_28, ._editableImage_sq7h6_1 > button button:focus-within ._imageWrapper_sq7h6_28, ._editableImage_sq7h6_1 > button button:focus ._imageWrapper_sq7h6_28, ._editableImage_sq7h6_1 > button button:focus-visible ._placeholder_sq7h6_28, ._editableImage_sq7h6_1 > button button:focus-within ._placeholder_sq7h6_28, ._editableImage_sq7h6_1 > button button:focus ._placeholder_sq7h6_28 {
        box-shadow: none;
      }
._editableImage_sq7h6_1 ._image_sq7h6_28 {
    background-size: var(--editableImage-width) var(--editableImage-width);
    background-size: cover;
    width: var(--editableImage-width);
    height: var(--editableImage-width);
  }
._editableImage_sq7h6_1 ._imageWrapper_sq7h6_28 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    border-radius: 4px;
  }
._editableImage_sq7h6_1 ._imageOverlay_sq7h6_50 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 500;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    cursor: pointer;
    border-radius: 4px;
  }
._editableImage_sq7h6_1 ._placeholder_sq7h6_28 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 12px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 4px;
    max-width: var(--editableImage-width);
    height: var(--editableImage-height);
  }
._editableImage_sq7h6_1 ._placeholder_sq7h6_28 svg {
      fill: var(--text-secondary);
    }
._editableImage_sq7h6_1:hover ._imageOverlay_sq7h6_50 {
      visibility: visible;
    }
._editableImage_sq7h6_1 ._menu_sq7h6_95 {
    position: absolute;
    width: 100%;
    background: var(--background-primary);
    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);
    border-radius: 8px;
    top: calc(var(--editableImage-height) + 6px);
    padding: 1em;
    z-index: 3;
  }
._editableImage_sq7h6_1 ._menu_sq7h6_95 ._buttons_sq7h6_105 {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;
    }
._editableImage_sq7h6_1 ._menu_sq7h6_95 ._buttons_sq7h6_105 button {
        border-radius: 48px;
        margin-left: 15px;
        color: var(--text-primary);
        padding: 6px 12px;
        font-size: 0.8rem;
      }
._select-root_1reod_1 {
    width: 100%;
    color: var(--text-primary);
    display: block;
    height: 34px;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    font-family: var(--ui-font);
}

._select-root_1reod_1 .select__input,
    ._select-root_1reod_1 .select__input--is-focused {
      box-shadow: none !important;
    }

._select-root_1reod_1 .select__single-value {
        padding-left: 0;
    }

._select-root_1reod_1 .select__single-value svg {
            display: none;
        }

._select-root_1reod_1 .select__placeholder {
        color: var(--text-primary);
    }

._select-root_1reod_1 .select__value-container {
        min-height: 32px;
        height: 32px;
    }

._select-root_1reod_1 .select__control {
        box-shadow: 0 0 0 1px var(--border-secondary);
    }

._select-root_1reod_1 .select__control--is-focused {
        box-shadow: 0 0 0 2px var(--border-focus);
    }

._select-root_1reod_1 .select__control--is-focused .select__placeholder {
            color: var(--text-secondary);
        }

._select-root_1reod_1 .select__control,
    ._select-root_1reod_1 .select__control--is-focused{
        cursor: text;
        min-height: 30px;
        height: 30px;
        border: none;
        background-color: var(--metadata-input-background);
        border-radius: 4px;
    }

._select-root_1reod_1 .select__indicator-separator {
        display: none;
    }

._select-root_1reod_1 .select__indicator,
    ._select-root_1reod_1 .select__dropdown-indicator {
        cursor: pointer;
        padding: 0;
    }

._select-root_1reod_1 .select__indicators {
        position: absolute;
        right: 10px;
        top: 10px;
    }

._select-root_1reod_1 .select__indicators svg {
            height: 12px;
            width: 12px;
            fill: var(--icon-secondary);
            margin-left: 12px;
          }

._select-root_1reod_1 .select__menu {
        background: var(--popover-background);
        padding: 4px 0px 4px 0px;
        border-radius: 8px;
      }

._select-root_1reod_1 .select__menu-list {
        max-height: 150px;
        overflow-y: scroll;
      }

._select-root_1reod_1 .select__menu-option {
        margin-left: 12px;
        min-height: 32px;
        height: 32px;
    }

._select-root_1reod_1 .select__option {
        cursor: pointer;
    }

._select-root_1reod_1 .select__option--is-focused {
        background: var(--edit-tags-form-focused-option-background);
    }

._select-root_1reod_1 .select__option--is-selected {
        background-color: var(--metadata-input-background);
        color: var(--text-primary);
    }

._checked-icon_1reod_104 {
    height: 10px;
    width: 10px;
    margin-right: 10px;
}

._option-label_1reod_110 {
    padding-left: 20px;
}
._dropdownContent_js9bf_1 {
  margin-right: 10px;
}
._triggerElement_5tlek_1 {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  padding: 0 !important;
  margin-left: auto !important;
  background: var(--icon-secondary);
  border-radius: 100%;
}

._triggerElement_5tlek_1 svg * {
    fill: var(--icon-inverse);
  }

._dropdownContent_5tlek_16 {
  width: 252px;
  line-height: 0;
}

._desktopAppIcon_5tlek_21 {
  height: 24px;
  width: 24px;
}

._appLinksWrapper_5tlek_26 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 42px;
  gap: 8px;
}

._appLinksWrapper_5tlek_26 a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 32px;
    border: 1px solid var(--border-secondary-alpha);
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
  }

._appLinksWrapper_5tlek_26 a svg {
      margin-right: 4px;
    }

._appLinksWrapper_5tlek_26 a svg * {
        fill: var(--icon-tertiary);
      }
._handleWrapper_efz0e_1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  height: 6px;
  -webkit-user-select: none;
          user-select: none;
}

._handleWrapper_efz0e_1:hover,
  ._handleWrapper_efz0e_1._isDragging_efz0e_11 {
    cursor: row-resize;
  }

._handleWrapper_efz0e_1:hover ._handle_efz0e_1, ._handleWrapper_efz0e_1._isDragging_efz0e_11 ._handle_efz0e_1 {
      width: 100px;
      background: var(--border-primary);
    }

._handle_efz0e_1 {
  width: 80px;
  height: 4px;
  border-radius: 24px;
  background: var(--border-secondary);
  transition-property: width, background;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

._handleWrapperHorizontal_efz0e_31 {
  height: 100%;
  width: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  -webkit-user-select: none;
          user-select: none;
  position: absolute;
  left: -4px;
  top: 0;
  z-index: 102;
  outline: none;
}

._handleWrapperHorizontal_efz0e_31._isDragging_efz0e_11 {
    cursor: ew-resize;
  }

._handleWrapperHorizontal_efz0e_31 ._handleHorizontal_efz0e_50 {
    height: 100%;
    width: 2px;
    background: transparent;
    transition: background 100ms ease;
  }

._handleWrapperHorizontal_efz0e_31:hover ._handleHorizontal_efz0e_50, ._handleWrapperHorizontal_efz0e_31._isDragging_efz0e_11 ._handleHorizontal_efz0e_50 {
      background: var(--icon-interactive) !important;
    }

/* Prevent iframes from capturing mouse events during resize drag */
body.resize-dragging iframe {
  pointer-events: none !important;
}
._trialMessageContainer_1bvlw_1 {
  border-radius: 48px;
  background-color: var(--background-canvas);
  border: 1px solid var(--border-secondary-alpha);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  line-height: 20px;
}

._trialMessageContainer_1bvlw_1,
  ._trialMessageContainer_1bvlw_1._sidebar_1bvlw_11 {
    margin: 12px;
  }

._trialMessageContainer_1bvlw_1 a {
    color: var(--text-interactive);
    text-decoration: underline;
    cursor: pointer;
  }

._sidebar_1bvlw_11 {
  padding: 12px 16px;
  border-radius: 8px;
  margin: 8px;
  background-color: var(--background-tertiary);
}

._endingSoon_1bvlw_29 {
  background-color: var(--background-error);
  border: 1px solid var(--border-error);
}


._chatMessage_kin16_3 {
  overflow-x: hidden;

  padding: 12px;

  color: var(--text-primary);

  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

._chatMessage_kin16_3:not(._chatMessageRequest_kin16_15) {
    padding-inline: 0;
  }

._chatMessageRequest_kin16_15 {
  align-self: flex-end;
  background: var(--default-button-background);
  max-width: -webkit-fit-content;
  max-width: fit-content;
  border-radius: 5px;
}

._chatMessageContent_kin16_27 *, ._messageFocusedSnippetDisplay_kin16_28 * {
    all: revert;
    margin: 0;
    margin-bottom: 16px;
  }

._chatMessageContent_kin16_27 > :first-child, ._messageFocusedSnippetDisplay_kin16_28 > :first-child {
    padding-top: 0;
    margin-top: 0;
  }

._chatMessageContent_kin16_27 > :last-child, ._messageFocusedSnippetDisplay_kin16_28 > :last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }

._chatMessageContent_kin16_27 a, ._messageFocusedSnippetDisplay_kin16_28 a {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    -webkit-text-decoration-style: solid;
            text-decoration-style: solid;
    -webkit-text-decoration-skip: ink;
            text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

._chatMessageContent_kin16_27 a,
    ._messageFocusedSnippetDisplay_kin16_28 a,
    ._chatMessageContent_kin16_27 a:visited,
    ._messageFocusedSnippetDisplay_kin16_28 a:visited {
      color: var(--text-interactive);
    }

._chatMessageContent_kin16_27 a._internalLink_kin16_58, ._messageFocusedSnippetDisplay_kin16_28 a._internalLink_kin16_58 {
      -webkit-text-decoration-style: dotted;
              text-decoration-style: dotted;
    }

._chatMessageContent_kin16_27 blockquote, ._messageFocusedSnippetDisplay_kin16_28 blockquote {

    padding-left: 12px;
    margin: 0;
    line-height: 24px;
    border-left: 4px solid var(--text-interactive);
  }

._chatMessageContent_kin16_27 blockquote,
    ._messageFocusedSnippetDisplay_kin16_28 blockquote,
    ._chatMessageContent_kin16_27 blockquote:first-child,
    ._messageFocusedSnippetDisplay_kin16_28 blockquote:first-child,
    ._chatMessageContent_kin16_27 blockquote:last-child,
    ._messageFocusedSnippetDisplay_kin16_28 blockquote:last-child {
      padding-block: 8px;
    }

._chatMessageContent_kin16_27 blockquote > :first-child, ._messageFocusedSnippetDisplay_kin16_28 blockquote > :first-child {
      padding-top: 0;
      margin-top: 0;
    }

._chatMessageContent_kin16_27 blockquote > :last-child, ._messageFocusedSnippetDisplay_kin16_28 blockquote > :last-child {
      padding-bottom: 0;
      margin-bottom: 0;
    }

._chatMessageContent_kin16_27 h1,
  ._messageFocusedSnippetDisplay_kin16_28 h1,
  ._chatMessageContent_kin16_27 h2,
  ._messageFocusedSnippetDisplay_kin16_28 h2,
  ._chatMessageContent_kin16_27 h3,
  ._messageFocusedSnippetDisplay_kin16_28 h3,
  ._chatMessageContent_kin16_27 h4,
  ._messageFocusedSnippetDisplay_kin16_28 h4,
  ._chatMessageContent_kin16_27 h5,
  ._messageFocusedSnippetDisplay_kin16_28 h5,
  ._chatMessageContent_kin16_27 h6,
  ._messageFocusedSnippetDisplay_kin16_28 h6 {
    margin-bottom: 8px;
    padding: 0;
    font-weight: 600;
    line-height: normal;
  }

._chatMessageContent_kin16_27 h1,
  ._messageFocusedSnippetDisplay_kin16_28 h1,
  ._chatMessageContent_kin16_27 h2,
  ._messageFocusedSnippetDisplay_kin16_28 h2 {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 21.78px;
  }

._chatMessageContent_kin16_27 h3,
  ._messageFocusedSnippetDisplay_kin16_28 h3,
  ._chatMessageContent_kin16_27 h4,
  ._messageFocusedSnippetDisplay_kin16_28 h4,
  ._chatMessageContent_kin16_27 h5,
  ._messageFocusedSnippetDisplay_kin16_28 h5,
  ._chatMessageContent_kin16_27 h6,
  ._messageFocusedSnippetDisplay_kin16_28 h6 {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 16.94px;
  }

._chatMessageContent_kin16_27 img, ._messageFocusedSnippetDisplay_kin16_28 img {
    max-width: 100%;
  }

._chatMessageContent_kin16_27 p, ._messageFocusedSnippetDisplay_kin16_28 p {
    margin-block: 16px;
  }

._chatMessageContent_kin16_27 ol,
  ._messageFocusedSnippetDisplay_kin16_28 ol,
  ._chatMessageContent_kin16_27 ul,
  ._messageFocusedSnippetDisplay_kin16_28 ul {
    margin: 0;
    padding: 0;
    /* Needs enough room for various `list-style`s (e.g. the browser can decide to use cjk-ideographic) */
    padding-left: 27px;
  }

._chatMessageContent_kin16_27 ol ::marker, ._messageFocusedSnippetDisplay_kin16_28 ol ::marker, ._chatMessageContent_kin16_27 ul ::marker, ._messageFocusedSnippetDisplay_kin16_28 ul ::marker {
      font-weight: 600;
    }

._chatMessageContent_kin16_27 ol ol,
    ._messageFocusedSnippetDisplay_kin16_28 ol ol,
    ._chatMessageContent_kin16_27 ul ol,
    ._messageFocusedSnippetDisplay_kin16_28 ul ol,
    ._chatMessageContent_kin16_27 ol ul,
    ._messageFocusedSnippetDisplay_kin16_28 ol ul,
    ._chatMessageContent_kin16_27 ul ul,
    ._messageFocusedSnippetDisplay_kin16_28 ul ul {
      padding-left: 12px;
    }

._chatMessageContent_kin16_27 li, ._messageFocusedSnippetDisplay_kin16_28 li {
    margin-block: 8px;
  }

._chatMessageContent_kin16_27 li > p:last-child, ._messageFocusedSnippetDisplay_kin16_28 li > p:last-child {
      margin-bottom: 0;
    }

._messageFocusedSnippetDisplay_kin16_28 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-self: stretch;

  margin: 0;
  margin-top: 5px;

  overflow: hidden;
  color: var(--text-secondary);

  color: var(--text-secondary);
  text-overflow: ellipsis;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 16px;
}

._chatMessageActionsContainer_kin16_168 {
  align-self: stretch;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 8px;
  color: var(--icon-tertiary);
}

._chatMessageActionsContainer_kin16_168 button {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

._chatMessageActionsContainer_kin16_168 button:hover {
      color: var(--icon-primary);
    }

._chatMessageActionsContainer_kin16_168 button svg {
      width: 15.5px;
      height: 15.5px;
    }

._chatMessageDocumentNoteIcon_kin16_195 {
  transform: scale(1.1);
}

._chatMessageHighlightNoteIcon_kin16_199 {
  transform: scale(1.3);
}._container_1uk8k_1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

._content_1uk8k_8 {
  flex-grow: 1;
  width: 100%;

  overflow-y: auto;
}

._contentEmptyState_1uk8k_15 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
}

._contentEmptyState_1uk8k_15 * {
    margin: 0;
    text-align: center;
  }

._contentEmptyState_1uk8k_15 svg {
    color: #C66ED9;
  }

._contentEmptyState_1uk8k_15 p {
    padding-line: 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    color: var(--text-tertiary);
  }

._contentEmptyState_1uk8k_15 a {
    color: var(--text-interactive);
    text-decoration: none;
  }

._contentEmptyState_1uk8k_15 ._contentEmptyStateHeading_1uk8k_47 {
    padding-line: 4px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--text-primary);
  }

._staticPresetPromptsGroup_1uk8k_56 {
  width: 100%;
  border: 1px solid var(--border-secondary-alpha);
}

._staticPresetPromptsGroup_1uk8k_56,
  ._staticPresetPromptsGroup_1uk8k_56 button {
    border-radius: 8px;
  }

._staticPresetPromptsGroup_1uk8k_56 button {
    background: var(--background-elevated);
    border-bottom: 1px solid var(--border-secondary-alpha);
    justify-content: flex-start;
    text-align: left;
    padding: 16px;

    color: var(--text-primary);

    leading-trim: both;

    text-edge: cap;
    font-feature-settings: 'case' on;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

._staticPresetPromptsGroup_1uk8k_56 button:not([disabled]):hover {
      background: var(--u-alpha-100);
    }

._staticPresetPromptsGroup_1uk8k_56 button:focus-visible {
      position: relative;
      z-index: 1;
    }

._scrollToBottomButton_1uk8k_94 {
  display: none;
}

._messages_1uk8k_98 {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  gap: 16px;
  margin-top: 12px;
  padding-inline: 4px;
}

._pendingResponseIndicatorContainer_1uk8k_107 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

._pendingResponseIndicatorContainerText_1uk8k_114 {
  font-size: 14px;
  color: var(--text-secondary);

  background: linear-gradient(
    to right,
    var(--text-secondary) 0%,
    var(--text-primary) 20%,
    var(--text-secondary) 40%,
    var(--text-secondary) 100%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  animation: _shimmer-text_1uk8k_1 2.4s linear infinite;
}

._footer_1uk8k_131 {
  margin-top: 12px;
}

._errorMessage_1uk8k_135 {
  margin: 0;
  margin-bottom: 12px;
  padding-inline: 6px;
  color: var(--text-error);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

._messageForm_1uk8k_146 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;

  overflow: hidden;

  border: 2px solid var(--border-secondary-alpha);
  border-radius: 8px;

  padding: 8px;

  background: var(--component-text-input-background);

  color: var(--text-primary);
  font-feature-settings: 'case' on;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

._messageForm_1uk8k_146:focus,
  ._messageForm_1uk8k_146:has(:focus) {
    border-color: var(--border-focus);
  }

._focusedSnippetDisplay_1uk8k_175 {
  display: flex;
  padding: 6px;
  align-items: center;
  gap: 4px;
  align-self: stretch;

  border: 1px solid var(--border-secondary-alpha);
  border-radius: 4px;
}

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

._focusedSnippetDisplayContent_1uk8k_190 {
  flex: 1 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;

  margin: 0;
  padding: 0;

  color: var(--text-secondary);
  font-size: 10px;
  font-style: italic;
  font-weight: 500;
  line-height: 14px;

  leading-trim: both;

  text-edge: cap;
  text-overflow: ellipsis;
}

._focusedSnippetDisplayTextIcon_1uk8k_212 {
  width: 10.5px;
  height: 13.611px;
  flex-shrink: 0;
}

._focusedSnippetDisplayCloseIcon_1uk8k_218 {
  position: relative;
  top: 1px;
}

._messageFieldWrapper_1uk8k_223 {
  position: relative;
  width: 100%;
}

._messageFieldWrapper_1uk8k_223 > textarea,
._messageFieldWrapper_1uk8k_223::after {
  flex: 1;

  min-height: 42px;
  max-height: 40vh;

  padding: 0;
  padding-bottom: 16px;

  background: none;

  font-feature-settings: 'case' on;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

._messageFieldWithFakeCursor_1uk8k_247::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1.2em; /* Match line height */
  background-color: currentColor;
  animation: _blink_1uk8k_1 1s step-end infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes _blink_1uk8k_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

._messageFormButtonRow_1uk8k_269 {
  display: flex;
  flex-direction: row;
  align-self: stretch;
  justify-content: flex-end;
  gap: 1px;
  height: 24px; /* To prevent movement when preset prompts dropdown is hidden/shown */
}

._messageFormButtonRow_1uk8k_269:has(> :only-child) {
    justify-content: flex-end;
  }

._messageFormButtonRow_1uk8k_269 button {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;

    border-radius: 6px;
    border: 0;
    background: var(--component-button-neutral-subtle-background);

    color: var(--text-secondary);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;

    cursor: pointer;
  }

._messageFormButtonRow_1uk8k_269 button[disabled] {
      color: var(--text-disabled);
    }

._messageFormButtonRow_1uk8k_269 button[disabled],
      ._messageFormButtonRow_1uk8k_269 button[disabled][type="submit"]{
        background: var(--component-button-accent-subtle-background-disabled);
      }

._messageFormButtonRow_1uk8k_269 button[type="submit"] {
    padding: 4px;
    border-radius: 48px;
    background: var(--component-button-accent-subtle-background);
    color: var(--text-button-accent-subtle-text);
  }

._messageFormButtonRow_1uk8k_269 button[type="submit"][disabled] {
      color: var(--icon-disabled);
    }

._dropdownTriggerButtonIcon_1uk8k_321 {
  fill: currentColor;
  margin-right: -4px;
  transform: rotate(180deg);
}

._modelPickerTriggerIcon_1uk8k_327 {
  margin-right: 2px;
}

._dropdownContent_1uk8k_331 {
  min-width: 0;
  max-width: 256px;
}

._presetPromptsDropdownContent_1uk8k_336 {
  min-width: 0;
  width: 270px;
}

._dropdownItem_1uk8k_341 {
  font-feature-settings: 'case' on;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}


@keyframes _shimmer-text_1uk8k_1 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* Shared typography for assistant chat messages across global and document chat. */

._assistantMessageTypography_14o6x_3 > :first-child { margin-top: 0; }

._assistantMessageTypography_14o6x_3 > :last-child { margin-bottom: 0; }

._assistantMessageTypography_14o6x_3 p {
    margin: 0 0 8px;
  }

._assistantMessageTypography_14o6x_3 p:last-child { margin-bottom: 0; }

._assistantMessageTypography_14o6x_3 h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0 4px;
  }

._assistantMessageTypography_14o6x_3 ol, ._assistantMessageTypography_14o6x_3 ul {
    margin: 0 0 8px;
  }

._assistantMessageTypography_14o6x_3 ol ol, ._assistantMessageTypography_14o6x_3 ul ol, ._assistantMessageTypography_14o6x_3 ol ul, ._assistantMessageTypography_14o6x_3 ul ul { margin-bottom: 0; }

._assistantMessageTypography_14o6x_3 li {
    margin-bottom: 6px;
  }

._assistantMessageTypography_14o6x_3 li:last-child { margin-bottom: 0; }

._assistantMessageTypography_14o6x_3 li > p:last-child { margin-bottom: 0; }

._assistantMessageTypography_14o6x_3 blockquote {
    margin: 0 0 8px;
    padding: 4px 0 4px 12px;
    border-left: 3px solid var(--border-secondary-alpha);
  }

._assistantMessageTypography_14o6x_3 a {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    -webkit-text-decoration-style: solid;
            text-decoration-style: solid;
    -webkit-text-decoration-skip: ink;
            text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

._assistantMessageTypography_14o6x_3 a, ._assistantMessageTypography_14o6x_3 a:visited {
      color: var(--text-interactive);
    }

._assistantMessageTypography_14o6x_3 a._internalLink_14o6x_47, ._assistantMessageTypography_14o6x_3 a._internalLink_14o6x_47:visited {
      color: var(--text-primary);
      -webkit-text-decoration-style: dotted;
              text-decoration-style: dotted;
    }

._assistantMessageTypography_14o6x_3 strong { font-weight: 600; }

._assistantMessageTypography_14o6x_3 hr {
    border: none;
    border-top: 1px solid var(--border-tertiary-alpha);
    margin: 12px 0;
  }

._tableWrapper_14o6x_62 {
  margin: 0 0 8px;
  overflow-x: auto;
  max-width: 100%;
}

._tableWrapper_14o6x_62 table {
    border-collapse: collapse;
    font-size: inherit;
  }

._tableWrapper_14o6x_62 th, ._tableWrapper_14o6x_62 td {
    padding: 6px 10px;
    border: 1px solid var(--border-tertiary-alpha);
    text-align: left;
    vertical-align: top;
    word-break: normal;
    overflow-wrap: break-word;
  }

._tableWrapper_14o6x_62 th {
    font-weight: 600;
    background: var(--background-tertiary);
  }

._tableWrapper_14o6x_62 p {
    margin: 0;
  }
._micButton_16evj_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--icon-secondary);
  cursor: pointer;
}

._micButton_16evj_1:hover {
  background: rgba(110, 120, 130, 0.1);
}

._micButton_16evj_1 svg {
  display: block;
}

._micButtonRecording_16evj_21 {
  color: var(--text-error);
  background: rgba(229, 72, 77, 0.12);
  animation: _dictationPulse_16evj_1 1.4s ease-in-out infinite;
}

._micButtonRecording_16evj_21:hover {
  background: rgba(229, 72, 77, 0.18);
}

@keyframes _dictationPulse_16evj_1 {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}
/*
 * Animated Ghostreader mascot — replaces the static ghostreader-mascot PNGs.
 *
 * Structure (rendered by GhostreaderMascot.tsx):
 *   .ghost (root, sized by the call site)
 *     .aura  — 4 colour blobs drifting behind the body (gradient-mesh feel)
 *     .gbody — the breathing body, holds the inline SVG art
 *
 * The internal structural class names (.aura, .blob, .gbody, .layer-ghost,
 * .eyes, .pupil, .body-*) come from injected SVG markup, so they're matched
 * with :global() — but always as descendants of the hashed root, so nothing
 * leaks. Only the root + state/blink classes are module-scoped.
 *
 * Values baked here are the tuned defaults from the prototype.
 */

._ghost_mx6zw_5 {
  position: relative;
  overflow: visible;
  cursor: default;
}

/* the body breathes & leans — the aura is a sibling, so it does NOT bob with it */
._ghost_mx6zw_5 .gbody {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform, filter;
  animation: _breathe_mx6zw_1 4.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate;
  filter: drop-shadow(0 11px 13px rgba(120, 110, 160, 0.2));
  transition: filter 0.5s ease;
}
._ghost_mx6zw_5 .gbody svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
@keyframes _breathe_mx6zw_1 {
  0% { transform: translateY(1px) scale(1); }
  100% { transform: translateY(-4px) scale(1.015); }
}

/* the aura: container holds a static opacity; blobs drift forever */
._ghost_mx6zw_5 .aura {
  position: absolute;
  inset: -35.7%; /* -42% * auraSize 0.85 */
  z-index: 0;
  opacity: 0.92;
  filter: blur(17px);
  pointer-events: none;
}
._ghost_mx6zw_5 .aura .blob {
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  will-change: transform;
}
._ghost_mx6zw_5 .aura .b1 {
  left: -4%; top: 20%;
  background: radial-gradient(circle, #a6cbf5 0%, rgba(166, 203, 245, 0) 68%);
  animation: _blobA_mx6zw_1 4.5s ease-in-out infinite;
}
._ghost_mx6zw_5 .aura .b2 {
  right: -4%; top: 26%;
  background: radial-gradient(circle, #f2b2d6 0%, rgba(242, 178, 214, 0) 68%);
  animation: _blobB_mx6zw_1 5.5s ease-in-out infinite;
}
._ghost_mx6zw_5 .aura .b3 {
  left: 16%; top: -2%;
  background: radial-gradient(circle, #cfbdf2 0%, rgba(207, 189, 242, 0) 70%);
  animation: _blobC_mx6zw_1 6.5s ease-in-out infinite;
}
._ghost_mx6zw_5 .aura .b4 {
  left: 0%; top: 38%;
  width: 62%; height: 62%;
  background: radial-gradient(circle, #f9c9ae 0%, rgba(249, 201, 174, 0) 68%);
  animation: _blobD_mx6zw_1 6s ease-in-out infinite;
}
@keyframes _blobA_mx6zw_1 {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(10%, 6%) scale(1.12); }
  66% { transform: translate(4%, -5%) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes _blobB_mx6zw_1 {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-8%, 7%) scale(0.94); }
  66% { transform: translate(-3%, -6%) scale(1.14); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes _blobC_mx6zw_1 {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(7%, 9%) scale(1.08); }
  66% { transform: translate(-9%, 4%) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes _blobD_mx6zw_1 {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(6%, -7%) scale(1.1); }
  66% { transform: translate(-5%, 5%) scale(0.94); }
  100% { transform: translate(0, 0) scale(1); }
}

/* compact variant (small sidebar mount) — tighten the aura so it doesn't bloom */
._compact_mx6zw_108 .aura {
  inset: -22.1%; /* -26% * 0.85 */
  filter: blur(7px);
}

/* eyes / blink */
._ghost_mx6zw_5 .eyes {
  transform-box: fill-box;
  transform-origin: center;
}
._ghost_mx6zw_5 .pupil {
  transform-box: fill-box;
  transform-origin: center;
}
._blink_mx6zw_122 .eyes {
  animation: _blink_mx6zw_122 0.22s ease-in-out;
}
@keyframes _blink_mx6zw_122 {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.12); }
}

/* ---- appearance / comeback: aura arrives first, then the body rotates in ---- */
._comeback_mx6zw_131 .aura {
  animation: _entAuraIn_mx6zw_1 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}
._comeback_mx6zw_131 .layer-ghost {
  animation: _entRotIn_mx6zw_1 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
@keyframes _entAuraIn_mx6zw_1 {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 0.92; transform: scale(1); }
}
@keyframes _entRotIn_mx6zw_1 {
  from { opacity: 0; transform: rotate(6deg) translateY(8px); }
  to { opacity: 1; transform: rotate(0deg) translateY(0); }
}

/* ---- fly-off ↗ on click ---- The body fly-off itself is driven via the Web
   Animations API (see GhostreaderMascot.tsx) so it starts from the current
   breathe position; here we only fade the aura out a beat later. ---- */
._flyOff_mx6zw_149 .aura {
  animation: _auraOut_mx6zw_1 0.6s cubic-bezier(0.5, 0, 0.75, 0) 0.2s both;
}
@keyframes _auraOut_mx6zw_1 {
  from { opacity: 0.92; transform: scale(1); }
  to { opacity: 0; transform: scale(0.5); }
}

/* clickable when interactive, but keep the default cursor (no pointer affordance) */
._interactive_mx6zw_158 {
  cursor: default;
}

/* ---------- dark theme: neutral-grey translucent body + purple aura ----------
   Mirrors the repo's existing light/dark swap convention (the static PNG used
   :global(html.theme--dark) .mascotImage to swap art) — here we retint the
   live SVG instead. */
html.theme--dark ._ghost_mx6zw_5 .body-mass { opacity: 0.85; }
html.theme--dark ._ghost_mx6zw_5 .body-fill { fill: #c8c7ca; }
html.theme--dark ._ghost_mx6zw_5 .body-hi { opacity: 0.12; }
html.theme--dark ._ghost_mx6zw_5 .body-fold { opacity: 0.32; }
html.theme--dark ._ghost_mx6zw_5 .body-fold ellipse { fill: #383a45; }
html.theme--dark ._ghost_mx6zw_5 .body-tint { opacity: 0; }
html.theme--dark ._ghost_mx6zw_5 .glasses { stroke: #363c52; }
html.theme--dark ._ghost_mx6zw_5 .gbody {
  filter: drop-shadow(0 5px 20px rgba(60, 64, 67, 0.03));
}
/* deeper purple aura mesh (drops the warm peach/pink) */
html.theme--dark ._ghost_mx6zw_5 .aura {
  opacity: 1;
  filter: blur(12px);
}
html.theme--dark ._compact_mx6zw_108 .aura { filter: blur(8px); }
html.theme--dark ._ghost_mx6zw_5 .aura .blob { opacity: 0.22; }
html.theme--dark ._ghost_mx6zw_5 .aura .b1 {
  background: radial-gradient(circle, #8b8fe8 0%, rgba(139, 143, 232, 0) 68%);
}
html.theme--dark ._ghost_mx6zw_5 .aura .b2 {
  background: radial-gradient(circle, #a472e2 0%, rgba(164, 114, 226, 0) 68%);
}
html.theme--dark ._ghost_mx6zw_5 .aura .b3 {
  background: radial-gradient(circle, #b196e6 0%, rgba(177, 150, 230, 0) 70%);
}
html.theme--dark ._ghost_mx6zw_5 .aura .b4 {
  background: radial-gradient(circle, #9376e4 0%, rgba(147, 118, 228, 0) 68%);
}

/* ---- reduced motion: hold still, no drift / breathe / entrance / fly-off ---- */
@media (prefers-reduced-motion: reduce) {
  ._ghost_mx6zw_5 .gbody,
  ._ghost_mx6zw_5 .aura,
  ._ghost_mx6zw_5 .aura .blob,
  ._comeback_mx6zw_131 .aura,
  ._comeback_mx6zw_131 .layer-ghost,
  ._flyOff_mx6zw_149 .aura,
  ._blink_mx6zw_122 .eyes {
    animation: none !important;
  }
}
._overlay_15o84_1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  z-index: 100;
}

._palette_15o84_15 {
  width: 583px;
  height: 375px;
  border-radius: 8px;
  background: var(--background-canvas);
  box-shadow: var(--shadow-400, 0px 8px 32px rgba(0, 0, 0, 0.16));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

._searchBar_15o84_26 {
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--background-elevated);
  border-bottom: 1px solid var(--border-tertiary-alpha);
}

._searchInput_15o84_37 {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}

._searchInput_15o84_37::placeholder {
  color: var(--text-placeholder, var(--text-tertiary));
}

._closeButton_15o84_51 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: 4px;
}

._closeButton_15o84_51:hover {
    color: var(--text-primary);
    background: var(--background-tertiary);
  }

._list_15o84_68 {
  flex: 1;
  overflow-y: auto;
}

._row_15o84_73 {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  border-left: 2px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  border-radius: 0 4px 4px 0;
}

._row_15o84_73:hover {
    color: var(--text-primary);
  }

._rowFocused_15o84_98 {
  background: var(--background-tertiary);
  border-left-color: var(--icon-interactive);
}

._emptyState_15o84_104 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-size: 14px;
  color: var(--text-tertiary);
}

._loadingState_15o84_113 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-size: 13px;
  color: var(--text-tertiary);
}
._messageFooter_1exus_1 {
  margin-top: 8px;
}

._footerRow_1exus_5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._sourcesPill_1exus_11 {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-secondary-alpha);
  border-radius: 20px;
  padding: 4px 12px 4px 9px;
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 16px;
}

._sourcesPill_1exus_11:hover {
    background: var(--background-tertiary);
  }

._sourcesPillExpanded_1exus_29 {
  border-color: transparent;
  background: var(--background-tertiary);
}

._sourceThumbnails_1exus_35 {
  display: flex;
  align-items: center;
  padding-right: 18px;
  isolation: isolate;
}

._sourceThumbnail_1exus_35 {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -18px;
  flex-shrink: 0;
}

._sourceThumbnailImage_1exus_52 {
  width: 20px;
  height: 20px;
  border-radius: 1.8px;
  transform: rotate(-14deg);
  overflow: hidden;
  border: 0.9px solid var(--background-primary, white);
  box-shadow: var(--shadow-100);
  background-color: var(--background-tertiary);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

._sourceThumbnailImage_1exus_52 svg {
    width: 10px;
    height: 10px;
  }

._sourceCount_1exus_73 {
  white-space: nowrap;
}

._footerActions_1exus_77 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
}

._footerActionButton_1exus_84 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--icon-secondary, var(--text-tertiary));
}

._footerActionButton_1exus_84:hover {
    color: var(--icon-primary, var(--text-primary));
  }

/* Expanded source list */
._sourcesList_1exus_100 {
  border: 1px solid var(--border-secondary-alpha);
  border-radius: 8px;
  margin-top: 8px;
  overflow: hidden;
  padding: 16px 16px 0;
}

._sourceListItem_1exus_108 {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding-bottom: 10px;
}

._sourceListItem_1exus_108:hover {
    opacity: 0.8;
  }

._sourceListItem_1exus_108:not(:last-child) ._sourceListInfo_1exus_121 {
    border-bottom: 1px solid var(--border-tertiary-alpha);
    padding-bottom: 8px;
  }

._sourceListThumbnail_1exus_127 {
  width: 48px;
  height: 48px;
  border-radius: 5.3px;
  overflow: hidden;
  border: 1px solid var(--border-secondary-alpha);
  flex-shrink: 0;
  background: var(--background-tertiary);
  align-self: flex-start;
}

._sourceListThumbnailImage_1exus_138 {
  width: 100%;
  height: 100%;
  background-color: var(--background-tertiary);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

._sourceListInfo_1exus_121 {
  min-width: 0;
  flex: 1;
}

._sourceListTitle_1exus_154 {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._sourceListSummary_1exus_164 {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

._sourceListMeta_1exus_174 {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
  margin-top: 2px;
}/* Shared typography for assistant chat messages across global and document chat. */._assistantMessageTypography_14o6x_3 {
  & > :first-child { margin-top: 0; }
  & > :last-child { margin-bottom: 0; }

  & p {
    margin: 0 0 8px;
    &:last-child { margin-bottom: 0; }
  }

  & h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0 4px;
  }

  & ol, & ul {
    margin: 0 0 8px;
    & ol, & ul { margin-bottom: 0; }
  }

  & li {
    margin-bottom: 6px;
    &:last-child { margin-bottom: 0; }
    & > p:last-child { margin-bottom: 0; }
  }

  & blockquote {
    margin: 0 0 8px;
    padding: 4px 0 4px 12px;
    border-left: 3px solid var(--border-secondary-alpha);
  }

  & a {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    -webkit-text-decoration-style: solid;
            text-decoration-style: solid;
    -webkit-text-decoration-skip: ink;
            text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;

    &, &:visited {
      color: var(--text-interactive);
    }

    &._internalLink_14o6x_47, &._internalLink_14o6x_47:visited {
      color: var(--text-primary);
      -webkit-text-decoration-style: dotted;
              text-decoration-style: dotted;
    }
  }

  & strong { font-weight: 600; }

  & hr {
    border: none;
    border-top: 1px solid var(--border-tertiary-alpha);
    margin: 12px 0;
  }
}._tableWrapper_14o6x_62 {
  margin: 0 0 8px;
  overflow-x: auto;
  max-width: 100%;

  & table {
    border-collapse: collapse;
    font-size: inherit;
  }

  & th, & td {
    padding: 6px 10px;
    border: 1px solid var(--border-tertiary-alpha);
    text-align: left;
    vertical-align: top;
    word-break: normal;
    overflow-wrap: break-word;
  }

  & th {
    font-weight: 600;
    background: var(--background-tertiary);
  }

  & p {
    margin: 0;
  }
}

._ghostreaderChat_aa50c_1 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

._header_aa50c_10 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

._headerLeft_aa50c_17 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._headerIconButton_aa50c_23 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 48px;
}

._headerIconButton_aa50c_23:hover {
    background: var(--component-button-neutral-subtle-background);
  }

._headerTitle_aa50c_35 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

._headerRight_aa50c_41 {
  display: flex;
  align-items: center;
}

/* Empty state */
._emptyStateWrapper_aa50c_47 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  padding: 0 24px;
  overflow: hidden;
}

._emptyState_aa50c_47 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  width: 100%;
  max-width: 720px;
}

._emptyStateHeader_aa50c_68 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

._mascotImage_aa50c_75 {
  height: 88px;
  width: 68px;
  margin-bottom: 16px;
  -webkit-user-select: none;
          user-select: none;
}

._heading_aa50c_82 {
  font-family: "Source Serif VF", serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.72px;
  color: var(--text-primary);
  margin: 0;
}

._subtitle_aa50c_91 {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
}

._subtitleBold_aa50c_97 {
  font-weight: 500;
}

._chatContent_aa50c_101 {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  overflow: hidden;
}

._messageListScroller_aa50c_109 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

._scrollToBottomButton_aa50c_115 {
  display: none;
}

._messageList_aa50c_109 {
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  gap: 16px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

._message_aa50c_109 {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 85%;
  white-space: pre-wrap;
  word-break: break-word;
}

._userMessage_aa50c_138 {
  align-self: flex-end;
  background: var(--background-tertiary);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
}

._userMessage_aa50c_138 > :first-child {
  margin-top: 0;
}

._userMessage_aa50c_138 > :last-child {
  margin-bottom: 0;
}

._userMessageSnippet_aa50c_154 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-top: 6px;
  background: var(--u-alpha-200);
  border-radius: 20px;
  max-width: 100%;
}

._snippetPillIcon_aa50c_165 {
  flex-shrink: 0;
  width: 12px;
  height: 16px;
  color: var(--text-secondary);
}

._snippetPillText_aa50c_172 {
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._assistantMessage_aa50c_183 {
  align-self: flex-start;
  max-width: 100%;
  white-space: normal;
}

._errorMessage_aa50c_191 {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-red-500, #ef4444);
  max-width: 100%;
}

._retryButton_aa50c_201 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--icon-secondary, var(--text-tertiary));
}

._retryButton_aa50c_201:hover {
    color: var(--icon-primary, var(--text-primary));
  }

._pendingLabel_aa50c_216 {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 4px 0;
  animation: _pulse_aa50c_1 1.5s ease-in-out infinite;
}

@keyframes _pulse_aa50c_1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Input positioning */
._inputFooter_aa50c_229 {
  padding: 0 24px 24px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

._inputCardWrapper_aa50c_236 {
  position: relative;
  width: 100%;
  margin-top: 8px;
}

._inputCardWrapper_aa50c_236::before {
    content: '';
    position: absolute;
    top: 10%;
    left: -2%;
    right: -2%;
    bottom: -30%;
    opacity: 0.3;
    filter: blur(30px);
    background: radial-gradient(ellipse at 20% 40%, #d693e0 0%, transparent 60%),
                radial-gradient(ellipse at 50% 50%, #7caeec 0%, transparent 60%),
                radial-gradient(ellipse at 80% 40%, #d693e0 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

html.theme--dark ._inputCardWrapper_aa50c_236::before {
  opacity: 0.4;
  background: radial-gradient(ellipse at 20% 40%, #5a3f66 0%, transparent 60%),
              radial-gradient(ellipse at 50% 50%, #2e4566 0%, transparent 60%),
              radial-gradient(ellipse at 80% 40%, #5a3f66 0%, transparent 60%);
}

._autoWidthDropdown_aa50c_265 {
  min-width: auto;
}

/* Category chips */
._chips_aa50c_270 {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

._chip_aa50c_270 {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid var(--border-tertiary-alpha);
  padding: 4px 14px 4px 11px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-primary);
  background: none;
  cursor: pointer;
}

._chip_aa50c_270:hover {
    background: var(--background-tertiary);
  }

._chipIcon_aa50c_299 {
  position: relative;
  display: flex;
  overflow: hidden;
  color: var(--icon-tertiary, var(--text-tertiary));
}

/* Force the filled-icon fill in the danger state — Dropdown.module.css has a
   `color !important` on svg children that defeats fill="currentColor". */
._dangerIcon_aa50c_308 path {
  fill: var(--text-error);
}

._errorBannerWrapper_aa50c_312 {
  position: relative;
  width: 100%;
  height: 0;
  overflow: visible;
  z-index: 10;
}

._errorBanner_aa50c_312 {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 6px 16px;
  background: var(--background-tertiary);
  border-radius: 8px;
  width: -webkit-fit-content;
  width: fit-content;
  white-space: nowrap;
}
._dropup_100vg_1 {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--background-elevated);
  border: 1px solid var(--border-secondary-alpha);
  border-radius: 8px;
  box-shadow: var(--shadow-200);
  font-size: var(--font-size-base);
}

._row_100vg_15 {
  display: block;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

._rowHighlighted_100vg_29 {
  background: var(--u-alpha-100);
}
/* Shared typography for assistant chat messages across global and document chat. */._assistantMessageTypography_14o6x_3 {
  & > :first-child { margin-top: 0; }
  & > :last-child { margin-bottom: 0; }

  & p {
    margin: 0 0 8px;
    &:last-child { margin-bottom: 0; }
  }

  & h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0 4px;
  }

  & ol, & ul {
    margin: 0 0 8px;
    & ol, & ul { margin-bottom: 0; }
  }

  & li {
    margin-bottom: 6px;
    &:last-child { margin-bottom: 0; }
    & > p:last-child { margin-bottom: 0; }
  }

  & blockquote {
    margin: 0 0 8px;
    padding: 4px 0 4px 12px;
    border-left: 3px solid var(--border-secondary-alpha);
  }

  & a {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    -webkit-text-decoration-style: solid;
            text-decoration-style: solid;
    -webkit-text-decoration-skip: ink;
            text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;

    &, &:visited {
      color: var(--text-interactive);
    }

    &._internalLink_14o6x_47, &._internalLink_14o6x_47:visited {
      color: var(--text-primary);
      -webkit-text-decoration-style: dotted;
              text-decoration-style: dotted;
    }
  }

  & strong { font-weight: 600; }

  & hr {
    border: none;
    border-top: 1px solid var(--border-tertiary-alpha);
    margin: 12px 0;
  }
}._tableWrapper_14o6x_62 {
  margin: 0 0 8px;
  overflow-x: auto;
  max-width: 100%;

  & table {
    border-collapse: collapse;
    font-size: inherit;
  }

  & th, & td {
    padding: 6px 10px;
    border: 1px solid var(--border-tertiary-alpha);
    text-align: left;
    vertical-align: top;
    word-break: normal;
    overflow-wrap: break-word;
  }

  & th {
    font-weight: 600;
    background: var(--background-tertiary);
  }

  & p {
    margin: 0;
  }
}

._container_yp39s_1 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--component-sidebar-background);
  overflow: hidden;
}

._header_yp39s_11 {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 16px;
  position: relative;
}

._headerTitle_yp39s_19 {
  position: absolute;
  left: 16.28%;
  right: 16.28%;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

._headerSpacer_yp39s_34 {
  flex: 1;
}

._headerButton_yp39s_38 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 48px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--icon-secondary);
}

._headerButton_yp39s_38:hover {
    background: var(--component-button-neutral-subtle-background);
  }

/* Chat content area */
._chatContent_yp39s_55 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

._chatContent_yp39s_55 > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px var(--sidebar-padding-horizontal);
}

._scrollToBottomButton_yp39s_68 {
  display: none;
}

/* Messages */
._message_yp39s_73 {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  word-break: break-word;
}

._assistantMessage_yp39s_80 {
  align-self: flex-start;
  max-width: 100%;
  white-space: normal;
}

._errorMessage_yp39s_88 {
  align-self: flex-start;
  color: var(--text-error);
  max-width: 100%;
}

._errorBubble_yp39s_95 {
  position: absolute;
  left: var(--sidebar-padding-horizontal);
  right: var(--sidebar-padding-horizontal);
  top: 64px; /* below the header */
  z-index: 1;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-error);
  background: var(--background-elevated);
  border: 1px solid var(--border-secondary-alpha);
  border-radius: 12px;
  padding: 8px 14px;
}

._pendingLabel_yp39s_110 {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 4px 0;
  animation: _pulse_yp39s_1 1.5s ease-in-out infinite;
}

@keyframes _pulse_yp39s_1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Empty state */
._emptyState_yp39s_123 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-aligned so the conversations card loads in *below* the header without
     re-centering the block — the "Ready when you are" text never shifts. The
     top offset is capped at 120px (tall panels) and ramps down to 20px as the
     panel gets short (120px at 950px tall → 20px at 700px tall) so the header
     doesn't get pushed off-screen. */
  justify-content: flex-start;
  gap: 24px;
  padding: clamp(20px, 40vh - 260px, 120px) var(--sidebar-padding-horizontal) 16px;
  overflow-y: auto;
}

._emptyStateHeader_yp39s_139 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  width: 100%;
}

._mascotImage_yp39s_148 {
  width: 64px;
  height: 67px;
}

._emptyHeading_yp39s_153 {
  font-family: 'Source Serif 4', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: -0.48px;
  margin: 0;
}

._emptySubtitle_yp39s_163 {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--text-tertiary);
  text-align: center;
  margin: 0;
  padding: 0 8px;
}

/* Cold-state conversations card */
._coldStateCardWrapper_yp39s_174 {
  position: relative;
  max-width: 420px;
  width: 100%;
}

._coldStateCard_yp39s_174 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--background-elevated);
  border: 1px solid var(--border-secondary-alpha);
  border-radius: 16px;
}

._coldStateCardSectionLabel_yp39s_193 {
  font-size: 11px;
  line-height: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}

._coldStateCardRow_yp39s_200 {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  text-align: left;
  text-decoration: none;
  min-width: 0;
}

._coldStateCardRowIcon_yp39s_215 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--icon-secondary);
}

._coldStateCardRowIcon_yp39s_215 > * {
  width: 14px;
  height: 14px;
}

._coldStateCardRowTitle_yp39s_230 {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._coldStateCardSeeMore_yp39s_241 {
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  line-height: 13px;
  color: var(--text-secondary);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

._coldStateCardSeeMore_yp39s_241:hover {
    text-decoration: underline;
  }

._coldStateCardSeeMoreChevron_yp39s_259 {
  display: inline-block;
  width: 9px;
  height: 9px;
}

/* Input area */
._inputArea_yp39s_266 {
  padding: 1px var(--sidebar-padding-horizontal) 16px;
}

._inputCard_yp39s_270 {
  background: var(--background-elevated);
  border: 1px solid var(--border-secondary-alpha);
  border-radius: 16px;
  padding: 6px;
  box-shadow: var(--shadow-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

._snippetPillContainer_yp39s_282 {
  padding: 0 8px;
  align-self: flex-start;
  max-width: 100%;
}

._snippetPill_yp39s_282 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--u-alpha-200);
  border-radius: 28px;
  max-width: 100%;
}

._snippetPillIcon_yp39s_298 {
  flex-shrink: 0;
  width: 12px;
  height: 16px;
  color: var(--text-secondary);
}

._snippetPillText_yp39s_305 {
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._snippetPillClose_yp39s_316 {
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  color: var(--icon-secondary);
}

._snippetPillCloseIcon_yp39s_326 {
  width: 12px;
  height: 12px;
}

._inputRow_yp39s_331 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 2px;
  padding-right: 4px;
}

._textareaWrapper_yp39s_339 {
  position: relative;
  width: 100%;
}

._textareaWrapper_yp39s_339 ._textarea_yp39s_339 {
  min-height: 32px;
  max-height: 40vh;
  padding: 6px;
  background: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* Blinking caret shown while the Skills dropdown is open and the textarea is
   empty, signalling that you can type straight through into a free-form
   question. Mirrors the V1 chat sidebar. Anchored at the textarea's text
   origin (6px padding) and centered on the single empty line. */
._textareaWrapperWithFakeCursor_yp39s_358::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 1px;
  height: 20px;
  background-color: currentColor;
  animation: _blink_yp39s_1 1s step-end infinite;
  pointer-events: none;
}

@keyframes _blink_yp39s_1 {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

._buttonRow_yp39s_381 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}

._pickers_yp39s_388 {
  display: flex;
  flex: 1;
  align-items: center;
  /* Nudge the first picker button in so its hover bg has the same visual
     inset from the inputCard edge on the left as it does on the bottom. */
  padding-left: 4px;
}

._pickerButton_yp39s_397 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-secondary);
}

._pickerButton_yp39s_397:hover {
    background: rgba(110, 120, 130, 0.1);
  }

/* Model picker trigger icon (Lightning / Thinking) */
._modelPickerIcon_yp39s_417 {
  color: var(--icon-secondary);
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

._pickerChevron_yp39s_424 {
  display: flex;
  margin-left: -2px;
  margin-right: -4px;
  margin-top: 2px;
  color: var(--text-tertiary);
}

._sendButton_yp39s_432 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

._sendButton_yp39s_432:not(:disabled) {
    background: var(--component-button-accent-subtle-background);
    color: var(--text-button-accent-subtle-text);
  }

._sendButton_yp39s_432:disabled {
    background: var(--component-button-accent-subtle-background-disabled);
    color: var(--icon-disabled);
  }

/* Dropdown */
._dropdownContent_yp39s_453 {
  min-width: 0;
  max-width: 256px;
}

/* Force the filled-icon fill in the danger state — Dropdown.module.css has a
   `color !important` on svg children that defeats fill="currentColor". */
._dangerIcon_yp39s_460 path {
  fill: var(--text-error);
}

._promptsDropdownContent_yp39s_464 {
  /* Match the input textarea: sidebar width minus the sidebar (24px×2), input
     card (6px×2), and input row (2px+4px) horizontal padding. Pairs with the
     alignOffset on the trigger so the box lines up flush with the textarea.
     Clear the shared dropdown's min-width so the width holds at any sidebar size. */
  min-width: 0;
  width: calc(var(--right-sidebar-width) - 66px);
}

/* One step darker than the shared dropdown highlight (--u-alpha-100) so the
   focused skill reads more clearly. */
._promptsDropdownContent_yp39s_464 [role="menuitem"]:hover,
._promptsDropdownContent_yp39s_464 [role="menuitem"]:focus-visible,
._promptsDropdownContent_yp39s_464 [role="menuitem"][data-highlighted] {
  background: var(--u-alpha-200);
}

._dropdownItem_yp39s_481 {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

/* Visual emphasis for the citation the user last clicked, mirroring the
   article-body emphasis effect. Subtle background so the citation text
   remains readable alongside the surrounding markdown. */
._citationClicked_yp39s_490, ._citationClicked_yp39s_490:visited {
  background-color: color-mix(in srgb, var(--text-interactive) 22%, transparent);
  border-radius: 3px;
  padding: 0 3px;
  margin: 0 -3px;
}
._card_1gqo8_1 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--background-elevated);
  border: 1px solid var(--border-secondary-alpha);
  box-shadow: var(--shadow-100);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

._label_1gqo8_16 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

._detailsToggle_1gqo8_22 {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 16px;
}

._detailsToggle_1gqo8_22:hover ._detailsToggleText_1gqo8_33 {
  color: var(--text-secondary);
}

._detailsToggleText_1gqo8_33 {
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-text-decoration-color: var(--border-secondary-alpha);
          text-decoration-color: var(--border-secondary-alpha);
}

._details_1gqo8_22 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--u-alpha-200);
}

._detailsTool_1gqo8_52 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  font-family: var(--font-family-monospace, ui-monospace, monospace);
}

._detailsArgs_1gqo8_60 {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  font-family: var(--font-family-monospace, ui-monospace, monospace);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}

._actions_1gqo8_71 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._rememberRow_1gqo8_78 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-tertiary);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

._rememberRow_1gqo8_78 input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

._buttonRow_1gqo8_94 {
  display: flex;
  gap: 8px;
}

._denyButton_1gqo8_99,
._approveButton_1gqo8_100 {
  height: 28px;
  padding: 0 12px;
  border-radius: 48px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}

._denyButton_1gqo8_99 {
  background: none;
  color: var(--text-secondary);
}

._denyButton_1gqo8_99:hover {
  background: var(--component-button-neutral-ghost-background-hover);
  color: var(--text-primary);
}

._approveButton_1gqo8_100 {
  background: var(--component-button-accent-subtle-background);
  color: var(--text-button-accent-subtle-text);
}

._approveButton_1gqo8_100:hover {
  background: var(--component-button-accent-subtle-background-hover, var(--component-button-accent-subtle-background));
  filter: brightness(1.05);
}
._copyButton_1nw98_1 {
  width: 16px;
  height: 16px;
  padding: 2px;
  display: inline;
  vertical-align: middle;
  line-height: 20px;
  background: none;
  color: var(--icon-secondary);
}
._copyButton_1nw98_1:hover {
    background: none !important;
  }
._copyButton_1nw98_1 ._copyIcon_1nw98_14 {
    fill: var(--icon-secondary);
    width: 14px;
    height: 14px;
  }
._notebookPreviewImage_13bus_1 {
  margin: auto;
  opacity: 0.75;
  border-radius: 4px;
  width: 250px;
  height: 130px;
  box-shadow: inset 0px 0px 0px 1px var(--border-tertiary-alpha);
  background-size: cover;
  margin-bottom: 30px;
}

._notebookPlaceholderImage_13bus_12 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 130px;
  border-radius: 4px;
  box-shadow: inset 0px 0px 0px 1px var(--border-tertiary-alpha);
  background-size: 250px 130px;
}

._notebookPlaceholderImage_13bus_12 svg path {
      fill: var(--placeholder-fill-color);
    }

._notebookEpubImage_13bus_29 {
  width: 116px;
  height: 174px;
  background-size: cover;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  box-shadow: var(--document-card-book-image-box-shadow);
  overflow: hidden;
  position: relative;
  margin: auto;
  margin-bottom: 30px;
}

._notebookEpubImage_13bus_29 ._epubPlaceholderImage_13bus_41 {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      box-shadow: inset 0px 0px 0px 1px var(--border-tertiary-alpha);
      background-size: cover;
  }

._notebookEpubImage_13bus_29 ._epubPlaceholderImage_13bus_41 svg path {
          fill: var(--placeholder-fill-color);
        }

/* Lighting effects */

._notebookEpubImage_13bus_29::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0.15) 100%);
  }

/* Spine */

._notebookEpubImage_13bus_29::after {
    content: ' ';
    position: absolute;
    inset: 0;
    right: auto;
    width: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,.4) 0%, rgba(0,0,0,.08)40%, rgba(255,255,255,.2) 50%,rgba(255, 255, 255,0) 80%);
  }
._root_d6u2z_1 {
  display: flex;
  margin-bottom: var(--spacer-5);
}

a._root_d6u2z_1:hover {
    color: var(--nav-item-hover-color);
  }

._imageWrapper_d6u2z_12 {
  max-width: var(--person-card-image-size);
  min-width: var(--person-card-image-size);
  height: var(--person-card-image-size);
  margin-right: var(--spacer-4);
  border-radius: 50%;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

._imageWrapper_d6u2z_12 img {
    background-color: transparent;
  }

._image_d6u2z_12 {
  height: 100%;
}

._copyButton_d6u2z_31 {
  margin-left: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
}

._textWrapper_d6u2z_38 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: var(--font-size-base);
}

._nameWrapper_d6u2z_46 {
  display: flex;
  font-size: var(--font-size-base);
  margin-top: -4px;
}

._nameWrapper_d6u2z_46 ._name_d6u2z_46 {
    line-height: 1.4285714286;
    color: var(--metadata-value);
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    max-width: calc(var(--right-sidebar-width) - 120px);
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    display: block;
  }

._nameWrapper_d6u2z_46:hover ._copyButton_d6u2z_31 {
      opacity: 1;
      pointer-events: auto;
    }

._additionalText_d6u2z_73 {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  width: -webkit-max-content;
  width: max-content;
  line-height: 1.25;
  max-width: calc(var(--right-sidebar-width) - 120px);
}

._chevron_d6u2z_81 {
  align-self: center;
}

a._root_d6u2z_1:hover ._chevron_d6u2z_81 {
  filter: brightness(0);
}
._documentNoteForm_1hw0i_1 {
  box-sizing: content-box;
  position: relative;
  padding: 0 24px;
  margin: 0 -24px;

  /* Needs to be nested for specifivity */
}

._documentNoteForm_1hw0i_1 ._field_1hw0i_8,
  ._documentNoteForm_1hw0i_1 ._fieldWrapper_1hw0i_9 {
    width: 100%;
    max-width: 100%;
  }

._documentNoteForm_1hw0i_1 ._fieldWrapper_1hw0i_9::after,
  ._documentNoteForm_1hw0i_1 ._field_1hw0i_8 {
    overflow: hidden;
    padding: 8px 6px;
    border-radius: 8px;
    line-height: 20px;

    background: transparent;
  }

._documentNoteForm_1hw0i_1 ._fieldWrapper_1hw0i_9:focus-within::after,
    ._documentNoteForm_1hw0i_1 ._fieldWrapper_1hw0i_9:focus-within ._field_1hw0i_8 {
      background: var(--metadata-input-background);
    }

._actionsMenuButton_1hw0i_32 {
  display: none;
  position: absolute;
  top: -12px;
  right: 12px;
}

._documentNoteForm_1hw0i_1:hover ._actionsMenuButton_1hw0i_32,
._actionsMenuButton_1hw0i_32[aria-expanded="true"] {
  display: block;
}

  ._button_1uzfi_1,
  ._button_1uzfi_1 button,
  ._button_1uzfi_1 .contentWrapper {
    height: 24px;
    width: 24px;
  }

._content_1uzfi_4 {
  max-width: 200px;
}

._deleteOption_1uzfi_14 {
  color: var(--text-error);
}._noteForm_n1x7x_1 {
  background: none !important;
  box-shadow: none !important;
}
._noteForm_n1x7x_1 .wrapper::after,
    ._noteForm_n1x7x_1 .wrapper textarea {
      padding-top: 0;
      padding-left: 0;
    }
._noteForm_n1x7x_1 .wrapper:not(:focus-within)::after,
      ._noteForm_n1x7x_1 .wrapper:not(:focus-within) textarea {
        cursor: pointer;
      }
._noteForm_n1x7x_1 fieldset {
    padding: 0;
  }._markdown_3q9oo_1 {
  font-size: var(--font-size-base);
  letter-spacing: var(--ls-9);
  line-height: 1.4;
  color: var(--highlight-text-color);
}

._markdown_3q9oo_1 p,
  ._markdown_3q9oo_1 ol,
  ._markdown_3q9oo_1 ul {
    margin: 0 0 8px;
  }

._markdown_3q9oo_1 ol,
  ._markdown_3q9oo_1 ul {
    padding-left: 20px;
  }

._markdown_3q9oo_1 ol {
    list-style-type: decimal;
  }

._markdown_3q9oo_1 ul {
    list-style-type: disc;
  }

._markdown_3q9oo_1 li {
    margin-bottom: 2px;
  }

._markdown_3q9oo_1 a {
    color: var(--text-interactive);
    text-decoration: underline;
  }

._markdown_3q9oo_1 strong {
    font-weight: 500;
  }

._markdown_3q9oo_1 em {
    font-style: italic;
  }

._markdown_3q9oo_1 code {
    font-size: inherit;
  }

._markdown_3q9oo_1 pre {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 4px;
    background-color: var(--highlight-background-color--normal);
    /* Wrap long lines instead of overflowing the narrow sidebar. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

._markdown_3q9oo_1 img {
    margin: 1em 0;
    max-width: 100%;
    outline: 5px solid var(--highlight-background-color--normal);
    display: block;
  }

._markdown_3q9oo_1 > :first-child {
    margin-top: 0;
  }

._markdown_3q9oo_1 > :last-child {
    margin-bottom: 0;
  }

._highlightText_3q9oo_73 {
  background-color: var(--highlight-background-color--normal);
}

/* Headings render as bold paragraphs at same font size */
._heading_3q9oo_78 {
  font-weight: 600;
}
._dropzone_ra4s3_1 {
  position: absolute;
  inset: 0;
  background-color: var(--file-dropzone-background);
  z-index: 1;
  border: 3px dashed var(--file-dropzone-color);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--file-dropzone-color);
}
._placeholder_fyqkh_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
}
._modalRoot_1z12f_1 {
  max-width: calc(100vw - 24px);
  width: calc(100vw - 24px);
  overflow: hidden;
  height: 100vh;
  max-height: calc(100vh - 24px);
  background: var(--wisereads-modal-background);
}

._mainContentClassName_1z12f_10 {
  padding: 0;
}

._modalHeader_1z12f_14 {
  background: var(--wisereads-modal-header-background);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 1;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
}

._modalHeader_1z12f_14 ._titleContainer_1z12f_27 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
  }

._modalHeader_1z12f_14 ._title_1z12f_27 {
    margin-top: -8px;
  }

._modalHeader_1z12f_14 ._learnMore_1z12f_43 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    color: var(--text-interactive);
    cursor: pointer;
  }

._modalHeader_1z12f_14 ._popoverBridge_1z12f_57 {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 8px;
  }

._modalHeader_1z12f_14 ._learnMorePopoverContainer_1z12f_65 {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 22px;
    width: 471px;
    height: auto;
    background: var(--background-elevated);
    border-radius: 8px;
    padding: 16px;
    gap: 12px;
    box-shadow: var(--shadow-200);
    cursor: auto;
    color: var(--text-primary);
  }

._modalHeader_1z12f_14 ._learnMorePopoverContainer_1z12f_65 p {
      margin-top: 0;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
    }

._modalHeader_1z12f_14 ._learnMorePopoverContainer_1z12f_65 p:last-of-type {
        margin-bottom: 0px;
      }

._modalHeader_1z12f_14 ._learnMorePopoverContainer_1z12f_65 button {
      background: var(--wisereads-modal-button-background);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      color: var(--text-button-accent-subtle-text);
      margin-top: 12px;
    }

._closeButton_1z12f_104 {
  position: absolute;
  right: 20px;
  right: 24px;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

._contentContainer_1z12f_115 {
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: var(--modal-vertical-padding) 20px;
  padding-top: 60px;
}

._truncate_1z12f_122 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 80%;
}

._loadingContainer_1z12f_129 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 16px;
  height: 100vh;
  max-height: calc(100vh - 24px);
}

._card_1z12f_138 {
  background: var(--wisereads-modal-card-background);
  color: var(--text-primary);
  border-radius: 8px;
  font-family: system-ui, -apple-system, sans-serif;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-secondary-alpha);
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}

._card_1z12f_138:hover {
    border-color: var(--wisereads-modal-card-border-hover);
    box-shadow: var(--shadow-100);
    transform: perspective(1px) scale(1.02);
  }

._card_1z12f_138 ._coverImage_1z12f_155 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 200px;
  }

._card_1z12f_138 ._cardContent_1z12f_162 {
    padding: 22px 16px 16px 16px;
  }

._card_1z12f_138 ._publicationContainer_1z12f_166 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

._card_1z12f_138 ._publicationContainer_1z12f_166 ._publicationIcon_1z12f_172 {
      width: 16px;
      height: 16px;
    }

._card_1z12f_138 ._publicationContainer_1z12f_166 ._publicationName_1z12f_177 {
      font-size: 10px;
      color: var(--text-secondary);
      text-transform: uppercase;
      font-family: 'Inter VF';
      font-weight: 500;
      letter-spacing: 1px;
      margin-top: 1px;
    }

._card_1z12f_138 ._title_1z12f_27 {
    font-size: 20px;
    margin: 0 0 4px 0;
    color: var(--text-primary);
    font-family: 'Inter VF';
    font-weight: 700;
    line-height: 120%;
  }

._card_1z12f_138 ._meta_1z12f_197 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
  }

._card_1z12f_138 ._dot_1z12f_206 {
    color: var(--text-tertiary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

._card_1z12f_138 ._content_1z12f_115 {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 20px 0;
    color: var(--text-primary);
  }

._card_1z12f_138 ._addToReaderButton_1z12f_221 {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

._card_1z12f_138 ._addToReaderButton_1z12f_221:not(:disabled) {
      background: var(--wisereads-modal-button-background);
      color: var(--text-button-accent-subtle-text);
    }

._card_1z12f_138 ._addToReaderButton_1z12f_221 svg * {
      fill: var(--text-button-accent-subtle-text);;
    }

._card_1z12f_138 ._addToReaderButton_1z12f_221:disabled {
      background: var(--text-button-accent-subtle-disabled-background);
      color: var(--text-button-accent-subtle-disabled-text);
    }

._card_1z12f_138 ._addToReaderButton_1z12f_221:disabled svg * {
        fill: var(--text-button-accent-subtle-disabled-text);
      }
._modalBackdrop_kmyzt_1 {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  inset: 0;
  animation: _overlayShow_kmyzt_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 101;
}

._modalRoot_kmyzt_9 {
  --modal-vertical-padding: 20px;
  --modal-horizontal-padding: 24px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50.1%, -50%);
  width: 90vw;
  max-width: 543px;
  max-height: 85vh;

  z-index: 101;

  padding: 0;

  background-color: var(--background-elevated);
  border-radius: 8px;
  box-shadow: var(--shadow-400);

  font-family: var(--ui-font);

  animation: _contentShow_kmyzt_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

._modalRoot_kmyzt_9:focus {
    outline: none;
  }

._closeButton_kmyzt_38,
._modalMain_kmyzt_39,
._modalFooter_kmyzt_40 {
  padding: var(--modal-vertical-padding) var(--modal-horizontal-padding);
}

._modalHeader_kmyzt_44 {
  border-bottom: 1px solid var(--border-secondary-alpha);
  display: flex;
}

._title_kmyzt_49 {
  flex: 1;

  margin: var(--modal-vertical-padding) var(--modal-vertical-padding);

  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 20px;
  color: var(--text-primary);
}

._closeButton_kmyzt_38 {
  border-radius: 0;
  color: var(--text-primary);
  opacity: 0.85;
}

._closeButton_kmyzt_38:active,
  ._closeButton_kmyzt_38:focus,
  ._closeButton_kmyzt_38:hover {
    opacity: 1;
    outline: none;
  }

._modalMain_kmyzt_39 {

}

._modalFooter_kmyzt_40 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  border-top: 1px solid var(--border-secondary-alpha);
  background-color: var(--background-elevated);
  border-radius: 0 0 8px 8px;
}

@keyframes _contentShow_kmyzt_1 {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
._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;
}