/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
/**
 * shared values used by details-layout. 
 * TODO-EV-3629: move to use Folio as DetailsLayout.tsx if we keep using this layout
 */
@media only screen and (min-width: 64em) {
  :root {
    --right-col-left-offset: 3.2rem;
    --num-left-col: 3;
    --num-right-col: 9; } }

@media only screen and (max-width: 63.9375em) {
  :root {
    --right-col-left-offset: 0; } }

@media only screen and (min-width: 48em) and (max-width: 63.9375em) {
  :root {
    --num-left-col: 2;
    --num-right-col: 4; } }

@media only screen and (min-width: 40em) and (max-width: 47.9375em) {
  :root {
    --num-left-col: 0;
    --num-right-col: 6; } }

@media only screen and (max-width: 39.9375em) {
  :root {
    --num-left-col: 0;
    --num-right-col: 2; } }

.BookPage {
  overflow-anchor: none; }
  .BookPage__jumpNav {
    display: inline-block;
    margin-bottom: 0.8rem; }
  .BookPage__rightColumn {
    position: relative;
    overflow: hidden;
    grid-column: span var(--num-right-col);
    padding-left: var(--right-col-left-offset); }
  .BookPage__leftColumn {
    grid-column: span var(--num-left-col); }
  .BookPage__gridContainer {
    display: grid;
    margin-bottom: 4rem; }
    @media only screen and (min-width: 93.5em) {
      .BookPage__gridContainer {
        grid-template-columns: repeat(12, minmax(0, 1fr)); } }
    @media only screen and (min-width: 64em) and (max-width: 93.4375em) {
      .BookPage__gridContainer {
        grid-template-columns: repeat(12, minmax(0, 1fr)); } }
    @media only screen and (min-width: 64em) and (max-width: 79.9375em) {
      .BookPage__gridContainer {
        grid-template-columns: repeat(12, minmax(0, 1fr)); } }
    @media only screen and (min-width: 48em) and (max-width: 63.9375em) {
      .BookPage__gridContainer {
        grid-template-columns: repeat(6, minmax(0, 1fr)); } }
    @media only screen and (min-width: 40em) and (max-width: 47.9375em) {
      .BookPage__gridContainer {
        grid-template-columns: repeat(6, minmax(0, 1fr)); } }
    @media only screen and (min-width: 30em) and (max-width: 39.9375em) {
      .BookPage__gridContainer {
        grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media only screen and (max-width: 29.9375em) {
      .BookPage__gridContainer {
        grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media only screen and (min-width: 93.5em) {
      .BookPage__gridContainer {
        grid-gap: 2.4rem; } }
    @media only screen and (min-width: 64em) and (max-width: 93.4375em) {
      .BookPage__gridContainer {
        grid-gap: 1.7%; } }
    @media only screen and (min-width: 64em) and (max-width: 79.9375em) {
      .BookPage__gridContainer {
        grid-gap: 2%; } }
    @media only screen and (min-width: 48em) and (max-width: 63.9375em) {
      .BookPage__gridContainer {
        grid-gap: 3%; } }
    @media only screen and (min-width: 40em) and (max-width: 47.9375em) {
      .BookPage__gridContainer {
        grid-gap: 2.5%; } }
    @media only screen and (min-width: 30em) and (max-width: 39.9375em) {
      .BookPage__gridContainer {
        grid-gap: 3%; } }
    @media only screen and (max-width: 29.9375em) {
      .BookPage__gridContainer {
        grid-gap: 4%; } }
  .BookPage__rightCover {
    display: none; }
  @media only screen and (min-width: 64em) {
    .BookPage .BookPage__bookCover {
      width: 70%;
      margin: auto; } }
  @media only screen and (min-width: 64em) and (max-width: 79.9375em) {
    .BookPage .BookPage__bookCover {
      width: 80%;
      margin: auto; } }
  @media only screen and (min-width: 48em) and (max-width: 63.9375em) {
    .BookPage .BookPage__bookCover {
      width: 80%;
      margin: auto; } }
  @media only screen and (max-width: 47.9375em) {
    .BookPage__leftColumn {
      display: none; }
    .BookPage__rightCover {
      display: flex; }
    .BookPage__share {
      position: absolute;
      right: 0; }
    .BookPage .BookPage__bookCover {
      width: 35%;
      margin: auto; } }
  .BookPage__relatedBottomContent > * {
    margin-bottom: 4rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
/* stylelint-disable selector-no-qualifying-type */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box; }

/* Remove default padding */
ul,
ol {
  padding: 0;
  margin: 0; }

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0; }

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed; }

/* Remove list styles on ul, ol elements with a class attribute */
/* (Exception for Storybook docs) */
ul[class]:not(.sbdocs),
ol[class]:not(.sbdocs) {
  list-style: none;
  margin: 0; }

/* Inherit colors on links */
a {
  color: inherit;
  outline: 0; }

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block; }

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit; }

/* clears the 'X' from Internet Explorer */
input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0; }

input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0; }

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none; }

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }

/*
 * Source: https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 * 3. Opinionated: add "hand" cursor to non-disabled button elements.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }
  button:not(:disabled),
  [type="button"]:not(:disabled),
  [type="reset"]:not(:disabled),
  [type="submit"]:not(:disabled) {
    cursor: pointer; }

button {
  background: none;
  outline: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  margin: 0;
  text-transform: none; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
/**
 * Semantic CSS variables
 * To add semantic tokens, ping the #folio-core or #folio-dev channel
 * Instructions to add tokens will be here: https://folio.sirius.goodreads.a2z.com/?path=/story/documentation-colors-adding-semantic-tokens--page
 * Prefer adding to our style dictionary configs instead of here when possible
 * TODO-EV-1862: audit performance of css var usage
 **/
:root {
  --color-background-alert-caution: #fff5f3;
  --color-background-alert-informational: #f2f2f2;
  --color-background-alert-success: #f2f7f0;
  --color-background-alt: #faf8f6;
  --color-background-avatar-group-overflow-base: #825445;
  --color-background-avatar-hover: #1e1915;
  --color-background-avatar-placeholder-accent: #faf8f6;
  --color-background-avatar-placeholder-base: #cfccc9;
  --color-background-body-base: #fff;
  --color-background-body-transparent: rgba(255, 255, 255, 0.75);
  --color-background-book-cover-placeholder-accent: #fff;
  --color-background-book-cover-placeholder-base: #ebe2d7;
  --color-background-book-cover-variant-1: #dce8d1;
  --color-background-book-cover-variant-2: #dee0ed;
  --color-background-book-cover-variant-3: #edd9de;
  --color-background-book-cover-variant-4: #ebe2d7;
  --color-background-button-primary-default: #1e1915;
  --color-background-button-primary-disabled: #ababb0;
  --color-background-button-primary-hover: #4f4f4d;
  --color-background-button-primary-pressed: #32362d;
  --color-background-button-secondary-disabled: #f2f2f2;
  --color-background-chip-select-selected: #c2c7cc;
  --color-background-default: #fff;
  --color-background-disabled: #cfccc9;
  --color-background-divider: #cfccc9;
  --color-background-dropdown-menu-item-active: rgba(39, 28, 20, 0.22);
  --color-background-dropdown-menu-item-hover: rgba(0, 0, 0, 0.05);
  --color-background-elevation: #faf8f6;
  --color-background-input-base: #fafafa;
  --color-background-input-hover: #ebebeb;
  --color-background-knh-highlight-base: #ffeed2;
  --color-background-nav: #faf8f6;
  --color-background-notif-badge-base: #d54a23;
  --color-background-notif-scrollbar-thumb: #707070;
  --color-background-primary-base: #1e1915;
  --color-background-promo-sidebar: #ebe2d7;
  --color-background-rating-container-hover: #ebebeb;
  --color-background-rating-container-selected-base: #cfccc9;
  --color-background-rating-container-selected-hover: #c2c7cc;
  --color-background-rating-empty-base: #ebebeb;
  --color-background-rating-empty-hover: #cfccc9;
  --color-background-rating-empty-selected-hover: #f2f2f2;
  --color-background-rating-fill-base: #e87400;
  --color-background-rating-star-base: #e87400;
  --color-background-rating-star-empty: #c2c7cc;
  --color-background-rating-star-border: #8e8e97;
  --color-background-secondary-disabled: #ebebeb;
  --color-background-secondary-hover: #f2f2f2;
  --color-background-spoiler-tooltip-base: #ebebeb;
  --color-background-spoiler-visible: #f2f2f2;
  --color-background-tag-accent-darker: #409970;
  --color-background-tag-accent-lighter: rgba(64, 153, 112, 0.4);
  --color-background-tag-selector-base: #ebf0e5;
  --color-background-tag-selector-hover: #ebf0e5;
  --color-background-transparent-active: rgba(39, 28, 20, 0.22);
  --color-background-transparent-hover: rgba(0, 0, 0, 0.05);
  --color-background-toast-error-base: #d54a23;
  --color-background-toast-generic-base: #c69259;
  --color-background-toast-success-base: #409970;
  --color-background-wtr-base: #3f8363;
  --color-background-wtr-hover: #409970;
  --color-background-carousel-pagination: #c2c7cc;
  --color-background-icon-default: #1e1915;
  --color-border-avatar: #fff;
  --color-border-button-secondary-base: #707070;
  --color-border-button-secondary-disabled: #ababb0;
  --color-border-button-secondary-pressed: #8e8e97;
  --color-border-blockquote: #c2c7cc;
  --color-border-primary: #1e1915;
  --color-border-buy: #409970;
  --color-border-secondary-active-base: #ababb0;
  --color-border-secondary-base: #707070;
  --color-border-input-base: #1e1915;
  --color-border-input-radio-base: #ababb0;
  --color-border-wtr-base: #377458;
  --color-border-elevation-medium: rgba(0, 0, 0, 0);
  --color-brand-amazon-accent: #000000;
  --color-brand-amazon-base: #f5d47a;
  --color-brand-amazon-hover: #f7dc92;
  --color-brand-amazon-shadow: rgba(245, 212, 122, 0.5);
  --color-brand-apple-accent: #ffffff;
  --color-brand-apple-base: #000000;
  --color-brand-apple-hover: #4f4f4d;
  --color-brand-apple-shadow: rgba(0, 0, 0, 0.5);
  --color-brand-facebook-accent: #ffffff;
  --color-brand-facebook-base: #1877f2;
  --color-brand-facebook-hover: #3085f3;
  --color-brand-facebook-shadow: rgba(24, 119, 242, 0.5);
  --color-divider-default: #cfccc9;
  --color-interaction-focus: #1e1915;
  --color-interaction-hoverarea: #f2f2f2;
  --color-interaction-hoverlink: #8e8e97;
  --color-internal-icons-background: #f2f2f2;
  --color-internal-icons-with-edge: #cfccc9;
  --color-notification-failure: #c2441f;
  --color-notification-info: #c69259;
  --color-notification-success: #409970;
  --color-shadow-button-active: #dee0ed;
  --color-shadow-button-focus: #1e1915;
  --color-shadow-input-warning: #d54a23;
  --color-shadow-transparent-focus: #1e1915;
  --color-shadow-wtr-focus: #409970;
  --color-text-action-nav-hover: #f2f2f2;
  --color-text-action-primary-base: #1e1915;
  --color-text-action-primary-hover: #4f4f4d;
  --color-text-action-secondary-base: #377458;
  --color-text-action-secondary-hover: #409970;
  --color-text-author-base: #825445;
  --color-text-body-3: #4f4f4d;
  --color-text-body-light: #4f4f4d;
  --color-text-body-standard: #1e1915;
  --color-text-button-primary-base: #fff;
  --color-text-button-primary-disabled: #cfccc9;
  --color-text-button-primary-pressed: #cfccc9;
  --color-text-button-pressed: #4f4f4d;
  --color-text-button-secondary-disabled: #8e8e97;
  --color-text-button-transparent-base: rgba(39, 28, 20, 0.88);
  --color-text-button-tag-base: #1e1915;
  --color-text-button-wtr-base: #fff;
  --color-text-default: #1e1915;
  --color-text-disabled: #8e8e97;
  --color-text-heading-base: #1e1915;
  --color-text-notif-badge-base: #fff;
  --color-text-notif-history: #4f4f4d;
  --color-text-spoiler-hidden: #707070;
  --color-text-subdued: #707070;
  --color-text-warning: #d54a23; }

[data-theme="dark"] {
  --color-background-alert-caution: #dea68f;
  --color-background-alert-informational: #4f4f4d;
  --color-background-alert-success: #b5baa1;
  --color-background-alt: #32362d;
  --color-background-avatar-hover: #1e1915;
  --color-background-avatar-placeholder-accent: #ebebeb;
  --color-background-avatar-placeholder-base: #707070;
  --color-background-body-base: #1e1915;
  --color-background-body-transparent: rgba(30, 25, 21, 0.75);
  --color-background-book-cover-placeholder-accent: #fff;
  --color-background-book-cover-placeholder-base: #ebe2d7;
  --color-background-book-cover-variant-1: #dce8d1;
  --color-background-book-cover-variant-2: #dee0ed;
  --color-background-book-cover-variant-3: #edd9de;
  --color-background-book-cover-variant-4: #ebe2d7;
  --color-background-button-primary-default: #ebe2d7;
  --color-background-button-primary-disabled: #8e8e97;
  --color-background-button-primary-hover: #ead0ad;
  --color-background-button-primary-pressed: #cfccc9;
  --color-background-button-secondary-disabled: #4f4f4d;
  --color-background-chip-select-selected: #707070;
  --color-background-default: #1e1915;
  --color-background-disabled: #cfccc9;
  --color-background-divider: #707070;
  --color-background-elevation: #707070;
  --color-background-input-base: #32362d;
  --color-background-input-hover: #707070;
  --color-background-knh-highlight-base: #3B4538;
  --color-background-notif-badge-base: #d54a23;
  --color-background-notif-scrollbar-thumb: #707070;
  --color-background-primary-base: #ebe2d7;
  --color-background-promo-sidebar: #4f4f4d;
  --color-background-rating-bar-base: #e87400;
  --color-background-rating-bar-empty: #ababb0;
  --color-background-rating-star-base: #e87400;
  --color-background-rating-star-empty: #707070;
  --color-background-rating-star-border: #8e8e97;
  --color-background-spoiler-tooltip-base: #4f4f4d;
  --color-background-spoiler-visible: #f2f2f2;
  --color-background-tag-accent: #409970;
  --color-background-tag-selector-base: rgba(235, 235, 235, 0.2);
  --color-background-tag-selector-hover: rgba(235, 235, 235, 0.5);
  --color-background-transparent-active: rgba(50, 54, 45, 0.22);
  --color-background-transparent-hover: rgba(0, 0, 0, 0.05);
  --color-background-wtr-base: #3f8363;
  --color-background-wtr-hover: #409970;
  --color-background-carousel-pagination: #707070;
  --color-background-icon-default: #f2f2f2;
  --color-border-avatar: #cfccc9;
  --color-border-button-secondary-base: #cfccc9;
  --color-border-button-secondary-disabled: #ababb0;
  --color-border-button-secondary-pressed: #8e8e97;
  --color-border-blockquote: #c2c7cc;
  --color-border-primary: #1e1915;
  --color-border-input-base: #1e1915;
  --color-border-input-radio-base: #ababb0;
  --color-border-wtr-base: #377458;
  --color-border-elevation-medium: #4f4f4d;
  --color-brand-amazon-accent: #000000;
  --color-brand-amazon-base: #f5d47a;
  --color-brand-amazon-hover: #f7dc92;
  --color-brand-amazon-shadow: rgba(245, 212, 122, 0.5);
  --color-brand-apple-accent: #ffffff;
  --color-brand-apple-base: #000000;
  --color-brand-apple-hover: #4f4f4d;
  --color-brand-apple-shadow: rgba(0, 0, 0, 0.5);
  --color-brand-facebook-accent: #ffffff;
  --color-brand-facebook-base: #1877f2;
  --color-brand-facebook-hover: #3085f3;
  --color-brand-facebook-shadow: rgba(24, 119, 242, 0.5);
  --color-divider-default: #4f4f4d;
  --color-interaction-focus: #fff;
  --color-interaction-hoverarea: #4f4f4d;
  --color-interaction-hoverlink: #8e8e97;
  --color-internal-icons-background: #f2f2f2;
  --color-internal-icons-with-edge: #cfccc9;
  --color-notification-failure: #f57957;
  --color-notification-info: #c69259;
  --color-notification-success: #409970;
  --color-shadow-button-active: #7584e9;
  --color-shadow-button-focus: #1e1915;
  --color-shadow-input-warning: #d54a23;
  --color-shadow-transparent-focus: rgba(36, 49, 138, 0.15);
  --color-text-action-primary-base: #ebebeb;
  --color-text-action-primary-hover: #f2f2f2;
  --color-text-action-secondary-base: #377458;
  --color-text-action-secondary-hover: #409970;
  --color-text-author-base: #c69259;
  --color-text-body-3: #cfccc9;
  --color-text-body-light: #c2c7cc;
  --color-text-body-standard: #cfccc9;
  --color-text-button-disabled: #fff;
  --color-text-button-primary-base: #1e1915;
  --color-text-button-primary-disabled: #cfccc9;
  --color-text-button-primary-pressed: #4f4f4d;
  --color-text-button-pressed: #c2c7cc;
  --color-text-button-secondary-disabled: #32362d;
  --color-text-button-transparent-base: #fff;
  --color-text-button-tag-base: #f2f2f2;
  --color-text-button-wtr-base: #fff;
  --color-text-default: #f2f2f2;
  --color-text-disabled: #8e8e97;
  --color-text-heading-base: #ebebeb;
  --color-text-notif-badge-base: #fff;
  --color-text-notif-history: #4f4f4d;
  --color-text-rating-bar-base: #707070;
  --color-text-spoiler-hidden: #cfccc9;
  --color-text-subdued: #c2c7cc;
  --color-text-warning: #d54a23; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.u-dot-before::before {
  padding: 0.4rem;
  content: "\B7"; }

.u-sr-only {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
html {
  font-size: 62.5%; }

body {
  background-color: var(--color-background-body-base);
  color: var(--color-text-body-standard);
  font: 400 1.6rem/1.4375 "Proxima Nova", Montserrat, Arial, sans-serif;
  z-index: 1;
  min-width: 32rem;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0; }
  .Icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.BookIcon path {
  fill-rule: evenodd; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Avatar {
  border-radius: 50%;
  display: block;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  /**
   * Sizes are also tied to AvatarGroup gaps sizes
   * Only Small
   * xsmall (Deprecated) Currently used only for Navigation header
  */ }
  .Avatar--xsmall {
    width: 3rem;
    height: 3rem; }
  .Avatar--small {
    width: 4.4rem;
    height: 4.4rem; }
  .Avatar--medium {
    width: 5.6rem;
    height: 5.6rem; }
  .Avatar--large {
    width: 7.2rem;
    height: 7.2rem; }
  .Avatar--xlarge {
    width: 14.8rem;
    height: 14.8rem; }
  .Avatar--bordered {
    border: 0.1rem solid var(--color-border-avatar); }
  .Avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center; }
    .Avatar--placeholder .Avatar__image {
      background-color: var(--color-background-avatar-placeholder-base);
      color: var(--color-background-avatar-placeholder-accent); }
      .Avatar--placeholder .Avatar__image .UserIcon {
        width: 100%;
        height: 100%; }
  .Avatar__image {
    display: block;
    transition: all 0.2s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; }
  a.Avatar:focus, a.Avatar:active {
    box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-shadow-button-focus); }
  a.Avatar:disabled {
    color: var(--color-text-disabled); }
  a.Avatar:hover .Avatar__image {
    filter: brightness(80%); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
/* stylelint-disable */
/* Temporarily disable stylelint so I have time to migrate over to new mixin structure from my other branch */
.Button {
  /* @deprecated TODO-RAD-17527: remove */
  /* @deprecated TODO-RAD-17527: remove */
  /* @deprecated TODO-RAD-17527: remove */
  border-radius: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: 0 solid transparent;
  transition: all 0.2s ease-in-out;
  /* Shared Styles */
  /* End Shared Styles */
  /* Start Variant Specific Styles */
  /*
   * Tertiary Buttons have some weird rules:
   * - different padding rules
   * - only buttons with no icons (text only) should be underlined
   * - On hover should always underline the text
   * - On hover the text color should not change
   */
  /* End Variant Specific Styles */
  /* Sizes */
  /* End Sizes */ }
  .Button__container {
    position: relative;
    display: inline-flex; }
  .Button__labelItem {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all; }
  .Button__labelItem + .Button__labelItem {
    margin-left: 0.4rem; }
  .Button__container.Button__container--block {
    display: flex;
    width: 100%; }
  .Button--block {
    width: 100%; }
    .Button--block .Button__labelItem {
      overflow: hidden; }
  .Button:disabled, .Button--disabled,
  fieldset:disabled .Button {
    pointer-events: none;
    box-shadow: none;
    color: var(--color-text-disabled); }
  .Button .Icon {
    width: 2.4rem;
    height: 2.4rem;
    vertical-align: middle; }
  .Button--primary {
    background-color: var(--color-background-button-primary-default);
    color: var(--color-text-button-primary-base); }
    .Button--primary:hover {
      background-color: var(--color-background-button-primary-hover); }
    .Button--primary:active {
      background-color: var(--color-background-button-primary-pressed);
      color: var(--color-text-button-primary-pressed); }
    .Button--primary:focus, .Button--primary:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-interaction-focus); }
    .Button--primary:disabled {
      background-color: var(--color-background-button-primary-disabled);
      color: var(--color-text-button-primary-disabled); }
  .Button--buy {
    color: var(--color-text-button-transparent-base);
    border-color: var(--color-border-buy);
    border-style: solid;
    border-width: 0.2rem; }
    .Button--buy:hover {
      background-color: var(--color-background-transparent-hover); }
    .Button--buy:active {
      background-color: var(--color-background-transparent-active); }
    .Button--buy:focus, .Button--buy:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-shadow-button-focus); }
    .Button--buy:disabled {
      color: var(--color-text-disabled); }
  .Button--secondary {
    color: var(--color-text-default);
    border-color: var(--color-border-button-secondary-base);
    border-style: solid;
    border-width: 0.2rem; }
    .Button--secondary:hover {
      background-color: var(--color-interaction-hoverarea); }
    .Button--secondary:active {
      border-color: var(--color-border-button-secondary-pressed);
      color: var(--color-text-button-pressed); }
    .Button--secondary:focus, .Button--secondary:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-interaction-focus); }
    .Button--secondary:disabled {
      background-color: var(--color-background-button-secondary-disabled);
      border-color: var(--color-border-button-secondary-disabled);
      color: var(--color-text-button-secondary-disabled); }
  .Button--secondary.Button--active {
    background-color: var(--color-background-chip-select-selected); }
    .Button--secondary.Button--active:hover {
      background-color: #ababb0; }
  .Button--tertiary {
    color: var(--color-text-default);
    border-radius: 0.3rem;
    /* Prevents the text color to change when high contrast is on (specfically on Windows Firefox Browswer) */
    color: inherit; }
    .Button--tertiary:active {
      color: var(--color-text-button-pressed); }
    .Button--tertiary:focus, .Button--tertiary:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-interaction-focus); }
    .Button--tertiary:disabled {
      color: var(--color-text-disabled); }
    .Button--tertiary:hover {
      text-decoration: underline;
      text-decoration-thickness: 0.2rem;
      text-underline-position: under;
      /* Prevents the text color to change when high contrast in on (specfically on Windows Firefox Browswer) */
      color: inherit; }
  .Button--tertiary.Button--medium {
    padding: 1rem 0; }
  .Button--tertiary.Button--large {
    padding: 1.2rem 0; }
  .Button--tertiary.Button--rounded:hover {
    background-color: var(--color-interaction-hoverarea); }
  .Button--tertiary.Button--rounded:disabled {
    color: var(--color-text-disabled); }
  .Button--tertiary > .Button__labelItem:only-child {
    text-decoration: underline;
    text-decoration-thickness: 0.2rem;
    text-underline-position: under; }
  .Button--tag {
    color: var(--color-text-button-tag-base);
    border-radius: 0.3rem;
    /* Tags need margin (since it has no padding it becomes a bit cramped) */
    margin-right: 0.8rem;
    position: relative;
    text-decoration: none;
    background: none;
    border: 0; }
    .Button--tag:focus, .Button--tag:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-interaction-focus); }
    .Button--tag:disabled {
      color: var(--color-text-disabled); }
    .Button--tag::after, .Button--tag::before {
      background-color: var(--color-background-tag-accent-darker);
      position: absolute;
      bottom: 1rem;
      left: 0;
      width: 100%;
      height: 0.2rem;
      content: "";
      transition: transform 0.3s ease-out;
      transform: scaleX(1);
      transform-origin: left; }
    .Button--tag::after {
      transform: scaleX(0); }
    .Button--tag:hover::before {
      background-color: var(--color-background-tag-accent-lighter); }
    .Button--tag:hover::after {
      transform: scaleX(1); }
  .Button--tag.Button--medium {
    padding: 1rem 0; }
  .Button--transparent {
    color: var(--color-text-action-primary-base); }
    .Button--transparent:hover {
      background-color: var(--color-background-transparent-hover);
      color: var(--color-text-action-primary-hover); }
    .Button--transparent:active {
      background-color: var(--color-background-transparent-active);
      color: var(--color-text-action-primary-base); }
    .Button--transparent:focus, .Button--transparent:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-shadow-button-focus); }
    .Button--transparent:disabled {
      color: var(--color-text-disabled); }
    .Button--transparent:disabled, .Button--transparent--disabled,
    fieldset:disabled .Button--transparent {
      color: var(--color-text-disabled);
      opacity: 1; }
  .Button--inline {
    color: var(--color-text-action-primary-base);
    border-radius: 0.3rem;
    height: unset;
    border: 0;
    vertical-align: bottom; }
    .Button--inline:active {
      color: var(--color-text-action-primary-base); }
    .Button--inline:focus, .Button--inline:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-shadow-button-focus); }
    .Button--inline:disabled {
      color: var(--color-text-disabled); }
    .Button--inline:focus, .Button--inline:hover, .Button--inline:active {
      text-decoration: underline;
      text-decoration-thickness: 0.2rem;
      text-underline-position: under; }
    .Button--inline:disabled, .Button--inline--disabled,
    fieldset:disabled .Button--inline {
      color: var(--color-text-disabled);
      background-color: transparent; }
  .Button--inline.Button--subdued {
    color: var(--color-text-subdued); }
  .Button--inline.Button--active {
    color: var(--color-text-action-secondary-base); }
    .Button--inline.Button--active:hover {
      color: var(--color-text-action-secondary-hover); }
    .Button--inline.Button--active:active {
      color: var(--color-text-action-secondary-base); }
    .Button--inline.Button--active:focus, .Button--inline.Button--active:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-shadow-button-focus); }
    .Button--inline.Button--active:disabled {
      color: var(--color-text-disabled); }
  .Button--tag-selector {
    background-color: var(--color-background-tag-selector-base);
    color: var(--color-text-action-primary-base); }
    .Button--tag-selector:hover {
      background-color: var(--color-background-tag-selector-hover); }
    .Button--tag-selector:focus, .Button--tag-selector:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-shadow-button-focus); }
    .Button--tag-selector:disabled {
      color: var(--color-text-disabled); }
  .Button--wtr {
    background-color: var(--color-background-wtr-base);
    color: var(--color-text-button-wtr-base);
    border-color: var(--color-border-wtr-base); }
    .Button--wtr:hover {
      background-color: var(--color-background-wtr-hover); }
    .Button--wtr:active {
      background-color: var(--color-background-wtr-base); }
    .Button--wtr:focus, .Button--wtr:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-shadow-button-focus); }
    .Button--wtr:disabled {
      color: var(--color-text-disabled); }
  .Button--rounded {
    border-radius: 50%; }
  .Button--signinwithamazon {
    background-color: var(--color-brand-amazon-base);
    color: var(--color-brand-amazon-accent); }
    .Button--signinwithamazon:hover {
      background-color: var(--color-brand-amazon-hover); }
    .Button--signinwithamazon:focus, .Button--signinwithamazon:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-shadow-button-focus); }
    .Button--signinwithamazon:disabled {
      color: var(--color-text-disabled); }
  .Button--signinwithapple {
    background-color: var(--color-brand-apple-base);
    color: var(--color-brand-apple-accent); }
    .Button--signinwithapple:hover {
      background-color: var(--color-brand-apple-hover); }
    .Button--signinwithapple:focus, .Button--signinwithapple:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-shadow-button-focus); }
    .Button--signinwithapple:disabled {
      color: var(--color-text-disabled); }
  .Button--signinwithfacebook {
    background-color: var(--color-brand-facebook-base);
    color: var(--color-brand-facebook-accent); }
    .Button--signinwithfacebook:hover {
      background-color: var(--color-brand-facebook-hover); }
    .Button--signinwithfacebook:focus, .Button--signinwithfacebook:active {
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-shadow-button-focus); }
    .Button--signinwithfacebook:disabled {
      color: var(--color-text-disabled); }
  .Button--medium {
    height: 4.4rem;
    padding: 0 2rem;
    font-size: 1.6rem; }
    .Button--medium.Button--rounded, .Button--medium.Button--icon {
      width: 4.4rem;
      padding: 0; }
    .Button--medium.Button--inline {
      height: unset;
      padding: 0; }
  .Button--large {
    height: 4.8rem;
    padding: 0 2.4rem;
    font-size: 1.8rem; }
    .Button--large.Button--rounded, .Button--large.Button--icon {
      width: 4.8rem;
      padding: 0; }
    .Button--large.Button--inline {
      height: unset;
      padding: 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Badge__content {
  background-color: var(--color-background-primary-base);
  color: var(--color-text-button-primary-base);
  border-radius: 3rem;
  padding: 0 0.8rem;
  margin-left: 0.4rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.BookCover {
  position: relative; }
  .BookCover__image {
    border-radius: 0 6% 6% 0/4%;
    overflow: hidden; }
  .BookCover__fixedAspectRatio::after {
    display: block;
    padding-top: 150%;
    content: ""; }
  .BookCover__fixedAspectRatio .BookCover__image {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
    object-position: top; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.H1Title {
  font-family: Copernicus, "Libre Baskerville", Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-heading-base); }
  @media only screen and (min-width: 40em) and (max-width: 63.9375em) {
    .H1Title {
      font-size: 3.2rem;
      line-height: 1.3125; } }
  @media only screen and (min-width: 64em) {
    .H1Title {
      font-size: 3.6rem;
      line-height: 1.33333; } }
  .H1Title a {
    text-decoration: none; }
    .H1Title a:hover {
      text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Text.Text--italic {
  font-style: italic; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.H1 {
  font-family: Copernicus, "Libre Baskerville", Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-heading-base); }
  @media only screen and (min-width: 40em) and (max-width: 63.9375em) {
    .H1 {
      font-size: 2.4rem;
      line-height: 1.36364; } }
  @media only screen and (min-width: 64em) {
    .H1 {
      font-size: 2.6rem;
      line-height: 1.29167; } }
  .H1 a {
    color: var(--color-text-action-primary-base);
    text-decoration: none; }
    .H1 a:hover {
      color: var(--color-text-action-primary-hover);
      text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.H2 {
  font-family: Copernicus, "Libre Baskerville", Georgia, serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.33333;
  color: var(--color-text-heading-base); }
  @media only screen and (min-width: 64em) {
    .H2 {
      font-size: 2rem;
      line-height: 1.3; } }
  .H2 a {
    color: var(--color-text-action-primary-base);
    text-decoration: none; }
    .H2 a:hover {
      color: var(--color-text-action-primary-hover);
      text-decoration: underline; }
  .H2.Text--subdued a,
  .H2.Text--subdued a:hover {
    color: var(--color-text-subdued); }
  .H2 a {
    text-decoration: none; }
    .H2 a:hover {
      text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.H3 {
  font-family: Copernicus, "Libre Baskerville", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4375;
  color: var(--color-text-heading-base); }
  .H3 a {
    color: var(--color-text-action-primary-base);
    text-decoration: none; }
    .H3 a:hover {
      color: var(--color-text-action-primary-hover);
      text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.H4 {
  font-family: "Proxima Nova", Montserrat, Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4375;
  color: var(--color-text-heading-base);
  text-transform: uppercase; }
  .H4 a {
    color: var(--color-text-action-primary-base);
    text-decoration: none; }
    .H4 a:hover {
      color: var(--color-text-action-primary-hover);
      text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.H5 {
  font-family: Copernicus, "Libre Baskerville", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.57143;
  color: var(--color-text-heading-base); }
  .H5 a {
    color: var(--color-text-action-primary-base);
    text-decoration: none; }
    .H5 a:hover {
      color: var(--color-text-action-primary-hover);
      text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.H6 {
  margin: 0.8rem 0;
  font: 400 1.4rem/1.35714 "Proxima Nova", Montserrat, Arial, sans-serif;
  font-weight: 600; }
  .H6 a {
    color: var(--color-text-action-primary-base);
    text-decoration: none; }
    .H6 a:hover {
      color: var(--color-text-action-primary-hover);
      text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Formatted {
  /* Specialized pure css-toolitp implementation for spoilers.
   * when we build tooltips we'll want to share styling
   * Spoilers are blurred for browser that support blur,
   * gray "redacted" highlight for browsers that don't support spoilers.
   */ }
  .Formatted br {
    margin: 0; }
  .Formatted a {
    text-decoration: underline; }
    .Formatted a:hover {
      color: var(--color-interaction-hoverlink);
      text-decoration: underline; }
    .Formatted a:focus {
      border-radius: 0.3rem;
      box-shadow: 0 0 0 0.2rem var(--color-shadow-button-focus);
      text-decoration: underline; }
  .Formatted ul,
  .Formatted ol {
    margin-left: 1.5em; }
  .Formatted li {
    margin-bottom: 1em; }
  .Formatted strong,
  .Formatted b {
    font-weight: 600; }
  .Formatted em,
  .Formatted i {
    font-style: italic; }
  .Formatted u {
    text-decoration: underline; }
  .Formatted s {
    text-decoration: line-through; }
  .Formatted pre {
    display: block;
    padding: 0.5rem;
    font-family: Courier;
    background: #eee;
    border: 0.1rem solid #ccc;
    border-radius: 0.2rem; }
  .Formatted blockquote {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    padding-left: 2.4rem;
    margin-right: 2.4rem;
    font-size: 1.4rem;
    font-style: italic;
    line-height: 1.5;
    border-left: 0.2rem solid var(--color-border-blockquote); }
    .Formatted blockquote strong,
    .Formatted blockquote b {
      font-weight: 400; }
    .Formatted blockquote em,
    .Formatted blockquote i {
      font-style: normal; }
  .Formatted img {
    display: block;
    max-width: 40%;
    max-height: 15rem;
    width: auto;
    height: auto; }
    @media only screen and (min-width: 48em) and (max-width: 63.9375em) {
      .Formatted img {
        max-width: 55%; } }
    @media only screen and (max-width: 47.9375em) {
      .Formatted img {
        max-width: 70%; } }
  .Formatted .spoiler {
    background-color: var(--color-text-spoiler-hidden);
    color: var(--color-text-spoiler-hidden);
    position: relative;
    cursor: pointer;
    transition: all 0.5s ease-in-out; }
    .Formatted .spoiler__control {
      border: 0;
      position: absolute;
      left: 25%;
      white-space: nowrap;
      transition: all 0.2s ease-in-out;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      /* stylelint-disable selector-max-compound-selectors */
      /* stylelint-enable selector-max-compound-selectors */
      /* displays spoiler after it's been clicked */
      /* main tooltip text */
      /* triangle */ }
      .Formatted .spoiler__control:checked:hover::after, .Formatted .spoiler__control:checked:hover::before {
        display: none; }
      .Formatted .spoiler__control:not(:checked) + .spoiler {
        /* don't follow links when clicking to unblur spoiler */
        /* hide images in hidden spoilers */ }
        .Formatted .spoiler__control:not(:checked) + .spoiler a {
          pointer-events: none; }
        .Formatted .spoiler__control:not(:checked) + .spoiler img {
          display: none; }
      .Formatted .spoiler__control:checked + .spoiler {
        background-color: var(--color-background-spoiler-visible);
        color: var(--color-text-body-standard);
        filter: none; }
      .Formatted .spoiler__control:hover::after {
        background-color: var(--color-background-spoiler-tooltip-base);
        color: var(--color-text-body-standard);
        position: absolute;
        top: -2.2rem;
        left: -1.2rem;
        z-index: 1;
        padding: 0.8rem 1.2rem;
        word-break: normal;
        content: "View spoiler";
        box-shadow: 0 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.2);
        border-radius: 0.5rem;
        outline: none; }
      .Formatted .spoiler__control:hover::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        content: "";
        border: 0.5rem solid transparent;
        border-top-color: var(--color-background-spoiler-tooltip-base);
        outline: none; }
    @supports (filter: blur()) {
      .Formatted .spoiler {
        background-color: transparent;
        filter: blur(0.3rem); } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Small {
  display: block;
  font: 400 1.4rem/1.35714 "Proxima Nova", Montserrat, Arial, sans-serif; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Text {
  /**
   * Deprecated presets below. removed when there's no more usage
   */ }
  .Text a {
    text-decoration: none; }
    .Text a:hover {
      text-decoration: underline; }
    .Text a:focus {
      border-radius: 0.3rem;
      box-shadow: 0 0 0 0.2rem var(--color-shadow-button-focus);
      text-decoration: underline; }
  .Text__title1, .Text__title2, .Text__title2-static, .Text__title3, .Text__title4 {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    color: var(--color-text-heading-base);
    font-weight: 600; }
  .Text__title3-secondary, .Text__title4-secondary {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    color: var(--color-text-heading-base);
    font-weight: 400; }
  .Text__body1, .Text__body2, .Text__body3, .Text__body4 {
    font-family: "Proxima Nova", Montserrat, Arial, sans-serif;
    font-weight: 400; }
  @media only screen and (min-width: 64em) {
    .Text__title1 {
      font-size: 3.6rem;
      line-height: 4.6rem; } }
  @media only screen and (min-width: 40em) and (max-width: 63.9375em) {
    .Text__title1 {
      font-size: 3.2rem;
      line-height: 4.2rem; } }
  @media only screen and (max-width: 47.9375em) {
    .Text__title1 {
      font-size: 2.2rem;
      line-height: 3rem; } }
  @media only screen and (min-width: 64em) {
    .Text__title2 {
      font-size: 2.8rem;
      line-height: 3.8rem; } }
  @media only screen and (min-width: 40em) and (max-width: 63.9375em) {
    .Text__title2 {
      font-size: 2.4rem;
      line-height: 3.1rem; } }
  @media only screen and (max-width: 47.9375em) {
    .Text__title2 {
      font-size: 2rem;
      line-height: 2.8rem; } }
  .Text__title2-static {
    font-size: 2.8rem;
    line-height: 3.8rem; }
  @media only screen and (min-width: 64em) {
    .Text__title3, .Text__title3-secondary {
      font-size: 2rem;
      line-height: 2.8rem; } }
  @media only screen and (min-width: 40em) and (max-width: 63.9375em) {
    .Text__title3, .Text__title3-secondary {
      font-size: 1.8rem;
      line-height: 2.4rem; } }
  @media only screen and (max-width: 47.9375em) {
    .Text__title3, .Text__title3-secondary {
      font-size: 1.6rem;
      line-height: 2.2rem; } }
  .Text__title4, .Text__title4-secondary {
    font-size: 1.4rem;
    line-height: 2rem; }
  .Text__body1 {
    color: var(--color-text-body-standard);
    font-size: 1.8rem;
    line-height: 2.4rem; }
  .Text__body2 {
    color: var(--color-text-body-standard);
    font-size: 1.6rem;
    line-height: 2.2rem; }
  .Text__body3 {
    color: var(--color-text-body-light);
    font-size: 1.4rem;
    line-height: 1.8rem; }
  .Text__body4 {
    color: var(--color-text-body-light);
    font-size: 1.2rem;
    line-height: 1.6rem; }
  .Text__caption {
    color: var(--color-text-body-standard);
    font-size: 1rem;
    line-height: 1rem; }
  .Text__truncate1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word; }
  .Text__truncate2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word; }
  .Text__truncate3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word; }
  .Text__truncate4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word; }
  .Text__truncate5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word; }
  .Text__truncate6 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word; }
  .Text__truncate7 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word; }
  .Text__semibold {
    font-weight: 600; }
  .Text__regular {
    font-weight: 400; }
  .Text__copernicus {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif; }
  .Text__proxima-nova {
    font-family: "Proxima Nova", Montserrat, Arial, sans-serif; }
  .Text__bold {
    font-weight: 700; }
  .Text__italic {
    font-style: italic; }
  .Text__uppercase {
    text-transform: uppercase; }
  .Text__lowercase {
    text-transform: lowercase; }
  .Text__capitalize {
    text-transform: capitalize; }
  .Text__primary-action {
    color: var(--color-text-action-primary-base); }
  .Text__heading-text {
    color: var(--color-text-heading-base); }
  .Text__body-light {
    color: var(--color-text-body-light); }
  .Text__body-standard {
    color: var(--color-text-body-standard); }
  .Text__subdued {
    color: var(--color-text-subdued); }
  .Text__author {
    color: var(--color-text-author-base); }
  .Text__metadata-text {
    color: var(--color-text-subdued); }
  .Text__umber {
    color: var(--color-text-action-primary-base); }
  .Text__body-tiny {
    font: 400 1.3rem/1.30769 "Proxima Nova", Montserrat, Arial, sans-serif; }
  .Text__body-small {
    font: 400 1.4rem/1.35714 "Proxima Nova", Montserrat, Arial, sans-serif; }
  .Text__body-regular {
    font: 400 1.6rem/1.4375 "Proxima Nova", Montserrat, Arial, sans-serif; }
  .Text__body-large {
    font: 400 1.8rem/1.33333 "Proxima Nova", Montserrat, Arial, sans-serif; }
  .Text__body-xlarge {
    font: 400 2.4rem/1.29167 "Proxima Nova", Montserrat, Arial, sans-serif; }
  .Text__title {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    color: var(--color-text-heading-base);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3; }
    @media only screen and (min-width: 40em) and (max-width: 63.9375em) {
      .Text__title {
        font-size: 3.2rem;
        line-height: 1.3125; } }
    @media only screen and (min-width: 64em) {
      .Text__title {
        font-size: 3.6rem;
        line-height: 1.33333; } }
  .Text__h1 {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    color: var(--color-text-heading-base);
    font-weight: 600; }
  .Text__h2 {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    color: var(--color-text-heading-base);
    font-weight: 600; }
  .Text__h3 {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    color: var(--color-text-heading-base);
    font-weight: 600; }
  .Text__h4 {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    color: var(--color-text-heading-base);
    font-weight: 600; }
  .Text__h5 {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    color: var(--color-text-heading-base);
    font-weight: 600; }
  .Text__h6 {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    color: var(--color-text-heading-base);
    font-weight: 600; }
  .Text__h1 {
    font-size: 2.2rem;
    line-height: 1.3; }
    @media only screen and (min-width: 40em) and (max-width: 63.9375em) {
      .Text__h1 {
        font-size: 2.4rem;
        line-height: 1.36364; } }
    @media only screen and (min-width: 64em) {
      .Text__h1 {
        font-size: 2.6rem;
        line-height: 1.29167; } }
  .Text__h2 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.33333; }
    @media only screen and (min-width: 64em) {
      .Text__h2 {
        font-size: 2rem;
        line-height: 1.3; } }
  .Text__h3 {
    font-size: 1.6rem;
    line-height: 1.4375; }
  .Text__h4 {
    font: 400 1.6rem/1.4375 "Proxima Nova", Montserrat, Arial, sans-serif;
    font-family: "Proxima Nova", Montserrat, Arial, sans-serif;
    line-height: 1.4375; }
  .Text__h5 {
    font-size: 1.4rem;
    line-height: 1.57143; }
  .Text__h6 {
    font: 400 1.4rem/1.35714 "Proxima Nova", Montserrat, Arial, sans-serif; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Breadcrumbs {
  display: block; }
  .Breadcrumbs__list {
    list-style-type: none;
    display: flex; }
  .Breadcrumbs__listItem {
    padding-right: 0.4rem;
    /*
     * At breakpoints < medium, we only show one breadcrumb: that of the page
     * one level higher.
     * Ex: Home > Giveaways > Fantasy becomes just Giveaways
     */ }
    .Breadcrumbs__listItem .Icon {
      height: 1.6rem;
      width: 1.6rem;
      margin-left: 0.4rem;
      vertical-align: middle;
      color: var(--color-text-disabled); }
    .Breadcrumbs__listItem:last-child {
      padding-top: 1rem;
      padding-right: 0; }
    @media only screen and (max-width: 47.9375em) {
      .Breadcrumbs__listItem {
        display: none; }
        .Breadcrumbs__listItem:nth-last-child(2) {
          display: block; }
        .Breadcrumbs__listItem .Icon {
          display: none; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Divider {
  background-color: var(--color-background-divider);
  height: 0.1rem;
  border: 0; }
  .Divider--contents {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.6rem;
    height: auto;
    background: none; }
    .Divider--contents::before, .Divider--contents::after {
      background-color: var(--color-background-divider);
      align-self: center;
      height: 0.1rem;
      content: ""; }
  .Divider--largeMargin {
    margin: 2.4rem 0; }
  .Divider--mediumMargin {
    margin: 1.6rem 0; }
  .Divider--smallMargin {
    margin: 1.2rem 0; }
  .Divider--xsmallMargin {
    margin: 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Elevation {
  display: block;
  padding: 0; }
  .Elevation--padding-small {
    padding: 1.2rem; }
  .Elevation__contents {
    position: relative;
    transition: box-shadow 0.2s ease-in-out; }
    .Elevation__contents--shadow-small {
      box-shadow: 0 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.2); }
    .Elevation__contents--shadow-medium {
      box-shadow: 0 0.6rem 1.2rem 0 rgba(0, 0, 0, 0.1); }
    .Elevation__contents--shadow-large {
      box-shadow: 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.2); }
    .Elevation__contents--radius-standard {
      border-radius: 0.8rem; }
    .Elevation__contents--radius-minor {
      border-radius: 0.3rem; }
    .Elevation__contents--radius-book-cover {
      border-radius: 0 6% 6% 0/4%; }
  .Elevation--clickable {
    text-decoration: none; }
  .Elevation--clickable:hover .Elevation__contents--shadow-small {
    box-shadow: 0 0.4rem 1rem 0 rgba(0, 0, 0, 0.2); }
  .Elevation--clickable:hover .Elevation__contents--shadow-medium {
    box-shadow: 0 1rem 1.4rem 0 rgba(0, 0, 0, 0.1); }
  .Elevation--clickable:hover .Elevation__contents--shadow-large {
    box-shadow: 0 1.4rem 2.4rem 0 rgba(0, 0, 0, 0.2); }
  .Elevation--clickable:focus .Elevation__contents::before, .Elevation--clickable:focus .Elevation__contents::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    border-radius: 1.2rem; }
  .Elevation--clickable:focus .Elevation__contents--radius-standard::before, .Elevation--clickable:focus .Elevation__contents--radius-standard::after {
    border-radius: 1.2rem; }
  .Elevation--clickable:focus .Elevation__contents--radius-minor::before, .Elevation--clickable:focus .Elevation__contents--radius-minor::after {
    border-radius: 0.8rem; }
  .Elevation--clickable:focus .Elevation__contents--radius-book-cover::before, .Elevation--clickable:focus .Elevation__contents--radius-book-cover::after {
    border-radius: 0 9% 9% 0/6%; }
  .Elevation--clickable:focus .Elevation__contents::before {
    box-shadow: 0 0 0 0.2rem #ababb0;
    width: calc(100% + 0.4rem);
    height: calc(100% + 0.4rem);
    top: -0.2rem;
    left: -0.2rem; }
  .Elevation--clickable:focus .Elevation__contents::after {
    box-shadow: 0 0 0 0.3rem #1e1915;
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
    top: -0.5rem;
    left: -0.5rem; }
  .Elevation__contents-inner {
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .Elevation__contents-inner--radius-standard {
      border-radius: 0.8rem; }
    .Elevation__contents-inner--radius-minor {
      border-radius: 0.3rem; }
    .Elevation__contents-inner--radius-book-cover {
      border-radius: 0 6% 6% 0/4%; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FormControl {
  background-color: var(--color-background-input-base);
  border-radius: 3rem;
  display: flex;
  padding: 0 1.2rem;
  min-height: 4.4rem;
  border: 0.1rem solid var(--color-border-secondary-base);
  transition: all 0.2s ease-in-out;
  font: 400 1.6rem/1.4375 "Proxima Nova", Montserrat, Arial, sans-serif; }
  .FormControl__ornament {
    color: var(--color-text-default);
    padding: 1rem;
    display: flex;
    align-items: center; }
    .FormControl__ornament:focus {
      border-radius: 3rem;
      background-color: var(--color-background-body-base);
      box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-interaction-focus); }
    .FormControl__ornament svg {
      width: 2.4rem;
      height: 2.4rem; }
  .FormControl__leadingOrnament {
    padding-left: 0.4rem; }
    .FormControl__leadingOrnament .FormControl__input {
      margin-left: 0.8rem; }
  .FormControl__trailingOrnament {
    padding-right: 0.6rem; }
    .FormControl__trailingOrnament .FormControl__input {
      margin-right: 0.4rem; }
  .FormControl:hover {
    background-color: var(--color-interaction-hoverarea); }
  .FormControl:focus-within {
    color: var(--color-text-default);
    background-color: var(--color-background-body-base);
    outline: none;
    box-shadow: 0 0 0 0.3rem var(--color-background-body-base), 0 0 0 0.6rem var(--color-interaction-focus); }
  .FormControl__textarea, .FormControl__input {
    width: 100%;
    padding: 0;
    margin: auto;
    border: 0;
    background: transparent;
    outline: none;
    color: inherit; }
    .FormControl__textarea::placeholder, .FormControl__input::placeholder {
      color: var(--color-text-subdued); }
    .FormControl__textarea:disabled::placeholder, .FormControl__input:disabled::placeholder {
      color: var(--color-text-disabled); }
  .FormControl__textarea {
    resize: vertical; }
  .FormControl__expanding {
    border-radius: 1.2rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-right: 0.4rem; }
  .FormControl--error {
    border-color: var(--color-shadow-input-warning); }
  .FormControl:disabled, .FormControl__disabled, .FormControl__disabled.FormControl:hover {
    background-color: var(--color-background-input-base);
    border: 0.1rem solid var(--color-text-disabled); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FormLabel {
  color: var(--color-text-subdued);
  font: 400 1.4rem/1.35714 "Proxima Nova", Montserrat, Arial, sans-serif; }
  .FormLabel--error {
    color: var(--color-text-warning); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FormGroup {
  width: 100%; }
  .FormGroup .FormControl + .FormText,
  .FormGroup .FormLabel:not(.u-sr-only) + .FormControl {
    margin-top: 0.8rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FormText {
  font: 400 1.4rem/1.35714 "Proxima Nova", Montserrat, Arial, sans-serif; }
  .FormText--error {
    color: var(--color-text-warning); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FormRadio {
  border-radius: 0.8rem;
  display: flex;
  align-items: start;
  cursor: pointer;
  padding: 1.2rem 0.8rem;
  transition: all 0.2s ease-in-out; }
  .FormRadio:hover {
    background-color: var(--color-interaction-hoverarea); }
  .FormRadio:focus-within {
    box-shadow: 0 0 0 0.3rem var(--color-interaction-focus); }
  .FormRadio__input {
    appearance: none;
    cursor: pointer;
    color: var(--color-text-action-primary-base);
    width: 1.8rem;
    height: 1.8rem;
    border: 0.2rem solid var(--color-text-action-primary-base);
    border-radius: 50%;
    display: grid;
    margin-right: 1.2rem;
    place-content: center;
    transform: translateY(-0.2rem); }
  .FormRadio--disabled, .FormRadio--disabled:hover, .FormRadio__input:disabled {
    color: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
    background: inherit; }
  .FormRadio__input[type="radio"]::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--color-text-action-primary-base);
    border-radius: 50%;
    transform: scale(0); }
  .FormRadio__input[type="radio"]:checked::before {
    transform: scale(1); }
  .FormRadio__input:checked:disabled::before {
    background-color: var(--color-text-disabled); }
  .FormRadio__input:focus {
    outline: none; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FormCheckbox {
  border-radius: 0.8rem;
  display: flex;
  align-items: start;
  cursor: pointer;
  padding: 1.2rem 0.8rem;
  transition: all 0.2s ease-in-out;
  word-break: break-word;
  hyphens: auto; }
  .FormCheckbox:hover {
    background-color: var(--color-interaction-hoverarea); }
  .FormCheckbox:focus-within {
    box-shadow: 0 0 0 0.3rem var(--color-interaction-focus); }
  .FormCheckbox__input {
    flex-shrink: 0;
    appearance: none;
    cursor: pointer;
    color: var(--color-text-action-primary-base);
    width: 1.8rem;
    height: 1.8rem;
    border: 0.2rem solid var(--color-text-action-primary-base);
    border-radius: 0.2rem;
    display: grid;
    margin-right: 1.2rem;
    place-content: center;
    transform: translateY(-0.1rem); }
  .FormCheckbox--disabled, .FormCheckbox--disabled:hover, .FormCheckbox__input:disabled {
    color: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
    background: inherit; }
  .FormCheckbox__input:checked::before {
    content: "\2714"; }
  .FormCheckbox__input:focus {
    outline: none; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.RadioInput {
  display: flex;
  align-items: center;
  height: 1.4rem;
  position: relative;
  padding: 0 3rem;
  margin-bottom: 0;
  cursor: pointer;
  /* stylelint-disable scss/selector-no-redundant-nesting-selector */ }
  .RadioInput input {
    position: absolute;
    width: 0.1rem;
    height: 0.1rem;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
    left: 0.2rem;
    top: 0.3rem; }
    .RadioInput input:checked + .RadioInput__button::before {
      border-color: var(--color-text-action-primary-base); }
    .RadioInput input:checked + .RadioInput__button::after {
      transform: scale(1); }
  .RadioInput__button::before, .RadioInput__button::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    transition-property: transform, border-color; }
  .RadioInput__button::before {
    left: 0;
    top: 0;
    width: 1.4rem;
    height: 1.4rem;
    border: 0.2rem solid var(--color-border-input-radio-base); }
  .RadioInput__button::after {
    top: 0.4rem;
    left: 0.4rem;
    width: 0.6rem;
    height: 0.6rem;
    transform: scale(0);
    background: var(--color-text-action-primary-base); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Label {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 0.3rem; }
  .Label__live {
    background-color: #f0bf6e; }
  .Label__generic {
    background-color: #ead0ad; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.GoodreadsLettermark {
  display: block;
  height: 100%; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.GoodreadsWordmark {
  display: block;
  width: 100%; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.RatingStar {
  transition: all 0.2s ease-in-out;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0; }
  .RatingStar--selectable {
    outline: 0;
    cursor: pointer;
    border-radius: 50%; }
    .RatingStar--selectable:focus, .RatingStar--selectable:active {
      box-shadow: 0 0 0 0.3rem var(--color-shadow-button-focus); }
  .RatingStar--small {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0.2rem; }
  .RatingStar--medium {
    width: 3.8rem;
    height: 3.8rem;
    padding: 0.6rem; }
  .RatingStar__fill {
    fill: var(--color-background-rating-star-base);
    transition: fill 0.2s ease; }
    .RatingStar__fill--selectable {
      fill: var(--color-background-rating-star-base); }
    .RatingStar__fill--hovered {
      fill: var(--color-background-rating-star-base);
      opacity: 0.8; }
  .RatingStar__backgroundFill {
    fill: var(--color-background-rating-star-empty);
    transition: fill 0.2s ease; }
    .RatingStar__backgroundFill--selectable, .RatingStar__backgroundFill--hovered {
      stroke-linejoin: miter;
      stroke: var(--color-background-rating-star-border);
      stroke-width: 3;
      fill: none; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.RelativeTime--warning {
  font-weight: 600;
  color: var(--color-text-warning); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 32rem;
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 6.4rem;
  --toastify-toast-max-height: 80rem;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error); }

.Toastify__toast-container {
  z-index: 9999;
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, 9999 px);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index) px);
  position: fixed;
  padding: 0.4rem;
  width: 36.8rem;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff; }
  .Toastify__toast-container--top-left {
    top: 1em;
    left: 1em; }
  .Toastify__toast-container--top-center {
    top: 1em;
    left: 50%;
    transform: translateX(-50%); }
  .Toastify__toast-container--top-right {
    top: 1em;
    right: 1em; }
  .Toastify__toast-container--bottom-left {
    bottom: 1em;
    left: 1em; }
  .Toastify__toast-container--bottom-center {
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%); }
  .Toastify__toast-container--bottom-right {
    bottom: 1em;
    right: 1em; }

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0; }
    .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
      top: 0;
      transform: translateX(0); }
    .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
      bottom: 0;
      transform: translateX(0); }
    .Toastify__toast-container--rtl {
      right: 0;
      left: initial; } }

.Toastify__toast {
  position: relative;
  min-height: 6.4rem;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-radius: 0.4rem;
  box-shadow: 0 0.1rem 1rem 0 rgba(0, 0, 0, 0.1), 0 0.2rem 1.5rem 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  max-height: 80rem;
  max-height: var(--toastify-toast-max-height);
  overflow: hidden;
  font-family: sans-serif;
  font-family: var(--toastify-font-family);
  cursor: pointer;
  direction: ltr; }
  .Toastify__toast--rtl {
    direction: rtl; }
  .Toastify__toast-body {
    margin: auto 0;
    flex: 1 1 auto;
    padding: 0.6rem;
    display: flex;
    align-items: center; }
    .Toastify__toast-body > div:last-child {
      flex: 1; }
  .Toastify__toast-icon {
    margin-inline-end: 1rem;
    width: 2rem;
    flex-shrink: 0;
    display: flex; }

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.7s; }

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s; }

@media only screen and (max-width: 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0; } }

.Toastify__toast-theme--dark {
  background: #121212;
  background: var(--toastify-color-dark);
  color: #fff;
  color: var(--toastify-text-color-dark); }

.Toastify__toast-theme--light {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light); }

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light); }

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: #fff;
  color: var(--toastify-text-color-info);
  background: #3498db;
  background: var(--toastify-color-info); }

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: #fff;
  color: var(--toastify-text-color-success);
  background: #07bc0c;
  background: var(--toastify-color-success); }

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: #fff;
  color: var(--toastify-text-color-warning);
  background: #f1c40f;
  background: var(--toastify-color-warning); }

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: #fff;
  color: var(--toastify-text-color-error);
  background: #e74c3c;
  background: var(--toastify-color-error); }

.Toastify__progress-bar-theme--light {
  background: var(--color-background-toast-generic-base);
  background: var(--toastify-color-progress-light); }

.Toastify__progress-bar-theme--dark {
  background: var(--color-background-toast-generic-base);
  background: var(--toastify-color-progress-dark); }

.Toastify__progress-bar--info {
  background: #3498db;
  background: var(--toastify-color-progress-info); }

.Toastify__progress-bar--success {
  background: var(--color-background-toast-success-base);
  background: var(--toastify-color-progress-success); }

.Toastify__progress-bar--warning {
  background: #f1c40f;
  background: var(--toastify-color-progress-warning); }

.Toastify__progress-bar--error {
  background: var(--color-background-toast-error-base);
  background: var(--toastify-color-progress-error); }

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: rgba(255, 255, 255, 0.7);
  background: var(--toastify-color-transparent); }

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start; }
  .Toastify__close-button--light {
    color: #000;
    opacity: 0.3; }
  .Toastify__close-button > svg {
    fill: currentColor;
    height: 1.6rem;
    width: 1.4rem; }
  .Toastify__close-button:hover, .Toastify__close-button:focus {
    opacity: 1; }

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1); }
  100% {
    transform: scaleX(0); } }

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  z-index: 9999;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left; }
  .Toastify__progress-bar--animated {
    animation: Toastify__trackProgress linear 1 forwards; }
  .Toastify__progress-bar--controlled {
    transition: transform 0.2s; }
  .Toastify__progress-bar--rtl {
    right: 0;
    left: initial;
    transform-origin: right; }

.Toastify__spinner {
  width: 2rem;
  height: 2rem;
  box-sizing: border-box;
  border: 0.2rem solid;
  border-radius: 100%;
  border-color: #e0e0e0;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: #616161;
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite; }

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    transform: translate3d(300rem, 0, 0); }
  60% {
    opacity: 1;
    transform: translate3d(-2.5rem, 0, 0); }
  75% {
    transform: translate3d(1rem, 0, 0); }
  90% {
    transform: translate3d(-0.5rem, 0, 0); }
  to {
    transform: none; } }

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-2rem, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(200rem, 0, 0); } }

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: translate3d(-300rem, 0, 0); }
  60% {
    opacity: 1;
    transform: translate3d(2.5rem, 0, 0); }
  75% {
    transform: translate3d(-1rem, 0, 0); }
  90% {
    transform: translate3d(0.5rem, 0, 0); }
  to {
    transform: none; } }

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(2rem, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(-200rem, 0, 0); } }

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    transform: translate3d(0, 300rem, 0); }
  60% {
    opacity: 1;
    transform: translate3d(0, -2rem, 0); }
  75% {
    transform: translate3d(0, 1rem, 0); }
  90% {
    transform: translate3d(0, -0.5rem, 0); }
  to {
    transform: translate3d(0, 0, 0); } }

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -1rem, 0); }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, 2rem, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, -200rem, 0); } }

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: translate3d(0, -300rem, 0); }
  60% {
    opacity: 1;
    transform: translate3d(0, 2.5rem, 0); }
  75% {
    transform: translate3d(0, -1rem, 0); }
  90% {
    transform: translate3d(0, 0.5rem, 0); }
  to {
    transform: none; } }

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 1rem, 0); }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, -2rem, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, 200rem, 0); } }

.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft; }

.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight; }

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown; }

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp; }

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft; }

.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight; }

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp; }

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown; }

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

@keyframes Toastify__zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn; }

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut; }

@keyframes Toastify__flipIn {
  from {
    transform: perspective(40rem) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    transform: perspective(40rem) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in; }
  60% {
    transform: perspective(40rem) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    transform: perspective(40rem) rotate3d(1, 0, 0, -5deg); }
  to {
    transform: perspective(40rem); } }

@keyframes Toastify__flipOut {
  from {
    transform: perspective(40rem); }
  30% {
    transform: perspective(40rem) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    transform: perspective(40rem) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

.Toastify__flip-enter {
  animation-name: Toastify__flipIn; }

.Toastify__flip-exit {
  animation-name: Toastify__flipOut; }

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(110%, 0, 0); } }

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(-110%, 0, 0); } }

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(0, 50rem, 0); } }

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(0, -50rem, 0); } }

.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft; }

.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight; }

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown; }

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp; }

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft; }

.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight; }

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp; }

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown; }

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

/*
 * Override existing styles here. See:
 * https://fkhadra.github.io/react-toastify/how-to-style
*/
:root {
  --toastify-color-progress-dark: var(--color-background-toast-generic-base);
  --toastify-color-progress-error: var(--color-background-toast-error-base);
  --toastify-color-progress-light: var(--color-background-toast-generic-base);
  --toastify-color-progress-success: var(--color-background-toast-success-base);
  --toastify-toast-width: 36.8rem; }

.Toast {
  font: 400 1.6rem/1.4375 "Proxima Nova", Montserrat, Arial, sans-serif; }
  .Toast .CheckIcon {
    color: var(--color-notification-success); }
  .Toast .ExclamationIcon {
    color: var(--color-notification-failure); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Accordion__header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.2rem;
  padding-right: 0.8rem; }
  .Accordion__header:focus {
    border-radius: 0.3rem;
    box-shadow: 0 0 0 0.3rem var(--color-shadow-button-focus); }
  .Accordion__header:hover {
    background-color: var(--color-background-transparent-hover); }

.Accordion__headerText {
  flex: 1;
  text-align: left; }

.Accordion__body {
  padding: 1.2rem; }
  .Accordion__body-enter {
    opacity: 0; }
  .Accordion__body-enter-active {
    opacity: 1;
    transition: all 0.2s ease-in-out; }
  .Accordion__body-exit {
    opacity: 1; }
  .Accordion__body-exit-done {
    display: none; }
  .Accordion__body-exit-active {
    opacity: 0;
    transition: all 0.2s ease-in-out; }

.Accordion__caret {
  width: 2.4rem;
  height: 2.4rem;
  justify-self: flex-end; }
  .Accordion__caret-enter-active, .Accordion__caret-exit-active {
    transition: all 0.2s ease-in-out; }
  .Accordion__caret-enter-active, .Accordion__caret-enter-done {
    transform: rotate(180deg); }
  .Accordion__caret-exit {
    transform: rotate(-180deg); }
  .Accordion__caret-exit-active {
    transform: rotate(0deg); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Alert {
  /* same border radius as the modal, change when that becomes a token */
  border-radius: 0.8rem;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3.2rem 4rem;
  transition: all 0.2s ease-in-out;
  gap: 1.6rem; }
  .Alert--informational {
    background-color: var(--color-background-alert-informational); }
  .Alert--caution {
    background-color: var(--color-background-alert-caution); }
  .Alert--success {
    background-color: var(--color-background-alert-success); }
  .Alert--cover {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%; }
  .Alert__close {
    position: absolute;
    top: 2.4rem;
    right: 1.6rem;
    color: inherit; }
  .Alert--succeed {
    background-color: var(--color-background-alt);
    border-left: 1rem solid var(--color-notification-success); }
  .Alert--failure {
    background-color: var(--color-background-alt);
    border-left: 1rem solid var(--color-notification-failure); }
  .Alert--info {
    background-color: var(--color-background-alt);
    border-left: 1rem solid var(--color-notification-info); }
  .Alert__iconTextContainer {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem; }
  .Alert .Icon {
    width: 2.4rem;
    height: 2.4rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.AvatarGroup {
  display: inline-flex; }
  .AvatarGroup .Avatar {
    display: inline-block; }
  .AvatarGroup .Avatar--xsmall + .Avatar--xsmall {
    margin-left: -0.4rem; }
  .AvatarGroup .Avatar--small + .Avatar--small {
    margin-left: -1.2rem; }
  .AvatarGroup__overflowAvatar {
    background-color: var(--color-background-avatar-group-overflow-base);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ButtonGroup {
  display: inline-flex;
  /* 
   * Buttons have a .Button__container div wrapper do to the dropdown menu implementation
   */
  /* sets outlines to not overlap */ }
  .ButtonGroup--block {
    display: flex;
    width: 100%; }
  .ButtonGroup .Button__container:not(:first-child):not(:last-child) .Button {
    padding-right: 0.4rem; }
    .ButtonGroup .Button__container:not(:first-child):not(:last-child) .Button__medium {
      padding-right: 1.2rem; }
  .ButtonGroup .Button__container:not(:first-child) .Button {
    border-left-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
    .ButtonGroup .Button__container:not(:first-child) .Button:focus, .ButtonGroup .Button__container:not(:first-child) .Button:active {
      border-left-width: 0.1rem; }
    .ButtonGroup .Button__container:not(:first-child) .Button .Button {
      /* stylelint-disable-line selector-max-compound-selectors */
      padding-left: 0.4rem; }
      .ButtonGroup .Button__container:not(:first-child) .Button .Button__medium {
        /* stylelint-disable-line selector-max-compound-selectors */
        padding-left: 1.2rem; }
  .ButtonGroup .Button__container:not(:last-child) .Button {
    border-right-width: 0.1rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .ButtonGroup .Button__container + .Button__container {
    margin: 0; }
  .ButtonGroup .Button:hover, .ButtonGroup .Button:focus, .ButtonGroup .Button:active {
    z-index: z-index(body); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Carousel {
  position: relative;
  display: grid; }
  .Carousel__header {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    padding: 0 3.2rem 0 0; }
  .Carousel__subHeader {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.4rem; }
  .Carousel__inner {
    padding: 0 3.2rem 0 1.6rem;
    margin-left: -1.6rem;
    overflow: hidden; }
    @media only screen and (max-width: 47.9375em) {
      .Carousel__inner {
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding: 0 1.6rem;
        margin-right: -1.6rem; }
        .Carousel__inner::-webkit-scrollbar {
          display: none; } }
    .Carousel__inner::after {
      background-color: var(--color-background-body-base);
      position: absolute;
      top: 0;
      right: 0;
      width: 1.6rem;
      height: 100%;
      content: "";
      user-select: none; }
      @media only screen and (max-width: 47.9375em) {
        .Carousel__inner::after {
          pointer-events: none;
          background-color: transparent; } }
  .Carousel__itemsArea {
    position: relative; }
    @media only screen and (min-width: 48em) {
      .Carousel__itemsArea {
        margin-right: -3.2rem; } }
  .Carousel--sliderWrapper {
    transition: transform 0.5s ease 0s; }
    .Carousel--sliderWrapper::-webkit-scrollbar {
      display: none; }
  .Carousel__paginationButton .Button__container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-background-alt);
    z-index: 2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0.4rem 0.8rem 0 #1e1915;
    transition: transform 0.3s ease-out;
    transform-origin: center;
    /* Ensures scaling happens from the center */ }
    .Carousel__paginationButton .Button__container i {
      color: var(--color-background-icon-default); }
    .Carousel__paginationButton .Button__container:hover, .Carousel__paginationButton .Button__container:focus {
      transform: translateY(-50%) scale(1.09);
      /* Scale to 48px (48/44 = 1.09) */
      background-color: var(--color-interaction-hoverarea); }
    .Carousel__paginationButton .Button__container .Button {
      border: 0.1rem solid var(--color-border-elevation-medium); }
  .Carousel__paginationButton--left .Button__container {
    margin-left: -2rem; }
  .Carousel__paginationButton--right .Button__container {
    right: 1rem; }
  .Carousel__pageIndicatorWrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem; }
  .Carousel__pageIndicator {
    display: block;
    width: 1.6rem;
    height: 0.4rem;
    border-radius: 0.3rem;
    background-color: var(--color-background-carousel-pagination); }
    .Carousel__pageIndicator--selected {
      background-color: var(--color-background-icon-default); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.CarouselGroup {
  display: flex;
  margin: 1.2rem 0 0.8rem !important;
  overflow: unset;
  white-space: nowrap; }
  @media only screen and (max-width: 47.9375em) {
    .CarouselGroup {
      padding-right: 2.4rem;
      margin-right: -1.6rem !important;
      margin-bottom: 1.6rem !important; } }
  .CarouselGroup__item {
    position: relative;
    display: inline-block;
    min-width: 100%;
    max-width: 100%;
    padding-right: 2.4rem;
    white-space: normal;
    vertical-align: top; }
    @media only screen and (min-width: 64em) {
      .CarouselGroup__item {
        padding-right: 3.2rem; } }
    .CarouselGroup__item--2-col {
      min-width: calc(100%/2);
      max-width: calc(100%/2); }
    .CarouselGroup__item--3-col {
      min-width: calc(100%/3);
      max-width: calc(100%/3); }
    .CarouselGroup__item--4-col {
      min-width: calc(100%/4);
      max-width: calc(100%/4); }
    .CarouselGroup__item--5-col {
      min-width: calc(100%/5);
      max-width: calc(100%/5); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ChipList {
  display: flex;
  padding: 0.8rem;
  margin: -0.4rem -0.8rem; }
  .ChipList__item {
    display: inline-block;
    flex-shrink: 0;
    margin-bottom: 0.8rem; }
    .ChipList__item:not(:last-child) {
      margin-right: 0.8rem; }
  @media only screen and (max-width: 47.9375em) {
    .ChipList {
      overflow-x: auto;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      -ms-overflow-style: none;
      scrollbar-width: none; }
      .ChipList::-webkit-scrollbar {
        display: none; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.CollectionCard {
  max-width: 58.4rem; }
  .CollectionCard:focus-within {
    border-radius: 0.8rem;
    box-shadow: 0 0 0 0.4rem var(--color-background-body-base), 0 0 0 0.7rem var(--color-interaction-focus);
    transition: transition(transform, exit); }
  .CollectionCard__cardClickTarget {
    text-decoration: none;
    outline: 0; }
  .CollectionCard__card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20.2rem;
    overflow: hidden;
    border-radius: 1.2rem; }
  .CollectionCard__images {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; }
  .CollectionCard__bookCover {
    width: calc(100% / 3);
    max-width: 10rem;
    max-height: 15.3rem;
    margin-right: 2.4rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: 0 6% 6% 0/4%; }
    .CollectionCard__bookCover:last-child {
      margin-right: 0; }
  .CollectionCard__defaultBookCover {
    background-color: var(--color-background-book-cover-placeholder-accent);
    border-radius: 0.3rem;
    color: var(--color-background-book-cover-placeholder-base);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10.3rem;
    height: 15.3rem;
    margin-right: 2.4rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none; }
    .CollectionCard__defaultBookCover:last-child {
      margin-right: 0; }
    .CollectionCard__defaultBookCover i {
      height: 8rem; }
  .CollectionCard--slope {
    transform: rotate(20deg); }
  .CollectionCard--staircase :first-child {
    margin-top: 6rem; }
  .CollectionCard--staircase :last-child {
    margin-bottom: 6rem; }
  .CollectionCard--diamond {
    /* stylelint-disable scss/selector-no-redundant-nesting-selector */ }
    .CollectionCard--diamond .CollectionCard__bookCover,
    .CollectionCard--diamond .CollectionCard__defaultBookCover {
      /* stylelint-enable scss/selector-no-redundant-nesting-selector */
      position: absolute;
      transform: translate(-50%, -50%); }
      .CollectionCard--diamond .CollectionCard__bookCover:nth-child(1),
      .CollectionCard--diamond .CollectionCard__defaultBookCover:nth-child(1) {
        top: 50%;
        left: calc(50% - 12.5rem); }
      .CollectionCard--diamond .CollectionCard__bookCover:nth-child(2),
      .CollectionCard--diamond .CollectionCard__defaultBookCover:nth-child(2) {
        top: 8%;
        left: 50%; }
      .CollectionCard--diamond .CollectionCard__bookCover:nth-child(3),
      .CollectionCard--diamond .CollectionCard__defaultBookCover:nth-child(3) {
        top: 92%;
        left: 50%; }
      .CollectionCard--diamond .CollectionCard__bookCover:nth-child(4),
      .CollectionCard--diamond .CollectionCard__defaultBookCover:nth-child(4) {
        top: 50%;
        left: calc(50% + 12.5rem); }
  .CollectionCard--green {
    background-color: var(--color-background-book-cover-variant-1); }
  .CollectionCard--blue {
    background-color: var(--color-background-book-cover-variant-2); }
  .CollectionCard--purple {
    background-color: var(--color-background-book-cover-variant-3); }
  .CollectionCard--beige {
    background-color: var(--color-background-book-cover-variant-4); }
  .CollectionCard__title {
    margin-top: 1.2rem; }
    .CollectionCard__title:hover {
      text-decoration: underline; }
  .CollectionCard__subText {
    margin-top: 0.4rem;
    color: var(--color-text-subdued); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.DescList {
  display: table; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.DescListItem {
  display: table-row; }
  .DescListItem dt,
  .DescListItem dd {
    display: table-cell;
    padding: 0.4rem 0; }
  .DescListItem dt {
    width: 12.5rem;
    padding-right: 1.6rem;
    color: var(--color-text-subdued); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.DynamicCarousel {
  position: relative; }
  .DynamicCarousel__slide-next .DynamicCarousel__innerContainer {
    position: static;
    transition: transform 0.5s ease-in-out; }
  .DynamicCarousel__slide-prev .DynamicCarousel__innerContainer {
    position: relative;
    transition: transform 0.5s ease-in-out;
    height: 100%; }
  .DynamicCarousel__indicators {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: flex-end; }
  .DynamicCarousel__itemsArea {
    overflow: hidden;
    padding: 2.4rem 0;
    margin-bottom: 1.6rem;
    margin-left: -1.2rem;
    padding-left: 1.2rem; }
  .DynamicCarousel__item {
    position: relative;
    flex: 1;
    min-width: 0;
    margin-right: 2.4rem;
    white-space: normal; }
    @media only screen and (min-width: 64em) {
      .DynamicCarousel__item {
        margin-right: 3.2rem; } }
  .DynamicCarousel__innerContainer {
    display: flex;
    pointer-events: auto;
    transform: translateX(0); }
  .DynamicCarousel__header {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 2.4rem 0 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
/* stylelint-disable */
.Overlay {
  display: flex;
  /* stylelint-disable order/order */
  /* stylelint-enable order/order */ }
  @media only screen and (min-width: 48em) {
    .Overlay--moveRight {
      transform: translateX(1.6rem); }
    .Overlay--moveLeft {
      transform: translateY(1.6rem); } }
  .Overlay--anchored {
    position: absolute;
    z-index: 1; }
  .Overlay--floating {
    position: fixed;
    top: 2.4rem;
    right: 0;
    bottom: 2.4rem;
    left: 0;
    z-index: 200;
    align-items: center;
    justify-content: center; }
    .Overlay--floating::before {
      position: absolute;
      top: -2.4rem;
      right: 0;
      bottom: -2.4rem;
      left: 0;
      align-items: center;
      justify-content: center;
      content: "";
      background: rgba(0, 0, 0, 0.3);
      transition: all 0.2s ease-in-out; }
  @media only screen and (max-width: 47.9375em) {
    .Overlay--anchored, .Overlay--floating {
      position: fixed;
      top: 2.4rem;
      right: 0;
      bottom: 2.4rem;
      left: 0;
      z-index: 200;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 0;
      align-items: flex-end; }
      .Overlay--anchored::before, .Overlay--floating::before {
        position: absolute;
        top: -2.4rem;
        right: 0;
        bottom: -2.4rem;
        left: 0;
        align-items: center;
        justify-content: center;
        content: "";
        background: rgba(0, 0, 0, 0.3);
        transition: all 0.2s ease-in-out; } }
  .Overlay--willOpen::before, .Overlay--willClose::before {
    background: rgba(0, 0, 0, 0); }
  .Overlay__window {
    background-color: var(--color-background-body-base);
    border-radius: 0.8rem;
    position: relative;
    top: 0;
    min-width: 28rem;
    max-width: 41rem;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    padding: 2.4rem 0;
    box-shadow: 0 0.2rem 0.8rem rgba(30, 25, 21, 0.2);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    /* stylelint-disable order/order */
    /* stylelint-enable order/order */ }
    @media only screen and (min-width: 48em) {
      .Overlay--anchored .Overlay__window {
        padding: 1.2rem 0; } }
    .Overlay__window:focus {
      outline: none; }
    .Overlay--floating .Overlay__window--willOpen {
      top: 100vh; }
    .Overlay--anchored .Overlay__window--willOpen {
      opacity: 0; }
    .Overlay--floating .Overlay__window--willClose {
      top: -100vh; }
    .Overlay--anchored .Overlay__window--willClose {
      opacity: 0; }
    @media only screen and (max-width: 47.9375em) {
      .Overlay__window {
        bottom: 0;
        width: 100%;
        border-radius: 0.8rem 0.8rem 0 0; }
        .Overlay--floating .Overlay__window--willOpen,
        .Overlay--anchored .Overlay__window--willOpen,
        .Overlay--floating .Overlay__window--willClose,
        .Overlay--anchored .Overlay__window--willClose {
          top: 100vh;
          opacity: 1; } }
  .Overlay__header {
    display: flex;
    padding: 0 1.2rem 1.6rem 2.4rem;
    margin-top: -0.4rem;
    align-items: flex-start; }
    .Overlay__header .Text {
      width: 100%; }
      @media only screen and (max-width: 47.9375em) {
        .Overlay__header .Text {
          margin-top: 0.4rem; } }
    @media only screen and (max-width: 47.9375em) {
      .Overlay__header--desktopOnly {
        display: none; } }
    @media only screen and (min-width: 48em) {
      .Overlay__header--mobileOnly {
        display: none; } }
  .Overlay__content {
    border-radius: 0.8rem;
    position: relative;
    padding: 0 2.4rem;
    overflow-y: auto;
    background: linear-gradient(var(--color-background-body-base) 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), var(--color-background-body-base) 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
    background: linear-gradient(var(--color-background-body-base) 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), var(--color-background-body-base) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
    background-color: var(--color-background-body-base);
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
    background-size: 100% 4rem, 100% 4rem, 100% 1.4rem, 100% 1.4rem; }
    .Overlay--anchored .Overlay__content {
      max-height: 75vh; }
  .Overlay__close {
    width: 4.2rem;
    height: 4.2rem; }
  .Overlay__actions {
    display: flex;
    padding: 2.4rem 2.4rem 0; }
    .Overlay__actions > * {
      width: 50%; }
    .Overlay__actions > :first-child:not(:only-child) {
      margin-right: 1.6rem; }
    .Overlay__actions .Button {
      width: 100%; }
  .Overlay__icon {
    display: inline-flex;
    margin-right: 0.8rem; }
    .Overlay__icon svg {
      width: 2.4rem;
      height: 2.4rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.DropdownMenu {
  margin: 0.4rem -1.2rem; }
  .DropdownMenu__item {
    border-radius: 0.8rem;
    color: var(--color-text-action-primary-base);
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.8rem 0.8rem;
    margin: 0.4rem 0;
    overflow: hidden;
    text-align: left;
    transition: all 0.2s ease-in-out;
    text-decoration: none; }
    .DropdownMenu__item:hover {
      background-color: var(--color-background-dropdown-menu-item-hover);
      color: var(--color-text-action-primary-hover); }
    .DropdownMenu__item:active {
      background-color: var(--color-background-dropdown-menu-item-hover);
      color: var(--color-text-action-primary-base); }
    .DropdownMenu__item:disabled {
      color: var(--color-text-disabled); }
    .DropdownMenu__item .DropdownMenu__leadingOrnament {
      margin-right: 1.2rem; }
    .DropdownMenu__item .DropdownMenu__trailingOrnament {
      margin-left: 1.2rem; }
    .DropdownMenu__item .DropdownMenu__leadingOrnament,
    .DropdownMenu__item .DropdownMenu__trailingOrnament {
      display: inline-flex; }
      .DropdownMenu__item .DropdownMenu__leadingOrnament svg,
      .DropdownMenu__item .DropdownMenu__trailingOrnament svg {
        width: 2.4rem;
        height: 2.4rem; }
    .DropdownMenu__item .DropdownMenu__content {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .DropdownMenu__item:active:not(:focus) {
      background-color: var(--color-background-transparent-active); }
    .DropdownMenu__item:focus, .DropdownMenu__item:active {
      box-shadow: 0 0 0 0.3rem var(--color-shadow-button-focus); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.RadioGroup__input {
  border-radius: 0.8rem;
  padding: 1.6rem 0.8rem; }
  .RadioGroup__input:hover {
    background-color: var(--color-background-transparent-hover);
    color: var(--color-text-action-primary-hover); }
  .RadioGroup__input:focus-within {
    box-shadow: 0 0 0 0.3rem var(--color-shadow-button-focus); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.RatingsHistogram {
  font: 400 1.4rem/1.35714 "Proxima Nova", Montserrat, Arial, sans-serif; }
  .RatingsHistogram__empty {
    background-color: var(--color-background-rating-empty-base);
    border-radius: 0.8rem;
    overflow: hidden;
    transition: all 0.2s ease-in-out; }
  .RatingsHistogram__fill {
    background-color: var(--color-background-rating-fill-base);
    border-radius: 0.8rem;
    height: 1.2rem; }
  .RatingsHistogram__labelTotal {
    color: var(--color-text-subdued);
    padding-left: 0.4rem; }
  .RatingsHistogram__labelTitle {
    color: var(--color-text-action-primary-base);
    font-weight: 600; }
  .RatingsHistogram__container {
    border-radius: 3rem;
    transition: all 0.2s ease-in-out;
    padding: 1.6rem 1.2rem; }
  .RatingsHistogram__bar, .RatingsHistogram__bar--selected {
    border-radius: 0.8rem;
    display: grid;
    grid-template-columns: 5rem auto 10.5rem;
    grid-column-gap: 0.4rem;
    align-items: center;
    padding-left: 0.4rem;
    margin: 0.4rem 0; }
  .RatingsHistogram__interactive .RatingsHistogram__bar,
  .RatingsHistogram__interactive .RatingsHistogram__bar--selected {
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out; }
    .RatingsHistogram__interactive .RatingsHistogram__bar:hover .RatingsHistogram__labelTotal,
    .RatingsHistogram__interactive .RatingsHistogram__bar--selected:hover .RatingsHistogram__labelTotal {
      text-decoration: underline;
      text-underline-position: under; }
    .RatingsHistogram__interactive .RatingsHistogram__bar:focus,
    .RatingsHistogram__interactive .RatingsHistogram__bar--selected:focus {
      box-shadow: 0 0 0 0.2rem var(--color-shadow-button-focus); }
  .RatingsHistogram__interactive .RatingsHistogram__labelTitle {
    vertical-align: bottom;
    text-decoration: underline;
    text-decoration-thickness: 0.2rem;
    text-underline-position: under;
    text-decoration-color: var(--color-text-action-primary-base); }
  .RatingsHistogram__interactive .RatingsHistogram__bar:hover .RatingsHistogram__container {
    background-color: var(--color-background-rating-container-hover); }
  .RatingsHistogram__interactive .RatingsHistogram__bar:hover .RatingsHistogram__empty {
    background-color: var(--color-background-rating-empty-hover); }
  .RatingsHistogram__interactive .RatingsHistogram__bar--selected .RatingsHistogram__empty {
    background-color: var(--color-background-rating-empty-base); }
  .RatingsHistogram__interactive .RatingsHistogram__bar--selected .RatingsHistogram__container {
    background-color: var(--color-background-rating-container-selected-base); }
  .RatingsHistogram__interactive .RatingsHistogram__bar--selected .RatingsHistogram__labelTitle {
    text-decoration-color: var(--color-background-rating-fill-base); }
  .RatingsHistogram__interactive .RatingsHistogram__bar--selected:hover .RatingsHistogram__empty {
    background-color: var(--color-background-rating-empty-selected-hover); }
  .RatingsHistogram__interactive .RatingsHistogram__bar--selected:hover .RatingsHistogram__container {
    background-color: var(--color-background-rating-container-selected-hover); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.RatingStars {
  display: inline-flex; }
  .RatingStars__small {
    margin-left: -0.2rem; }
  .RatingStars__medium {
    margin-left: -0.6rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ToggleButton__hover {
  display: none;
  visibility: hidden; }

@media (hover: hover) {
  .ToggleButton:hover .ToggleButton__hover {
    display: block;
    visibility: visible; }
  .ToggleButton:hover .ToggleButton__noHover {
    display: none;
    visibility: hidden; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.TruncatedContent {
  position: relative; }
  .TruncatedContent__text {
    overflow: hidden;
    word-break: break-word; }
    .TruncatedContent__text--small {
      max-height: 8.8rem; }
    .TruncatedContent__text--medium {
      max-height: 11.2rem; }
    .TruncatedContent__text--large {
      max-height: 16rem; }
    .TruncatedContent__text--expanded {
      max-height: none;
      overflow-y: visible; }
  .TruncatedContent__gradientOverlay {
    position: absolute;
    bottom: 0;
    padding-top: 2.4rem;
    width: 100%;
    /* stylelint-disable function-parentheses-space-inside */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-background-body-base) 1.6rem); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.DetailsLayout {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 3.2rem !important;
  margin-bottom: 4rem; }
  @media only screen and (min-width: 40em) and (max-width: 47.9375em) {
    .DetailsLayout {
      grid-gap: 2.4rem !important; } }
  @media only screen and (max-width: 39.9375em) {
    .DetailsLayout {
      grid-gap: 1.6rem !important; } }
  .DetailsLayout__leftColumn {
    grid-column: span 3; }
    @media only screen and (min-width: 48em) and (max-width: 63.9375em) {
      .DetailsLayout__leftColumn {
        grid-column: span 4; } }
    @media only screen and (max-width: 47.9375em) {
      .DetailsLayout__leftColumn {
        -ms-grid-column: 4;
        -ms-grid-column-span: 6;
        grid-column: 4 / 10; } }
    @supports (position: sticky) {
      @media only screen and (min-width: 48em) {
        .DetailsLayout__leftColumn--sticky {
          position: sticky; } } }
  .DetailsLayout__mainColumn {
    -ms-grid-column: 5;
    -ms-grid-column-span: 8;
    grid-column: 5 / 13; }
    @media only screen and (max-width: 47.9375em) {
      .DetailsLayout__mainColumn {
        grid-column: span 12; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FixedSiderailLayout {
  /**
  * Media query for mobile viewports to hide the side rail and 
  * display just the main content
  */ }
  .FixedSiderailLayout__container {
    display: grid;
    grid-template-rows: auto;
    margin-top: 2.4rem;
    grid-gap: 3.2rem; }
    @media only screen and (min-width: 80em) {
      .FixedSiderailLayout__container {
        grid-gap: 4.8rem;
        margin-top: 3.2rem; } }
    .FixedSiderailLayout__container--leftSiderail {
      grid-template-columns: 30rem 1fr;
      grid-template-areas: "side-rail content"; }
    .FixedSiderailLayout__container--rightSiderail {
      grid-template-columns: 1fr 30rem;
      grid-template-areas: "content side-rail"; }
  .FixedSiderailLayout__siderail {
    grid-area: side-rail; }
  .FixedSiderailLayout__content {
    grid-area: content; }
  @media only screen and (max-width: 47.9375em) {
    .FixedSiderailLayout__container {
      grid-template-columns: 1fr;
      grid-template-areas: "content";
      grid-gap: 0;
      margin-top: 0; }
    .FixedSiderailLayout__siderail {
      display: none; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.NoSiderailLayout__container {
  display: grid; }
  @media only screen and (min-width: 93.5em) {
    .NoSiderailLayout__container {
      grid-template-columns: repeat(12, minmax(0, 1fr)); } }
  @media only screen and (min-width: 64em) and (max-width: 93.4375em) {
    .NoSiderailLayout__container {
      grid-template-columns: repeat(12, minmax(0, 1fr)); } }
  @media only screen and (min-width: 64em) and (max-width: 79.9375em) {
    .NoSiderailLayout__container {
      grid-template-columns: repeat(12, minmax(0, 1fr)); } }
  @media only screen and (min-width: 48em) and (max-width: 63.9375em) {
    .NoSiderailLayout__container {
      grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  @media only screen and (min-width: 40em) and (max-width: 47.9375em) {
    .NoSiderailLayout__container {
      grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  @media only screen and (min-width: 30em) and (max-width: 39.9375em) {
    .NoSiderailLayout__container {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media only screen and (max-width: 29.9375em) {
    .NoSiderailLayout__container {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media only screen and (min-width: 93.5em) {
    .NoSiderailLayout__container {
      grid-gap: 2.4rem; } }
  @media only screen and (min-width: 64em) and (max-width: 93.4375em) {
    .NoSiderailLayout__container {
      grid-gap: 1.7%; } }
  @media only screen and (min-width: 64em) and (max-width: 79.9375em) {
    .NoSiderailLayout__container {
      grid-gap: 2%; } }
  @media only screen and (min-width: 48em) and (max-width: 63.9375em) {
    .NoSiderailLayout__container {
      grid-gap: 3%; } }
  @media only screen and (min-width: 40em) and (max-width: 47.9375em) {
    .NoSiderailLayout__container {
      grid-gap: 2.5%; } }
  @media only screen and (min-width: 30em) and (max-width: 39.9375em) {
    .NoSiderailLayout__container {
      grid-gap: 3%; } }
  @media only screen and (max-width: 29.9375em) {
    .NoSiderailLayout__container {
      grid-gap: 4%; } }

.NoSiderailLayout__content {
  grid-column: 1 / -1; }
  @media only screen and (min-width: 64em) {
    .NoSiderailLayout__content {
      grid-column: 2 / 12; } }
  @media only screen and (min-width: 48em) and (max-width: 63.9375em) {
    .NoSiderailLayout__content {
      grid-column: 2 / 6; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Footer {
  width: 100%;
  min-width: 32rem;
  background: #f4f1ea;
  padding: 3.2rem 0; }
  .Footer__contents {
    position: relative;
    display: flex;
    max-width: 128rem;
    margin: 0 auto;
    padding: 0 1.2rem; }
    @media only screen and (max-width: 47.9375em) {
      .Footer__contents {
        flex-direction: column; }
        .Footer__contents > * {
          margin-bottom: 2.4rem; } }
  .Footer__column {
    width: 20rem; }
  .Footer__heading {
    text-transform: uppercase;
    font: bold 1.4rem/2 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--color-text-body-standard); }
  .Footer__list a {
    text-decoration: none;
    color: #382110;
    font: normal 1.4rem/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .Footer__list a:hover, .Footer__list a:focus {
      text-decoration: underline; }
  .Footer__list--inline {
    display: flex; }
    .Footer__list--inline a {
      border-radius: 50%;
      display: block;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 0.4rem; }
      .Footer__list--inline a:focus {
        box-shadow: 0 0 0 0.3rem var(--color-shadow-button-focus); }
    .Footer__list--inline .Icon {
      height: 3rem;
      width: 3rem; }
      .Footer__list--inline .Icon path {
        color: #767676; }
  .Footer__right {
    position: absolute;
    top: 0;
    right: 1.6rem; }
  .Footer__badge {
    border-radius: 0.3rem;
    display: inline-block;
    width: 13.5rem;
    margin-right: 1.2rem; }
    @media only screen and (max-width: 63.9375em) {
      .Footer__badge {
        display: block; } }
    .Footer__badge:focus {
      box-shadow: 0 0 0 0.3rem #f4f1ea, 0 0 0 0.6rem var(--color-shadow-button-focus); }
    .Footer__badge svg {
      display: block;
      width: 100%; }
  .Footer__copy {
    margin-top: 1.2rem;
    font: normal 1.4rem/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.SiteStrip__topFullImageContainer {
  display: flex;
  justify-content: center;
  align-items: center; }

.SiteStrip img {
  max-width: none;
  height: 4rem; }

.SiteStrip__topFullImage--mobile {
  display: none; }

.SiteStrip__topFullImage--desktop {
  display: block; }

@media only screen and (max-width: 47.9375em) {
  .SiteStrip__topFullImage--mobile {
    display: block; }
  .SiteStrip__topFullImage--desktop {
    display: none; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
@media only screen and (max-width: 47.9375em) {
  .HeaderPrimaryNav {
    width: 100%; }
    .HeaderPrimaryNav__genres {
      display: block; } }

.HeaderPrimaryNav__genres {
  display: none; }

.HeaderPrimaryNav__dropDown {
  position: relative; }
  .HeaderPrimaryNav__dropDown:focus-within .HeaderNavDropdown {
    display: block; }
    .HeaderPrimaryNav__dropDown:focus-within .HeaderNavDropdown--browse {
      display: flex; }

.HeaderPrimaryNav__list {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0; }
  @media only screen and (max-width: 47.9375em) {
    .HeaderPrimaryNav__list {
      width: 100%;
      display: flex; } }
  @media only screen and (max-width: 47.9375em) {
    .HeaderPrimaryNav__list > li {
      position: static;
      flex: 1 1 auto; } }
  .HeaderPrimaryNav__list > li > a {
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    height: 5rem;
    text-decoration: none;
    line-height: 5rem;
    padding: 0 1.6rem; }
    @media only screen and (max-width: 47.9375em) {
      .HeaderPrimaryNav__list > li > a {
        padding: 0;
        white-space: nowrap; } }
    @media only screen and (min-width: 48em) and (max-width: 79.9375em) {
      .HeaderPrimaryNav__list > li > a {
        padding: 0 3.2rem; } }
  .HeaderPrimaryNav__list > li > a:hover,
  .HeaderPrimaryNav__list > li > a:focus,
  .HeaderPrimaryNav__list > li:hover > a,
  .HeaderPrimaryNav__list > li:focus-within > a {
    color: var(--color-background-body-base);
    background: #382110;
    outline: none; }
  .HeaderPrimaryNav__list ul {
    width: 16rem;
    margin: 0; }
    @media only screen and (max-width: 47.9375em) {
      .HeaderPrimaryNav__list ul {
        width: 100%; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Spotlight {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-left: 0.1rem solid #d8d8d8;
  background: #f6f6f6;
  padding: 0.8rem 0; }
  @media only screen and (max-width: 47.9375em) {
    .Spotlight {
      display: none; } }
  .Spotlight__loadingState {
    background: #f6f6f6;
    width: 41rem; }
  .Spotlight__listTitle {
    color: var(--color-text-heading-base);
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    padding-left: 1.6rem;
    display: block;
    width: 100%;
    line-height: 2.4;
    padding: 0 1.6rem; }
  .Spotlight__basicGenresList.Spotlight__basicGenresList {
    width: 41rem;
    columns: 3;
    column-gap: 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.SpotlightPane {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #f6f6f6;
  border-left: 0.1rem solid #d8d8d8;
  padding: 0.8rem 0;
  width: 60rem;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 39.9375em) {
    .SpotlightPane {
      justify-content: center; } }
  .SpotlightPane__title {
    font-size: 1.6rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 0.8rem; }
  .SpotlightPane__description {
    font-size: 1.4rem;
    color: #181818;
    margin-bottom: 0.8rem; }
  .SpotlightPane__browseGenres {
    font-size: 1.4rem;
    color: #333;
    text-decoration: none;
    margin-top: 0.8rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.LoadingCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.6rem; }
  .LoadingCard > * {
    margin-bottom: 1.2rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearch {
  position: relative;
  height: 3.2rem;
  width: 39.2rem;
  padding: 0 1.6rem; }
  .HeaderSearch form {
    height: 100%;
    width: 100%; }
  .HeaderSearch__label, .HeaderSearch__input {
    display: block;
    font-size: 1.4rem;
    height: 3.2rem;
    width: 100%;
    padding: 0.4rem 2.4rem 0.4rem 0.8rem; }
  .HeaderSearch__label {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 2.6rem;
    opacity: 0.5;
    padding-left: 1.2rem;
    transition: opacity 0.25s ease-in-out; }
    .HeaderSearch__label--hidden {
      opacity: 0; }
  .HeaderSearch__input {
    background-color: var(--color-background-body-base);
    border-radius: 0.3rem;
    border: 0.1rem solid #dcd6cc;
    line-height: 3.2rem; }
    .HeaderSearch__input:focus {
      outline: none;
      box-shadow: 0 0 0.4rem rgba(185, 173, 153, 0.5); }
  .HeaderSearch__button {
    display: block;
    position: absolute;
    top: 0;
    right: 1.6rem;
    height: 100%;
    width: 3.2rem;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    display: flex;
    justify-content: center;
    align-content: center; }
    .HeaderSearch__button .Icon {
      height: 80%;
      width: 80%;
      margin-top: 10%; }
      .HeaderSearch__button .Icon path {
        fill: #707070; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchBookItem {
  display: block;
  overflow: hidden;
  border-bottom: 0.1rem solid #d8d8d8; }
  .HeaderSearchBookItem__link, .HeaderSearchBookItem__link--selected {
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block;
    position: relative;
    width: 100%;
    height: 5.8rem;
    padding: 0.8rem 0.8rem 0.8rem 6.6rem;
    text-decoration: none;
    word-wrap: break-word;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #333;
    font-weight: 600; }
  .HeaderSearchBookItem__link--selected {
    background: #f4f1ea; }
    .HeaderSearchBookItem__link--selected::after {
      box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.5); }
    .HeaderSearchBookItem__link--selected::after {
      content: "";
      display: block;
      position: absolute;
      bottom: -0.1rem;
      left: 0;
      right: 0;
      height: 0.1rem;
      box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0);
      transition: box-shadow 0.2s ease-out; }
  .HeaderSearchBookItem__image {
    display: block;
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    width: 5rem;
    border: 0; }
  .HeaderSearchBookItem__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden; }
  .HeaderSearchBookItem__author {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-family: Merriweather, Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.6; }
    .HeaderSearchBookItem__author .Icon {
      height: 1.4rem;
      width: 1.4rem; }
      .HeaderSearchBookItem__author .Icon path {
        fill: var(--color-text-author-base); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchList {
  background-color: var(--color-background-body-base);
  display: block;
  border: 0.1rem solid #d8d8d8;
  border-width: 0 0.1rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchSeeMore {
  display: block;
  overflow: hidden;
  border-bottom: 0.1rem solid #d8d8d8; }
  .HeaderSearchSeeMore__link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block;
    position: relative;
    width: 100%;
    text-decoration: none;
    word-wrap: break-word;
    text-align: center;
    padding: 0.8rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #016661; }
    .HeaderSearchSeeMore__link:hover {
      text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchListTray {
  background-color: var(--color-background-body-base);
  display: block;
  position: relative;
  border: 0.1rem solid #d8d8d8;
  border-width: 0 0.1rem;
  z-index: 100; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSecondaryNav {
  position: absolute;
  right: 0; }
  .HeaderSecondaryNav__list {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .HeaderSecondaryNav__list > li {
      position: relative; }
    .HeaderSecondaryNav__list--signedOut > li:last-child {
      display: none; }
    .HeaderSecondaryNav__list--signedOut a {
      display: flex;
      justify-content: center;
      height: 5rem;
      text-decoration: none;
      font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #382110;
      font-size: 1.6rem;
      line-height: 5rem;
      padding: 0 1.6rem; }
      .HeaderSecondaryNav__list--signedOut a:hover, .HeaderSecondaryNav__list--signedOut a:focus {
        background: #382110;
        color: #fff;
        outline: none; }
      @media only screen and (max-width: 47.9375em) {
        .HeaderSecondaryNav__list--signedOut a {
          display: inline;
          padding: 0.8rem 1.2rem;
          font-size: 1.4rem;
          margin: 0 0.8rem 0 0;
          background-color: #382110;
          border: 0.1rem solid #382110;
          border-radius: 0.3rem;
          color: #fff; }
          .HeaderSecondaryNav__list--signedOut a:hover {
            background-color: #58371f; } }
    .HeaderSecondaryNav__list > li {
      position: relative; }
      .HeaderSecondaryNav__list > li .HeaderNavDropdown {
        display: block; }
  .HeaderSecondaryNav__topDivider {
    border-top: 0.1rem solid #ebebeb;
    margin-top: 0.4rem;
    padding-top: 0.4rem; }
  .HeaderSecondaryNav__desktopNotification {
    position: relative; }
    .HeaderSecondaryNav__desktopNotification.HeaderSecondaryNav__desktopNotification {
      display: inline-block; }
      @media only screen and (max-width: 47.9375em) {
        .HeaderSecondaryNav__desktopNotification.HeaderSecondaryNav__desktopNotification {
          display: none; } }
  .HeaderSecondaryNav__mobileNotificationLinks.HeaderSecondaryNav__mobileNotificationLinks {
    display: none; }
    @media only screen and (max-width: 47.9375em) {
      .HeaderSecondaryNav__mobileNotificationLinks.HeaderSecondaryNav__mobileNotificationLinks {
        display: inline-block; }
        .HeaderSecondaryNav__mobileNotificationLinks.HeaderSecondaryNav__mobileNotificationLinks > li {
          position: relative;
          display: inline-block; }
          .HeaderSecondaryNav__mobileNotificationLinks.HeaderSecondaryNav__mobileNotificationLinks > li > a {
            padding: 0 0.8rem; } }
  .HeaderSecondaryNav .Overlay__window {
    padding: 0;
    min-width: 25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0; }
  .HeaderSecondaryNav .Overlay .DropdownMenu {
    padding: 0;
    margin: 0; }
  .HeaderSecondaryNav .Overlay__content {
    padding: 0; }
  @media only screen and (max-width: 79.9375em) {
    .HeaderSecondaryNav {
      position: relative;
      right: auto; }
      .HeaderSecondaryNav__list > li:last-child {
        display: block; }
      .HeaderSecondaryNav__list--signedOut > li {
        display: flex; }
      .HeaderSecondaryNav__list--signedOut > li:last-child {
        display: none; } }
  .HeaderSecondaryNav__notificationsBadge--mobile {
    display: none; }
  @media only screen and (max-width: 47.9375em) {
    .HeaderSecondaryNav__notificationsBadge--mobile {
      display: block; }
    .HeaderSecondaryNav__list--signedOut > li {
      display: none; }
    .HeaderSecondaryNav__list--signedOut > li:last-child {
      display: block; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.HeaderNavDropdown {
  background-color: var(--color-background-body-base);
  display: none;
  opacity: 0;
  animation: 0.3s ease-out 0s 1 normal forwards fadeIn;
  position: absolute;
  top: 5rem;
  list-style-type: none;
  padding: 0.8rem 0;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
  @media only screen and (max-width: 47.9375em) {
    .HeaderNavDropdown {
      position: absolute;
      left: 0;
      width: 100%; } }
  .HeaderNavDropdown li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center; }
    .HeaderNavDropdown li a, .HeaderNavDropdown li__heading {
      color: var(--color-text-heading-base);
      font-size: 1.4rem;
      display: block;
      width: 100%;
      line-height: 2.4;
      text-decoration: none;
      padding: 0 1.6rem; }
    .HeaderNavDropdown li a, .HeaderNavDropdown li__buttons {
      width: auto;
      display: flex; }
    .HeaderNavDropdown li a:hover, .HeaderNavDropdown li a:focus {
      text-decoration: underline; }
  .HeaderNavDropdown__heading {
    font-weight: bold;
    text-transform: uppercase; }
  .HeaderNavDropdown__profileLink {
    font: 1.4rem/2.28571 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .HeaderNavDropdown__profileLink a {
      font-weight: bold;
      padding: 1.2rem 1.2rem 0 1.6rem;
      display: block;
      color: #333;
      line-height: 1.3;
      padding-bottom: 1.6rem; }
  .HeaderNavDropdown__avatar.HeaderNavDropdown__avatar {
    width: 10rem;
    padding-right: 0; }
    @media only screen and (min-width: 48em) {
      .HeaderNavDropdown__avatar.HeaderNavDropdown__avatar {
        display: none; } }
  .HeaderNavDropdown__toggleEditView {
    padding-left: 0.8rem;
    padding-bottom: 0.8rem; }
  .HeaderNavDropdown--overlay {
    position: sticky;
    display: block; }
    @media only screen and (max-width: 47.9375em) {
      .HeaderNavDropdown--overlay {
        opacity: 1;
        animation: none;
        box-shadow: none; } }
  .HeaderNavDropdown--browse {
    padding: 0; }
    .HeaderNavDropdown--browse > ul {
      padding: 0.8rem 0; }
    @media only screen and (max-width: 63.9375em) {
      .HeaderNavDropdown--browse {
        position: fixed;
        left: 50%;
        top: 10rem;
        transform: translateX(-50%); } }
    @media only screen and (max-width: 47.9375em) {
      .HeaderNavDropdown--browse {
        top: 10rem; } }
  @media only screen and (max-width: 63.9375em) {
    .HeaderNavDropdown--siteHeaderBanner {
      top: 14rem; } }
  @media only screen and (max-width: 47.9375em) {
    .HeaderNavDropdown--siteHeaderBanner {
      top: 14rem; } }
  .HeaderNavDropdown--pinToRight {
    left: auto;
    right: 0;
    width: 32rem; }
    @media only screen and (min-width: 48em) {
      .HeaderNavDropdown--pinToRight {
        width: 25rem; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSecondaryNavButton {
  display: block;
  height: 5rem;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 0.8rem;
  display: flex;
  align-items: center; }
  .HeaderSecondaryNavButton:hover, .HeaderSecondaryNavButton:focus,
  li:not(.HeaderSecondaryNav__buttons):hover > .HeaderSecondaryNavButton,
  li:not(.HeaderSecondaryNav__buttons):focus-within > .HeaderSecondaryNavButton, .HeaderSecondaryNavButton--highlight {
    background: #382110;
    color: #fff;
    outline: none; }
  .HeaderSecondaryNavButton__icon {
    border-radius: 50%;
    display: block;
    height: 3rem;
    width: 3rem;
    background: #c1b8a6; }
    .HeaderSecondaryNavButton__icon path {
      fill: var(--color-background-body-base); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.NotificationsBadge {
  background-color: var(--color-background-notif-badge-base);
  color: var(--color-text-notif-badge-base);
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-align: center;
  min-width: 1.4rem;
  top: 0.3rem;
  right: 0.3rem;
  height: 2rem;
  padding: 0.1rem 0.3rem 0;
  font-size: 1.2rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.NotificationsTray {
  background-color: var(--color-background-body-base);
  position: absolute;
  top: 5rem;
  right: 0;
  width: 33rem;
  opacity: 0;
  animation: 0.15s ease-out 0s 1 normal forwards fadeIn;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
  .NotificationsTray__loading {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center; }
    .NotificationsTray__loading > i {
      width: 5rem; }
  .NotificationsTray__header {
    padding: 1.6rem;
    border-bottom: 0.1rem solid var(--color-background-divider); }
  .NotificationsTray__title {
    color: var(--color-text-heading-base);
    font-size: 1.4rem;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 1.6rem;
    text-align: left;
    width: 100%;
    line-height: 1.4;
    padding: 0 1.6rem;
    text-decoration: none; }
  .NotificationsTray__allNotificationsLinkBox {
    text-decoration: none; }
  .NotificationsTray__allNotificationsLink {
    color: var(--color-text-subdued);
    font-size: 1.4rem;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0 1.6rem; }
  .NotificationsTray__allNotificationsLinkBox:hover .NotificationsTray__allNotificationsLink {
    color: var(--color-text-action-secondary-hover);
    text-decoration: underline; }
  .NotificationsTray__notifications {
    max-height: 38rem;
    overflow-y: scroll; }
    .NotificationsTray__notifications::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 0.7rem; }
    .NotificationsTray__notifications::-webkit-scrollbar-thumb {
      border-radius: 0.3rem;
      background-color: var(--color-background-notif-scrollbar-thumb); }
  .NotificationsTray__notification {
    display: flex;
    padding: 1.2rem 1.6rem;
    border-bottom: 0.1rem solid var(--color-background-divider); }
    .NotificationsTray__notification:last-child {
      border: 0; }
  .NotificationsTray__notificationAvatar {
    padding: 0 1.2rem 0 0; }
  .NotificationsTray__actorLink {
    font-weight: 700;
    text-decoration: none; }
    .NotificationsTray__actorLink:hover {
      text-decoration: underline; }
  .NotificationsTray__notificationMessage {
    color: var(--color-text-body-standard);
    font-size: 1.4rem; }
  .NotificationsTray__notificationMessageBox {
    padding: 0 0 0.4rem; }
  .NotificationsTray__notificationResourceLink {
    color: var(--color-text-action-secondary-base);
    text-decoration: none; }
    .NotificationsTray__notificationResourceLink:hover {
      color: var(--color-text-action-secondary-hover);
      text-decoration: underline; }
  .NotificationsTray__notificationTimeBox {
    color: var(--color-text-subdued); }
  .NotificationsTray__notificationAlertText {
    color: var(--color-text-warning);
    padding: 0 0.8rem 1.2rem 0; }
  .NotificationsTray__notificationHistoryText {
    color: var(--color-text-notif-history);
    font-size: 1.4rem;
    display: block;
    font-style: italic; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5rem;
  width: 100%;
  background: #f4f1ea;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
  z-index: 100; }
  @media only screen and (max-width: 79.9375em) {
    .Header::after {
      content: "";
      pointer-events: none;
      user-select: none;
      position: absolute;
      top: 0;
      left: 0;
      height: 5rem;
      width: 100%;
      box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15); } }
  .Header__siteHeaderBanner {
    height: 9rem; }
    @media only screen and (max-width: 79.9375em) {
      .Header__siteHeaderBanner::after {
        height: 9rem; } }
  .Header__contents {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 128rem;
    margin: 0 auto; }
    @media only screen and (max-width: 79.9375em) {
      .Header__contents {
        justify-content: space-between;
        background-color: #f4f1ea; } }
  .Header__logo {
    display: block;
    height: 5rem;
    text-decoration: none;
    padding: 0 0.4rem;
    width: 14rem;
    margin: 0 1rem;
    box-sizing: content-box;
    display: flex; }
    .Header__logo:focus {
      border-radius: 0.3rem;
      box-shadow: 0 0 0 0.3rem var(--color-shadow-button-focus); }
    @media only screen and (max-width: 47.9375em) {
      .Header__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%); } }
  @media only screen and (max-width: 79.9375em) {
    .Header__primaryNavContainer {
      display: block;
      height: 5rem;
      background: #f4f1ea;
      position: absolute;
      top: 5rem;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
      transition: all 0.2s ease-out;
      z-index: -1; } }
  @media only screen and (max-width: 79.9375em) {
    .Header__primaryNavContainer--hide {
      transform: translateY(-100%); } }
  @media only screen and (max-width: 79.9375em) {
    .Header__searchContainer {
      flex: 1 1 auto; } }
  @media only screen and (max-width: 47.9375em) {
    .Header__searchContainer {
      display: none;
      align-items: center;
      justify-content: center;
      height: 5rem;
      background: #f4f1ea;
      position: absolute;
      top: 5rem;
      left: 0;
      right: 0; } }
  @media only screen and (max-width: 47.9375em) {
    .Header__searchContainer--siteHeaderBanner {
      top: 9rem; } }
  .Header__searchContainer--open {
    display: flex; }
  .Header__toggleSearchContainer {
    display: none;
    height: 100%;
    width: 5rem;
    background: none;
    border: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 1rem; }
    @media only screen and (max-width: 47.9375em) {
      .Header__toggleSearchContainer {
        display: flex; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ToggleEditViewInput {
  border-radius: 0.8rem;
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 1.2rem 0.8rem;
  height: 1.6rem;
  border: 0.15rem solid var(--color-background-body-base); }
  .ToggleEditViewInput:hover {
    cursor: pointer; }
  .ToggleEditViewInput:focus-within {
    border: 0.15rem solid var(--color-border-primary); }
  .ToggleEditViewInput__input {
    position: absolute;
    width: 0.1rem;
    height: 0.1rem;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%); }
  .ToggleEditViewInput__checkmark {
    border-radius: 0.3rem;
    display: inline-block;
    height: 1.2rem;
    width: 1.2rem;
    border: 0.15rem solid var(--color-background-rating-container-selected-base);
    margin-right: 1.2rem; }
    :hover > .ToggleEditViewInput__checkmark {
      border: 0.15rem solid var(--color-border-primary); }
    .ToggleEditViewInput__checkmark::after {
      content: "";
      position: absolute;
      display: none;
      left: 1.25rem;
      top: 0.85rem;
      width: 0.3rem;
      height: 0.6rem;
      border: solid var(--color-border-primary);
      border-width: 0 0.15rem 0.15rem 0;
      transform: rotate(45deg); }
  .ToggleEditViewInput__input:checked ~ .ToggleEditViewInput__checkmark {
    border: 0.15rem solid var(--color-border-primary); }
    .ToggleEditViewInput__input:checked ~ .ToggleEditViewInput__checkmark::after {
      display: block; }
  .ToggleEditViewInput__input:focus ~ .ToggleEditViewInput__checkmark {
    border: 0.15rem solid var(--color-border-primary); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
html {
  overflow-y: scroll;
  scroll-padding-top: 11.4rem;
  overflow-x: hidden;
  scroll-behavior: smooth; }

html.webView {
  /* stylelint-disable-line selector-no-qualifying-type */ }
  @media (prefers-color-scheme: dark) {
    html.webView {
      color-scheme: only light;
      --color-background-alert-caution: #dea68f;
      --color-background-alert-informational: #4f4f4d;
      --color-background-alert-success: #b5baa1;
      --color-background-alt: #32362d;
      --color-background-avatar-hover: #1e1915;
      --color-background-avatar-placeholder-accent: #ebebeb;
      --color-background-avatar-placeholder-base: #707070;
      --color-background-body-base: #1e1915;
      --color-background-body-transparent: rgba(30, 25, 21, 0.75);
      --color-background-book-cover-placeholder-accent: #fff;
      --color-background-book-cover-placeholder-base: #ebe2d7;
      --color-background-book-cover-variant-1: #dce8d1;
      --color-background-book-cover-variant-2: #dee0ed;
      --color-background-book-cover-variant-3: #edd9de;
      --color-background-book-cover-variant-4: #ebe2d7;
      --color-background-button-primary-default: #ebe2d7;
      --color-background-button-primary-disabled: #8e8e97;
      --color-background-button-primary-hover: #ead0ad;
      --color-background-button-primary-pressed: #cfccc9;
      --color-background-button-secondary-disabled: #4f4f4d;
      --color-background-chip-select-selected: #707070;
      --color-background-default: #1e1915;
      --color-background-disabled: #cfccc9;
      --color-background-divider: #707070;
      --color-background-elevation: #707070;
      --color-background-input-base: #32362d;
      --color-background-input-hover: #707070;
      --color-background-knh-highlight-base: #3B4538;
      --color-background-notif-badge-base: #d54a23;
      --color-background-notif-scrollbar-thumb: #707070;
      --color-background-primary-base: #ebe2d7;
      --color-background-promo-sidebar: #4f4f4d;
      --color-background-rating-bar-base: #e87400;
      --color-background-rating-bar-empty: #ababb0;
      --color-background-rating-star-base: #e87400;
      --color-background-rating-star-empty: #707070;
      --color-background-rating-star-border: #8e8e97;
      --color-background-spoiler-tooltip-base: #4f4f4d;
      --color-background-spoiler-visible: #f2f2f2;
      --color-background-tag-accent: #409970;
      --color-background-tag-selector-base: rgba(235, 235, 235, 0.2);
      --color-background-tag-selector-hover: rgba(235, 235, 235, 0.5);
      --color-background-transparent-active: rgba(50, 54, 45, 0.22);
      --color-background-transparent-hover: rgba(0, 0, 0, 0.05);
      --color-background-wtr-base: #3f8363;
      --color-background-wtr-hover: #409970;
      --color-background-carousel-pagination: #707070;
      --color-background-icon-default: #f2f2f2;
      --color-border-avatar: #cfccc9;
      --color-border-button-secondary-base: #cfccc9;
      --color-border-button-secondary-disabled: #ababb0;
      --color-border-button-secondary-pressed: #8e8e97;
      --color-border-blockquote: #c2c7cc;
      --color-border-primary: #1e1915;
      --color-border-input-base: #1e1915;
      --color-border-input-radio-base: #ababb0;
      --color-border-wtr-base: #377458;
      --color-border-elevation-medium: #4f4f4d;
      --color-brand-amazon-accent: #000000;
      --color-brand-amazon-base: #f5d47a;
      --color-brand-amazon-hover: #f7dc92;
      --color-brand-amazon-shadow: rgba(245, 212, 122, 0.5);
      --color-brand-apple-accent: #ffffff;
      --color-brand-apple-base: #000000;
      --color-brand-apple-hover: #4f4f4d;
      --color-brand-apple-shadow: rgba(0, 0, 0, 0.5);
      --color-brand-facebook-accent: #ffffff;
      --color-brand-facebook-base: #1877f2;
      --color-brand-facebook-hover: #3085f3;
      --color-brand-facebook-shadow: rgba(24, 119, 242, 0.5);
      --color-divider-default: #4f4f4d;
      --color-interaction-focus: #fff;
      --color-interaction-hoverarea: #4f4f4d;
      --color-interaction-hoverlink: #8e8e97;
      --color-internal-icons-background: #f2f2f2;
      --color-internal-icons-with-edge: #cfccc9;
      --color-notification-failure: #f57957;
      --color-notification-info: #c69259;
      --color-notification-success: #409970;
      --color-shadow-button-active: #7584e9;
      --color-shadow-button-focus: #1e1915;
      --color-shadow-input-warning: #d54a23;
      --color-shadow-transparent-focus: rgba(36, 49, 138, 0.15);
      --color-text-action-primary-base: #ebebeb;
      --color-text-action-primary-hover: #f2f2f2;
      --color-text-action-secondary-base: #377458;
      --color-text-action-secondary-hover: #409970;
      --color-text-author-base: #c69259;
      --color-text-body-3: #cfccc9;
      --color-text-body-light: #c2c7cc;
      --color-text-body-standard: #cfccc9;
      --color-text-button-disabled: #fff;
      --color-text-button-primary-base: #1e1915;
      --color-text-button-primary-disabled: #cfccc9;
      --color-text-button-primary-pressed: #4f4f4d;
      --color-text-button-pressed: #c2c7cc;
      --color-text-button-secondary-disabled: #32362d;
      --color-text-button-transparent-base: #fff;
      --color-text-button-tag-base: #f2f2f2;
      --color-text-button-wtr-base: #fff;
      --color-text-default: #f2f2f2;
      --color-text-disabled: #8e8e97;
      --color-text-heading-base: #ebebeb;
      --color-text-notif-badge-base: #fff;
      --color-text-notif-history: #4f4f4d;
      --color-text-rating-bar-base: #707070;
      --color-text-spoiler-hidden: #cfccc9;
      --color-text-subdued: #c2c7cc;
      --color-text-warning: #d54a23; } }

body {
  overflow: initial; }

.PageFrame {
  position: relative;
  min-width: 32rem;
  margin: 0 auto;
  width: 87.5%;
  max-width: 126rem;
  padding-top: 6.6rem; }
  @media only screen and (max-width: 79.9375em) {
    .PageFrame {
      width: 91%; } }
  @media only screen and (max-width: 29.9375em) {
    .PageFrame {
      width: 92%; } }
  @media only screen and (max-width: 79.9375em) {
    .PageFrame {
      padding-top: 11.6rem; } }
  .PageFrame--siteHeaderBanner {
    padding-top: 10.6rem; }
    @media only screen and (max-width: 79.9375em) {
      .PageFrame--siteHeaderBanner {
        padding-top: 15.6rem; } }
  .PageFrame--webView {
    padding-top: 1.6rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
@media only screen and (max-width: 47.9375em) {
  .HeaderPrimaryNav {
    width: 100%; }
    .HeaderPrimaryNav__genres {
      display: block; } }

.HeaderPrimaryNav__genres {
  display: none; }

.HeaderPrimaryNav__dropDown {
  position: relative; }
  .HeaderPrimaryNav__dropDown:focus-within .HeaderNavDropdown {
    display: block; }
    .HeaderPrimaryNav__dropDown:focus-within .HeaderNavDropdown--browse {
      display: flex; }

.HeaderPrimaryNav__list {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0; }
  @media only screen and (max-width: 47.9375em) {
    .HeaderPrimaryNav__list {
      width: 100%;
      display: flex; } }
  @media only screen and (max-width: 47.9375em) {
    .HeaderPrimaryNav__list > li {
      position: static;
      flex: 1 1 auto; } }
  .HeaderPrimaryNav__list > li > a {
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    height: 5rem;
    text-decoration: none;
    line-height: 5rem;
    padding: 0 1.6rem; }
    @media only screen and (max-width: 47.9375em) {
      .HeaderPrimaryNav__list > li > a {
        padding: 0;
        white-space: nowrap; } }
    @media only screen and (min-width: 48em) and (max-width: 79.9375em) {
      .HeaderPrimaryNav__list > li > a {
        padding: 0 3.2rem; } }
  .HeaderPrimaryNav__list > li > a:hover,
  .HeaderPrimaryNav__list > li > a:focus,
  .HeaderPrimaryNav__list > li:hover > a,
  .HeaderPrimaryNav__list > li:focus-within > a {
    color: var(--color-background-body-base);
    background: #382110;
    outline: none; }
  .HeaderPrimaryNav__list ul {
    width: 16rem;
    margin: 0; }
    @media only screen and (max-width: 47.9375em) {
      .HeaderPrimaryNav__list ul {
        width: 100%; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Spotlight {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-left: 0.1rem solid #d8d8d8;
  background: #f6f6f6;
  padding: 0.8rem 0; }
  @media only screen and (max-width: 47.9375em) {
    .Spotlight {
      display: none; } }
  .Spotlight__loadingState {
    background: #f6f6f6;
    width: 41rem; }
  .Spotlight__listTitle {
    color: var(--color-text-heading-base);
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    padding-left: 1.6rem;
    display: block;
    width: 100%;
    line-height: 2.4;
    padding: 0 1.6rem; }
  .Spotlight__basicGenresList.Spotlight__basicGenresList {
    width: 41rem;
    columns: 3;
    column-gap: 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.SpotlightPane {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #f6f6f6;
  border-left: 0.1rem solid #d8d8d8;
  padding: 0.8rem 0;
  width: 60rem;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 39.9375em) {
    .SpotlightPane {
      justify-content: center; } }
  .SpotlightPane__title {
    font-size: 1.6rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 0.8rem; }
  .SpotlightPane__description {
    font-size: 1.4rem;
    color: #181818;
    margin-bottom: 0.8rem; }
  .SpotlightPane__browseGenres {
    font-size: 1.4rem;
    color: #333;
    text-decoration: none;
    margin-top: 0.8rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.LoadingCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.6rem; }
  .LoadingCard > * {
    margin-bottom: 1.2rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSecondaryNav {
  position: absolute;
  right: 0; }
  .HeaderSecondaryNav__list {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .HeaderSecondaryNav__list > li {
      position: relative; }
    .HeaderSecondaryNav__list--signedOut a {
      display: flex;
      justify-content: center;
      height: 5rem;
      text-decoration: none;
      font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #382110;
      font-size: 1.6rem;
      line-height: 5rem;
      padding: 0 1.6rem; }
      .HeaderSecondaryNav__list--signedOut a:hover, .HeaderSecondaryNav__list--signedOut a:focus {
        background: #382110;
        color: #fff;
        outline: none; }
      @media only screen and (max-width: 47.9375em) {
        .HeaderSecondaryNav__list--signedOut a {
          display: inline;
          padding: 0.8rem 1.2rem;
          font-size: 1.4rem;
          margin: 0 0.8rem 0 0;
          background-color: #382110;
          border: 0.1rem solid #382110;
          border-radius: 0.3rem;
          color: #fff; }
          .HeaderSecondaryNav__list--signedOut a:hover {
            background-color: #58371f; } }
    .HeaderSecondaryNav__list > li {
      position: relative; }
      .HeaderSecondaryNav__list > li .HeaderNavDropdown {
        display: block; }
  .HeaderSecondaryNav__topDivider {
    border-top: 0.1rem solid #ebebeb;
    margin-top: 0.4rem;
    padding-top: 0.4rem; }
  .HeaderSecondaryNav__desktopNotification {
    position: relative; }
    @media only screen and (min-width: 48em) {
      .HeaderSecondaryNav__desktopNotification.HeaderSecondaryNav__desktopNotification {
        display: inline-block; } }
  .HeaderSecondaryNav__mobileNotificationLinks.HeaderSecondaryNav__mobileNotificationLinks {
    display: inline-block; }
    .HeaderSecondaryNav__mobileNotificationLinks.HeaderSecondaryNav__mobileNotificationLinks > li {
      position: relative;
      display: inline-block; }
      .HeaderSecondaryNav__mobileNotificationLinks.HeaderSecondaryNav__mobileNotificationLinks > li > a {
        padding: 0 0.8rem; }
  .HeaderSecondaryNav .Overlay__window {
    padding: 0;
    min-width: 25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0; }
  .HeaderSecondaryNav .Overlay .DropdownMenu {
    padding: 0;
    margin: 0; }
  .HeaderSecondaryNav .Overlay__content {
    padding: 0; }
  @media only screen and (max-width: 79.9375em) {
    .HeaderSecondaryNav {
      position: relative;
      right: auto; }
      .HeaderSecondaryNav__list > li:last-child {
        display: block; }
      .HeaderSecondaryNav__list--signedOut > li {
        display: flex; } }
  @media only screen and (max-width: 47.9375em) {
    .HeaderSecondaryNav__list--signedOut > li {
      display: none; }
    .HeaderSecondaryNav__list--signedOut > li:last-child {
      display: block; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.HeaderNavDropdown {
  background-color: var(--color-background-body-base);
  display: none;
  opacity: 0;
  animation: 0.3s ease-out 0s 1 normal forwards fadeIn;
  position: absolute;
  top: 5rem;
  list-style-type: none;
  padding: 0.8rem 0;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
  @media only screen and (max-width: 47.9375em) {
    .HeaderNavDropdown {
      position: absolute;
      left: 0;
      width: 100%; } }
  .HeaderNavDropdown li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center; }
    .HeaderNavDropdown li a, .HeaderNavDropdown li__heading {
      color: var(--color-text-heading-base);
      font-size: 1.4rem;
      display: block;
      width: 100%;
      line-height: 2.4;
      text-decoration: none;
      padding: 0 1.6rem; }
    .HeaderNavDropdown li a, .HeaderNavDropdown li__buttons {
      width: auto;
      display: flex; }
    .HeaderNavDropdown li a:hover, .HeaderNavDropdown li a:focus {
      text-decoration: underline; }
  .HeaderNavDropdown__heading {
    font-weight: bold;
    text-transform: uppercase; }
  .HeaderNavDropdown__profileLink {
    font: 1.4rem/2.28571 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .HeaderNavDropdown__profileLink a {
      font-weight: bold;
      padding: 1.2rem 1.2rem 0 1.6rem;
      display: block;
      color: #333;
      line-height: 1.3;
      padding-bottom: 1.6rem; }
  .HeaderNavDropdown__avatar.HeaderNavDropdown__avatar {
    width: 10rem;
    padding-right: 0; }
    @media only screen and (min-width: 48em) {
      .HeaderNavDropdown__avatar.HeaderNavDropdown__avatar {
        display: none; } }
  .HeaderNavDropdown__toggleEditView {
    padding-left: 0.8rem;
    padding-bottom: 0.8rem; }
  .HeaderNavDropdown--overlay {
    position: sticky;
    display: block; }
    @media only screen and (max-width: 47.9375em) {
      .HeaderNavDropdown--overlay {
        opacity: 1;
        animation: none;
        box-shadow: none; } }
  .HeaderNavDropdown--browse {
    padding: 0; }
    .HeaderNavDropdown--browse > ul {
      padding: 0.8rem 0; }
    @media only screen and (max-width: 63.9375em) {
      .HeaderNavDropdown--browse {
        position: fixed;
        left: 50%;
        top: 10rem;
        transform: translateX(-50%); } }
    @media only screen and (max-width: 47.9375em) {
      .HeaderNavDropdown--browse {
        top: 10rem; } }
  @media only screen and (max-width: 63.9375em) {
    .HeaderNavDropdown--siteHeaderBanner {
      top: 14rem; } }
  @media only screen and (max-width: 47.9375em) {
    .HeaderNavDropdown--siteHeaderBanner {
      top: 14rem; } }
  .HeaderNavDropdown--pinToRight {
    left: auto;
    right: 0;
    width: 32rem; }
    @media only screen and (min-width: 48em) {
      .HeaderNavDropdown--pinToRight {
        width: 25rem; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSecondaryNavButton {
  display: block;
  height: 5rem;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 0.8rem;
  display: flex;
  align-items: center; }
  .HeaderSecondaryNavButton:hover, .HeaderSecondaryNavButton:focus,
  li:not(.HeaderSecondaryNav__buttons):hover > .HeaderSecondaryNavButton,
  li:not(.HeaderSecondaryNav__buttons):focus-within > .HeaderSecondaryNavButton, .HeaderSecondaryNavButton--highlight {
    background: #382110;
    color: #fff;
    outline: none; }
  .HeaderSecondaryNavButton__icon {
    border-radius: 50%;
    display: block;
    height: 3rem;
    width: 3rem;
    background: #c1b8a6; }
    .HeaderSecondaryNavButton__icon path {
      fill: var(--color-background-body-base); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.NotificationsBadge {
  background-color: var(--color-background-notif-badge-base);
  color: var(--color-text-notif-badge-base);
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-align: center;
  min-width: 1.4rem;
  top: 0.3rem;
  right: 0.3rem;
  height: 2rem;
  padding: 0.1rem 0.3rem 0;
  font-size: 1.2rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.NotificationsTray {
  background-color: var(--color-background-body-base);
  position: absolute;
  top: 5rem;
  right: 0;
  width: 33rem;
  opacity: 0;
  animation: 0.15s ease-out 0s 1 normal forwards fadeIn;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
  .NotificationsTray__loading {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center; }
    .NotificationsTray__loading > i {
      width: 5rem; }
  .NotificationsTray__header {
    padding: 1.6rem;
    border-bottom: 0.1rem solid var(--color-background-divider); }
  .NotificationsTray__title {
    color: var(--color-text-heading-base);
    font-size: 1.4rem;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 1.6rem;
    text-align: left;
    width: 100%;
    line-height: 1.4;
    padding: 0 1.6rem;
    text-decoration: none; }
  .NotificationsTray__allNotificationsLinkBox {
    text-decoration: none; }
  .NotificationsTray__allNotificationsLink {
    color: var(--color-text-subdued);
    font-size: 1.4rem;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0 1.6rem; }
  .NotificationsTray__allNotificationsLinkBox:hover .NotificationsTray__allNotificationsLink {
    color: var(--color-text-action-secondary-hover);
    text-decoration: underline; }
  .NotificationsTray__notifications {
    max-height: 38rem;
    overflow-y: scroll; }
    .NotificationsTray__notifications::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 0.7rem; }
    .NotificationsTray__notifications::-webkit-scrollbar-thumb {
      border-radius: 0.3rem;
      background-color: var(--color-background-notif-scrollbar-thumb); }
  .NotificationsTray__notification {
    display: flex;
    padding: 1.2rem 1.6rem;
    border-bottom: 0.1rem solid var(--color-background-divider); }
    .NotificationsTray__notification:last-child {
      border: 0; }
  .NotificationsTray__notificationAvatar {
    padding: 0 1.2rem 0 0; }
  .NotificationsTray__actorLink {
    font-weight: 700;
    text-decoration: none; }
    .NotificationsTray__actorLink:hover {
      text-decoration: underline; }
  .NotificationsTray__notificationMessage {
    color: var(--color-text-body-standard);
    font-size: 1.4rem; }
  .NotificationsTray__notificationMessageBox {
    padding: 0 0 0.4rem; }
  .NotificationsTray__notificationResourceLink {
    color: var(--color-text-action-secondary-base);
    text-decoration: none; }
    .NotificationsTray__notificationResourceLink:hover {
      color: var(--color-text-action-secondary-hover);
      text-decoration: underline; }
  .NotificationsTray__notificationTimeBox {
    color: var(--color-text-subdued); }
  .NotificationsTray__notificationAlertText {
    color: var(--color-text-warning);
    padding: 0 0.8rem 1.2rem 0; }
  .NotificationsTray__notificationHistoryText {
    color: var(--color-text-notif-history);
    font-size: 1.4rem;
    display: block;
    font-style: italic; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearch {
  position: relative;
  height: 3.2rem;
  width: 39.2rem;
  padding: 0 1.6rem; }
  .HeaderSearch form {
    height: 100%;
    width: 100%; }
  .HeaderSearch__label, .HeaderSearch__input {
    display: block;
    font-size: 1.4rem;
    height: 3.2rem;
    width: 100%;
    padding: 0.4rem 2.4rem 0.4rem 0.8rem; }
  .HeaderSearch__label {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 2.6rem;
    opacity: 0.5;
    padding-left: 1.2rem;
    transition: opacity 0.25s ease-in-out; }
    .HeaderSearch__label--hidden {
      opacity: 0; }
  .HeaderSearch__input {
    background-color: var(--color-background-body-base);
    border-radius: 0.3rem;
    border: 0.1rem solid #dcd6cc;
    line-height: 3.2rem; }
    .HeaderSearch__input:focus {
      outline: none;
      box-shadow: 0 0 0.4rem rgba(185, 173, 153, 0.5); }
  .HeaderSearch__button {
    display: block;
    position: absolute;
    top: 0;
    right: 1.6rem;
    height: 100%;
    width: 3.2rem;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    display: flex;
    justify-content: center;
    align-content: center; }
    .HeaderSearch__button .Icon {
      height: 80%;
      width: 80%;
      margin-top: 10%; }
      .HeaderSearch__button .Icon path {
        fill: #707070; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchBookItem {
  display: block;
  overflow: hidden;
  border-bottom: 0.1rem solid #d8d8d8; }
  .HeaderSearchBookItem__link, .HeaderSearchBookItem__link--selected {
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block;
    position: relative;
    width: 100%;
    height: 5.8rem;
    padding: 0.8rem 0.8rem 0.8rem 6.6rem;
    text-decoration: none;
    word-wrap: break-word;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #333;
    font-weight: 600; }
  .HeaderSearchBookItem__link--selected {
    background: #f4f1ea; }
    .HeaderSearchBookItem__link--selected::after {
      box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.5); }
    .HeaderSearchBookItem__link--selected::after {
      content: "";
      display: block;
      position: absolute;
      bottom: -0.1rem;
      left: 0;
      right: 0;
      height: 0.1rem;
      box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0);
      transition: box-shadow 0.2s ease-out; }
  .HeaderSearchBookItem__image {
    display: block;
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    width: 5rem;
    border: 0; }
  .HeaderSearchBookItem__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden; }
  .HeaderSearchBookItem__author {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-family: Merriweather, Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.6; }
    .HeaderSearchBookItem__author .Icon {
      height: 1.4rem;
      width: 1.4rem; }
      .HeaderSearchBookItem__author .Icon path {
        fill: var(--color-text-author-base); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchList {
  background-color: var(--color-background-body-base);
  display: block;
  border: 0.1rem solid #d8d8d8;
  border-width: 0 0.1rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchSeeMore {
  display: block;
  overflow: hidden;
  border-bottom: 0.1rem solid #d8d8d8; }
  .HeaderSearchSeeMore__link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block;
    position: relative;
    width: 100%;
    text-decoration: none;
    word-wrap: break-word;
    text-align: center;
    padding: 0.8rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #016661; }
    .HeaderSearchSeeMore__link:hover {
      text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchListTray {
  background-color: var(--color-background-body-base);
  display: block;
  position: relative;
  border: 0.1rem solid #d8d8d8;
  border-width: 0 0.1rem;
  z-index: 100; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5rem;
  width: 100%;
  background: #f4f1ea;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
  z-index: 100; }
  @media only screen and (max-width: 79.9375em) {
    .Header::after {
      content: "";
      pointer-events: none;
      user-select: none;
      position: absolute;
      top: 0;
      left: 0;
      height: 5rem;
      width: 100%;
      box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15); } }
  .Header__siteHeaderBanner {
    height: 9rem; }
    @media only screen and (max-width: 79.9375em) {
      .Header__siteHeaderBanner::after {
        height: 9rem; } }
  .Header__contents {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 128rem;
    margin: 0 auto; }
    @media only screen and (max-width: 79.9375em) {
      .Header__contents {
        justify-content: space-between;
        background-color: #f4f1ea; } }
  .Header__logo {
    display: block;
    height: 5rem;
    text-decoration: none;
    padding: 0 0.4rem;
    width: 14rem;
    margin: 0 1rem;
    box-sizing: content-box;
    display: flex; }
    .Header__logo:focus {
      border-radius: 0.3rem;
      box-shadow: 0 0 0 0.3rem var(--color-shadow-button-focus); }
    @media only screen and (max-width: 47.9375em) {
      .Header__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%); } }
  @media only screen and (max-width: 79.9375em) {
    .Header__primaryNavContainer {
      display: block;
      height: 5rem;
      background: #f4f1ea;
      position: absolute;
      top: 5rem;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
      transition: all 0.2s ease-out;
      z-index: -1; } }
  @media only screen and (max-width: 79.9375em) {
    .Header__primaryNavContainer--hide {
      transform: translateY(-100%); } }
  @media only screen and (max-width: 79.9375em) {
    .Header__searchContainer {
      flex: 1 1 auto; } }
  @media only screen and (max-width: 47.9375em) {
    .Header__searchContainer {
      display: none;
      align-items: center;
      justify-content: center;
      height: 5rem;
      background: #f4f1ea;
      position: absolute;
      top: 5rem;
      left: 0;
      right: 0; } }
  @media only screen and (max-width: 47.9375em) {
    .Header__searchContainer--siteHeaderBanner {
      top: 9rem; } }
  .Header__searchContainer--open {
    display: flex; }
  .Header__toggleSearchContainer {
    display: none;
    height: 100%;
    width: 5rem;
    background: none;
    border: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 1rem; }
    @media only screen and (max-width: 47.9375em) {
      .Header__toggleSearchContainer {
        display: flex; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.SiteHeaderBanner__topFullImageContainer {
  display: flex;
  justify-content: center;
  align-items: center; }

.SiteHeaderBanner img {
  max-width: none;
  height: 4rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Footer {
  width: 100%;
  min-width: 32rem;
  background: #f4f1ea;
  padding: 3.2rem 0; }
  .Footer__contents {
    position: relative;
    display: flex;
    max-width: 128rem;
    margin: 0 auto;
    padding: 0 1.2rem; }
    @media only screen and (max-width: 47.9375em) {
      .Footer__contents {
        flex-direction: column; }
        .Footer__contents > * {
          margin-bottom: 2.4rem; } }
  .Footer__column {
    width: 20rem; }
  .Footer__heading {
    text-transform: uppercase;
    font: bold 1.4rem/2 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--color-text-body-standard); }
  .Footer__list a {
    text-decoration: none;
    color: #382110;
    font: normal 1.4rem/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .Footer__list a:hover, .Footer__list a:focus {
      text-decoration: underline; }
  .Footer__list--inline {
    display: flex; }
    .Footer__list--inline a {
      border-radius: 50%;
      display: block;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 0.4rem; }
      .Footer__list--inline a:focus {
        box-shadow: 0 0 0 0.3rem var(--color-shadow-button-focus); }
    .Footer__list--inline .Icon {
      height: 3rem;
      width: 3rem; }
      .Footer__list--inline .Icon path {
        color: #767676; }
  .Footer__right {
    position: absolute;
    top: 0;
    right: 1.6rem; }
  .Footer__badge {
    border-radius: 0.3rem;
    display: inline-block;
    width: 13.5rem;
    margin-right: 1.2rem; }
    @media only screen and (max-width: 63.9375em) {
      .Footer__badge {
        display: block; } }
    .Footer__badge:focus {
      box-shadow: 0 0 0 0.3rem #f4f1ea, 0 0 0 0.6rem var(--color-shadow-button-focus); }
    .Footer__badge svg {
      display: block;
      width: 100%; }
  .Footer__copy {
    margin-top: 1.2rem;
    font: normal 1.4rem/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.LoginInterstitial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  .LoginInterstitial__img {
    width: 100%;
    height: auto; }
  .LoginInterstitial__buttonWrap {
    padding: 0.8rem 0;
    width: 100%; }
  .LoginInterstitial__buttonArea {
    width: 100%;
    max-width: 30rem; }
  .LoginInterstitial__text {
    text-align: center;
    padding: 1.6rem 0; }
  .LoginInterstitial__finePrint {
    text-align: center;
    padding: 0.8rem 0 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ThemeToggleButton {
  display: inline-block;
  position: fixed;
  left: 5%;
  z-index: 50;
  bottom: 5%; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.SupportedErrorCodes__link {
  color: var(--color-text-action-secondary-base);
  text-decoration: none; }
  .SupportedErrorCodes__link:hover {
    color: var(--color-text-action-secondary-hover);
    text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ErrorPage__top {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 3.2rem !important;
  padding-top: 2.4rem;
  min-height: 40rem;
  padding-bottom: 4rem;
  max-width: 102.4rem;
  margin: 0 auto; }
  @media only screen and (min-width: 40em) and (max-width: 47.9375em) {
    .ErrorPage__top {
      grid-gap: 2.4rem !important; } }
  @media only screen and (max-width: 39.9375em) {
    .ErrorPage__top {
      grid-gap: 1.6rem !important; } }

.ErrorPage__leftColumn {
  grid-column: span 6; }
  @media only screen and (max-width: 47.9375em) {
    .ErrorPage__leftColumn {
      grid-column: span 12; } }

.ErrorPage__rightColumn {
  grid-column: span 6; }
  @media only screen and (max-width: 47.9375em) {
    .ErrorPage__rightColumn {
      grid-column: span 12;
      padding-bottom: 4rem; } }

.ErrorPage__title {
  margin-bottom: 1.6rem; }

.ErrorPage__goBackButton {
  margin-top: 1.6rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.BookCard {
  display: flex;
  margin-bottom: 1.2rem;
  min-height: 2rem; }
  .BookCard__cover {
    transition: transform 0.2s ease-in-out;
    filter: drop-shadow(0 0.2rem 0.8rem rgba(0, 0, 0, 0.2));
    position: relative; }
  .BookCard__block {
    width: 100%; }
  .BookCard__interactive {
    border-radius: 0 3% 3% 0/ 2%;
    text-decoration: none;
    text-align: left; }
    .BookCard__interactive:hover .BookCard__cover {
      transform: scale(1.03); }
    .BookCard__interactive:hover .BookCard__title {
      text-decoration: underline; }
    .BookCard__interactive:focus-within {
      box-shadow: 0 0 0 0.9rem var(--color-background-body-base), 0 0 0 1.2rem var(--color-interaction-focus); }
  .BookCard__clickCardTarget {
    display: inline-block;
    margin: auto; }
  .BookCard__content {
    margin-top: 1.6rem; }
  .BookCard__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text-heading-base);
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    font-weight: 600;
    overflow: hidden;
    line-height: 1.5; }
  .BookCard__authorName {
    color: var(--color-text-heading-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ResponsiveImage {
  display: block;
  height: auto;
  width: 100%; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.AverageRating {
  display: flex; }
  .AverageRating .RatingStar {
    margin-top: 0.1rem; }
    .AverageRating .RatingStar svg {
      width: 1.4rem;
      height: 1.4rem; }
  .AverageRating__ratingValue {
    padding-left: 0.4rem; }
  .AverageRating__ratingsCount {
    color: #707070; }
    .AverageRating__ratingsCount::before {
      padding: 0.4rem;
      content: "\B7"; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.GiveawayMetadata {
  color: var(--color-text-subdued);
  font-size: 1.4rem; }
  .GiveawayMetadata__endDate::before {
    padding: 0.4rem;
    content: "\B7"; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.LoadingBookCardCarousel__title {
  width: 24rem; }

.LoadingBookCardCarousel__footer {
  width: 12rem; }

.LoadingBookCardCarousel__itemsArea {
  display: flex;
  margin: 1.6rem 0; }

.LoadingBookCardCarousel__item {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-right: 2.4rem;
  white-space: normal; }
  @media only screen and (min-width: 64em) {
    .LoadingBookCardCarousel__item {
      margin-right: 3.2rem; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.EditionDisambiguationAlert > div {
  padding: 1.2rem 1.6rem; }

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

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.WTRStepShelving {
  padding-top: 0.8rem; }
  .WTRStepShelving__shelf {
    margin-bottom: 1.2rem; }
  .WTRStepShelving__removeButton {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.WTRStepTagging {
  padding-top: 0.8rem;
  height: 30vh; }
  .WTRStepTagging__inputGroup {
    display: flex;
    align-items: center;
    margin-bottom: 1.6rem; }
  .WTRStepTagging__input {
    margin-right: 1.2rem;
    flex: 1; }
  .WTRStepTagging__tagsContainer .Button__container {
    margin: 0.4rem 1.2rem 0.4rem 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.BookRatingStars {
  display: flex;
  flex-direction: column;
  align-items: center; }
  .BookRatingStars__message {
    cursor: pointer;
    text-align: center;
    padding: 0.4rem; }
    .BookRatingStars__message a {
      text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.BookActions {
  margin: 1.6rem auto 2.4rem auto;
  display: flex;
  flex-direction: column; }
  @media only screen and (max-width: 47.9375em) {
    .BookActions {
      max-width: 26rem;
      display: block; } }
  .BookActions__alert {
    margin-bottom: 1.2rem; }
  .BookActions__button {
    margin: 0.8rem 0; }
  .BookActions__editActivityButton {
    margin: 1.6rem 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FollowButton {
  width: 12rem; }

.ReviewerProfile {
  display: flex;
  flex-direction: column;
  padding-bottom: 1.6rem; }
  .ReviewerProfile__meta {
    display: flex;
    flex-direction: column;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }
  .ReviewerProfile__info {
    overflow: hidden; }
  .ReviewerProfile__name {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: anywhere;
    margin-bottom: 0.4rem; }
  .ReviewerProfile__author {
    display: inline-flex;
    align-items: center; }
    .ReviewerProfile__author .BadgeIcon {
      position: relative;
      top: 0.2rem; }
      .ReviewerProfile__author .BadgeIcon svg {
        height: 1.4rem;
        width: 1.4rem; }
  @media only screen and (min-width: 48em) {
    .ReviewerProfile__avatar, .ReviewerProfile__info, .ReviewerProfile__follow {
      margin-bottom: 0.8rem; }
    .ReviewerProfile__name {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden; } }
  @media only screen and (max-width: 47.9375em) {
    .ReviewerProfile {
      flex-direction: row;
      align-items: center;
      padding-bottom: 0; }
      .ReviewerProfile .ReviewerProfile__follow {
        margin-left: 1.6rem; }
      .ReviewerProfile .ReviewerProfile__avatar {
        flex: 0;
        margin-right: 1.6rem;
        margin-bottom: 0; }
      .ReviewerProfile .ReviewerProfile__info {
        flex: 1;
        margin-bottom: 0; }
      .ReviewerProfile .ReviewerProfile__name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        margin-bottom: 0; }
      .ReviewerProfile .ReviewerProfile__meta {
        display: block; } }
  .ReviewerProfile--small {
    flex-direction: row;
    align-items: center;
    padding-bottom: 0; }
    .ReviewerProfile--small .ReviewerProfile__follow {
      margin-left: 1.6rem; }
    .ReviewerProfile--small .ReviewerProfile__avatar {
      flex: 0;
      margin-right: 1.6rem;
      margin-bottom: 0; }
    .ReviewerProfile--small .ReviewerProfile__info {
      flex: 1;
      margin-bottom: 0; }
    .ReviewerProfile--small .ReviewerProfile__name {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      margin-bottom: 0; }
    .ReviewerProfile--small .ReviewerProfile__meta {
      display: block; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FollowButton {
  width: 12rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.AuthorFollowButton {
  min-width: 12rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ReviewCard {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-gap: 3.2rem !important; }
  @media only screen and (min-width: 40em) and (max-width: 47.9375em) {
    .ReviewCard {
      grid-gap: 2.4rem !important; } }
  @media only screen and (max-width: 39.9375em) {
    .ReviewCard {
      grid-gap: 1.6rem !important; } }
  .ReviewCard__profile {
    grid-column: span 2; }
  .ReviewCard__content {
    position: relative;
    grid-column: span 6;
    padding: 1.2rem 0 0 0; }
  .ReviewCard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem; }
  .ReviewCard__tags {
    margin-bottom: 1.2rem; }
  @media only screen and (max-width: 47.9375em) {
    .ReviewCard__profile, .ReviewCard__content {
      grid-column: span 8;
      padding-top: 0; } }

@charset "UTF-8";
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.SocialFooter__statsContainer {
  margin-bottom: 0.8rem; }

@media only screen and (max-width: 47.9375em) {
  .SocialFooter__statsContainer {
    margin-bottom: 0; } }

.SocialFooter__action {
  display: inline-block; }

.SocialFooter__action + .SocialFooter__action {
  margin-left: 1.2rem; }

.SocialFooter__statsContainer :not(:first-child)::before {
  padding: 0 0.8rem;
  content: "\2022"; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.CommentCard {
  display: flex;
  flex-direction: row; }
  .CommentCard__profile {
    margin-right: 1.2rem; }
  .CommentCard__content {
    flex: 1;
    overflow: hidden; }
  .CommentCard__row {
    display: flex;
    align-items: baseline; }
  .CommentCard__name {
    margin-right: 1.2rem; }
    .CommentCard__name--disabled {
      color: var(--color-text-disabled); }
  .CommentCard__timestamp {
    height: 100%;
    font: 400 1.4rem/1.35714 "Proxima Nova", Montserrat, Arial, sans-serif;
    color: var(--color-text-subdued);
    flex-shrink: 0; }
  .CommentCard__name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ContributorLink {
  display: flex;
  overflow: hidden; }
  .ContributorLink__name {
    flex-basis: auto;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .ContributorLink__role {
    color: var(--color-text-subdued); }
  .ContributorLink__badge {
    color: var(--color-text-author-base);
    flex-shrink: 0;
    margin-left: 0.4rem; }
  .ContributorLink__badge--medium .BadgeIcon svg {
    height: 2rem;
    width: 2rem; }
  .ContributorLink__badge--small {
    height: 1.4rem;
    display: flex; }
    .ContributorLink__badge--small .BadgeIcon svg {
      height: 1.4rem;
      width: 1.4rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.CommentCardForm {
  display: flex; }
  .CommentCardForm__profile {
    margin-top: 0.4rem; }
  .CommentCardForm__form {
    padding-left: 0.8rem;
    flex: 1; }
  .CommentCardForm__actions {
    display: none;
    justify-content: space-between;
    flex-direction: row-reverse;
    /* Hidden until the user's entered text */
    overflow: hidden;
    max-height: 0;
    transition: all 0.5s ease-in-out; }
  .CommentCardForm__actions--show {
    display: flex;
    /* Some height > action container height */
    max-height: 10rem;
    padding-top: 0.8rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.CommentsList {
  margin-top: 1.6rem; }
  .CommentsList .CommentCardForm,
  .CommentsList .CommentCard + .CommentCard {
    margin: 1.6rem 0; }
  .CommentsList a.CommentsList__emptyCTA {
    text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ReviewText {
  position: relative;
  margin-bottom: 1.6rem; }
  .ReviewText--hideContent .ReviewText__content {
    /* TODO-EV-1502 - change to visibility: hidden after figuring out Safari issue
       * visibility: hidden, hides from screen readers as well
       * https://webaim.org/techniques/css/invisiblecontent/
       */
    display: none; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ShelvingSocialSignalCard {
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.6rem;
  border: 0.1rem solid var(--color-border-secondary-active-base);
  text-align: left; }
  .ShelvingSocialSignalCard__avatars {
    margin-left: 1.6rem;
    min-width: 10rem;
    display: flex;
    justify-content: flex-end; }
  .ShelvingSocialSignalCard:focus {
    box-shadow: 0 0 0 0.2rem var(--color-shadow-button-focus); }
  .ShelvingSocialSignalCard:hover {
    background-color: var(--color-background-transparent-hover); }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.SignalList {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 3.2rem;
  row-gap: 1.6rem;
  grid-auto-flow: column; }
  @media only screen and (max-width: 63.9375em) {
    .SignalList {
      display: flex;
      flex-direction: column; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ShelvingListModal {
  padding: 1.2rem 0;
  min-width: 34rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ShelvingCard {
  display: block;
  padding: 0.8rem 0.8rem;
  margin: 0 -1.2rem;
  border-radius: 1.2rem;
  text-decoration: none; }
  .ShelvingCard__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.2rem;
    margin-left: 4.6rem; }
  .ShelvingCard:focus {
    box-shadow: 0 0 0 0.2rem var(--color-shadow-button-focus); }
  .ShelvingCard:hover {
    background-color: var(--color-background-transparent-hover);
    transition: transform 0.2s ease-out; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ReviewsList__listHeader {
  margin: 1.6rem 0; }

.ReviewsList__listContext {
  margin: 1.2rem 0; }
  .ReviewsList__listContext--centered {
    text-align: center; }

.ReviewsList a.ReviewsList__emptyCTA {
  text-decoration: underline; }

.ReviewsList__paginationExtraText {
  display: none; }
  @media only screen and (min-width: 20em) {
    .ReviewsList__paginationExtraText {
      display: inline; } }
  @media screen and (min-width: 320px) and (max-width: 420px) {
    .ReviewsList__paginationExtraText {
      display: none; } }
  @media screen and (min-width: 768px) and (max-width: 868px) {
    .ReviewsList__paginationExtraText {
      display: none; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.NativeAdWrapper {
  position: relative;
  text-align: left; }
  .NativeAdWrapper .Ad--nonProgAd {
    top: auto;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    border-bottom: 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.MyReviewCardCarousel {
  margin-top: 3.2rem; }
  .MyReviewCardCarousel__header {
    margin-bottom: 1.6rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.MyReviewCardSmall {
  padding: 2.4rem 0.8rem 4rem 0.8rem;
  transform: translate3d(0, 0, 0);
  height: 100%; }
  .MyReviewCardSmall--no-footer {
    padding-bottom: 0.8rem; }
  .MyReviewCardSmall__ElevationCard {
    display: inline-block;
    width: 100%;
    height: 100%; }
  .MyReviewCardSmall__ElevationCardContent {
    overflow: hidden;
    position: relative;
    height: 100%;
    border-radius: 0.8rem;
    padding: 0 1.2rem;
    box-shadow: 0 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.2);
    background-color: var(--color-background-body-base); }
  .MyReviewCardSmall__swooshSvg {
    transform: translate(-50%, -4rem);
    position: absolute;
    z-index: 0;
    top: -3.6rem;
    left: 50%;
    width: 100%;
    min-width: 40rem;
    height: 100%; }
  .MyReviewCardSmall__swooshPath {
    fill: #faf8f6; }
  .MyReviewCardSmall__book {
    display: flex;
    min-height: 9rem; }
  .MyReviewCardSmall__bookCoverColumn {
    width: 8rem;
    margin: 0 0.4rem; }
  .MyReviewCardSmall__bookInfo {
    display: flex;
    flex-direction: column;
    margin: 0 1.2rem; }
    .MyReviewCardSmall__bookInfo > span {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden; }
  .MyReviewCardSmall__button {
    margin: 0.8rem 0; }
  .MyReviewCardSmall__content {
    height: 100%;
    position: relative;
    padding: 1.6rem 0 1.6rem 0; }
  .MyReviewCardSmall__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem; }
  .MyReviewCardSmall__reviewArea {
    max-height: 7.5rem;
    overflow: hidden; }
  .MyReviewCardSmall__tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem; }
  .MyReviewCardSmall__footer {
    position: absolute;
    bottom: 6.4rem;
    left: 0;
    width: 100%; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.WriteReviewCTA {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.6rem 0; }
  .WriteReviewCTA .Avatar {
    margin-bottom: 1.6rem; }
  .WriteReviewCTA__reviewCTA {
    display: flex;
    align-items: center;
    gap: 2.4rem; }
  .WriteReviewCTA--leftAligned {
    padding: 0;
    text-align: left;
    align-items: flex-start; }
  .WriteReviewCTA__message {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    text-align: center;
    font-size: 3.2rem;
    font-weight: 600; }
    @media only screen and (max-width: 39.9375em) {
      .WriteReviewCTA__message {
        font-size: 2.4rem; } }
    .WriteReviewCTA__message--leftAligned {
      text-align: left; }
  .WriteReviewCTA__hero {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.2rem; }
    .WriteReviewCTA__hero--leftAligned {
      justify-content: flex-start; }
    .WriteReviewCTA__hero--overflow {
      justify-content: space-between;
      align-items: center; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.MyReviewCard {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-gap: 3.2rem !important; }
  @media only screen and (min-width: 40em) and (max-width: 47.9375em) {
    .MyReviewCard {
      grid-gap: 2.4rem !important; } }
  @media only screen and (max-width: 39.9375em) {
    .MyReviewCard {
      grid-gap: 1.6rem !important; } }
  .MyReviewCard__profile {
    grid-column: span 2; }
  .MyReviewCard .WriteReviewCTA {
    margin-bottom: 1.6rem; }
  .MyReviewCard__content {
    grid-column: span 6;
    padding-bottom: 1.6rem; }
  .MyReviewCard__bookCardContainer {
    grid-column: span 2;
    max-width: 12.4rem; }
  .MyReviewCard__bookCardMeta > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden; }
  @media only screen and (max-width: 47.9375em) {
    .MyReviewCard {
      grid-gap: 1.2rem !important; }
      .MyReviewCard__bookCardContainer {
        position: sticky;
        display: flex;
        max-width: 50%; }
      .MyReviewCard__bookCard {
        max-width: 6rem;
        margin-right: 1.2rem; }
      .MyReviewCard__bookCardContainer, .MyReviewCard__profile, .MyReviewCard__content {
        grid-column: span 8; } }
  .MyReviewCard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem; }
  .MyReviewCard__tags {
    padding-bottom: 1.6rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.CommunityShelvingSignalList {
  margin: 1.6rem 0; }
  .CommunityShelvingSignalList__header {
    margin-bottom: 1.6rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.RatingStatistics {
  border-radius: 0.8rem;
  display: inline-flex;
  padding: 0.8rem;
  margin: -0.8rem -0.8rem 0 -0.8rem; }
  .RatingStatistics__interactive {
    transition: all 0.2s ease-in-out;
    text-decoration: none; }
    .RatingStatistics__interactive:focus {
      box-shadow: 0 0 0 0.2rem var(--color-shadow-button-focus); }
    .RatingStatistics__interactive:hover {
      background-color: var(--color-background-transparent-hover); }
  .RatingStatistics__column {
    display: flex; }
  @media only screen and (max-width: 79.9375em) {
    .RatingStatistics {
      flex-direction: column; }
      .RatingStatistics__column {
        padding-bottom: 0.4rem; } }
  @media only screen and (max-width: 47.9375em) {
    .RatingStatistics__centerAlign .RatingStatistics__column {
      justify-content: center; } }
  .RatingStatistics__column {
    display: flex;
    align-items: center; }
  .RatingStatistics__rating {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    font-weight: 600;
    font-size: 2.6rem;
    margin: 0 1.2rem -1.2rem 1.2rem; }
  .RatingStatistics__meta {
    color: var(--color-text-subdued);
    font: 400 1.4rem/1.35714 "Proxima Nova", Montserrat, Arial, sans-serif;
    padding-top: 0.4rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ReviewsSectionStatistics {
  padding-bottom: 1.2rem; }
  .ReviewsSectionStatistics__histogram {
    width: 75%; }
    @media only screen and (max-width: 63.9375em) {
      .ReviewsSectionStatistics__histogram {
        width: 100%; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ReviewFiltersModal__header:not(:first-child) {
  margin-top: 1.2rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ReviewFilters {
  margin-bottom: 1.6rem; }
  .ReviewFilters__filterControl {
    display: flex;
    margin-bottom: 0.8rem;
    width: 75%; }
    @media only screen and (max-width: 63.9375em) {
      .ReviewFilters__filterControl {
        width: 100%; } }
  .ReviewFilters__filterButton {
    display: inline-block;
    margin-right: 0.8rem;
    margin-bottom: 0.8rem;
    max-width: 20rem; }
  .ReviewFilters__textSearch {
    flex: 1;
    margin-right: 1.2rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ReviewsSection__listHeader {
  margin: 1.6rem 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Sticky {
  z-index: 1; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.BookPageTitleSection {
  -ms-grid-column: 1;
  -ms-grid-column-span: 8;
  grid-column: 1 / 9;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; }
  .BookPageTitleSection > * {
    margin-top: 0.4rem; }
  .BookPageTitleSection__title {
    margin-right: 2.4rem; }
  .BookPageTitleSection__share {
    margin-left: 2.4rem; }
    @media only screen and (max-width: 47.9375em) {
      .BookPageTitleSection__share {
        display: none; } }
  @media only screen and (max-width: 47.9375em) {
    .BookPageTitleSection {
      justify-content: center;
      text-align: center; }
      .BookPageTitleSection__title {
        margin-right: 0; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HelpCard {
  border-radius: 0.8rem;
  background-color: var(--color-background-elevation);
  margin-bottom: 3.2rem;
  padding: 2.4rem;
  text-align: center; }
  .HelpCard__helpText {
    padding-bottom: 0.8rem; }
  .HelpCard__helpCenterButton {
    padding-top: 2.4rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.PageBanner .Alert {
  border-radius: 0.8rem;
  background-color: var(--color-background-avatar-placeholder-accent);
  border-left: 1rem solid #c69259;
  width: 100%;
  text-align: center;
  margin-bottom: 2.4rem;
  padding: 1.6rem;
  padding-right: 4rem;
  padding-left: 4rem; }

.PageBanner__pageBannerContext {
  margin: auto;
  text-align: left;
  padding: 1.6rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.GiveawayCard {
  border-radius: 0.8rem;
  background-color: var(--color-background-elevation);
  padding: 1.6rem;
  text-align: center;
  margin-bottom: -0.8rem; }
  @media only screen and (max-width: 47.9375em) {
    .GiveawayCard {
      max-width: 26rem;
      display: block;
      margin: auto; } }
  @media only screen and (max-width: 29.9375em) {
    .GiveawayCard {
      max-width: 100%;
      display: block;
      margin: auto; } }
  .GiveawayCard__giveawayHeading {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    padding-bottom: 1.2rem; }
  .GiveawayCard__giftIcon {
    padding-right: 0.4rem; }
    .GiveawayCard__giftIcon svg {
      height: 4.8rem;
      width: 4.8rem; }
  .GiveawayCard__giveawayTimer {
    padding-bottom: 1.2rem; }
  .GiveawayCard__giveawayEnterButton {
    padding-bottom: 0.4rem; }
  .GiveawayCard__giveawayCopies {
    line-height: 0.4rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ChoiceAwardBadge__flag {
  display: inline-block;
  background-color: #f0bf6e;
  padding: 0 0.4rem;
  margin-right: 1.6rem;
  border-radius: 0.3rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }
  .ChoiceAwardBadge__flag ::after {
    position: absolute;
    display: inline-block;
    margin-left: 0.4rem;
    width: 0;
    height: 0;
    border-top: 1.2rem solid #f0bf6e;
    border-bottom: 1.1rem solid #f0bf6e;
    border-right: 1.2rem solid transparent;
    content: ""; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.NomineeCard {
  display: flex;
  align-items: center;
  column-gap: 0.8rem;
  margin-bottom: 1.6rem;
  padding: 1.2rem;
  border-radius: 0.8rem;
  background-color: var(--color-background-alt); }
  @media only screen and (max-width: 63.9375em) {
    .NomineeCard {
      align-items: flex-start;
      column-gap: 2.4rem;
      padding: 1.6rem 2.4rem; } }
  .NomineeCard__decor {
    width: 4.8rem;
    max-width: 4.8rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.4rem;
    justify-content: center;
    text-align: center; }
  .NomineeCard__container {
    display: flex;
    flex-grow: 1;
    justify-content: space-between; }
    @media only screen and (max-width: 63.9375em) {
      .NomineeCard__container {
        display: flex;
        flex-direction: column;
        row-gap: 0.8rem; } }
  @media only screen and (max-width: 63.9375em) {
    .NomineeCard__copy {
      display: flex;
      flex-direction: column;
      row-gap: 0.4rem; } }
  .NomineeCard__header {
    display: flex;
    align-items: baseline;
    column-gap: 0.8rem; }
  .NomineeCard__voteNowButton {
    min-width: 12rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.BookDiscussions {
  padding-bottom: 3.2rem; }
  .BookDiscussions__list {
    padding-top: 3.2rem;
    display: flex; }
    @media only screen and (max-width: 47.9375em) {
      .BookDiscussions__list {
        flex-direction: column; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.DiscussionCard {
  border-radius: 0.8rem;
  text-decoration: none;
  flex: 1;
  display: flex;
  margin-bottom: 2.4rem;
  padding: 1.2rem;
  align-items: center; }
  .DiscussionCard:hover .DiscussionCard__metaRow,
  .DiscussionCard:hover .DiscussionCard__stats {
    text-decoration: underline; }
  .DiscussionCard:focus {
    box-shadow: 0 0 0 0.2rem var(--color-shadow-button-focus);
    transition: transform 0.2s ease-out; }
  .DiscussionCard__stats {
    font-family: Copernicus, "Libre Baskerville", Georgia, serif;
    flex: 1;
    line-height: normal;
    padding-top: 1vw;
    font-size: clamp(3.6rem, 4vw, 6.4rem); }
  .DiscussionCard__icon {
    display: flex;
    flex-direction: column;
    width: clamp(6.4rem, 6vw, 12.8rem);
    height: clamp(6.4rem, 6vw, 12.8rem); }
    .DiscussionCard__icon svg {
      width: 100%;
      height: 100%; }
  .DiscussionCard__metaRow {
    word-break: break-all;
    margin-left: 0.4rem; }
  .DiscussionCard__middle {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-left: clamp(1.2rem, 2vw, 6.4rem); }
  .DiscussionCard__rightIndicator {
    display: none;
    width: 2.4rem;
    height: 2.4rem;
    justify-self: flex-end;
    align-self: center; }
  .DiscussionCard__metaRow {
    flex: 1;
    display: inline-flex; }
  .DiscussionCard__metaIndicator {
    flex: 0 0 2.4rem;
    height: 2.4rem; }
  @media only screen and (max-width: 47.9375em) {
    .DiscussionCard__rightIndicator {
      display: block; }
    .DiscussionCard__metaIndicator {
      display: none; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ContributorLinksList .ContributorLink {
  display: inline-flex; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FeaturedDetails {
  margin-bottom: 3.2rem; }
  .FeaturedDetails a {
    text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.WorkDetails {
  margin-bottom: 3.2rem; }
  .WorkDetails a {
    text-decoration: underline; }
  .WorkDetails__collapseAction {
    display: inline-block;
    padding: 0.8rem 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.EditionDetails {
  margin-bottom: 3.2rem; }
  .EditionDetails .DescList {
    margin: 1.6rem 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.MoreEditions__meta > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.MoreInformation {
  margin-bottom: 3.2rem; }
  .MoreInformation__statistics {
    margin: 1.6rem 0; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.BookDetails p {
  margin: 1.2rem 0; }

.BookDetails__list {
  margin-bottom: 3.2rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.SocialSignalsSection__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.SocialSignalsSection__signal {
  margin-right: 1.2rem;
  display: flex;
  align-items: center;
  flex: 1; }

.SocialSignalsSection__loading {
  width: 26.3rem;
  height: 4.6rem; }

@media only screen and (min-width: 48em) and (max-width: 63.9375em) {
  .SocialSignalsSection {
    display: flex;
    align-items: flex-end; }
    .SocialSignalsSection__container {
      display: block;
      margin: auto; }
    .SocialSignalsSection__caption {
      width: 20rem; }
    .SocialSignalsSection__signal {
      display: flex;
      justify-content: flex-end; }
      .SocialSignalsSection__signal:not(:last-child) {
        padding-bottom: 2.4rem; } }

@media only screen and (max-width: 39.9375em) {
  .SocialSignalsSection {
    display: flex;
    align-items: flex-end; }
    .SocialSignalsSection__container {
      display: block;
      margin: auto; }
    .SocialSignalsSection__caption {
      width: 20rem; }
    .SocialSignalsSection__signal {
      display: flex;
      justify-content: flex-end; }
      .SocialSignalsSection__signal:not(:last-child) {
        padding-bottom: 2.4rem; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.SocialSignalCard {
  border-radius: 1.2rem;
  display: inline-flex;
  align-items: center;
  text-align: left;
  min-height: 4.6rem;
  padding: 0.4rem;
  margin-left: -0.4rem; }
  .SocialSignalCard__interactive {
    transition: all 0.2s ease-in-out;
    text-decoration: none; }
    .SocialSignalCard__interactive:focus {
      box-shadow: 0 0 0 0.2rem var(--color-shadow-button-focus); }
    .SocialSignalCard__interactive:hover {
      background-color: var(--color-background-transparent-hover); }
  .SocialSignalCard__caption {
    font: 400 1.4rem/1.35714 "Proxima Nova", Montserrat, Arial, sans-serif;
    flex: 1;
    margin-left: 1.6rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.LibrarianActionsWidget {
  display: flex;
  padding-bottom: 1.2rem; }
  .LibrarianActionsWidget__editDetailsButton {
    padding-right: 1.2rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.BookPageMetadataSection__title {
  margin-bottom: 1.6rem; }

.BookPageMetadataSection__ratingStats {
  margin-bottom: 0.4rem; }
  @media only screen and (max-width: 47.9375em) {
    .BookPageMetadataSection__ratingStats {
      display: flex;
      justify-content: center; } }

.BookPageMetadataSection__contributor {
  margin-bottom: 0.4rem 0; }
  .BookPageMetadataSection__contributor > * {
    margin-bottom: 0.4rem; }

.BookPageMetadataSection__genres {
  margin: 0.8rem 0; }

.BookPageMetadataSection__genrePlainText {
  display: inline-block;
  padding: 0 1.6rem 0.8rem 0; }

.BookPageMetadataSection__genreButton {
  display: inline-block;
  padding: 0 0.4rem 0.8rem 0; }

.BookPageMetadataSection__mobileBookActions {
  display: none; }

.BookPageMetadataSection__description {
  line-height: 1.37; }

@media only screen and (max-width: 47.9375em) {
  .BookPageMetadataSection__mobileBookActions {
    display: block; }
  .BookPageMetadataSection__contributor {
    text-align: center;
    margin-bottom: 1.2rem; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.PageSection__title {
  margin-bottom: 1.6rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FollowButton {
  width: 12rem; }

.FeaturedPerson__avatar, .FeaturedPerson__info {
  margin-right: 1.2rem; }

.FeaturedPerson__container {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden; }

.FeaturedPerson__info {
  display: flex;
  flex: 1;
  justify-content: space-between; }

.FeaturedPerson__profile {
  display: flex;
  overflow: hidden;
  align-items: center;
  margin-bottom: 1.2rem; }

.FeaturedPerson__nameRow {
  display: flex;
  flex: 1; }

.FeaturedPerson__infoPrimary {
  overflow: hidden;
  margin-right: 0.8rem; }

.FeaturedPerson__meta, .FeaturedPerson__name {
  flex-basis: auto;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.KNHButton__highlight {
  background-color: var(--color-background-knh-highlight-base);
  display: inline-block; }
  .KNHButton__highlight:hover {
    text-decoration: underline; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.FeaturedKNHCollectionCard {
  margin-bottom: 1.6rem; }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
/**
 * shared values used by details-layout. 
 * TODO-EV-3629: move to use Folio as DetailsLayout.tsx if we keep using this layout
 */
@media only screen and (min-width: 64em) {
  :root {
    --right-col-left-offset: 3.2rem;
    --num-left-col: 3;
    --num-right-col: 9; } }

@media only screen and (max-width: 63.9375em) {
  :root {
    --right-col-left-offset: 0; } }

@media only screen and (min-width: 48em) and (max-width: 63.9375em) {
  :root {
    --num-left-col: 2;
    --num-right-col: 4; } }

@media only screen and (min-width: 40em) and (max-width: 47.9375em) {
  :root {
    --num-left-col: 0;
    --num-right-col: 6; } }

@media only screen and (max-width: 39.9375em) {
  :root {
    --num-left-col: 0;
    --num-right-col: 2; } }

.DetailsLayoutRightParagraph {
  display: grid;
  grid-template-columns: repeat(var(--num-right-col), minmax(0, 1fr));
  margin-left: calc(-1 * var(--right-col-left-offset));
  padding-left: var(--right-col-left-offset); }
  @media only screen and (min-width: 93.5em) {
    .DetailsLayoutRightParagraph {
      grid-gap: 2.4rem; } }
  @media only screen and (min-width: 64em) and (max-width: 93.4375em) {
    .DetailsLayoutRightParagraph {
      grid-gap: 1.7%; } }
  @media only screen and (min-width: 64em) and (max-width: 79.9375em) {
    .DetailsLayoutRightParagraph {
      grid-gap: 2%; } }
  @media only screen and (min-width: 48em) and (max-width: 63.9375em) {
    .DetailsLayoutRightParagraph {
      grid-gap: 3%; } }
  @media only screen and (min-width: 40em) and (max-width: 47.9375em) {
    .DetailsLayoutRightParagraph {
      grid-gap: 2.5%; } }
  @media only screen and (min-width: 30em) and (max-width: 39.9375em) {
    .DetailsLayoutRightParagraph {
      grid-gap: 3%; } }
  @media only screen and (max-width: 29.9375em) {
    .DetailsLayoutRightParagraph {
      grid-gap: 4%; } }
  .DetailsLayoutRightParagraph__widthConstrained {
    grid-column: span var(--num-right-col); }
  @media only screen and (min-width: 64em) {
    .DetailsLayoutRightParagraph__widthConstrained {
      grid-column: span 7; } }
  @media only screen and (min-width: 64em) and (max-width: 79.9375em) {
    .DetailsLayoutRightParagraph__widthConstrained {
      grid-column: span 8; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.PreReleaseDetails {
  justify-content: center; }
  @media only screen and (max-width: 47.9375em) {
    .PreReleaseDetails {
      text-align: center; } }

/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
  Do not edit directly
  Generated on Tue, 28 Jan 2025 12:35:49 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/*
  Function for converting px values to em based off of 1/16th for responsive utilities
  Used for "for" sass mixin. Using em instead of rem due to Safari bug, see::after
  https://medium.com/@barrypeng6/why-should-not-use-rem-unit-in-media-query-5645d0163ce5
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem based off of 1/10th scale for easy math
  @deprecated: use postcss-pxtorem plugin
  References:
  https://npmpm.corp.amazon.com/pkg/postcss-pxtorem
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ArticleCard .Elevation__contents-inner {
  isolation: isolate; }

.ArticleCard__imageContainer {
  overflow: hidden; }

.ArticleCard__img {
  transition: transform 0.2s ease-out;
  transform: translateZ(0);
  backface-visibility: hidden; }
  .Elevation:hover .ArticleCard__img {
    transform: scale(1.025); }

.ArticleCard__content {
  padding: 1.6rem;
  height: 11.5rem; }

.ArticleCard__headline {
  max-height: 4.7rem;
  min-height: 4.7rem;
  overflow: hidden; }
  .Elevation:hover .ArticleCard__headline {
    text-decoration: underline; }

.ArticleCard__tags {
  width: 100%;
  padding: 1.6rem 0 0 0;
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: nowrap; }

.ArticleCard__tag {
  color: var(--color-text-subdued);
  display: inline; }
  .ArticleCard__tag--strong {
    color: var(--color-text-body-standard);
    font-weight: 700; }
  .ArticleCard__tag::before {
    padding: 0.4rem;
    content: "\B7"; }
  .ArticleCard__tag:first-child::before {
    display: none; }