@layer config{:root,
  [data-theme="light"] {
    --brand-off-black-1: #202020;
    --brand-off-black-2: #090909;
    --brand-off-white-1: #f4f4f4;
    --brand-off-white-2: #f0f0f0;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif; 
    --font-italic: "Georgia", serif; 
    --font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
      Liberation Mono, monospace;
    --font-size: 119%; 
    --font-weight-regular: 400;
    --font-weight-semibold: 700;
    --font-weight-bold: 900;
    --tracking: 0; 
    --leading: 1.45; 

    --gutter: clamp(1ch, 2.5vmax, 3ch);
    --stack: clamp(1.25ex, 2.5vmax, 1.75ex);
    --line-length: 70ch;
    --min-inline-size: 20ch;
    --page-padding-inline: calc((100dvi - min(var(--line-length), 80dvi)) / 2);

    --border-width: 1px;
    --border-style: solid;
    --border-style-readonly: dashed;
    --border-radius: 0.5em;

    --ol-style-type: decimal;
    --bullet-hanging-offset: 0;
    --quote-hanging-position: absolute;
    --quote-hanging-offset: -1ex;

    --color-text: var(--brand-off-black-1);
    --color-bg: var(--brand-off-white-1);
    --color-accent: var(--brand-off-black-1);

    @media (prefers-contrast: more) {
      --color-text: black;
      --color-bg: white;
      --color-accent: black;
    }
  }

  [data-theme="dark"] {
    --font-weight-regular: 300; 
    --color-text: var(--brand-off-white-2);
    --color-bg: var(--brand-off-black-2);
    --color-accent: var(--brand-off-black-2);
    color-scheme: dark;

    @media (prefers-contrast: more) {
      --color-text: white;
      --color-bg: black;
      --color-accent: black;
    }
  }

  @media (prefers-color-scheme: dark) {
    
    :root {
      --font-weight-regular: 300; 
      --color-text: var(--brand-off-white-2);
      --color-bg: var(--brand-off-black-2);
      --color-accent: var(--brand-off-black-2);
      color-scheme: dark;

      @media (prefers-contrast: more) {
        --color-text: white;
        --color-bg: black;
        --color-accent: black;
      }
    }
  }
}@layer color{:root,
  [data-theme] {
    color: var(--color-text);
    background-color: var(--color-bg);
    accent-color: var(--color-accent);
  }

  ::selection {
    color: var(--color-bg);
    background: var(--color-text);
  }

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

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

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

  :where(code) {
    color: var(--color-bg);
    background-color: var(--color-text);
  }

  :where(table) {
    background-color: var(
      --color-text
    ); 
  }

  :where(th, td) {
    background-color: var(--color-bg);
  }
}@layer typography{:root {
    --_font-size: clamp(
      var(--font-size),
      var(--font-size) * 0.9 + 0.25dvi,
      var(--font-size) * 2
    );
    font-size: var(--_font-size);
    font: -apple-system-body; 
    font-family: var(--font);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading);
    letter-spacing: var(--tracking);

    @supports (font: -apple-system-body) and
      (not (-webkit-touch-callout: default)) {
      
      font-size: var(--_font-size);
    }
  }

  :where(button, select, input, textarea, a) {
    font: inherit; 
  }

  :where(a) {
    text-decoration: underline;
    text-decoration-thickness: var(--border-width);
    text-underline-offset: calc(var(--border-width) * 2);
  }

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

  :where(pre, code, kbd, dl, figcaption, abbr, table) {
    font-family: var(
      --font-mono
    ); 
  }

  :where(pre, code, kbd, dl, small, figcaption, table) {
    font-size: 0.8em; 
  }

  :where(big) {
    font-size: 1.2em; 
  }

  :where(pre code) {
    display: block; 
    font-size: 1em; 
  }

  :where(blockquote, em, i, cite) {
    font-family: var(
      --font-italic,
      var(--font)
    ); 
    font-weight: var(
      --font-weight-regular
    ); 
  }

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

  :where(blockquote p) {
    text-wrap: pretty;
  }

  :where(blockquote q)::before {
    position: var(--quote-hanging-position);
    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
    ); 
  }

  :where(h1, h2, h3, h4, h5, h6) {
    line-height: 1.2;
  }

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

  :where(abbr) {
    text-decoration: underline;
    text-decoration-style: dotted; 
    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;
  }

  
  [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((100dvi - min(var(--line-length), 90dvi)) / 2);
    --ol-style-type: cjk-ideographic;
    --bullet-hanging-offset: 2em;
    --quote-hanging-position: revert;
    --quote-hanging-offset: revert;
  }
}@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);
  }

  :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) / 1.5);
  }

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

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

  :where(details ul, details ol) {
    margin-inline-start: 4ch; 
  }

  :where(table ul, table ol) {
    margin-inline-start: 2ch; 
  }

  :where(li > ul, li > ol, fieldset ul, fieldset ol) {
    margin-inline-start: 2.25ch; 
  }

  :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) {
    
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 3);
  }

  :where(button) {
    padding-inline: var(--gutter); 
  }

  :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) / 2.5
    ); 
  }

  :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", "ss06";
    font-kerning: normal;
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-font-smoothing: antialiased !important;
    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 {
    opacity: 0.8;
    cursor: not-allowed;
  }

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

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

  :where(input, textarea, select, fieldset, dd) {
    border: var(--border-width) var(--border-style); 
  }

  @media (forced-colors: active) {
    :where(th, td, code) {
      border: var(--border-width) solid;
    }
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select, fieldset, button, img, code, dd, table) {
    border-radius: var(
      --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%;
  }

  :where(input[type="radio"], input[type="checkbox"]) {
    inline-size: 1.5ex;
    block-size: 1.5ex;
    vertical-align: baseline;
  }

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

  ::-webkit-file-upload-button {
    appearance: button;
    cursor: pointer;
    font: inherit;
  }

  :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-text);
  }

  :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{:where(input, textarea, select) ~ * {
    margin-block-start: 0;
    font-size: 0.8em;
  }

  :where(input:required + span) {
    display: none;
  }

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

  
  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;
  }
}@layer add-ons{:where([data-layout], [data-layout] + *) {
    margin-block-start: var(--stack);
  }

  :where([data-layout]:first-child) {
    margin-block-start: 0;
  }

  :where([data-layout] > *) {
    margin: 0;
  }

  :where(body[data-layout="single"]) {
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin: 0;
    min-block-size: 100dvb;
  }

  :where(body[data-layout="single"] > *) {
    min-inline-size: 0;
  }

  :where(body[data-layout="single"] main) {
    padding-block: clamp(var(--stack) * 1, 10vmax, var(--stack) * 2);
    padding-inline: var(--page-padding-inline);
  }

  :where(body[data-layout="single"] > header, body[data-layout="single"]
      > footer) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gutter);
    row-gap: calc(var(--stack) / 2);

    > *:only-child {
      margin-block: 0;
      margin-inline: auto;
    }
  }

  :where(body[data-layout="single"] > footer) {
    padding-block: clamp(var(--stack) * 1, 10vmax, var(--stack) * 2)
      clamp(var(--stack) * 2, 10vmax, var(--stack) * 6);
    padding-inline: var(--page-padding-inline);
    border-block-start: var(--border-width) var(--border-style);
  }

  :where(body[data-layout="single"] > header) {
    padding-block: clamp(var(--stack) * 2, 10vmax, var(--stack) * 6)
      clamp(var(--stack) * 1, 10vmax, var(--stack) * 2);
    padding-inline: var(--page-padding-inline);
    border-block-end: var(--border-width) var(--border-style);

    a {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    h1 a,
    > h1,
    > a {
      display: block;
      font-size: clamp(2.25rem, 2.125rem + 0.5dvi, 2.75rem);
      font-weight: var(--font-weight-bold);
      line-height: 1;
      letter-spacing: 0.02em;
    }

    > nav {
      ul {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--gutter);
        row-gap: calc(var(--stack) / 2);
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 0.9em;
      }
    }
  }

  :where([data-layout="grid"]) {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(var(--min-inline-size), 1fr)
    );
    gap: var(--gutter);
  }

  :where([data-layout="flag"]) {
    display: grid;
    grid-template-columns: minmax(5ch, max-content) 75%;
    gap: var(--gutter);
    align-items: center;

    > *:nth-child(odd) {
      align-self: start;
    }
  }
}