:root {
  --night: #111213;
  --stone: #1a1b1c;
  --chalk: #efede8;
  --ash: #a8a69f;
  --dim: #8a8781; /* quiet, but still easy to read (4.5:1+) */
  --rule: rgba(239, 237, 232, 0.14);
  --glint: #e6d6bb;
  --paper: #f4f0e8;
  --paper-band: #e9e3d6;
  --sans: "Jost", "Futura", "Avenir Next", "Century Gothic", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --fold: 15%; /* FOLD / section height; set per drawing */
  color-scheme: dark;
}
@media (min-width: 720px) {
  :root { --gutter: max(40px, env(safe-area-inset-left, 0px)); --gutter-r: max(40px, env(safe-area-inset-right, 0px)); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--chalk);
  font: 300 17px/1.55 var(--sans);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button, a, label { touch-action: manipulation; }
a { color: inherit; }

.top {
  padding: max(18px, env(safe-area-inset-top)) var(--gutter-r) 0 var(--gutter);
  max-width: 1080px;
  margin: 0 auto;
}
.brand { font: 400 18px/1 var(--serif); text-decoration: none; letter-spacing: 0.01em; color: var(--ash); }
.brand em { color: var(--chalk); }

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px var(--gutter-r) max(64px, env(safe-area-inset-bottom)) var(--gutter);
}

h1 { font: 400 clamp(36px, 7vw, 56px)/1.05 var(--serif); margin: 0 0 14px; letter-spacing: -0.01em; }
h1 em { font-style: italic; color: var(--glint); }
h2 { font: 400 26px/1.15 var(--serif); margin: 0 0 12px; }
.eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); margin: 0 0 10px; }
.lede { color: var(--ash); max-width: 38em; margin: 0 0 24px; font-size: 18px; }
.loading { color: var(--dim); font-family: var(--serif); font-style: italic; font-size: 22px; }

/* ---------- buttons ---------- */
.primary, .ghost, .link-btn {
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 13px 22px;
  min-height: 48px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.primary { background: var(--glint); color: var(--night); }
.primary:active, .ghost:active { transform: scale(0.98); }
.primary:disabled { opacity: 0.5; }
.ghost { background: transparent; border-color: var(--rule); color: var(--chalk); }
.link-btn { background: none; padding: 6px 0; min-height: 0; color: var(--ash); text-decoration: underline; text-underline-offset: 3px; border-radius: 0; }
.wide { width: 100%; }
.big { min-height: 56px; font-size: 18px; }
.wide + .wide { margin-top: 10px; }
@media (hover: hover) {
  .primary:hover { background: #f0e4cf; }
  .ghost:hover { border-color: var(--ash); }
}
:focus-visible { outline: 2px solid var(--glint); outline-offset: 2px; }

/* ---------- cards + fields ---------- */
.card { background: var(--stone); border: 1px solid var(--rule); border-radius: 16px; padding: 20px; }
.field { display: block; border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.field > span, .field > legend { display: block; font-size: 14px; color: var(--ash); margin-bottom: 8px; padding: 0; }
.field small { color: var(--dim); }
input:not([type=radio]) {
  width: 100%;
  background: var(--night);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px; /* 16px stops iOS zooming into the field */
  min-height: 48px;
}
input:focus { outline: none; border-color: var(--glint); }

/* ---------- home ---------- */
.home h1 { font-size: clamp(56px, 16vw, 104px); line-height: 0.92; margin-bottom: 20px; }
.home .card { max-width: 560px; }
.choices { display: grid; gap: 8px; }
.choices.two { grid-template-columns: 1fr 1fr; }
.choices.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) { .choices.three { grid-template-columns: 1fr; } }
.choices label { position: relative; cursor: pointer; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices span { display: block; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; font-size: 16px; height: 100%; }
.choices small { display: block; color: var(--dim); font-size: 13px; margin-top: 2px; line-height: 1.35; }
.choices input:checked + span { border-color: var(--glint); background: rgba(230, 214, 187, 0.08); }
.choices input:focus-visible + span { outline: 2px solid var(--glint); outline-offset: 2px; }

.section-list { list-style: none; counter-reset: s; margin: 0 0 12px; padding: 0; }
.section-list li { counter-increment: s; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.section-list li::before { content: counter(s); font: italic 400 18px var(--serif); color: var(--glint); width: 18px; text-align: center; }
.section-list input { flex: 1; min-height: 40px; padding: 8px 12px; }
.section-list input[readonly] { background: transparent; border-color: transparent; padding-left: 0; pointer-events: none; }
.home form > .primary { margin-top: 12px; }

.how { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; counter-reset: h; }
.how li { counter-increment: h; color: var(--ash); border-top: 1px solid var(--rule); padding-top: 14px; }
.how li::before { content: counter(h); display: block; font: italic 400 30px/1 var(--serif); color: var(--glint); margin-bottom: 8px; }
.how b { color: var(--chalk); font-weight: 400; }

/* ---------- studio: full-screen drawing ---------- */
body.studio-mode { overflow: hidden; overscroll-behavior: none; position: fixed; inset: 0; }
body.studio-mode .top { display: none; }
body.studio-mode main { padding: 0; max-width: none; }

.studio {
  position: fixed;
  inset: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.studio-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 60px; }
.studio-title { flex: 1; min-width: 0; text-align: center; line-height: 1.2; }
.studio-title span { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-title strong { display: block; font: 400 21px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  font: 400 18px var(--serif);
  cursor: pointer;
}
.done-btn {
  min-width: 76px; height: 44px;
  padding: 0 18px;
  white-space: nowrap;
  flex: none;
  border-radius: 999px;
  border: 0;
  background: var(--glint);
  color: var(--night);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}
.done-btn:disabled { opacity: 0.3; }

.stage {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 0 8px;
  touch-action: none;
}
.paper {
  position: relative;
  --ratio: 2;
  width: min(100cqw, 100cqh * var(--ratio));
  aspect-ratio: var(--ratio);
  transform-origin: 0 0;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; z-index: 2; }
.band { position: absolute; left: 0; right: 0; height: var(--fold); pointer-events: none; }
.band-top { top: 0; background: var(--paper-band); border-bottom: 1px dashed rgba(27, 26, 25, 0.35); z-index: 1; }
.band-top img { width: 100%; height: 100%; display: block; opacity: 0.85; }
.band-bottom { bottom: 0; z-index: 3; border-top: 1.5px dashed rgba(27, 26, 25, 0.5); background: rgba(27, 26, 25, 0.045); }
.band-label { position: absolute; right: 8px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(27, 26, 25, 0.45); }
.band-top .band-label { bottom: 3px; }
.band-bottom .band-label { top: 4px; }

/* folding the page away after you finish */
.paper.folding { background: linear-gradient(transparent calc(100% - var(--fold)), var(--paper) 0); box-shadow: none; overflow: visible; }
.paper.folding canvas { clip-path: inset(calc(100% - var(--fold)) 0 0 0); }
.paper.folding .band-top { visibility: hidden; }
.paper.folding .band-label { display: none; }
.flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100% - var(--fold));
  overflow: hidden;
  background: var(--paper);
  z-index: 6;
  transform-origin: 50% 100%;
  transform: perspective(1400px) rotateX(0);
  backface-visibility: hidden;
  border-radius: 4px 4px 0 0;
  transition: transform 0.85s cubic-bezier(0.55, 0, 0.25, 1), filter 0.85s;
}
.flap img { display: block; width: 100%; }
.flap.go { transform: perspective(1400px) rotateX(-180deg); filter: brightness(0.7); }
/* A thumb presses the paper as the fold starts; as it lands flat the paper
   gives a little and a crease line is left behind, timed with the sound. */
.paper.folding { animation: fold-press 1s cubic-bezier(0.3, 0, 0.3, 1) both; }
@keyframes fold-press {
  0% { translate: 0 0; }
  7% { translate: 0 2px; }
  18% { translate: 0 0; }
  76% { translate: 0 0; }
  82% { translate: 0 4px; }
  90% { translate: 0 -1px; }
  100% { translate: 0 0; }
}
.crease-line {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% - var(--fold));
  height: 6px;
  z-index: 7;
  pointer-events: none;
  background: linear-gradient(rgba(27, 26, 25, 0.38), rgba(27, 26, 25, 0));
  opacity: 0;
  animation: crease-in 1s ease-out both;
}
@keyframes crease-in {
  0%, 76% { opacity: 0; }
  82% { opacity: 1; }
  100% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) { .paper.folding, .crease-line { animation: none; } }

/* tools */
.toolbar {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-row { display: flex; align-items: center; gap: 2px; }
.tool-gap { flex: 1; }
.tool {
  width: 54px; height: 54px;
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; border-radius: 14px;
  background: transparent;
  color: var(--ash);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tool svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tool.on { background: rgba(230, 214, 187, 0.13); color: var(--glint); }
.tool:disabled { opacity: 0.35; }
.size-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin: 8px 0 7px; transition: transform 0.15s; }
.tool.thick .size-dot { transform: scale(2.1); }
.color-row { display: flex; justify-content: space-between; padding: 0 6px; transition: opacity 0.2s; }
.color-row.muted { opacity: 0.4; }
.swatch {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  display: grid; place-items: center;
  padding: 0;
  cursor: pointer;
}
.swatch::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.swatch.on { border-color: var(--glint); }
@media (max-width: 350px) { .tool { width: 48px; } .swatch { width: 40px; height: 40px; } }

/* overlays (bottom sheets on phones, centred on larger screens) */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(8, 8, 9, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  user-select: text;
  -webkit-user-select: text;
}
@media (min-width: 720px) and (min-height: 600px) { .overlay { align-items: center; } }
.sheet-card {
  width: 100%;
  max-width: 440px;
  max-height: 100%;
  overflow: auto;
  background: var(--stone);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 24px 20px 20px;
  animation: rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet-card p { color: var(--ash); margin: 0 0 16px; }
.sheet-card .tip { color: var(--dim); font-size: 14px; }
.sheet-card .warn { color: #e9bd8f; font-size: 15px; background: rgba(233, 189, 143, 0.08); border-radius: 10px; padding: 10px 12px; }
.intro-guide { background: var(--paper-band); border-radius: 6px; border-bottom: 1.5px dashed rgba(27, 26, 25, 0.4); margin: 4px 0 16px; overflow: hidden; }
.intro-guide img { display: block; width: 100%; }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }

.cover { background: var(--night); align-items: center; }
.cover-inner { max-width: 360px; text-align: center; }
.cover-inner h2 { font-size: 32px; }
.cover-inner p { color: var(--ash); margin-bottom: 28px; }

/* ---------- passing it on ---------- */
.pass { max-width: 520px; }
.strip-preview { margin: 0 0 24px; }
.strip-preview img { display: block; width: 100%; background: var(--paper); border-radius: 6px; border-top: 1.5px dashed rgba(27, 26, 25, 0.45); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.strip-preview figcaption { font-size: 14px; color: var(--dim); margin-top: 10px; text-align: center; }
.pass-actions { margin-bottom: 24px; }
.links { border-top: 1px solid var(--rule); padding-top: 14px; }
.links summary { cursor: pointer; color: var(--ash); font-size: 15px; margin-bottom: 14px; }
.links input { font-size: 14px; color: var(--ash); }
.share-row { display: flex; gap: 8px; }
.share-row input { min-width: 0; }

/* ---------- reveal ---------- */
.reveal { max-width: 520px; }
.pips { display: flex; gap: 8px; margin: 8px 0 20px; }
.pip { flex: 1; max-width: 56px; height: 6px; border-radius: 3px; background: var(--rule); }
.pip.done { background: var(--glint); }
/* The reveal's drawing box: just a frame for the folded sheet, which brings
   its own paper and shadow. Nothing clipped, so panels and flourishes can
   reach past its edges. */
.sheet { position: relative; }
.fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.95s cubic-bezier(0.6, 0, 0.2, 1), margin-top 0.95s cubic-bezier(0.6, 0, 0.2, 1);
}
.fold > div { overflow: hidden; min-height: 0; }
.fold img { display: block; width: 100%; height: auto; }
.fold.open { grid-template-rows: 1fr; }
.fold.open:not(:first-child) { margin-top: calc(-1 * var(--overlap)); }
/* The drawing with a slim column of round buttons down its right side. */
.reveal-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 22px; }
.reveal-row .sheet { flex: 1; min-width: 0; }
.reveal-actions {
  flex: 0 0 56px;
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.fab {
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ash);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  animation: fab-in 0.4s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.fab[hidden] { display: none; }
.fab svg {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 14px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: rgba(239, 237, 232, 0.06);
  fill: none;
  stroke: var(--chalk);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background 0.2s, transform 0.2s;
}
.fab.primary-fab svg { background: var(--glint); border-color: var(--glint); stroke: var(--night); }
.fab:active svg { transform: scale(0.94); }
@media (hover: hover) { .fab:hover svg { background: rgba(239, 237, 232, 0.14); } .fab.primary-fab:hover svg { background: var(--glint); filter: brightness(1.06); } }
.fab:nth-child(2) { animation-delay: 0.08s; }
.fab:nth-child(3) { animation-delay: 0.16s; }
@keyframes fab-in { from { opacity: 0; transform: translateX(-8px) scale(0.85); } }
@media (prefers-reduced-motion: reduce) { .fab { animation: none; } }
.credits { list-style: none; padding: 0; margin: 0; opacity: 0; transition: opacity 0.6s; }
.credits.shown { opacity: 1; }
.credits li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); color: var(--ash); }
.credits b { font: italic 400 18px var(--serif); color: var(--chalk); }

.error .primary { margin-top: 8px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  background: var(--chalk);
  color: var(--night);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 40;
  white-space: nowrap;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .fold, .toast, .credits, .flap { transition: none; }
  .sheet-card { animation: none; }
}

/* ---------- wide screens: iPad and iPhone Duo held sideways, phones in landscape ----------
   Height is the scarce side here, so the tools move into a rail beside the paper. */
@media (orientation: landscape) and (min-width: 600px) {
  .studio {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    grid-template-areas: "top top" "stage rail";
  }
  .studio-top { grid-area: top; }
  .stage { grid-area: stage; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
  .toolbar {
    grid-area: rail;
    flex-direction: row;
    align-items: center;
    width: auto;
    max-width: none;
    margin: 0;
    gap: 8px;
    padding: 0 12px calc(12px + env(safe-area-inset-bottom)) 4px;
  }
  .tool-row, .color-row { flex-direction: column; justify-content: center; padding: 0; }
  .tool-row { gap: 2px; }
  .color-row { gap: 4px; }
  .tool-gap { flex: 0 0 8px; }
}
@media (orientation: landscape) and (min-width: 600px) and (max-height: 480px) {
  .studio-top { min-height: 48px; padding-block: 4px; }
  .tool { width: 50px; height: 44px; font-size: 10px; }
  .tool svg { width: 20px; height: 20px; }
  .swatch { width: 38px; height: 38px; }
  .swatch::after { width: 26px; height: 26px; }
}

/* ---------- tablets and the open iPhone Duo in portrait: roomier tools ---------- */
@media (orientation: portrait) and (min-width: 600px) {
  .toolbar { max-width: 640px; }
  .tool { width: 60px; height: 58px; font-size: 12px; }
  .stage { padding: 0 16px; }
}

/* optional signature on the fold card: a line to sign on, in handwriting */
.sign { display: block; margin: 4px 0 22px; text-align: center; }
.sign input:not([type=radio]) {
  width: 100%;
  height: auto;
  padding: 6px 4px 4px;
  border: 0;
  border-bottom: 1.5px solid var(--rule);
  border-radius: 0;
  background: none;
  color: var(--chalk);
  font: 500 32px/1.1 "Caveat", cursive;
  text-align: center;
}
.sign input::placeholder { color: var(--dim); opacity: 1; }
.sign input:focus { border-color: var(--glint); }
.sign span { display: block; margin-top: 8px; font-size: 13px; color: var(--dim); }

/* ---------- page view and work view ----------
   The camera holds the whole page: your part (the paper) plus the other parts,
   greyed and labelled. Zooming moves the camera, so they always line up. */
.camera { position: relative; transform-origin: 0 0; --s: 1; }
.camera.easing { transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.15, 1); }
.camera .paper { box-shadow: none; border-radius: 0; z-index: 1; }
.page-under {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--held);
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
/* Everyone else's space, and the carry-over strips: one flat grey. */
:root { --held: #22365e; } /* ink blue: the colour of parts that aren't yours (terracotta alternative: #8e3b26) */
.other {
  position: absolute;
  left: 0;
  right: 0;
  /* flat and plain: space held, nothing hidden underneath */
}
.other + .other { border-top: var(--fold-line); }
.other:first-child { border-radius: 4px 4px 0 0; }
.other:last-child { border-radius: 0 0 4px 4px; }
.other span {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
  font: italic 400 calc(15px / var(--s)) / 1.2 var(--serif);
  color: rgba(255, 255, 255, 0.72);
  padding: 0 12px;
  text-align: center;
}
/* the same paper grain as your part, so the greys match */
.page-under::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grain-wide) 0 0 / 1600px 1600px repeat;
  mix-blend-mode: multiply;
  opacity: 0.22;
}
/* In Whole page, your part's name, set like the other parts' names. */
.you-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  font: italic 400 calc(15px / var(--s)) / 1.2 var(--serif);
  color: rgba(27, 26, 25, 0.55);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.stage[data-view="page"] .you-label { opacity: 0.92; }
.stage[data-view="page"] .you-label.gone { opacity: 0; transition-duration: 0.12s; }
/* Your part's name, small, in the top-right corner of where you draw. */
.part-label {
  position: absolute;
  right: calc(12px / var(--s));
  top: calc(10px / var(--s));
  z-index: 3;
  font-size: calc(var(--size, 11px) / var(--s));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(27, 26, 25, 0.5);
  pointer-events: none;
}
.band-top:not([hidden]) ~ .part-label { top: calc(var(--fold) + 10px / var(--s)); }
@media (min-width: 900px) and (min-height: 600px) { .part-label { --size: 13px; } }
.camera.folding .part-label { display: none; }
.camera.folding .page-under, .camera.folding .page-shade { opacity: 0; transition: opacity 0.3s; }
/* Light from above on a sheet folded like an accordion: panels alternate
   between tilting toward the light and away from it. Laid over everything,
   ink included, as real light would be. The gradient is set in app.js. */
.page-shade {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 6;
  border-radius: 4px;
  pointer-events: none;
}

/* the sideways tip only matters on a phone or tablet held upright */
.rotate-tip { display: none; }
@media (orientation: portrait) and (max-width: 599px), (orientation: portrait) and (pointer: coarse) { .rotate-tip { display: block; } }
.sheet-card .tip { margin-bottom: 4px; }
.sheet-card .tip + .primary, .sheet-card .tip + .tip + .primary { margin-top: 18px; }

/* renaming a finished drawing */
.rename-btn { display: inline-flex; gap: 6px; font-size: 15px; margin: -4px 0 14px; text-decoration: none; }
.rename-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.rename-form { margin: 0 0 18px; }
.rename-form input { font: 400 24px/1.2 var(--serif); padding: 10px 14px; }
.rename-actions { display: flex; gap: 8px; margin-top: 10px; }
.rename-actions button { flex: 1; }

/* the faint mannequin hint behind the paper */
.ghost-figure { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; transition: opacity 0.15s ease-out; }
.ghost-figure.gone { opacity: 0; transition-duration: 0.12s; }
.paper.folding .ghost-figure { display: none; }

/* ---------- paper ---------- */
/* A faint paper grain, laid over paper surfaces with multiply. */
:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .38  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.paper::after, .fface::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
}
.paper::after { z-index: 4; }
/* In the studio the page is scaled, and a small repeating grain tile shows
   faint seams where its copies meet. A big tile (1600px) seldom repeats, and
   still covers pages taller than itself on large screens. */
:root {
  --grain-wide: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .38  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.camera .paper::after { background: var(--grain-wide) 0 0 / 1600px 1600px repeat; }

/* The carry-over strips belong to the neighbouring parts, so they're the same
   grey. A dotted line marks the fold: carry lines across it. The strips sit
   under the drawing, so ink there stays crisp. */
/* Your whole drawing area, carry-over strips included, is plain paper.
   Everyone else's parts are solid colour, so the strips show as a thin band
   of paper crossing into the next part. No lines needed. */
.band-bottom, .band-top { background: none; border: 0; z-index: 1; }
:root { --fold-line: 0 solid transparent; }
.band-label { --size: 11px; font-size: calc(var(--size) / var(--s)); right: calc(10px / var(--s)); color: rgba(27, 26, 25, 0.5); }
@media (min-width: 900px) and (min-height: 600px) { .band-label { --size: 13px; } }
/* The top strip is thin, so its label sits just under it, on your paper. The
   bottom one sits inside its strip, below the fold, clear of the sketch. */
.band-top .band-label { bottom: auto; top: calc(100% + 8px / var(--s)); right: auto; left: calc(12px / var(--s)); }
.band-bottom .band-label { top: 50%; bottom: auto; transform: translateY(-50%); }
.band-bottom .band-label::before { content: "↓ "; letter-spacing: 0; }

/* ---------- rolled sheet (intro + reveal) ----------
   Sizes and positions are set frame by frame in sheet.js. */
.fsheet-wrap { container-type: inline-size; width: 100%; position: relative; }
.fsheet-wrap > .rsheet { position: absolute; top: 0; left: 0; right: 0; }
/* The whole page's footprint, faintly, with its folds: where the paper will go. */
.rghost {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: rgba(239, 237, 232, 0.05);
  box-shadow: inset 0 0 0 1px rgba(239, 237, 232, 0.09);
}
.rghost i {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed rgba(239, 237, 232, 0.22);
}
.rghost span {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
  font: italic 400 clamp(14px, 4.2cqw, 22px) var(--serif);
  color: rgba(239, 237, 232, 0.28);
}
/* Shadow under the paper. */
.rsheet::before { content: none; }
/* The folded sheet. The opened paper lies flat; the next panel flips down
   on its fold in 3D. Sizes, angles and shade are set frame by frame in sheet.js. */
.rsheet { perspective: 1400px; perspective-origin: 50% 0; }
.rflat {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--paper) var(--img) 0 0 / 100% 100% no-repeat;
}
.rflat::after, .rface::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
}
/* Plain grain on every panel, flat or moving, so they read as one sheet
   (Safari stutters re-blending a layer that's turning in 3D). */
.rface::before, .rflat::after { mix-blend-mode: normal; opacity: 0.12; }
.rflap {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.rflap[hidden], .rcast[hidden] { display: none; }
.rface {
  position: absolute;
  /* a hair past both edges: tucked under the panel above at the fold, and
     covering the page's edge when folded up */
  inset: -1.5px 0 -1.5px 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* blank paper, a touch lighter at the fold */
  background: linear-gradient(#f3efe7, #ebe6dc);
}
/* Same shading as the front, so when a panel lands and the next folded one
   takes its place, the blank paper looks exactly the same. */
.rface.back { transform: rotateX(180deg); }
/* One drop shadow under all the opened paper; sheet.js sets its height. */
.rshadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.rface.front { background: var(--paper) var(--img) no-repeat; }
/* shade as a side turns to face down, away from the light */
.rshade {
  position: absolute;
  inset: 0;
  background: rgb(20, 18, 16);
  opacity: 0;
  pointer-events: none;
  /* its own layer, so Safari fades it on the spot instead of repainting the
     whole turning panel a few frames late */
  will-change: opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* the shadow the falling panel casts where it will land */
.rcast {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  z-index: 1;
  will-change: opacity;
  pointer-events: none;
  background: linear-gradient(rgba(8, 8, 9, 0.5), rgba(8, 8, 9, 0.15) 45%, transparent);
}

/* the shadow under a panel lifting off the paper it's folded onto: deepest
   toward the fold, where the gap is narrowest */
.rlift {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
  transform: translateZ(0.2px);
  background: linear-gradient(rgba(20, 18, 16, 0.22), rgba(20, 18, 16, 0.4) 35%, rgba(20, 18, 16, 0.55));
}

/* reveal */
.reveal .fsheet-wrap { margin-bottom: 4px; }

/* ---------- home hero: title + a sample sheet unrolling ---------- */
.home h1 { margin: 0; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40%;
  align-items: center;
  margin: 0 0 18px;
}
.hero-words { position: relative; z-index: 2; margin-right: -14%; }
.hero h1 {
  font-size: clamp(46px, 13.6vw, 112px);
  line-height: 0.92;
  text-shadow: 0 2px 24px rgba(17, 18, 19, 0.85), 0 0 4px rgba(17, 18, 19, 0.6);
}
/* The big title is the brand on the home page; the small one would repeat it. */
body.on-home .top { display: none; }
body.on-home main { padding-top: max(24px, env(safe-area-inset-top)); }
.gallery { margin: 0; transform: rotate(2.5deg); }
/* The stage keeps the full sheet's space from the start; the sheet sits on
   top of it, so nothing it does while unrolling can move the page. */
.gallery-stage { position: relative; aspect-ratio: 1700 / 2200; cursor: pointer; }
.gallery-stage .fsheet-wrap { position: absolute; top: 0; left: 0; right: 0; }
/* Between samples only the paper and its fold lines fade; the page's
   footprint stays put, so the space never blinks. */
.gallery-stage .rsheet, .gallery-stage .rghost i { transition: opacity 0.45s, transform 0.45s; }
.gallery-stage .fsheet-wrap.enter .rsheet, .gallery-stage .fsheet-wrap.enter .rghost i { animation: sheet-in 0.5s ease-out; }
.gallery-stage .fsheet-wrap.leave .rsheet, .gallery-stage .fsheet-wrap.leave .rghost i { opacity: 0; }
.gallery-stage .fsheet-wrap.leave .rsheet { transform: translateY(-8px); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px); } }
.home > .lede { margin-bottom: 20px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) 320px; margin-bottom: 8px; }
  .hero-words { margin-right: -6%; }
  .home > .lede, .home > .card { max-width: 560px; }
}



/* fold style checkbox */
.check { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 4px; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 2px 0 0; border: 1px solid var(--ash); border-radius: 6px; display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--glint); border-color: var(--glint); }
.check input:checked::after { content: ""; width: 10px; height: 5px; border: 2px solid var(--night); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.check span { font-size: 16px; }
.check small { display: block; color: var(--dim); font-size: 13px; margin-top: 2px; }
.sheet-card .tip.nudge { color: var(--ash); font-style: italic; font-family: var(--serif); font-size: 15px; margin-bottom: 10px; }

/* While a flap falls toward you it can swing past the sheet's edges. */
body { overflow-x: clip; }
/* Unfold floats over the folded-up first panel. */
.reveal .sheet { scroll-margin-top: 16px; }
.reveal .sheet .unfold-btn {
  position: absolute;
  left: 50%;
  z-index: 5;
  width: auto;
  margin: 0;
  padding: 0 34px;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: opacity 0.3s, transform 0.3s;
}
.reveal .sheet .unfold-btn.going { opacity: 0; transform: translate(-50%, -50%) scale(0.9); pointer-events: none; }

/* In Whole page the "You" tag names your part; the small strip labels would
   crowd it on a little page, so they wait for My part. */
.band-label, .part-label { transition: opacity 0.2s; }
.stage[data-view="page"] .band-label, .stage[data-view="page"] .part-label { opacity: 0; }
.band-top .band-label::before { content: "↑ "; letter-spacing: 0; }

/* "From above" explained itself; the lines in that strip are the hint. */
.band-top .band-label { display: none; }

/* In the reveal, the parts still folded away look like they do while drawing. */
.rghost.held { background-color: var(--held); box-shadow: none; border-radius: 3px; }
.rghost.held i { display: none; }
.rghost.held span { color: rgba(255, 255, 255, 0.72); }

/* Seven tools share a phone's width instead of overflowing it. */
@media (max-width: 599px) {
  .tool-row .tool { flex: 1 1 0; min-width: 0; width: auto; max-width: 60px; }
  .tool-gap { flex: 0 0 4px; }
}
/* Phones held sideways: the rail is short, so tools go icon-only. */
@media (orientation: landscape) and (max-height: 480px) {
  .tool-row .tool { height: 40px; }
  .tool-row .tool span { display: none; }
  .tool-gap { flex: 0 0 4px; }
}

/* ---------- the intro sheet, floating ----------
   The sheet drifts a little above its footprint, its shadow softening as it
   lifts, with a few hand-drawn flourishes around it. */
.gallery { position: relative; }
.gallery-stage .rghost i, .reveal .rghost i { display: none; }
/* The footprint in the intro and the reveal: a quiet, plain block that holds
   the page's space until the paper unfolds over it. */
.gallery-stage .rghost, .reveal .rghost {
  border-radius: 6px;
  box-shadow: none;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(239, 237, 232, 0.075), rgba(239, 237, 232, 0.03));
}
.gallery-stage .rsheet { animation: float 7s ease-in-out infinite; }
.gallery-stage .fsheet-wrap.enter .rsheet { animation: sheet-in 0.5s ease-out, float 7s ease-in-out infinite; }

@keyframes float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -7px; rotate: -0.6deg; }
}
@keyframes float-shadow {
  0%, 100% { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32); }
  50% { box-shadow: 0 20px 38px rgba(0, 0, 0, 0.24); }
}

.doodle {
  position: absolute;
  z-index: 3;
  fill: none;
  stroke: var(--glint);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.sparkle { width: 26px; height: 26px; animation: twinkle 3.4s ease-in-out infinite; }
.sparkle.s1 { top: -14px; left: -16px; }
.sparkle.s2 { width: 16px; height: 16px; top: 18%; right: -18px; animation-delay: -1.2s; }
.sparkle.s3 { width: 14px; height: 14px; bottom: 9%; left: -20px; opacity: 0.7; animation-delay: -2.3s; }
.squiggle {
  width: 54px;
  height: 27px;
  bottom: -26px;
  right: 6%;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: draw-in 1.6s 0.6s ease-out forwards, bob 6s 2.2s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.55; }
  50% { transform: scale(1.08) rotate(18deg); opacity: 1; }
}
@keyframes draw-in { to { stroke-dashoffset: 0; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (min-width: 900px) {
  .sparkle.s1 { width: 32px; height: 32px; top: -18px; left: -22px; }
  .squiggle { width: 66px; height: 33px; bottom: -32px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-stage .rsheet, .gallery-stage .rsheet::before, .sparkle { animation: none; }
  .squiggle { animation: none; stroke-dashoffset: 0; }
}

/* Three and Four already name their parts in the boxes; the list only shows
   for Custom, where you type your own. */
.section-list:not(.editable) { display: none; }

/* The brush-sized circle that stands in for a mouse pointer while drawing. */
.brush-ring {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  border-radius: 50%;
  border: 1px solid rgba(27, 26, 25, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
  pointer-events: none;
}
.brush-ring.erase { border-style: dashed; }
.brush-ring[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .stage, .paper canvas { cursor: none; }
}
/* in the intro, the landing shadow breathes with the floating sheet's */
.gallery-stage .rshadow { animation: float-shadow 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gallery-stage .rshadow { animation: none; } }

/* ---------- the reveal sheet: the intro's float and flourishes ---------- */
.reveal .sheet { position: relative; }
/* Flourishes wait until the whole figure is open, then pop in. */
.reveal .sheet .doodle { opacity: 0; transition: opacity 0.6s; }
.reveal .sheet .sparkle { animation: none; transform: scale(0.4); }
.reveal .sheet.opened .doodle { opacity: 1; }
.reveal .sheet.opened .sparkle { animation: pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) forwards, twinkle 3.4s 0.5s ease-in-out infinite; }
.reveal .sheet.opened .sparkle.s2 { animation-delay: 0.15s, 0.65s; }
.reveal .sheet.opened .sparkle.s3 { animation-delay: 0.3s, 0.8s; }
.reveal .sheet .squiggle { animation: none; bottom: -30px; }
.reveal .sheet.opened .squiggle { animation: draw-in 1.2s 0.3s ease-out forwards, bob 6s 1.6s ease-in-out infinite; }
.reveal .sheet .sparkle.s1 { top: -14px; left: -12px; }
.reveal .sheet .sparkle.s2 { right: -10px; }
.reveal .sheet .sparkle.s3 { left: -14px; }
@keyframes pop { from { transform: scale(0.4); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .reveal .sheet.opened .sparkle, .reveal .sheet.opened .squiggle { animation: none; transform: none; stroke-dashoffset: 0; }
}
/* room for the squiggle under the opened sheet */
.reveal .sheet.opened { margin-bottom: 30px; transition: margin 0.3s; }

/* "tap to unfold", handwritten on the back of the folded sheet */
.rnote {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: pre;
  padding-bottom: 4%;
  font: 500 clamp(22px, 9cqw, 40px) / 1 "Caveat", cursive;
  color: rgba(42, 80, 184, 0.78); /* ballpoint blue */
  transform: rotate(-3deg);
  pointer-events: none;
}
.rnote::after { content: " ↓"; }
.fsheet-wrap.tappable { cursor: pointer; }
.fsheet-wrap.tappable:focus-visible { outline: 2px solid var(--glint); outline-offset: 6px; }

/* headline at the top of the start form */
.card-title { margin: 0 0 16px; font: 400 clamp(26px, 7vw, 32px) / 1.1 var(--serif); color: var(--chalk); }

/* Nothing decorative may push the page wider than the screen: no sideways
   give on phones. */
html { overflow-x: clip; }
@media (max-width: 599px) {
  .gallery .sparkle.s2 { right: -6px; }
}

/* welcome for someone arriving from a link: an invitation in the post,
   light paper so it reads differently from the dark "your turn" card */
.welcome .letter {
  --ink: #2b2926;
  position: relative;
  color-scheme: light;
  background: #f3eee4 var(--grain);
  border: 0;
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.welcome .letter .eyebrow { color: #6f685c; }
.welcome .letter h2 { color: var(--ink); margin-bottom: 4px; }
.welcome .letter p { color: #5f5a51; }
.welcome .letter p b { color: var(--ink); font-weight: 500; }
.welcome .letter .welcome-turn { color: #2a50b8; font: 500 23px/1.15 "Caveat", cursive; margin-bottom: 18px; }
.welcome .letter .primary { background: #22365e; color: #f3eee4; }
.envelope { margin: -4px -6px 14px 0; }
.post { position: relative; height: 132px; }
.post .stamp { position: absolute; right: 0; top: 0; transform: rotate(3deg); filter: drop-shadow(0 1px 2px rgba(43, 41, 38, 0.3)); }
.post .to { position: absolute; left: 2px; top: 6px; color: #2a50b8; font: 500 30px/1 "Caveat", cursive; transform: rotate(-4deg); transform-origin: left; }
.post .postmark { position: absolute; right: 62px; top: -16px; color: rgba(43, 41, 38, 0.55); mix-blend-mode: multiply; }
.welcome .check { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; color: #6f685c; font-size: 14px; cursor: pointer; }
.welcome .check input { -webkit-appearance: auto; appearance: auto; flex: none; padding: 0; border-radius: 3px; width: 16px; height: 16px; min-height: 0; accent-color: #22365e; margin: 0; }

.pass-later { color: var(--dim); font-size: 14px; line-height: 1.5; margin: 14px 2px 22px; text-align: center; }

/* The invite arrives like real post: the stamp is stuck on, the postmark
   lands with a thunk (the card gives a little), then "To: you" is written. */
.welcome:not([hidden]) .post .stamp { animation: stamp-on 0.55s 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.15) both; }
.welcome:not([hidden]) .post .postmark { transform-origin: 84% 44%; animation: postmark-on 0.42s 0.85s cubic-bezier(0.3, 0, 0.4, 1) both; }
.welcome:not([hidden]) .letter { animation: rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), thunk 0.3s 1.15s ease-out; }
.welcome:not([hidden]) .post .to { animation: write-on 0.7s 1.35s steps(14, end) both; }
@keyframes stamp-on {
  from { opacity: 0; transform: translate(26px, -30px) rotate(16deg) scale(1.08); }
  to { opacity: 1; transform: rotate(3deg); }
}
@keyframes postmark-on {
  0% { opacity: 0; transform: scale(1.5); }
  70% { opacity: 0.55; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes thunk {
  0% { transform: translateY(0); }
  30% { transform: translateY(3px) scale(0.995); }
  100% { transform: translateY(0); }
}
@keyframes write-on {
  from { clip-path: inset(-10px 100% -10px -10px); }
  to { clip-path: inset(-10px -10px -10px -10px); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome:not([hidden]) .post .stamp, .welcome:not([hidden]) .post .postmark,
  .welcome:not([hidden]) .letter, .welcome:not([hidden]) .post .to { animation: none; }
}

/* the reveal's byline, written in by hand once it's open */
.byline { margin: -6px 0 14px; color: #c9b892; font: 500 26px/1.2 "Caveat", cursive; animation: write-on 1s 0.2s steps(22, end) both; }
.fab:nth-child(4) { animation-delay: 0.24s; }

/* the replay */
.replay { align-items: center; }
.replay-card { width: 100%; max-width: 420px; max-height: 100%; display: flex; flex-direction: column; gap: 14px; animation: rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.replay-caption { margin: 0; text-align: center; color: var(--glint); min-height: 1.4em; }
.replay-paper { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; }
.replay-paper canvas { display: block; max-width: 100%; max-height: calc(100dvh - 170px); aspect-ratio: 850 / 1100; width: auto; height: auto; border-radius: 3px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.replay-actions { display: flex; gap: 10px; }
.replay-actions button { flex: 1; }
@media (prefers-reduced-motion: reduce) { .byline { animation: none; } }

/* The invite on small phones: a touch more compact, and the button always in
   view (the words scroll behind it if they still don't fit). */
.welcome .letter [data-action=welcome-go] { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 14px 2px #f3eee4; }
@media (max-width: 360px), (max-height: 640px) {
  .welcome .post { zoom: 0.82; }
  .welcome .envelope { margin-bottom: 8px; }
  .welcome .letter { padding-top: 18px; }
  .welcome .letter h2 { font-size: 25px; }
  .welcome .letter .welcome-turn { font-size: 21px; margin-bottom: 12px; }
  .welcome .letter p { font-size: 15px; line-height: 1.45; margin-bottom: 10px; }
}

/* home: drawings this phone has taken part in */
.mine { margin: 32px 0 0; }
.mine-heading { margin: 0 0 6px; font: 400 22px/1.2 var(--serif); color: var(--chalk); }
.mine ul { list-style: none; margin: 0; padding: 0; }
.mine li { border-top: 1px solid var(--rule); }
.mine a { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 13px 2px; color: inherit; text-decoration: none; }
.mine a::after { content: "›"; grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--dim); font-size: 22px; }
.mine-title { font: italic 400 18px/1.3 var(--serif); color: var(--chalk); }
.mine-status { font-size: 14px; color: var(--dim); }
.mine li.done .mine-status { color: var(--glint); }
@media (hover: hover) { .mine a:hover .mine-title { text-decoration: underline; text-underline-offset: 3px; } }

/* the carried-over lines, on the invite */
.welcome-guide { margin: 4px 0 16px; }
.welcome-guide .intro-guide { margin: 0 0 8px; background: #fbf8f2; box-shadow: 0 1px 3px rgba(43, 41, 38, 0.18); }
.welcome-guide figcaption { font-size: 14px; line-height: 1.45; color: #5f5a51; }
@media (max-width: 360px), (max-height: 640px) { .welcome-guide { margin-bottom: 10px; } .welcome-guide figcaption { font-size: 13.5px; } }

/* group chat: who's next */
.next-who { display: block; margin: 0 0 18px; }
.next-who span { display: block; font-size: 15px; color: var(--ash); margin-bottom: 6px; }
.next-who small { color: var(--dim); font-size: 13px; margin-left: 4px; }
.next-who input { width: 100%; }
/* the reveal: share it back to everyone */
.share-reveal { margin: 0 0 10px; }
.keep-row { display: flex; gap: 10px; margin: 0 0 22px; }
.keep-row button { flex: 1; padding-left: 8px; padding-right: 8px; }
.video-paper canvas { aspect-ratio: 1080 / 1350; }

/* ---------- collage cutouts: a drawer of little pictures ---------- */
.cut-row { display: flex; gap: 6px; overflow-x: auto; padding: 0 6px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cut-row[hidden] { display: none; }
.cut-row::-webkit-scrollbar { display: none; }
.cut-pick {
  flex: 0 0 auto; width: 56px; height: 44px; padding: 0;
  border: 2px solid transparent; border-radius: 10px;
  background: rgba(244, 240, 232, 0.08) center / 82% auto no-repeat;
  cursor: pointer;
}
.cut-pick.on { border-color: var(--glint); background-color: rgba(230, 214, 187, 0.16); }
@media (orientation: landscape) and (min-width: 600px) {
  .cut-row { flex-direction: column; overflow-x: hidden; overflow-y: auto; max-height: calc(100dvh - 24px); padding: 0; }
  .cut-pick { width: 52px; height: 40px; }
}
.cut-own { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--glint); font-size: 10px; }
.cut-own svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.cutter-paper canvas { aspect-ratio: auto; touch-action: none; cursor: crosshair; background: #000; }

/* ---------- a name for the drawing, by the roll of a die ---------- */
.title-row { display: flex; gap: 8px; align-items: stretch; }
.title-row input { flex: 1; min-width: 0; }
.dice { flex: 0 0 auto; width: 52px; border-radius: 14px; border: 1px solid var(--rule); background: transparent; color: var(--glint); display: grid; place-items: center; cursor: pointer; }
.dice svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dice svg circle { fill: currentColor; stroke: none; }
.dice.rolled svg { animation: roll 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes roll { from { transform: rotate(-200deg) scale(0.7); } to { transform: none; } }

/* ---------- the reveal, stamped UNFOLDED ---------- */
/* It hangs off the top-left corner, so it never covers the drawing. */
.unfolded-mark { position: absolute; top: -32px; left: -14px; z-index: 4; color: rgba(122, 150, 226, 0.92); pointer-events: none; transform-origin: 50% 50%; animation: postmark-on 0.42s cubic-bezier(0.3, 0, 0.4, 1) both; }
.unfolded-mark svg { display: block; width: 78px; height: auto; }
/* the sparkle that sat in that corner moves to the top edge */
.reveal .sheet .sparkle.s1 { top: -16px; left: 46%; }

/* ---------- keep playing while you wait ---------- */
.pass-another { margin: 6px 0 18px; text-align: center; font-size: 15px; }
.pass-another a { color: var(--glint); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .dice.rolled svg, .unfolded-mark { animation: none; } }

/* ---------- a picked-up cutout: dashed outline, a handle to resize and turn ---------- */
.cut-sel { position: absolute; z-index: 6; pointer-events: none; transform-origin: 50% 50%; outline: calc(1.5px / var(--s, 1)) dashed rgba(42, 80, 184, 0.75); outline-offset: calc(-2px / var(--s, 1)); border-radius: calc(4px / var(--s, 1)); }
.cut-sel[hidden] { display: none; }
.cut-handle {
  position: absolute; right: calc(-14px / var(--s, 1)); bottom: calc(-14px / var(--s, 1));
  width: calc(28px / var(--s, 1)); height: calc(28px / var(--s, 1));
  border-radius: 50%; border: calc(2px / var(--s, 1)) solid #fff; padding: 0;
  background: #2a50b8 center / 62% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v4.5h-4.5'/%3E%3C/svg%3E");
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: auto; touch-action: none; cursor: nwse-resize;
}
/* a bigger target for a finger than it looks */
.cut-handle::before { content: ""; position: absolute; inset: calc(-12px / var(--s, 1)); border-radius: 50%; }
.camera.folding .cut-sel, .stage[data-view="page"] .cut-sel { display: none; }

/* a part nobody signed */
.credits li.mystery b { font-style: italic; opacity: 0.7; }

/* the game's name, then what it is */
.hero .tagline { margin: 10px 0 0; font: italic 400 18px/1.3 var(--serif); color: var(--ash); letter-spacing: 0.01em; }
@media (max-width: 599px) { .hero .tagline { font-size: 15px; margin-top: 8px; } }

/* ---------- the name: "Pass the" in white, "Fold" in gold, folding open ----------
   Both upright. "Fold" is drawn twice over itself: the top half stays put,
   and the bottom half starts creased up behind it, then swings down open. */
.brand { color: var(--chalk); }
.brand em, .hero h1 .fold-word { font-style: normal; color: var(--glint); }
.fold-word { display: inline-block; position: relative; perspective: 520px; cursor: pointer; }
.fold-word .fw-ghost { visibility: hidden; }
.fold-word .fw { position: absolute; left: 0; top: 0; }
.fold-word .fw-top { clip-path: inset(-20% -20% 52% -20%); }
.fold-word .fw-bot { clip-path: inset(48% -20% -20% -20%); transform-origin: 50% 50%; backface-visibility: hidden; animation: fold-open 1.15s 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) both; }
.fold-word.again .fw-bot { animation: fold-open 1.15s cubic-bezier(0.25, 0.8, 0.25, 1) both; }
@keyframes fold-open {
  0% { transform: rotateX(178deg); filter: brightness(0.55); }
  60% { transform: rotateX(-14deg); filter: brightness(0.95); }
  80% { transform: rotateX(5deg); }
  100% { transform: rotateX(0); filter: none; }
}
@media (prefers-reduced-motion: reduce) { .fold-word .fw-bot, .fold-word.again .fw-bot { animation: none; } }

/* ---------- footer: who made it, and a tip jar ---------- */
.site-foot { max-width: 560px; margin: 0 auto; padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); text-align: center; color: var(--dim); font-size: 13px; }
.site-foot p { margin: 0 0 12px; }
.site-foot a { color: var(--ash); text-decoration: none; }
.site-foot a:hover { color: var(--chalk); }
.site-foot .coffee { display: inline-block; padding: 9px 16px; border: 1px solid var(--rule); border-radius: 999px; color: var(--glint); font-size: 14px; }
.site-foot .coffee[hidden] { display: none; }
/* not while drawing */
body.studio-mode .site-foot { display: none; }

/* someone tapped a link that was already used */
.latecomer-start { display: flex; margin: 8px 0 6px; }
.drew-it { display: block; margin: 0 auto 22px; color: var(--ash); font-size: 14px; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* a finished drawing you haven't unfolded yet */
.mine li.fresh .mine-status { color: var(--glint); }
.mine li.fresh .mine-title { color: var(--chalk); }
.home > .mine + .card { margin-top: 22px; }