/* post's tokens, as the app has them (LOOK.md, Shared/Theme.swift). */
:root {
  --paper: #F2F1ED;
  --ink: #1B1A18;
  --ink-60: rgba(27, 26, 24, .62);
  --pencil: #B9B5AA;
  --red: #C23B2B;
  --rule: rgba(185, 181, 170, .9);
  --side: 24px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E0E0D;
    --ink: #EDEAE0;
    --ink-60: rgba(237, 234, 224, .60);
    --pencil: #4C4A46;
    --red: #D2564A;
    --rule: rgba(76, 74, 70, .9);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
b { font-weight: 500; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

.mast {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--side) 0;
  max-width: 640px; margin: 0 auto;
}
.label { font-size: 11px; letter-spacing: .15em; color: var(--pencil); }
.slash { width: 14px; height: 20px; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: butt; fill: none; }

/* The words. Light type, key words a step heavier, air between. */
#words { max-width: 640px; margin: 0 auto; padding: 56px var(--side) 24px; }
.line {
  font-size: clamp(23px, 5.4vw, 34px);
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 0 0 .9em;
  max-width: 20em;
}
.line.beat { margin-top: 1.7em; }

/* The how line, as the app draws it under a line: smaller, ink at 60, parts joined by a pencil dot,
   each tappable part underlined in pencil (LOOK.md "The how line"). */
.howline { display: block; margin-top: .7em; font-size: max(15px, .6em); letter-spacing: 0; color: var(--ink-60); }
.howline .sep { color: var(--pencil); margin: 0 .55em; }
.howline .tap { text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 3px; }
/* The map strip, as the app draws it under the how line: Apple's snapshot in grey, the route in ink. */
.mapstrip { display: block; margin-top: 14px; max-width: 480px; }
.mapstrip img { display: block; width: 100%; height: auto; }
.play .howline, .play .mapstrip { opacity: 0; transition: opacity .6s ease 1s; }
.play .mapstrip { transition-delay: 1.4s; }
.play .line.in .howline, .play .line.in .mapstrip { opacity: 1; }

.end { max-width: 640px; margin: 0 auto; padding: 40px var(--side) 64px; }
.end .name { font-size: 28px; letter-spacing: -.01em; margin: 0 0 6px; }
.end .for { font-size: 15px; color: var(--ink-60); margin: 0 0 28px; }
.end .small { font-size: 13px; color: var(--ink-60); margin: 0; }
.dot { color: var(--pencil); margin: 0 6px; }
.again { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 3px; }
.again, .again-sep { display: none; }

/* Played: one line at a time, held, then drifting up the page. */
.play, .play body { height: 100%; overflow: hidden; }
.play .mast { position: relative; z-index: 2; }
/* Lines drifting up go under the paper at the top, not over the label. */
.play body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 84px; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--paper) 55%, transparent);
}
.play #words {
  position: absolute; left: 0; right: 0; top: 0;
  transition: transform .85s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.play .line {
  opacity: 0;
  transition: opacity .6s ease;
}
.play .line.gone { transition: opacity .5s ease; }
.play .end {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity .8s ease;
}
.play .end.in { opacity: 1; pointer-events: auto; }
.play .again, .play .again-sep { display: inline; }
.play .hint {
  position: absolute; left: 0; right: 0; bottom: max(22px, env(safe-area-inset-bottom));
  text-align: center; font-size: 11px; letter-spacing: .15em; color: var(--pencil);
  transition: opacity .8s ease;
}

/* Done, on the IKEA line once it has been read: the whole line and its map move left while the words
   are struck through in ink and "done" comes up on the right where the line was, pencil turning to ink;
   then it fades and the gap closes before the next line. Quicker than the small swipe. Done is right to
   left and not now left to right, as in the app (Alan, 2026-10-27). */
.line[data-swipe] { position: relative; }
.swipecap { display: none; }
.play .swipecap { display: block; position: absolute; left: -30%; top: .55em; font-size: 11px; letter-spacing: .15em; color: var(--pencil); opacity: 0; transition: opacity .3s ease, color .3s ease .2s; }
.play .line[data-swipe] .said { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: transparent; transition: text-decoration-color .4s ease; }
.play .line[data-swipe] { transition: opacity .6s ease, transform .45s cubic-bezier(.3, .6, .3, 1); }
.play .line.swiped[data-swipe="done"] { transform: translateX(-30%); }
.play .line.swiped .said { text-decoration-color: var(--ink); }
.play .line.swiped .swipecap { opacity: 1; color: var(--ink); }
/* Not now, on "two swipes" itself: it moves right, fading ink to pencil, "not now" on the left where
   the line began, then slides off and the gap closes. */
.swipecap.right { left: auto; right: -30%; }
.play .line[data-swipe="notnow"] { transition: opacity .6s ease, transform .45s cubic-bezier(.3, .6, .3, 1), color .45s ease; }
.play .line.swiped[data-swipe="notnow"] { transform: translateX(30%); color: var(--pencil); }
.play .line.off[data-swipe="notnow"] { transform: translateX(140%); transition: transform .3s ease-in, color .3s ease; }
.play .line.swiped[data-swipe="notnow"] .swipecap { color: var(--pencil); }
.play .line.off[data-swipe="notnow"] .swipecap { color: var(--ink); }
.play .line.closed { height: 0 !important; margin: 0 !important; overflow: hidden; opacity: 0 !important;
  transition: height .3s ease, margin .3s ease, opacity .25s ease; }


/* The setup pages (/claude, /chatgpt): the plain words, no play, a prompt to copy. */
.page #words.static { padding-top: 40px; }
.page .mast .label { text-decoration: none; }
.line.small { font-size: clamp(17px, 4vw, 21px); line-height: 1.45; color: var(--ink-60); max-width: 28em; }
.steps { font-size: clamp(17px, 4vw, 21px); line-height: 1.45; padding-left: 1.3em; margin: 0 0 1.2em; max-width: 28em; }
.steps li { margin-bottom: .6em; }
.steps li::marker { color: var(--pencil); }
.both { font-size: clamp(17px, 4vw, 21px); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.both input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.promptbox { position: relative; border: 1px solid var(--rule); border-radius: 6px; padding: 18px 18px 16px; margin: 0 0 1.6em; background: var(--paper); }
.prompt { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 300 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: var(--ink); }
.copy { position: absolute; top: 10px; right: 10px; font: 500 12px/1 inherit; letter-spacing: .12em; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 8px 12px; cursor: pointer; }
.copy:hover { border-color: var(--ink); }
.page .end { padding-top: 24px; }