.ink { width: min(40vw, 620px); filter: url(#soak); transition: opacity 0.18s; }
  @media (max-width: 600px) { .ink { width: 84vw; top: 44%; } }
  .morph { position: fixed; left: 0; top: 0; mix-blend-mode: multiply; filter: url(#soak); transform-origin: 0 0; opacity: 0; pointer-events: none; }
  .morph canvas { display: block; width: 100%; height: auto; }
  /* the mark: the filled letters as they landed, black on the paper; hover underlines them by hand */
  .logo { position: fixed; left: 50%; bottom: 18px; width: 200px; height: 90px; margin-left: -100px; opacity: 0; mix-blend-mode: multiply; filter: url(#soak); cursor: pointer; transition: opacity 0.3s, filter 0.25s; will-change: transform; }
  .logo.lifted { filter: url(#soak) drop-shadow(0 7px 9px rgba(21, 20, 26, 0.28)); }   /* v15: in the hand the mark lifts off the paper */
  .logo canvas { display: block; width: 100%; height: 100%; }
  .logo.on { opacity: 1; }
  .logo:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 4px; border-radius: 10px; }
  /* the menu: the words appear, already written (no writing, no sound), a breath apart */
  .menu { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); will-change: transform; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
  .menu canvas { display: block; width: auto; mix-blend-mode: multiply; filter: url(#soak); cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; }
  .menu.open canvas { opacity: 1; transform: none; pointer-events: auto; }
  .menu.open canvas:hover { opacity: 0.72; }
  .doodle { position: fixed; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; filter: url(#soak); pointer-events: none; }   /* v13: sized in CSS too, so the marks land under the cursor on every screen (v12's canvas showed at dpr times the viewport) */
  .hint { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); font-size: 12.5px; letter-spacing: .03em; color: var(--ink); opacity: 0; transition: opacity 0.6s; pointer-events: none; }
  html[data-phase="idle"] .hint.show, html[data-phase="gate"] .hint.show { opacity: 1; }
  html[data-phase="idle"] .stage, html[data-phase="gate"] .stage { cursor: pointer; }
  html[data-phase="gate"] .hint { bottom: auto; top: 50%; font-size: 12px; }
  /* v14: the cursor is an element that follows the pointer (cursor.js), twice v13's size, with its own physics; the native cursor is hidden while it is on */
  /* the tin of markers: a row of real sample strokes above the bottom-left links (owner: "a menu that lets you change the brush and color") */
  .tin { position: fixed; left: 22px; bottom: 44px; display: grid; grid-template-columns: repeat(4, auto); gap: 4px 10px; padding: 8px 10px; background: rgba(241, 236, 226, 0.5); z-index: 7; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
  .tin.on { opacity: 1; pointer-events: auto; }
  .tin canvas { display: block; width: 58px; height: 24px; opacity: 0.55; mix-blend-mode: multiply; filter: url(#soak); }
  .tin canvas:hover, .tin canvas.on { opacity: 1; }
  .tin[hidden] { display: none; }
  /* the share choice: three lines in the hand above the links; what you are about to share, said before you share it */
  .choice { position: fixed; left: 24px; bottom: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; mix-blend-mode: multiply; filter: url(#soak); z-index: 9; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .choice.on { opacity: 1; pointer-events: auto; }
  .choice canvas { display: block; opacity: 0.6; }
  .choice canvas:hover, .choice canvas:focus-visible { opacity: 1; outline: none; }
  /* a line written by hand at the bottom left: "link copied", "saved", "cleared" */
  .note { position: fixed; left: 24px; bottom: 44px; mix-blend-mode: multiply; filter: url(#soak); opacity: 0; pointer-events: none; z-index: 8; }
  .note.on { opacity: 1; }
  .tin.on ~ .note { bottom: 152px; }
  .chrome a .short { display: none; }
  .note canvas { display: block; }
  /* just the paper: everything but the mark and the way back is lifted off the sheet */
  html[data-quiet="on"] .chrome .label, html[data-quiet="on"] .chrome .about, html[data-quiet="on"] .prompt, html[data-quiet="on"] .direct, html[data-quiet="on"] .sound, html[data-quiet="on"] .hint, html[data-quiet="on"] .menu, html[data-quiet="on"] .tin, html[data-quiet="on"] .tip, html[data-quiet="on"] .chrome a:not(#paper) { visibility: hidden; }
  .chrome a.off { opacity: 0.35; pointer-events: none; }
  @media (max-width: 600px) { .tin { left: 12px; bottom: 40px; grid-template-columns: repeat(2, auto); gap: 3px 6px; padding: 6px; } .tin canvas { width: 46px; height: 20px; } .note { left: 16px; bottom: 40px; } .tin.on ~ .note { bottom: 176px; } .chrome a .long { display: none; } .chrome a .short { display: inline; } .chrome #replay { display: none; } }
  html[data-phase="live"] .about { display: none; }
  /* after the reveal: a blinking brush caret in the middle, the question written by hand, what you type in the same hand */
  .prompt { position: fixed; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; align-items: center; opacity: 0; transition: opacity 0.4s; pointer-events: none; max-width: 92vw; height: 44px; }
  .prompt.on { opacity: 1; pointer-events: auto; cursor: text; }
  .prompt canvas.line { display: block; mix-blend-mode: multiply; filter: url(#soak); flex: none; }
  .prompt .typed { font-family: Kalam, cursive; font-weight: 700; font-size: 25px; line-height: 1; color: var(--ink); mix-blend-mode: multiply; filter: url(#soak); white-space: pre; margin-left: 7px; min-width: 0; }
  .prompt .caret { position: absolute; left: 0; top: 2px; width: 10px; height: 40px; mix-blend-mode: multiply; filter: url(#soak); animation: blink 1.06s steps(1) infinite; pointer-events: none; }
  .prompt.writing .caret, html[data-caret="steady"] .caret { animation: none; }
  @keyframes blink { 0%, 52% { opacity: 1; } 53%, 100% { opacity: 0; } }
  .prompt input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 0; top: 0; border: 0; padding: 0; }
  .direct { position: fixed; left: 50%; top: calc(44% + 40px); transform: translateX(-50%); font-size: 12.5px; letter-spacing: .03em; color: var(--ink); opacity: 0; transition: opacity 0.6s; white-space: nowrap; pointer-events: none; }
  .direct.on { opacity: 1; pointer-events: auto; }
  .direct .tap { display: none; }
  @media (hover: none) { .direct .click { display: none; } .direct .tap { display: inline; } }
  .direct a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(21, 20, 26, 0.35); padding-bottom: 1px; margin: 0 4px; }
  .direct a:hover { border-color: currentColor; }
  @media (max-width: 600px) { .prompt { top: 40%; } .direct { top: calc(40% + 36px); font-size: 10px; white-space: normal; max-width: 84vw; text-align: center; line-height: 2; } .prompt .typed { font-size: 22px; } }
  /* tooltips, written by hand */
  .tip { position: fixed; pointer-events: none; opacity: 0; mix-blend-mode: multiply; filter: url(#soak); z-index: 40; }
  .tip.on { opacity: 1; }   /* v16: no fade of the box; the ink itself soaks away stroke by stroke */
  .tip canvas { display: block; }
  /* the sound squiggle: a grey marker until the pointer is on it */
  .sound { position: fixed; top: 10px; right: 14px; width: 64px; height: 32px; padding: 8px 6px; box-sizing: content-box; background: none; border: 0; margin: 0; cursor: pointer; mix-blend-mode: multiply; filter: url(#soak); opacity: 0; transition: opacity 0.3s; -webkit-tap-highlight-color: transparent; }
  .sound canvas { display: block; width: 64px; height: 32px; }
  .sound.on { opacity: 0.45; }
  .sound.on:hover, .sound.on:focus-visible { opacity: 1; }
  .sound:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 2px; border-radius: 4px; }
  @media (max-width: 600px) { .sound { top: 6px; right: 8px; } }
  /* the marker soaked into the tooth: faint paper specks through every ink */
  html[data-inkgrain="on"] .inked { -webkit-mask-image: var(--inkgrain); mask-image: var(--inkgrain); -webkit-mask-size: 512px 512px; mask-size: 512px 512px; }
  .night { position: fixed; inset: 0; pointer-events: none; background: #ffb36b; mix-blend-mode: multiply; opacity: 0; transition: opacity 0.8s; z-index: 50; }
  html[data-night="on"] .night { opacity: 0.26; }