body.notes-page,
body.notes-page.uf-authored {
  --uf-sheet: #020303;
  --uf-sheet-alt: #020303;
  --uf-ink: #f1f2ed;
  --uf-muted: rgba(226, 232, 225, 0.5);
  --uf-rule: rgba(205, 222, 211, 0.13);
  --notes-signal: rgba(174, 210, 190, 0.72);
  min-height: 100svh;
  color-scheme: dark;
  color: var(--uf-ink);
  background:
    radial-gradient(circle at 13% 21%, rgba(126, 171, 148, 0.055), transparent 18%),
    radial-gradient(circle at 82% 47%, rgba(164, 181, 213, 0.038), transparent 23%),
    radial-gradient(circle at 38% 88%, rgba(183, 210, 193, 0.03), transparent 20%),
    #020303;
  font-family: var(--uf-serif);
}

body.notes-page::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 16%, rgba(218, 238, 226, 0.38) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 74% 12%, rgba(218, 228, 238, 0.24) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 91% 36%, rgba(208, 231, 218, 0.28) 0 0.5px, transparent 1.3px),
    radial-gradient(circle at 26% 59%, rgba(225, 235, 228, 0.2) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 64% 73%, rgba(199, 220, 208, 0.25) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 18% 90%, rgba(212, 231, 219, 0.2) 0 0.5px, transparent 1.3px),
    radial-gradient(circle at 88% 91%, rgba(211, 219, 236, 0.18) 0 0.6px, transparent 1.4px);
  opacity: 0.75;
}

body.notes-page::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 4px, rgba(202, 225, 211, 0.016) 5px);
  mix-blend-mode: screen;
}

body.notes-page .basic-header,
body.notes-page .basic-footer,
body.notes-page .notes-notebook {
  position: relative;
  z-index: 2;
}

body.notes-page .basic-header {
  background: rgba(2, 3, 3, 0.84);
  border-bottom-color: rgba(209, 227, 216, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.notes-page .notes-notebook {
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: clamp(92px, 9vw, 132px) clamp(28px, 7vw, 96px) clamp(130px, 18vw, 230px);
}

body.notes-page .note-entry {
  position: relative;
  width: min(100%, 680px);
  margin: 0 auto;
}

body.notes-page .note-entry :is(h1, h2) {
  max-width: 20ch;
  margin: 0;
  color: var(--uf-ink);
  font: 400 clamp(1.75rem, 2.7vw, 2.35rem)/1.08 var(--uf-serif);
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: 0 0 34px rgba(207, 226, 214, 0.035);
}

body.notes-page time,
body.notes-page .note-date {
  color: var(--notes-signal);
  font: 400 0.59rem/1.6 var(--uf-mono);
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(170, 218, 191, 0.22);
  text-transform: uppercase;
}

body.notes-page .note-date {
  margin: 0 0 14px;
}

body.notes-page .note-how-to-lose {
  padding-bottom: clamp(76px, 10vw, 116px);
}

body.notes-page .note-heading {
  padding-bottom: clamp(34px, 4vw, 46px);
}

body.notes-page .note-heading h1 {
  max-width: none;
}

body.notes-page .note-instructions {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: losing-instruction;
}

body.notes-page .note-instructions li {
  position: relative;
  max-width: 40rem;
  margin: 0 0 20px;
  padding-left: 42px;
  color: rgba(241, 242, 237, 0.84);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.48;
  counter-increment: losing-instruction;
}

body.notes-page .note-instructions li::before {
  position: absolute;
  top: 0.45em;
  left: 0;
  content: counter(losing-instruction, decimal-leading-zero);
  color: var(--notes-signal);
  font: 400 0.53rem/1 var(--uf-mono);
  letter-spacing: 0.07em;
}

body.notes-page s {
  color: rgba(241, 242, 237, 0.4);
  text-decoration-color: rgba(185, 211, 195, 0.56);
  text-decoration-thickness: 1px;
}

body.notes-page .note-unrelated {
  padding: clamp(54px, 7vw, 76px) 0 0;
  border-top: 1px solid var(--uf-rule);
}

body.notes-page .note-unrelated::before {
  content: none;
}

body.notes-page .note-unrelated h2 {
  max-width: 20ch;
}

body.notes-page .note-unrelated ul {
  margin: clamp(34px, 4vw, 46px) 0 0;
  padding: 0;
  color: rgba(241, 242, 237, 0.84);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.48;
  list-style: none;
}

body.notes-page .note-unrelated li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 42px;
}

body.notes-page .note-unrelated li::before {
  position: absolute;
  top: 0.67em;
  left: 0;
  width: 3px;
  height: 3px;
  content: "";
  background: var(--notes-signal);
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(174, 210, 190, 0.5);
  opacity: 0.65;
}

body.notes-page .basic-footer {
  color: var(--uf-muted);
  border-color: var(--uf-rule);
}

@media (max-width: 700px) {
  body.notes-page .notes-notebook {
    padding: 82px 26px 130px;
  }

  body.notes-page .note-how-to-lose {
    padding-bottom: 82px;
  }

  body.notes-page .note-heading {
    padding-bottom: 34px;
  }

  body.notes-page .note-entry :is(h1, h2) {
    font-size: 2rem;
  }

  body.notes-page .note-instructions li {
    margin-bottom: 20px;
    padding-left: 39px;
    font-size: 1.03rem;
  }

  body.notes-page .note-unrelated {
    width: 100%;
    padding-top: 52px;
  }

  body.notes-page .note-unrelated ul {
    margin-top: 34px;
    font-size: 1.03rem;
  }

  body.notes-page .note-unrelated li {
    margin-bottom: 14px;
    padding-left: 39px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.notes-page::after { display: none; }
}