:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #000;
  --soft: #333;
  --mute: #6b6b6b;
  --hair: #000;
  --thin: #c9c9c9;
  --wash: #f4f3ef;
  --hot: #d93a06;
  --hot-rgb: 217 58 6;
  --note: #fff0b8;
  --note-ink: #4d3c00;
  --night: #000;
  --gutter: 20px;
  --measure: 39rem;
  --serif: "CM", "Latin Modern Roman", "Times New Roman", serif;
  --mono: "CMT", ui-monospace, "SF Mono", Menlo, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0b0d;
  --ink: #f5f2ea;
  --soft: #d5d2c9;
  --mute: #96938b;
  --hair: #f5f2ea;
  --thin: #3a3a3e;
  --wash: #17171a;
  --hot: #ff7a3c;
  --hot-rgb: 255 122 60;
  --note: #3a2f06;
  --note-ink: #ffe9a3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0b0b0d;
    --ink: #f5f2ea;
    --soft: #d5d2c9;
    --mute: #96938b;
    --hair: #f5f2ea;
    --thin: #3a3a3e;
    --wash: #17171a;
    --hot: #ff7a3c;
    --hot-rgb: 255 122 60;
    --note: #3a2f06;
    --note-ink: #ffe9a3;
  }
}


/* Computer Modern, the face physics is printed in. Knuth's designs in the Unicode cuts, under the OFL. */
@font-face { font-family: "CM"; src: url("/fonts/cm-roman.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CM"; src: url("/fonts/cm-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "CM"; src: url("/fonts/cm-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "CM"; src: url("/fonts/cm-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "CMT"; src: url("/fonts/cm-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 19.5px/1.42 var(--serif); font-kerning: normal; font-synthesis: none; -webkit-font-smoothing: antialiased; }
html:not(.no-hole) { -webkit-touch-callout: none; }
body.holding { -webkit-user-select: none; user-select: none; }
#sheet { min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); overflow-x: clip; }
main { flex: 1 0 auto; }
#sheet > * { min-width: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -200vw; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 90; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }

/* The lens sits over everything and takes no touches of its own. */
#lens { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; visibility: hidden; display: block; }
#lens.on { visibility: visible; }
#limbo { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; opacity: 0; pointer-events: none; z-index: -1; contain: strict; }
#gauge { position: fixed; left: 0; right: 0; top: 0; z-index: 72; min-height: 46px; padding: 5px var(--gutter) 6px; padding-top: calc(5px + env(safe-area-inset-top)); display: none; flex-direction: column; justify-content: center; gap: 3px; background: var(--paper); border-bottom: 1px solid var(--hair); font: 400 12.5px/1.15 var(--mono); color: var(--ink); white-space: nowrap; pointer-events: none; }
#gauge.on { display: flex; }
#gauge .g-to { overflow: hidden; text-overflow: ellipsis; color: var(--hot); }
#gauge .g-to:empty { display: none; }

/* The running head. */
.head { display: flex; align-items: center; gap: 2px; padding: 0 var(--gutter) 0; padding-top: env(safe-area-inset-top); min-height: 46px; border-bottom: 1px solid var(--hair); }
.brand { font-weight: 700; font-size: 21px; letter-spacing: -0.01em; text-decoration: none; margin-right: auto; padding: 8px 8px 8px 0; }
.head-link { font-size: 17px; text-decoration: none; padding: 10px 7px; }
.head-icon { display: grid; place-items: center; width: 38px; height: 44px; color: inherit; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.head-icon svg { width: 20px; height: 20px; }
.head-go { margin-left: 4px; font-size: 16px; text-decoration: none; background: var(--ink); color: var(--paper); padding: 5px 10px 6px; }
@media (hover: hover) { .head-link:hover, .brand:hover { color: var(--hot); } }