/* @layer config { */
  :root {
    --color-text: #202020;
    --color-text-invert: #f4f4f4;
	--color-text-hover: #008bd5;
    --color-bg:   #f4f4f4;
    --color-dim:   #ccc;
    --hx-font: "Gotham Rounded", Helvetica, Arial, sans-serif;
    --font: "Atkinson Hyperlegible", Helvetica, Arial, sans-serif;
    /* Use system UI font. */
    --font-italic: "Atkinson Hyperlegible", serif;
    /* Remove this var completely if you don't care for pretty italics. */
    --font-mono: "lucida console", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    --font-size: 100%;
    /* % ensures browser zoom is supported. */
    --hx-font-weight-regular: 350;
    --font-weight-regular: 400;
    --font-weight-semibold: 700;
    --font-weight-bold: 900;
    --tracking: 0;
    /* Reduce this to 0 if your font does not need adjustment. */
    --leading: 1.33;
    /* Standard leading for good legibility. Adjust this based on the font you are using if you decides to not use system UI font. */
    --gutter: clamp(1ch, 2.5vmax, 3ch);
    --stack: clamp(1.25ex, 2.5vmax, 1.75ex);
    --line-length: 78ch;
    --min-inline-size: 20ch;
    --page-padding-inline: calc((100vi - min(var(--line-length), 80vi)) / 2);
    --border-width: 1px;
    --border-style: dotted;
    --border-style-readonly: dashed;
    --border-radius: 0.25em;
    --ol-style-type: decimal;
    --bullet-hanging-offset: 1.1em;
    --quote-hanging-offset: -1ex;

    --speak-color: #7AD2F6;
    --work-color : #DF78B0;
    --live-color : #FFC44C;
    --learn-color: #76D0D1;

    --shop-color: #2E247A;
  }
/* } */

/* @layer color { */
  :root {
    color:            var(--color-text);
    background-color: var(--color-bg);
    accent-color:     var(--color-text);
    color-scheme: light;
  }

  :where(a) {
    color: var(--color-primary, var(--color-text));
  }

  :where(button) {
    color: var(--color-bg);
    background-color: var(--color-primary, var(--color-text));
  }

  :where(input, textarea, select) {
    color: var(--color-text);
    background-color: var(--color-bg);
  }

  :where(code) {
      color: #000;
      background-color: #eee;
  }

  :where(table) {
    background-color: var(--color-dim);
    /* This is acting as border color because there is spacing between cells. */
  }

  :where(th, td) {
    background-color: var(--color-bg);
  }

  @media (prefers-contrast: more) {
    :root {
      --color-text: black;
      --color-bg: white;
    }
  }
/*
  @media (prefers-color-scheme: dark) {
    :root,
    :root[data-theme="dark"] {
      --font-weight-regular: 300;
      / * Knockout text appears bolder, reduce weight to make body text more legible. * /
      --tracking: 0.006em;
      --color-text: #f4f4f4;
      --color-bg: #202020;
      --color-dim:   #444;
      color-scheme: dark;
    }

    :where(input[type="checkbox"], input[type="radio"]) {
      accent-color: var(--color-bg);
    }

    :where( .custom-bg ) {
      background-color: #282828;
    }

    :where(code) {
      color: #fff;
      background-color: #111;
    }
  }
 */
  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
    :root,
    :root[data-theme="dark"] {
      --color-text: white;
      --color-bg: black;
    }
  }
/* } */

/* @layer typography { */
  :root {
    font-size: clamp( var(--font-size), var(--font-size) * 0.875 + 0.225vi, var(--font-size) * 2 );
    font-family: var(--font);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading);
    letter-spacing: var(--tracking);

      --section-spacing: clamp(var(--stack) * 4, 10vmax, var(--stack) * 6);
      --pt-double-canon: 4.666rem;
      --pt-canon: 3.999rem;
      --pt-double-great-primer: 2.999rem;
      --pt-double-english: 2.333rem;
      --pt-double-pica: 2rem;
      --pt-paragon: 1.666rem;
      --pt-great-primer: 1.5rem;
      --pt-english: 1.166rem;
      --pt-pica: 1rem;
      --pt-small-pica: 0.916rem;
      --pt-long-primer: 0.833rem;
      --pt-bourgeois: 0.75rem;
      --pt-chu: 3.499rem;
      --pt-xiaochu: 2.999rem;
      --pt-yi: 2.166rem;
      --pt-xiaoyi: 1.999rem;
      --pt-er: 1.833rem;
      --pt-xiaoer: 1.5rem;
      --pt-san: 1.333rem;
      --pt-xiaosan: 1.25rem;
      --pt-si: 1.166rem;
      --pt-xiaosi: 1rem;
      --pt-wu: 0.875rem;
      --pt-xiaowu: 0.75rem;

  }

  :where(button, select, input, textarea, a) {
    font: inherit;
    /* Reset font. */
  }

  :where(a) {
    text-decoration: underline;
    text-decoration-thickness: var(--border-width);
    text-underline-offset: calc(var(--border-width) * 2);
	  transition: .2s color ease-in-out;
  }

  :where(a):hover {
	  color: var(--color-text-hover);
    text-decoration-thickness: calc(var(--border-width) * 1.5);
  }

  :where(pre, code) {
    font-family: var(--font-mono);
    /* Differentiate preformatted, code, description, and table text from body text. */
  }

  :where(pre, code, kbd, dl, small, figcaption, table) {
    font-size: 0.8em;
    /* Make monospace and small text smaller than body text. */
  }

  :where(sub) {
    font-size: .8rem;
    line-height: 1;
    opacity: .8;
  }

  :where(big) {
    font-size: 1.2em;
    /* <big> is technically deprecated, but I love using it. This creates a fallback if a browser doesn't support it. */
  }

  :where(pre code) {
    display: block;
    /* Define block code. */
    font-size: 1em;
    /* Prevent cascading. */
  }

  :where(blockquote, em, i, cite) {
    font-family: var(--font-italic, var(--font));
    /* Differentiate blockquote, citation, idiomatic, and emphasisized text from body text. Also, sans-serif italic is ugly. */
    font-weight: var(--font-weight-regular);
    /* Prevent italics to be bold. Bold italic is also ugly and unnecessary. */
  }

  :where(blockquote) {
    font-size: clamp(1.5rem, 1.25rem + 1vi, 3rem);
    letter-spacing: 0;
  }

  :where(blockquote p) {
    max-inline-size: 35ch;
  }

  :where(blockquote q)::before {
    position: absolute;
    margin-inline-start: var(--quote-hanging-offset);
  }

  :where(blockquote q q)::before {
    position: static;
    margin-inline-start: unset;
  }

  :where(strong, b, kbd, th, button) {
    font-weight: var(--font-weight-semibold);
    /* Make non-heading emphasized text less bold than heading text. */
  }

  :where(h1, h2, h3, h4, h5, h6, summary strong, legend) {
    font-weight: var(--hx-font-weight-regular);
    overflow-wrap: break-word;
    hyphens: auto;
  }
  :where(h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong) {
    font-weight: var(--hx-font-weight-regular);
  }

  :where(abbr) {
    text-decoration: underline;
    text-decoration-style: dotted;
    /* Differentiate abbreviaions from links. */
    text-underline-offset: calc(var(--border-width) * 2);
  }

  :where(button, label, select, summary) {
    cursor: pointer;
  }

  :where(summary:hover > *) {
    text-decoration: underline;
    text-underline-offset: calc(var(--border-width) * 2);
  }

  :where(figcaption) {
    text-align: center;
  }

  :where(th) {
    text-align: start;
  }

  :where(th, td) {
    vertical-align: baseline;
  }

  :where(ol) {
    list-style-type: var(--ol-style-type);
  }

  :where(fieldset > ol) {
    list-style: none;
  }

  /* Chinese Typesetting */
  [lang^=zh-] {
    --font-italic: var(--font);
    --font-size: 90%;
    --font-weight-regular: 400;
    --tracking: 0;
    --leading: 1.6;
    --gutter: clamp(0.75rem, 2.5vmax, 1rem);
    --stack: clamp(0.75rem, 2.5vmax, 1rem);
    --line-length: 36rem;
    --min-inline-size: 10rem;
    --page-padding-inline: calc((100vi - min(var(--line-length), 90vi)) / 2);
    --ol-style-type: cjk-ideographic;
    --bullet-hanging-offset: 2em;
    --quote-hanging-offset: -2ex;
  }
/* } */

/* @layer spacing { */
  :where(h1, h2, h3, h4, h5, h6, p, figure, form, pre, blockquote, ul, ol, dl, li, details) {
      margin-block-end: 0;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    margin-block-start: calc(var(--stack) * 1.75);
    margin-block-end: .5rem;
  }

  :where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details, [is-stack]) {
    margin-inline: 0;
    margin-block-start: var(--stack);
  }

  :where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details, [is-stack]):first-child,
  :where(legend + *) {
    margin-block-start: 0;
  }

  :where(h1, h2, h3, h4, h5, h6) + * {
    margin-block-start: calc(var(--stack) / 5);
  }

  :where(ul, ol) {
    padding-inline-start: var(--bullet-hanging-offset);
    margin-block-end: var(--stack);
  }

  :where(li > ul, li > ol) {
    margin-block-start: calc(var(--stack) / 5);
  }

  :where(details ul, details ol) {
    margin-inline-start: 4ch;
    /* Unify indent for all lists inside details. */
  }

  :where(table ul, table ol) {
    margin-inline-start: 2ch;
    /* Unify indent for all lists inside table. */
  }

  :where(li > ul, li > ol, fieldset ul, fieldset ol) {
    margin-inline-start: 2.25ch;
    /* Unify indent for all nested lists. */
  }

  :where(li + li) {
    margin-block-start: calc(var(--stack) / 5);
  }

  :where(fieldset > ol li + li) {
    margin-block-start: calc(var(--stack) / 2);
  }

  :where(fieldset > ol) {
    margin-inline: 0;
  }

  :where(hr) {
    margin-block-start: calc(var(--stack) * 3);
    margin-block-end: calc(var(--stack) * 3);
  }

  :where(hr + *) {
    margin-block-start: 0;
  }

  :where(figure > img, table) {
    margin-inline: auto;
  }

  :where(blockquote > *) {
    margin-block-start: calc(var(--stack) / 4);
  }

  :where(blockquote:not(:last-child)) {
    padding-block-end: calc(var(--stack) / 2);
  }

  :where(button, dd, th, td, code, kbd, select, input:not([type="radio"], [type="checkbox"]), textarea) {
    /* Unify inset spacing on bordered elements. */
    padding-block: calc(var(--stack) / 1.5);
    padding-inline: calc(var(--gutter) / 3);
  }

  :where(button) {
    padding-inline: var(--gutter);
    /* Give button more spacing. */
  }

  :where(kbd) {
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 6);
  }

  :where(caption, figcaption) {
    padding-block: calc(var(--stack) / 2);
  }

  :where(figure, pre, [is-box]) {
      /*padding-block-start: calc( var(--stack) / 4 );*/
      padding-block-start: 0;
  }
/* Line up top of images/codeblocks with text in an adjacent column layout. */

  :where(pre) {
      padding-block-end: calc(var(--stack) / 2.5);
  }

  :where(pre code) {
    padding-block: var(--stack);
    padding-inline: var(--gutter);
  }

  details[open] summary + * {
    margin-block-start: calc(var(--stack) / 4);
  }
/* } */

/* @layer elements { */
  body {
    margin: 0;
  }

  *,
  *::before,
  *::after {
    font-feature-settings: "kern";
    font-kerning: normal;
    box-sizing: border-box;
  }

  *:focus-visible {
    outline: calc(var(--border-width) * 2) solid var(--color-primary, var(--color-text));
    outline-offset: calc(var(--border-width) * 2);
  }

  *:disabled {
    cursor: not-allowed;
  }

  *[readonly] {
    border-style: var(--border-style-readonly);
  }

  :where(button) {
    border: 0;
  }

  :where(kbd) {
    border: var(--border-width) solid;
  }

  :where(input, textarea, select, fieldset, dd) {
    border: var(--border-width) var(--border-style);
    /* Unify border styles. */
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select, fieldset, button, img, code, dd, table) {
    border-radius: var(--border-radius);
    /* Unify interactive elements border radius. */
  }

  :where(table > *:first-child tr:first-child > *:first-child, table
      > caption
      + *
      tr:first-child
      > *:first-child) {
    border-start-start-radius: var(--border-radius);
  }

  :where(table > *:first-child tr:first-child > *:last-child, table
      > caption
      + *
      tr:first-child
      > *:last-child) {
    border-start-end-radius: var(--border-radius);
  }

  :where(table > *:last-child tr:last-child > *:first-child) {
    border-end-start-radius: var(--border-radius);
  }

  :where(table > *:last-child tr:last-child > *:last-child) {
    border-end-end-radius: var(--border-radius);
  }

  :where(kbd) {
    border-radius: 0.3em;
  }

  :where(pre) {
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: normal;
    word-wrap: break-word;
  }

  :where(pre code) {
    max-block-size: 60vh;
    overflow: auto;
  }

  :where(dl) {
    display: grid;
    grid-template-columns: auto minmax(75%, 1fr);
    gap: calc(var(--gutter) / 2);
    align-items: baseline;
  }

  :where(dt) {
    border-block-end: var(--border-width) dotted;
  }

  :where(dd) {
    block-size: 100%;
    margin-inline-start: 0;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    display: block;
    inline-size: 100%;
    margin-block: .33rem .22rem;
    border-color: #f8f8f8;
    border-block-end: 3px dotted #333;
    background-color: #f8f8f8;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
    background-color: unset;
  }

  :where(input[type="radio"], input[type="checkbox"]) {
    inline-size: 2ex;
    block-size: 2ex;
    vertical-align: center;
  }
  :where(input[type="radio"], input[type="checkbox"]):focus-visible {
  }

  :where(input[type="file"]) {
    padding-inline: 0;
    border: 0;
  }

  :where(select) {
    appearance: none;
    text-indent: 0.01px;
    text-overflow: "";
  }

  :where(hr) {
    block-size: 0;
    border: 0;
    border-block-start: var(--border-width) var(--border-style) var(--color-dim);
  }

  :where(img) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(figure) {
    overflow-x: auto;
  }

  :where(figure > img) {
    display: block;
  }

  :where(table) {
    caption-side: bottom;
    border-spacing: var(--border-width);
  }

  :where(tr > *:first-child) {
    white-space: nowrap;
  }

  :where(summary > *) {
    display: inline;
    vertical-align: middle;
  }
/* } */

/* @layer complex-elements { */
  /* Advanced responsive table */


/* MT: where is the usefulness of that one? */
  /*
  :where(figure:has(table)) {
    position: relative;
    inset-inline-start: 50%;
    inset-inline-end: 50%;
    inline-size: 100%;
    inline-size: 100vi;
    margin-inline-start: -50vi;
    margin-inline-end: -50vi;
    padding-inline: var(--page-padding-inline);
  }
  +/

  /* Validation text */
  :where(input, textarea, select) ~ * {
    margin-block-start: 0;
<    font-size: 0.8em;
  }

  :where(input:required + mark) {
    display: none;
    color: var(--color-text);
    background-color: transparent;
  }

  :where(input:required:invalid + mark) {
    display: block;
  }

  /* Skip link */
  body > a:first-child {
    position: fixed;
    top: var(--stack);
    left: var(--gutter);
    inline-size: auto;
    padding: 2px;
    text-align: center;
    background-color: var(--color-bg);
  }

  body > a:first-child:not(:focus) {
    opacity: 0;
    pointer-events: none;
  }
/* } */




/* minimal responsive table formatting */

.cell-output-display:not(.no-overflow-x) {
  overflow-x: auto;
}

.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table > :not(caption) > * > * {
  padding: .5rem .5rem;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

.table > :not(caption) > :not(:last-child) > * {
  border-bottom-color: #ebeced;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.table {
  --bs-table-color-type: initial;
  --bs-table-bg-type: initial;
  --bs-table-color-state: initial;
  --bs-table-bg-state: initial;
  --bs-table-color: #373a3c;
  --bs-table-bg: #fff;
  --bs-table-border-color: #dee2e6;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #373a3c;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: #373a3c;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #373a3c;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
}


/*  */

[class^=pt-] + [class^=pt-] {
  margin-block-start: 2vmax;
}

.pt-double-canon {
  font-size: var(--pt-double-canon);
}
.pt-double-canon::before {
  content: "56";
}

.pt-canon {
  font-size: var(--pt-canon);
}
.pt-canon::before {
  content: "48";
}

.pt-double-great-primer {
  font-size: var(--pt-double-great-primer);
}
.pt-double-great-primer::before {
  content: "36";
}

.pt-double-english {
  font-size: var(--pt-double-english);
}
.pt-double-english::before {
  content: "28";
}

.pt-double-pica {
  font-size: var(--pt-double-pica);
}
.pt-double-pica::before {
  content: "24";
}

.pt-paragon {
  font-size: var(--pt-paragon);
}
.pt-paragon::before {
  content: "20";
}

.pt-great-primer {
  font-size: var(--pt-great-primer);
}
.pt-great-primer::before {
  content: "18";
}

.pt-english {
  font-size: var(--pt-english);
}
.pt-english::before {
  content: "14";
}

.pt-pica {
  font-size: var(--pt-pica);
}
.pt-pica::before {
  content: "12";
}

.pt-small-pica {
  font-size: var(--pt-small-pica);
}
.pt-small-pica::before {
  content: "11";
}

.pt-long-primer {
  font-size: var(--pt-long-primer);
}
.pt-long-primer::before {
  content: "10";
}

.pt-bourgeois {
  font-size: var(--pt-bourgeois);
}
.pt-bourgeois::before {
  content: "09";
}

.pt-chu {
  font-size: var(--pt-chu);
}
.pt-chu::before {
  content: "42";
}

.pt-xiaochu {
  font-size: var(--pt-xiaochu);
}
.pt-xiaochu::before {
  content: "36";
}

.pt-yi {
  font-size: var(--pt-yi);
}
.pt-yi::before {
  content: "26";
}

.pt-xiaoyi {
  font-size: var(--pt-xiaoyi);
}
.pt-xiaoyi::before {
  content: "24";
}

.pt-er {
  font-size: var(--pt-er);
}
.pt-er::before {
  content: "22";
}

.pt-xiaoer {
  font-size: var(--pt-xiaoer);
}
.pt-xiaoer::before {
  content: "18";
}

.pt-san {
  font-size: var(--pt-san);
}
.pt-san::before {
  content: "16";
}

.pt-xiaosan {
  font-size: var(--pt-xiaosan);
}
.pt-xiaosan::before {
  content: "15";
}

.pt-si {
  font-size: var(--pt-si);
}
.pt-si::before {
  content: "14";
}

.pt-xiaosi {
  font-size: var(--pt-xiaosi);
}
.pt-xiaosi::before {
  content: "12";
}

.pt-wu {
  font-size: var(--pt-wu);
}
.pt-wu::before {
  content: "10.5";
}

.pt-xiaowu {
  font-size: var(--pt-xiaowu);
}
.pt-xiaowu::before {
  content: "9";
}