/* app.css: the viewport, the sheet, the lanes and the cells; the chrome at v16's places; the zoom-out. Loaded after opening.css and overrides it where the
   sheet replaced the fixed paper. The paper's tooth and mottle belong to the sheet (#poster); the vignette, the grain and the night stay on the lens. */
:root {
  --desk: #cfc8bb;                 /* the table the sheet lies on; seen only when the camera lifts or zooms out */
  --lane: 100vw;                   /* the lane width in px, set by poster.js from innerWidth */
  --sheet-shadow: 0 2px 6px rgba(50, 38, 24, 0.18), 0 24px 70px rgba(50, 38, 24, 0.28);
}
@supports (width: 100dvw) { :root { --lane: 100dvw; } }

/* the camera: a fixed viewport that scrolls natively down a lane; its own scrollbar is hidden (the drawn one replaces it) */
.viewport { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--desk); scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: none; opacity: 0; }
.viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }
html[data-placed="on"] .viewport { opacity: 1; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden !important; }
html[data-view="poster"] .viewport { overflow: hidden; }

/* the sheet at natural size: three lanes side by side, as tall as the tallest; transform: scale() only during a lift or in the zoom-out */
.poster { position: relative; display: flex; align-items: flex-start; width: max-content; min-height: 100%; transform-origin: 0 0; background:
    radial-gradient(60% 50% at 50% 40%, rgba(255, 253, 247, 0.5) 0%, rgba(255, 253, 247, 0) 70%),
    linear-gradient(160deg, rgba(255, 255, 252, 0.3), rgba(120, 100, 80, 0.05)),
    var(--paper); box-shadow: var(--sheet-shadow); }
.poster::before { content: ""; position: absolute; inset: 0; background-image: var(--tooth); background-size: 512px 512px; mix-blend-mode: multiply; opacity: var(--tooth-opacity); pointer-events: none; }
.poster::after { content: ""; position: absolute; inset: 0; background-image: var(--mottle); background-size: 1024px 1024px; mix-blend-mode: multiply; opacity: var(--mottle-opacity); pointer-events: none; }
html[data-moving="on"] .poster { will-change: transform; pointer-events: none; }   /* drawing and clicking are off in transit */
.lane { position: relative; z-index: 1; flex: none; width: var(--lane); }

/* a cell: a place on the sheet, one screen wide, as tall as its content and never less than a screen; on phones the small viewport height, so the bottom of a cell never hides under Safari's toolbar */
.cell { position: relative; min-height: 100vh; min-height: 100svh; height: auto; box-sizing: border-box; }
.cell.home { height: 100vh; height: 100svh; min-height: 0; }
.cell-title { position: absolute; left: 36px; top: 26px; z-index: 2; pointer-events: none; mix-blend-mode: multiply; filter: url(#soak); }
.cell-title canvas { display: block; }
.cell-label { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); z-index: 5; display: none; pointer-events: none; mix-blend-mode: multiply; filter: url(#soak); }
.cell-label canvas { display: block; }
.printed { position: relative; z-index: 1; padding: 108px 44px 96px; font-family: var(--type); font-size: 13.5px; line-height: 1.7; color: var(--ink); -webkit-font-smoothing: antialiased; }
.printed p { margin: 0 0 0.6em; }
.printed a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(21, 20, 26, 0.35); padding-bottom: 1px; }
.printed a:hover { border-color: currentColor; }
.cell.home .printed { position: static; padding: 0; }
.cell > canvas.ink, .cell > canvas.bot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: none; pointer-events: none; mix-blend-mode: multiply; filter: url(#soak); z-index: 2; }
.cell > canvas.bot { z-index: 3; }
.on-paper { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.on-paper > * { pointer-events: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* a body is anything you can grab and fling; a card is typed text lying on the paper, no box, a hairline drawn under its first line if it needs one */
.body { position: absolute; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.card { position: absolute; font-family: var(--type); font-size: 13px; line-height: 1.65; color: var(--ink); max-width: 320px; padding: 6px 2px; background: none; border: 0; }
.card .card-title { display: inline-block; border-bottom: 1px solid rgba(21, 20, 26, 0.45); padding-bottom: 1px; margin-bottom: 4px; }
.card.open { z-index: 2; }

/* the zoom-out: the live sheet fitted to the screen, the desk around it, every cell labelled by hand and clickable */
html[data-view="poster"] .cell-label { display: block; }
html[data-view="poster"] .cell-title { visibility: hidden; }
html[data-view="poster"] .cell { cursor: pointer; }
html[data-view="poster"] .cell:focus-visible { outline: 6px dashed rgba(21, 20, 26, 0.5); outline-offset: -18px; }
html[data-view="poster"] .cell:hover::after { content: ""; position: absolute; inset: 10px; border: 5px dashed rgba(21, 20, 26, 0.18); pointer-events: none; }
html[data-view="poster"] .on-paper, html[data-view="poster"] .printed a { pointer-events: none; }
html[data-view="poster"] .scrollbar, html[data-view="poster"] .prompt, html[data-view="poster"] .direct { display: none; }

/* the opening inside the home cell: v16's stage, prompt and direct line at the same visual places, now absolute in the cell instead of fixed */
.cell.home .stage { position: absolute; inset: 0; }
.stage .ink { width: min(40vw, 620px); filter: url(#soak); transition: opacity 0.18s; }
@media (max-width: 600px) { .stage .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; z-index: 12; }
.morph canvas { display: block; width: 100%; height: auto; }
.prompt { position: absolute; 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; z-index: 5; }
.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 .typed { overflow: hidden; flex: 0 1 auto; }   /* a question longer than the line shows its tail, as a text field does (second pass) */
.prompt .typed.clipped { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px); mask-image: linear-gradient(to right, transparent 0, #000 24px); }
.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: absolute; 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; z-index: 5; }
.direct.on { opacity: 1; pointer-events: auto; }
html[data-menu="open"] .direct { opacity: 0; pointer-events: none; }   /* the menu rises to where the line stands; the line has done its job once the mark is open */
.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; }
.direct { text-align: center; }
.direct .direct-line { display: block; }
.direct .direct-line + .direct-line { margin-top: 9px; }   /* the mind's own offer under the logo's (THE-MIND.md: "or ask me what i can do") */
@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; } }
/* a phone: the visitor's words take their own row under the question (it alone fills the width); the two offers under the home's line step
   aside while someone types, since the row now stands where they were */
@media (max-width: 600px) { .prompt.long { flex-wrap: wrap; height: auto; row-gap: 4px; } .prompt.long .typed { flex: 0 1 100%; margin-left: 0; padding-top: 2px; }
  .direct.on.typing, .direct.typing { opacity: 0; pointer-events: none; } }
/* the question summoned in another place: the same line, above the mark, in that cell; the answer written under it */
.prompt.summoned { top: auto; transform: translateX(-50%); }
.say { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; z-index: 5; mix-blend-mode: multiply; filter: url(#soak); }
.say canvas { display: block; }
html[data-phase="live"] .about { display: none; }

/* the mark: the filled letters as they landed, black on the paper; a body you can grab and fling; its menu stays with it */
.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; z-index: 20; }
.logo.lifted { filter: url(#soak) drop-shadow(0 7px 9px rgba(21, 20, 26, 0.28)); }
.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; }
.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; z-index: 21; }
.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; }
.menu.soaking canvas { transition: none; }
@media (max-width: 600px) { .menu { display: grid; grid-template-columns: auto auto; gap: 0 16px; justify-items: start; align-items: center; bottom: 104px; max-width: 96vw; } }   /* nine words in one column would rise into the line under the question; two columns, a little smaller (opening.js sizes them), fit a phone */
.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; z-index: 20; }
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; }

/* the tin of markers, the share and save choices, the note: bottom left above the links, as v16 placed them */
.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: 24; 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; }
.choice { position: fixed; left: 24px; bottom: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 10px; margin: -4px -10px; background: rgba(241, 236, 226, 0.88); box-shadow: 0 0 12px 10px rgba(241, 236, 226, 0.88); border-radius: 12px; z-index: 26; opacity: 0; pointer-events: none; transition: opacity 0.2s; }   /* a soft scrap of paper under the choice, so the hand reads over typed text (second pass: the agenda's type showed through it) */
.choice.on { opacity: 1; pointer-events: auto; }
.choice canvas { display: block; opacity: 0.6; mix-blend-mode: multiply; filter: url(#soak); }
.choice canvas:hover, .choice canvas:focus-visible { opacity: 1; outline: none; }
.note { position: fixed; left: 24px; bottom: 44px; mix-blend-mode: multiply; filter: url(#soak); opacity: 0; pointer-events: none; z-index: 25; }
.note.on { opacity: 1; }
.tin.on ~ .note { bottom: 152px; }
.note canvas { display: block; }
.tip { position: fixed; pointer-events: none; opacity: 0; mix-blend-mode: multiply; filter: url(#soak); z-index: 40; }
.tip.on { opacity: 1; }
.tip canvas { display: block; }
.bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 41; }

/* the sound squiggle, top right: 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; z-index: 22; }
.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 hand-drawn scrollbar: a wobbly line at the right edge, grey until hovered; the thumb is the visible part; hidden while the opening plays */
.scrollbar { position: fixed; top: 0; right: 0; width: 14px; height: 100%; z-index: 30; opacity: 0.45; transition: opacity 0.25s; mix-blend-mode: multiply; filter: url(#soak); cursor: default; touch-action: none; -webkit-tap-highlight-color: transparent; }
.scrollbar:hover, .scrollbar.dragging { opacity: 1; }
.scrollbar.locked, .scrollbar.flat { display: none; }
@media (hover: none) { .scrollbar { pointer-events: none; } }

/* the chrome: v16's links, plus the small drawn bot head beside undo (shown only while the mind has strokes to undo), the pen toggle (touch only) and the way to the whole poster */
.chrome { z-index: 23; pointer-events: none; }
/* the lens's foot (second pass): a soft band of paper under the chrome and the mark, so the typed lines scrolling beneath never run into the
   links; it sits under the mark (z 20) and the chrome (23), over the sheet; screen only, and not on the desk of the zoom-out */
@media screen { body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 124px; background: linear-gradient(to top, rgba(241, 236, 226, 0.96) 0, rgba(241, 236, 226, 0.92) 55%, rgba(241, 236, 226, 0) 100%); pointer-events: none; z-index: 19; }
  html[data-view="poster"] body::after { display: none; } }
@media screen and (max-width: 600px) { body::after { height: 128px; } }
.chrome .label, .chrome .links { pointer-events: auto; }
.chrome .links { display: inline-flex; align-items: baseline; }
.chrome a.off { opacity: 0.35; pointer-events: none; }
.chrome a[aria-pressed="true"] { border-bottom-width: 2px; border-color: currentColor; }
.undo-bot { display: inline-block; width: 22px; height: 22px; margin-left: 6px; vertical-align: -6px; cursor: pointer; mix-blend-mode: multiply; filter: url(#soak); }
.undo-bot[hidden] { display: none; }
.undo-bot:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 2px; }
#pen { display: none; }
@media (hover: none) { #pen { display: inline; } }
@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 #replay { display: none; } .chrome a { margin-left: 10px; } #poster-link { display: none; } }

/* the marker soaked into the tooth: faint paper specks through every ink (v16's page rule; the lib does not define it) */
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; }
.vignette, .grain { z-index: 10; }

/* without scripts: the facts and the pages, on the paper */
.noscript { position: fixed; inset: 0; z-index: 200; padding: 48px; background: var(--paper); color: var(--ink); font-family: var(--type); font-size: 14px; line-height: 1.8; overflow: auto; }
.noscript a { color: inherit; }

@media (prefers-reduced-motion: reduce) { .menu canvas, .prompt, .direct, .logo, .hint, .tin, .choice, .sound { transition: none; } }
@media print { .chrome, .scrollbar, .sound, .tin, .choice, .note, .hint, .menu, .tip, .bubbles, .cur, .night, .grain, .vignette { display: none !important; } }