@layer global {
  /* ============================================
   Browser Consistency
   ============================================ */

  address,
  blockquote,
  dd,
  dl,
  fieldset,
  figure,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  ol,
  p,
  pre,
  table,
  ul {
    margin: 0;
  }

  /* ============================================
   Body Styles
   ============================================ */

  html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth; /* in-page nav; the reduced-motion block below resets it */
  }

  /* The notebook surface. Painted on <body> so every screen sits on the same
     paper, with the dot pitch (--grid-cell) that task rows are sized against. */
  body {
    margin: 0;
    padding: 0;
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image: radial-gradient(circle at center, var(--color-dot) 1.3px, transparent 1.4px);
    background-size: var(--grid-cell) var(--grid-cell);
    background-position: calc(var(--grid-cell) / 2) calc(var(--grid-cell) / 2);
    font-size: var(--text-base);
    font-family: var(--font-body);
    line-height: var(--leading);
    -webkit-font-smoothing: antialiased;
  }

  /* ============================================
   Typography
   ============================================ */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--weight-bold);
    font-family: var(--heading-font-family);
    line-height: var(--leading-tight);
    overflow-wrap: break-word;
  }

  h1 {
    font-size: var(--text-hero);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
  }

  h2 {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
  }

  h3 {
    font-size: var(--text-xl);
  }

  h4 {
    font-size: var(--text-md);
  }

  h5 {
    font-size: var(--text-base);
  }

  h6 {
    font-size: var(--text-base);
  }

  p {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  strong {
    font-weight: var(--weight-semi);
  }

  small {
    font-size: 80%;
  }

  var {
    font-style: normal;
    font-weight: var(--weight-semi);
  }

  sub,
  sup {
    font-size: 75%;
    vertical-align: baseline;
    display: inline-block;
  }

  sub {
    transform: translateY(0.65ex);
  }

  sup {
    transform: translateY(-0.7ex);
  }

  address {
    font-style: normal;
  }

  blockquote footer {
    margin-block-start: var(--space-2);
    font-style: normal;
  }

  blockquote p:first-of-type::before {
    content: open-quote;
  }

  blockquote p:last-of-type::after {
    content: close-quote;
  }

  q {
    font-style: italic;
  }

  hr {
    border: 0;
    border-block-start: var(--stroke-m) var(--border-style) var(--color-border);
    margin-block: var(--flow-space);
  }

  abbr {
    cursor: help;
    text-underline-offset: 0.125em;
  }

  mark {
    border-radius: 0;
  }

  /* The one strike-through: a drawn band instead of text-decoration, tilted
     1.6deg (178.4deg) and rising to the right. It is the inline text's
     background, cloned onto every line it wraps to, so each line is struck.
     The text keeps its colour, so it stays above 4.5:1. */
  s {
    text-decoration: none;
    background: linear-gradient(
      178.4deg,
      transparent calc(54% - var(--stroke-l) / 2),
      var(--color-decorative) 0 calc(54% + var(--stroke-l) / 2),
      transparent 0
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* ============================================
   Links
   ============================================ */

  a {
    color: var(--color-link);
    text-decoration: var(--link-decoration);
    -webkit-text-decoration: var(--link-decoration);
    text-decoration-skip-ink: auto;
    text-underline-offset: 0.25em;
  }

  a:hover {
    color: var(--color-link-hover);
  }

  /* Links written on the sheet are ink. Header and footer set their own. */
  main {
    --color-link: var(--color-text);
  }

  a code {
    background-color: inherit;
    color: inherit;
  }

  /* ============================================
   Lists
   ============================================ */

  ul,
  ol {
    padding: 0;
  }

  li > ul,
  li > ol {
    margin-inline-start: 0.25em;
  }

  ul {
    list-style: disc;
  }

  li {
    margin-inline-start: 1.25em;
    padding: 0;
  }

  dt {
    font-weight: var(--weight-bold);
  }

  [role="list"],
  [role="tablist"] {
    margin-block: 0;
    padding-inline: 0;
    list-style: none;
  }

  :is([role="list"], [role="tablist"]) li {
    margin-inline-start: 0;
  }

  /* ============================================
   Forms
   ============================================ */

  /* Every form spaces its fields one dot row apart, so fields sit on the
     pitch. Forms and fields are [ flow ]; inside a field, whatever follows
     the label or legend (hint, input, group) sits a small step below it. */
  form {
    --flow-space: var(--space-cell);
  }

  form :is(label, legend) ~ * {
    --flow-space: var(--space-1);
  }

  /* Buttons start bare: no fill, frame or inset, in the text's colour. Blocks
     draw what a button needs. */
  button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
  }

  /* Browsers give buttons the arrow; anything pressable gets the hand. */
  button,
  input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"]),
  input:is([type="checkbox"], [type="radio"]) + label,
  label:has(> input:is([type="checkbox"], [type="radio"])) {
    cursor: pointer;
  }

  /* A group of fields is not a box: no border, no inset. Its legend reads
     like any field label (below). */
  fieldset {
    border: 0;
    padding: 0;
  }

  legend {
    padding: 0;
  }

  /* Labels */
  label {
    display: inline-block;
    position: relative;
    font: inherit;
    color: var(--color-text-prose);
    line-height: var(--leading-snug);
  }

  /* Stacked field labels: small caps above a ruled line. Checkbox and radio
     labels stay sentence case beside the control. */
  label:has(
    + :is(
      input:not(
        [type="button"],
        [type="checkbox"],
        [type="color"],
        [type="file"],
        [type="hidden"],
        [type="image"],
        [type="radio"],
        [type="range"],
        [type="reset"],
        [type="submit"]
      ),
      textarea,
      select
    )
  ),
  label:has(+ em + input),
  legend {
    display: block;
    font-family: var(--label-font-family);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
    color: var(--label-color);
  }

  /* Full width for labels containing text inputs/textareas/selects */
  label:has(
    input:not(
      [type="button"],
      [type="checkbox"],
      [type="color"],
      [type="file"],
      [type="hidden"],
      [type="image"],
      [type="radio"],
      [type="reset"],
      [type="submit"]
    ),
    textarea,
    select
  ) {
    width: 100%;
  }

  /* Spacing between a label and the input it wraps. A label beside its
     input is spaced by the field's flow (see Forms above). */
  label > :is(input:not([type="checkbox"], [type="radio"]), textarea, select) {
    margin-block-start: var(--space-1);
  }

  /* Toggles are drawn by the .checkbox and .choice blocks. Global only drops
     the UA margin. */
  input:is([type="checkbox"], [type="radio"]) {
    margin: 0;
  }

  /* Text inputs, textareas, selects: a ruled line, not a box. The same
     treatment as the hero writing line, so every form sits on the sheet. */
  input:not(
    [type="button"],
    [type="checkbox"],
    [type="color"],
    [type="file"],
    [type="hidden"],
    [type="image"],
    [type="radio"],
    [type="range"],
    [type="reset"],
    [type="submit"]
  ),
  textarea,
  select {
    width: 100%;
    min-block-size: var(--form-control-height);
    padding: var(--space-1) 2px;
    appearance: none;
    vertical-align: middle;

    color: var(--color-text);
    font: inherit;
    font-family: var(--form-control-font-family);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);

    background-color: transparent;
    border: 0;
    border-block-end: var(--stroke-m) solid var(--color-text);
    border-radius: 0;

    &::placeholder {
      color: var(--color-text-faint);
      font-weight: var(--weight-normal);
      opacity: 1;
      user-select: none;
      -webkit-user-select: none;
    }

    &:focus {
      border-block-end-color: var(--color-accent-strong);
      box-shadow: none;
      outline: none;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  /* Textarea specific */
  textarea {
    height: auto;
    min-height: var(--form-control-height);
    line-height: var(--leading);
    resize: vertical;
  }

  /* Select */
  select {
    cursor: pointer;

    /* CSS caret instead of SVG */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
      calc(100% - 0.5em) center,
      calc(100% - 0.25em) center;
    background-size: 0.25em 0.25em;
    background-repeat: no-repeat;
    padding-inline-end: 1.75em;
  }

  /* ============================================
   Code
   ============================================ */

  code,
  kbd,
  samp {
    font-family: var(--font-mono);
    background: var(--color-bg-raised);
    padding-inline: 0.25em;
    hyphens: none;
    tab-size: 2;
    text-align: left;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  pre {
    white-space: pre-wrap;
    padding: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre:has(code) {
    background: CanvasText;
    color: Canvas;
  }

  pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
  }

  kbd {
    border: var(--stroke-m) var(--border-style) var(--color-border);
    border-bottom: calc(var(--stroke-m) + 1px) solid var(--color-border);
    border-radius: var(--radius-s);
    font-size: 0.825em;
    display: inline-flex;
    gap: var(--space-2);
    justify-content: center;
    align-items: center;
    vertical-align: middle;
  }

  /* ============================================
   Media
   ============================================ */

  picture {
    width: max-content;
  }

  figcaption {
    padding-block-start: 0.5em;
    font-size: var(--text-xs);
    font-family: var(--font-label);
  }

  video,
  iframe[src*="youtube"],
  iframe[src*="vimeo"] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  svg {
    flex-shrink: 0;
    vertical-align: middle;
    height: var(--icon-size);
    width: var(--icon-size);
    fill: currentColor;
  }

  svg:not([class]) {
    width: auto;
    height: 1lh;
  }

  svg[role="img"] {
    width: revert;
    height: revert;
    padding: var(--space-2);
  }

  /* ============================================
   Tables
   ============================================ */

  table {
    border: var(--stroke-m) var(--border-style) var(--color-border);
    border-collapse: collapse;
    width: 100%;
  }

  th {
    text-align: left;
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
  }

  thead th {
    padding-block: var(--space-2);
  }

  td,
  th {
    padding-block: var(--space-2);
    padding-inline: var(--space-2);
  }

  th:not(:only-of-type) {
    border-block-end: var(--stroke-m) var(--border-style) var(--color-border);
  }

  th:only-of-type {
    border-inline-end: var(--stroke-m) var(--border-style) var(--color-border);
  }

  :is(th, td) ~ :is(th, td) {
    border-inline-start: var(--stroke-m) var(--border-style) var(--color-border);
  }

  tr + tr :is(th, td) {
    border-block-start: var(--stroke-m) var(--border-style) var(--color-border);
  }

  caption {
    caption-side: bottom;
    margin-block-start: var(--space-2);
  }

  /* ============================================
   Details & Summary
   ============================================ */

  summary {
    cursor: pointer;
  }

  [open] > summary {
    margin-block-end: var(--space-2);
  }

  /* ============================================
   Interaction (Focus, Selection & Target)
   ============================================ */

  :focus-visible {
    outline: var(--stroke-l) solid var(--color-focus);
    outline-offset: 3px;
  }

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

  /* ============================================
   Accessibility / Utilities
   ============================================ */

  [hidden] {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    :after,
    :before {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}