/* drawrabbit.com/how-to-draw/: the drawing guides and their directory (EXP-012). Direction B (Michael, 21 Oct 2026: "go
   with B with the bits from A"): each guide opens on a full field of its world's colour from the app, with huge Nunito
   and the drawing taped to a sheet of paper; a torn edge into a calm paper page; big numbered steps with no boxes. From
   A, the sketchbook's hand: a pencil underline under the headline and handwritten notes pointing at the drawing.
   Written into each page by tools/howto/page.mjs (so it costs no request). page.mjs sets the field's colours on the
   body (and on any section in another world's colour): --field, --on (white or ink, whichever reads on it), --off (the
   other one), --on-soft, --field-deep, --w, --w-text (the colour darkened until it reads as text on paper). */
:root {
  --ink: #23252A; --text: #3A3D44; --mid: #5D6068; --soft: #8A8D93;
  --paper: #FBF9F4; --sheet: #FDFCF8; --card: #FFFFFF; --paper-2: #F4F0E7; --line: #E6E1D6;
  --blue: #3E7BC4; --blue-text: #3873BA;
  --field: #3A76BE; --on: #FFFFFF; --off: #23252A; --on-soft: #FFFFFF; --field-deep: #2D5A8D; --w: #3E7BC4; --w-text: #3873BA;
  --f: "Nunito", ui-rounded, -apple-system, system-ui, sans-serif;
  --fb: "Nunito Sans", -apple-system, system-ui, sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --gut: max(20px, env(safe-area-inset-left));
  --h1: clamp(52px, 7.4vw, 108px); --h2: clamp(36px, 4.4vw, 60px);
  --tear: polygon(0 62%, 3% 44%, 7% 58%, 12% 38%, 17% 55%, 22% 40%, 28% 60%, 33% 37%, 39% 52%, 44% 35%, 50% 57%, 56% 39%, 61% 53%, 67% 34%, 72% 56%, 78% 40%, 83% 58%, 89% 37%, 94% 55%, 100% 42%, 100% 100%, 0 100%);
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--paper) }
body { background: var(--paper); color: var(--ink); font: 400 19px/1.6 var(--fb); -webkit-font-smoothing: antialiased; overflow-x: clip }
img { display: block; max-width: 100%; height: auto }
a { color: var(--w-text) }
button { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px }
.field :focus-visible { outline-color: var(--on) }
.wrap { width: min(1200px, 100% - 2 * var(--gut)); margin-inline: auto }
h1, h2, h3 { font-family: var(--f); text-wrap: balance }
h1 { font-weight: 900; font-size: var(--h1); line-height: .92; letter-spacing: -.035em }
h2 { font-weight: 900; font-size: var(--h2); line-height: 1; letter-spacing: -.03em }
h3 { font-weight: 900; line-height: 1.1; letter-spacing: -.015em }
.kicker { font-family: var(--f); font-size: 19px; font-weight: 900; color: var(--mid) }
.lede { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.5; max-width: 32ch; text-wrap: pretty }
.sub { color: var(--text) }

/* ── the site's header and footer: paper, above and below the colour ── */
header.site { position: sticky; top: 0; z-index: 20; background: rgba(251, 249, 244, .9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px) }
.bar { display: flex; align-items: center; gap: 32px; height: 72px }
.brand { display: flex; align-items: center; gap: 10px; font: 900 21px var(--f); color: var(--ink); text-decoration: none; letter-spacing: -.01em }
.brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 2px 8px rgba(35, 37, 42, .16) }
.nav { display: flex; gap: 28px; margin-left: auto }
.nav a { font: 800 17px var(--f); color: #474A51; text-decoration: none; padding: 6px 0; border-bottom: 2.5px solid transparent }
.nav a:hover { color: var(--ink) }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink) }
.get { font: 800 16px var(--f); text-decoration: none; color: #fff; background: var(--ink); padding: 11px 20px; border-radius: 999px; transition: transform .15s; white-space: nowrap }
.get:hover { transform: translateY(-1px) }
footer.site { margin-top: 140px; background: var(--paper-2) }
.foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 36px; padding-block: 44px max(48px, env(safe-area-inset-bottom)) }
.foot .brand { font-size: 18px } .foot .brand img { width: 30px; height: 30px; border-radius: 8px }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px }
.foot nav a { font: 800 16px var(--f); color: #474A51; text-decoration: none } .foot nav a:hover { color: var(--ink) }
.foot p { font-size: 15.5px; color: var(--mid) }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 800 16px var(--f); color: #474A51; padding-block: 6px 18px }
.crumbs a { color: #474A51; text-decoration: none } .crumbs a:hover { color: var(--ink) }
.crumbs i { font-style: normal; color: #B8B3A8 }
.crumbs span { color: var(--ink) }

/* ── a field: a full-width band of a world's colour, torn off into paper ── */
.field { position: relative; background: var(--field); color: var(--on); isolation: isolate }
.field .kicker { color: var(--on-soft) }
.field .lede { color: var(--on) }
.tear { position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; background: var(--paper); clip-path: var(--tear); pointer-events: none }
.tear.top { top: -1px; bottom: auto; transform: scale(-1, -1) }
.fieldIn { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 80px); align-items: center; padding-block: 52px 128px }

/* the headline's last word, underlined in pencil (it draws itself in as the page opens) */
h1 em, h2 em { font-style: normal; position: relative; white-space: nowrap }
.ul { position: absolute; left: -3%; bottom: -.06em; width: 106%; height: .24em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round }
.ul path { vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pencil .8s cubic-bezier(.5, 0, .3, 1) .35s forwards }
h2 .ul { stroke-width: 4.5 }
@keyframes pencil { to { stroke-dashoffset: 0 } }

.gHeroText h1 { margin-top: 16px }
.gHeroText .lede { margin-top: 36px; font-size: clamp(19px, 1.5vw, 21px); max-width: 38ch }
.meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 26px; font: 900 18px var(--f); color: var(--on-soft) }
.meta span { position: relative; white-space: nowrap }
.meta span + span::before { content: ""; position: absolute; left: -16px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: currentColor; opacity: .55 }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 40px }
/* the big button: a pill in the field's opposite (white on a deep colour, ink on a light one), its play circle in the colour */
.go { display: inline-flex; align-items: center; gap: 14px; min-height: 66px; padding: 10px 30px 10px 10px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: var(--on); color: var(--off); font: 900 19px/1.2 var(--f); text-align: left; box-shadow: 0 20px 40px -18px rgba(20, 16, 40, .6); transition: transform .15s, box-shadow .15s }
.go:hover { transform: translateY(-2px); box-shadow: 0 26px 46px -18px rgba(20, 16, 40, .65) }
.go:active { transform: translateY(1px) }
.go i { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--field); display: grid; place-items: center }
.go i::before { content: ""; border-left: 14px solid var(--on); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px }
.see { font: 800 18px var(--f); color: var(--on); text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 7px }
.see:hover { text-decoration-thickness: 4px }

/* a drawing taped to a sheet of paper */
.sheet { position: relative; display: block; background: var(--sheet); padding: 26px; transform: rotate(var(--r, -2.4deg));
  box-shadow: 0 2px 0 rgba(0, 0, 0, .04), 0 50px 80px -44px rgba(20, 16, 40, .65), 0 14px 28px -18px rgba(20, 16, 40, .3) }
.sheet.small { padding: 12px }
/* on the paper page a sheet sits close, with a soft, tight shadow (the field's long shadow smudged the paper) */
.vStage .sheet, .daDone .sheet { box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 2px 6px rgba(35, 37, 42, .06), 0 22px 34px -24px rgba(35, 37, 42, .38) }
.tape { position: absolute; z-index: 3; top: -15px; left: 50%; width: 118px; height: 30px; margin-left: -59px; transform: rotate(3deg);
  background: rgba(238, 230, 208, .74); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px) }
.sheet.small .tape { top: -11px; width: 70px; height: 22px; margin-left: -35px }

/* ── a guide's opening: the drawing draws itself on its sheet, with notes in pencil ── */
.gHeroArt { position: relative; margin: 0 }
.gHeroArt .sheet { --r: -2.4deg }
.tlBox { position: relative }
.tlBox .poster { width: 100%; height: 100% }
.tlBox canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease }
.tlBox.tlOn canvas { opacity: 1 }
.gHeroArt figcaption { margin-top: 30px; text-align: center; font: 900 17px var(--f); color: var(--on-soft) }
/* a note in pencil: written beside the sheet, its arrow running in to the part of the drawing it's about (pages.json
   "notes": [words, x %, y %, side]: the arrow's tip is at x, y on the drawing).The words are white, like all the field's type;
   the arrow runs mostly over the paper, so it stays graphite */
.pnote { position: absolute; z-index: 2; top: var(--y); height: 0; color: var(--ink); pointer-events: none }
.pnote.right { left: calc(var(--x) + 2%); right: -34px }
.pnote.left { right: calc(102% - var(--x)); left: -34px }
.pnote svg { position: absolute; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.pnote .shaft { left: 0; top: -10px; width: 100%; height: 28px }
.pnote .head { left: -3px; top: -4px; width: 16px; height: 16px }
.pnote.left svg { transform: scaleX(-1) } .pnote.left .head { left: auto; right: -3px }
.pnote path { vector-effect: non-scaling-stroke }
.pnote svg, .pnote b { opacity: 0; animation: ink .6s ease 1.2s forwards }
.pnote b { position: absolute; top: -24px; width: max-content; max-width: 116px; font: 700 31px/.92 var(--hand); color: var(--on) }
.pnote.right b { left: calc(100% + 8px) } .pnote.left b { right: calc(100% + 8px); text-align: right }
@keyframes ink { to { opacity: 1 } }

/* ── the answer: the whole drawing in one paragraph, the question big beside it (what AI answers and search lift) ── */
.answer { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px clamp(36px, 5vw, 80px); align-items: start; padding-top: 88px }
.answer h2 { font-size: clamp(36px, 4vw, 54px) }
.answer .summary { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.65; color: var(--text); max-width: 62ch; text-wrap: pretty }
.needs { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 22px; font: 800 17px var(--f); color: var(--ink) }
.needs span { position: relative; white-space: nowrap }
.needs span + span::before { content: ""; position: absolute; left: -15px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--w-line, var(--w)) }

/* ── the steps: a big numbered wheel beside the sheet (howto.js turns each step by how far it is from the middle) ── */
.steps { padding-top: 88px }
.stepsHead { max-width: 820px }
.key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 22px; font: 800 18px var(--f); color: var(--ink) }
.key span { width: 28px; height: 5px; border-radius: 3px } .key .kDone { margin-left: 16px }
.kNew { background: var(--w-line, var(--w)) } .kDone { background: #BDBEC0 }
.stepsHead .sub { margin-top: 10px; font-size: 18px }
.viewer { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); margin-top: 40px; align-items: start }
/* the sheet stays level with the step in the middle of the wheel, whatever the drawing's shape (a wide axolotl sat high
   above its words): the stage is a screen tall and centres the sheet on the wheel's middle line, 52% down */
.vStage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 72px }
.vStage .sheet { --r: 1.4deg; padding: 22px }
.vFrame { position: relative }
.vFrame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s ease }
.vFrame img.on { opacity: 1 }
.vInfo { display: flex; align-items: baseline; gap: 14px; margin-top: 30px }
.vNum { font: 900 15px var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--w-text); white-space: nowrap }
.vTitle { font: 900 22px var(--f) }
.vBar { height: 6px; border-radius: 3px; background: var(--line); margin-top: 14px; overflow: hidden }
.vBar i { display: block; height: 100%; background: var(--w-line, var(--w)); border-radius: 3px; transition: width .35s ease }
.vList { list-style: none; display: grid; gap: 14vh; padding-block: 24vh 40vh }
.vStep { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; transform-origin: 0 50%; will-change: transform, opacity; scroll-snap-align: center }
.vStep .num { font: 900 clamp(76px, 7.4vw, 108px)/.82 var(--f); letter-spacing: -.05em; color: var(--w-line, var(--w)); min-width: 1.15em; transition: color .3s }
.vStep:not(.active) .num { color: color-mix(in srgb, var(--w-line, var(--w)) 30%, var(--paper)) }
.vStep .n { display: flex; align-items: center; gap: 12px; font: 800 15px var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--mid) }
.vStep h3 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.04; margin-top: 6px; letter-spacing: -.022em; transition: color .3s }
.vStep:not(.active) h3 { color: #9EA0A5 }
.vStep p.say { color: var(--text); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; margin-top: 14px; max-width: 34ch; transition: opacity .3s }
.vStep:not(.active) p.say, .vStep:not(.active) .note { opacity: .35 }
.vStep img { display: none }
/* the last one: the finished drawing, nothing faded */
.vDone .num svg { width: .9em; height: .82em; fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round }
.vDone .again { margin-top: 18px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: 800 18px var(--f); color: var(--ink); text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 6px }
.tag { font: 900 13px var(--f); letter-spacing: .06em; color: #fff; background: var(--w-text); padding: 4px 11px; border-radius: 999px; white-space: nowrap }
.vStep p.note { font: 700 27px/1.05 var(--hand); color: var(--w-text); margin-top: 14px; max-width: 30ch; transition: opacity .3s }
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) { html.wheel { scroll-snap-type: y proximity } }
/* on a computer the numeral and the wheel say which step it is; the words stay in the page for a phone and for search */
@media (min-width: 981px) { .vStep .n span, .vInfo { display: none } .vStep .n:not(:has(.tag)) { display: none } .vBar { margin-top: 34px } }

/* ── the world in the app: a second field, its drawings pinned up ── */
.world { margin-top: 120px }
.worldIn { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: center; padding-block: 120px 140px }
.worldText h2 { margin-top: 14px }
.worldText > p:not(.kicker) { margin-top: 20px; max-width: 40ch; font-size: 20px; color: var(--on) }
.store { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px }
.store img { height: 56px; width: auto }
.store span { font: 900 16px var(--f); color: var(--on-soft) }
.prints { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px; padding-top: 14px }
.prints .sheet { transition: transform .25s }
.prints li:hover .sheet { transform: rotate(0deg) translateY(-4px) }
.prints img { aspect-ratio: 4 / 3; object-fit: contain; width: 100% }
.prints span { display: block; font: 700 26px/1 var(--hand); color: var(--ink); padding: 10px 4px 2px; text-align: center }

/* ── tips: numbered, no boxes ── */
.tips { padding-top: 120px }
.tips ol { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 72px; margin-top: 48px }
.tips li { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start }
.tips .num { font: 900 64px/.82 var(--f); letter-spacing: -.05em; color: var(--w-line, var(--w)); min-width: 1.2em }
.tips h3 { font-size: 27px }
.tips p { color: var(--text); font-size: 19px; margin-top: 8px; max-width: 42ch }

/* ── questions ── */
.faq { padding-top: 120px }
.faq > * { max-width: 880px }
.faq h2 { margin-bottom: 18px }
.faq details { border-bottom: 1.5px solid var(--line); padding: 24px 0 }
.faq summary { cursor: pointer; font: 900 23px/1.25 var(--f); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px) }
.faq details p { color: var(--text); margin-top: 12px; max-width: 62ch; font-size: 19px }
.byline { color: var(--mid); font-size: 16px; margin-top: 30px }

/* ── keep drawing: the next guide on its own world's field, then more ── */
.next { margin-top: 140px }
.nextIn { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 5vw, 80px); align-items: center; padding-block: 112px 104px }
.next h2 { margin-top: 14px; font-size: clamp(42px, 5.6vw, 80px); line-height: .95 }
.next h2 a { color: inherit; text-decoration: none }
.next .lede { margin-top: 22px }
.next .go { margin-top: 34px }
.nextArt { display: block; max-width: 460px; justify-self: center; width: 100% }
.nextArt .sheet { --r: 2.2deg; transition: transform .25s }
.nextArt:hover .sheet { transform: rotate(0deg) }
.moreGuides { padding-top: 88px }
.moreGuides h2 { font-size: clamp(30px, 3.2vw, 42px) }
.moreGuides ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 32px }
.moreGuides a { display: block; text-decoration: none; color: var(--ink) }
.tile { display: grid; place-items: center; aspect-ratio: 1; background: var(--field); border-radius: 6px; padding: 14%; overflow: hidden }
.tile .sheet { width: 100%; --r: -2deg; transition: transform .25s; box-shadow: 0 24px 34px -22px rgba(20, 16, 40, .6) }
.moreGuides li:nth-child(even) .tile .sheet { --r: 2deg }
.moreGuides a:hover .tile .sheet { transform: rotate(0deg) scale(1.03) }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain }
.moreGuides b { display: block; font: 900 20px/1.2 var(--f); margin-top: 14px }
.allGuides { margin-top: 36px; font: 800 19px var(--f) }
.allGuides a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 6px }

/* ── the guides directory (/how-to-draw/) ── */
.hubArt .sheet { padding: 14px; --r: 1.8deg }
.how { padding-top: 88px }
.how ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 40px }
.how svg { width: 60px; height: 60px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px }
.how svg .faded { stroke: #BDBEC0 } .how svg .blue { stroke: var(--blue) }
.how h3 { font-size: 27px } .how p { color: var(--text); font-size: 19px; margin-top: 10px }
.guides { padding-top: 120px }
.guidesHead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px }
.filters { display: flex; flex-wrap: wrap; gap: 8px }
.filters button { font: 800 16px var(--f); color: var(--ink); background: transparent; border: 2px solid var(--line); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: background .15s, border-color .15s, color .15s }
.filters button:hover { border-color: var(--ink) }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff }
.gGrid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 48px 28px; margin-top: 44px }
.gGrid li[hidden] { display: none }
.gCard { display: block; text-decoration: none; color: var(--ink) }
.gCard .tile { aspect-ratio: 5 / 4; padding: 11% 14% }
.gCard .sheet { --r: inherit }
.gCard:hover .sheet { transform: rotate(0deg) scale(1.04) }
.gArt { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3 }   /* every sheet the same, the drawing whole inside it */
.gArt img, .gArt canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain }
.gArt canvas { opacity: 0; transition: opacity .25s }
.gCard.tlOn .gArt canvas { opacity: 1 }
.gText { display: grid; gap: 2px; margin-top: 16px }
.gText b { font: 900 22px/1.2 var(--f) }
.gText small { color: var(--mid); font: 700 16px var(--f) }
.app { margin-top: 140px }
.appIn { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 36px; align-items: center; padding-block: 104px }
.appIn > img { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .45) }
.appIn h2 { font-size: clamp(32px, 3.6vw, 48px) }
.appIn p { margin-top: 10px; font-size: 20px; max-width: 52ch; color: var(--on) }
.appIn .badge img { height: 56px; width: auto }

/* ── support, privacy, terms: the title on the brand blue field ── */
.docHead .wrap { padding-block: 72px 112px }
.docHead h1 { font-size: clamp(48px, 6vw, 88px) }
.docHead .sub { margin-top: 18px; font: 800 19px var(--f); color: var(--on-soft) }

/* ── the draw-along: the app's lesson over the page ── */
.da { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(20, 22, 28, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.da[hidden] { display: none }
.daBox { position: relative; background: var(--paper); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, .45) }
#howtoApp { position: absolute; inset: 0; display: flex }
.da.phone.started .daX { display: none }
.da.phone.started .daDone:not([hidden]) ~ .daX { display: block }
.daX { position: fixed; z-index: 51; top: max(16px, env(safe-area-inset-top)); right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); font: 800 24px/44px var(--f); color: var(--ink) }
.daWait, .daDone { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 28px; background: var(--paper) }
.daWait[hidden], .daDone[hidden] { display: none }
.daWait p { color: var(--text); font: 800 19px var(--f); margin-top: 18px }
.pencil { width: 74px; height: 74px; margin-inline: auto; color: var(--w) }
.pencil svg { width: 100%; height: 100% }
.pencil path.line { stroke-dasharray: 160; stroke-dashoffset: 160; animation: sketch 1.6s ease-in-out infinite }
@keyframes sketch { 60%, 100% { stroke-dashoffset: 0 } }
.daDone > div { display: grid; justify-items: center; gap: 12px; max-width: 480px }
.daDone .sheet { width: min(300px, 64vw); --r: -2deg; margin-bottom: 10px }
.daDone h2 { font-size: 44px }
.daDone p { color: var(--text) }
.daDone .store { justify-content: center; margin-top: 8px }
.daDone .store span { color: var(--mid) }
.daDone .nextLink { margin-top: 6px; font: 800 18px var(--f); color: var(--ink) }
.daDone .again { margin-top: 2px; background: none; border: 0; font: 800 16px var(--f); color: var(--mid); cursor: pointer; padding: 8px; text-decoration: underline; text-underline-offset: 4px }

/* ── sizes ── */
@media (min-width: 981px) {
  /* room either side of the sheet for the notes (the left ones also have the gap), the art running on into the margin */
  .gHero .gHeroArt { padding: 0 136px 0 84px; margin-right: calc((100vw - min(1200px, 100vw - 2 * var(--gut))) / -2 + 6px) }
}
@media (max-width: 1240px) and (min-width: 981px) { .gHero .gHeroArt { padding: 0 112px 0 64px } .pnote b { font-size: 27px; max-width: 98px } }
@media (max-width: 980px) {
  .fieldIn, .worldIn, .nextIn { grid-template-columns: 1fr }
  .fieldIn { padding-block: 32px 108px; gap: 44px }
  .gHeroArt { order: -1; max-width: 560px; width: 100%; justify-self: center }
  .pnote { display: none }
  .viewer { grid-template-columns: 1fr; gap: 0 }
  .vStage { display: none }                                  /* a phone or tablet: the list is the guide */
  .vList { padding-block: 0; gap: 64px }
  .vStep { grid-template-columns: 1fr; gap: 0; transform: none !important; opacity: 1 !important; scroll-snap-align: none }
  .vStep .num { font-size: 72px; color: var(--w-line, var(--w)) !important; margin-bottom: 4px }
  .vStep h3 { font-size: 34px; color: var(--ink) !important } .vStep p.say { font-size: 20px; opacity: 1 !important; max-width: 40ch }
  .vStep .note { opacity: 1 !important }
  .vStep img { display: block; width: 100%; margin-top: 22px; background: var(--sheet); padding: 12px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 20px 40px -26px rgba(20, 16, 40, .5) }
  .tips ol { grid-template-columns: 1fr }
  .answer { grid-template-columns: 1fr; padding-top: 64px }
  .moreGuides ul { grid-template-columns: repeat(2, 1fr) }
  .how ol { grid-template-columns: 1fr; gap: 32px }
  .nextArt { order: -1; max-width: 360px }
  .world .prints { max-width: 560px }
}
@media (max-width: 720px) {
  .bar { height: 62px; gap: 16px } .nav { display: none } .get { margin-left: auto; padding: 10px 16px; font-size: 15px }
  .brand { font-size: 19px } .brand img { width: 32px; height: 32px }
  .crumbs { font-size: 14px; padding-block: 2px 12px }
  .crumbs span, .crumbs i:last-of-type { display: none }   /* the page's own name: it re-wrapped the trail as the font arrived, and the band below jumped */
  .kicker { font-size: 17px }
  .sheet { padding: 16px } .sheet.small { padding: 8px }
  .ctas { gap: 16px 22px; margin-top: 32px }
  .go { min-height: 60px; font-size: 18px; padding-right: 24px } .go i { width: 42px; height: 42px }
  .steps { padding-top: 64px }
  .key { font-size: 16px }
  .world { margin-top: 96px } .worldIn { padding-block: 88px 108px } .prints { gap: 28px 18px } .prints span { font-size: 22px }
  .tips, .faq, .guides { padding-top: 96px }
  .tips .num { font-size: 52px } .tips h3 { font-size: 24px }
  .faq summary { font-size: 20px }
  .next { margin-top: 104px } .nextIn { padding-block: 88px 80px; gap: 36px }
  .moreGuides ul { gap: 28px 16px } .moreGuides b { font-size: 17px }
  .gGrid { grid-template-columns: repeat(2, 1fr); gap: 32px 14px } .gText b { font-size: 18px } .gText small { font-size: 14.5px }
  .appIn { grid-template-columns: auto 1fr; padding-block: 80px } .appIn > img { width: 72px; height: 72px; border-radius: 18px } .appIn .badge { grid-column: 1 / -1 }
  footer.site { margin-top: 104px }
  .foot { grid-template-columns: 1fr }
  .daBox { border-radius: 0 }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important }
  .ul path { stroke-dashoffset: 0 } .pnote svg, .pnote b { opacity: 1 }
}