/* PADVAN tokens (locked 2026-09-21, ui-ux-pro-max consulted: Caveat handwriting pairing kept, claymorphism rejected, the art is flat pen)
   paper #F8F5EF  rule #BFDDF1 (2px)  margin #E9A197  ink navy #1B2470  ink-soft #5D74C0
   marker green #6DBE3A / lime #B5D63A  rust #D9822B  cone #9C5A34  yellow #EFD24A  desk #2E3340
   type: Caveat Brush (title, digits) . Caveat 500/700 (writing) . Reenie Beanie (margin scribbles) . Courier Prime 700 (plate, CA)
   spacing: 4 8 12 16 24 40 64 px, rule pitch --rp (= 82.1 * scene scale). radius: 0-3px (torn paper). motion idiom: pen draw-in .5s + line boil at 6 fps */
@font-face { font-family: "Caveat Brush"; src: url("../fonts/caveat-brush-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Reenie Beanie"; src: url("../fonts/reenie-beanie-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #F8F5EF; --rule: #BFDDF1; --margin: #E9A197; --ink: #1B2470; --ink-soft: #5D74C0;
  --green: #6DBE3A; --lime: #B5D63A; --rust: #D9822B; --cone: #9C5A34; --yellow: #EFD24A; --desk: #2E3340;
  --s: .8; --pk: 1; --x0: 36; --y0: 125; --y1: 985; --rp: 66px; --r0: 20px; --gut: 108px;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --brush: "Caveat Brush", "Caveat", cursive;
  --scrawl: "Reenie Beanie", "Caveat", cursive;
  --mono: "Courier Prime", "Courier New", monospace;
}
* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--desk); }
body { font-family: var(--hand); color: var(--ink); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }

/* ---------- ink primitives ---------- */
.ink { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.st { fill: none; }
.fr { visibility: hidden; }
.fr.f0 { visibility: visible; }
.boil .fr.f0 { animation: bo0 .5s steps(1, end) infinite; }
.boil .fr.f1 { animation: bo1 .5s steps(1, end) infinite; }
.boil .fr.f2 { animation: bo2 .5s steps(1, end) infinite; }
@keyframes bo0 { 0% { visibility: visible; } 33.3% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes bo1 { 0% { visibility: hidden; } 33.3% { visibility: visible; } 66.6% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes bo2 { 0%, 66.6% { visibility: hidden; } 66.7% { visibility: visible; } 100% { visibility: visible; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

/* ---------- the book ---------- */
.book { position: fixed; inset: 0; perspective: 2600px; perspective-origin: 20% 50%; overflow: hidden; }
.sheet {
  position: absolute; inset: 0; overflow: hidden; transform-origin: 0 50%;
  background-color: var(--paper);
  background-image: linear-gradient(to bottom, transparent calc(var(--rp) - 2px), var(--rule) calc(var(--rp) - 2px));
  background-size: 100% var(--rp); background-position: 0 var(--r0);
  box-shadow: inset 0 0 110px rgba(150, 120, 70, .13);
  backface-visibility: hidden; will-change: transform;
  transition: transform .95s cubic-bezier(.55, .06, .25, 1), visibility 0s linear 0s;
}
.s1 { z-index: 3; } .s2 { z-index: 2; } .s3 { z-index: 1; }
.sheet.turned { transform: rotateY(-172deg); visibility: hidden; transition: transform .95s cubic-bezier(.55, .06, .25, 1), visibility 0s linear .95s; }
.sheet::before { /* torn perforation edge */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 22px; z-index: 30; pointer-events: none;
  background: radial-gradient(circle at 0 22px, var(--desk) 0 8px, rgba(46, 51, 64, .35) 8.5px 10.5px, transparent 11px) 0 0 / 22px 44px repeat-y;
}
.sheet::after { content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .95s; background: linear-gradient(90deg, rgba(20, 20, 40, .35), rgba(20, 20, 40, 0) 70%); }
.sheet.turned::after { opacity: 1; }
.margin-line { position: absolute; left: 86px; top: 0; bottom: 0; width: 2px; background: var(--margin); box-shadow: 3px 0 0 rgba(233, 161, 151, .35); pointer-events: none; }

/* ---------- sheet 1: hero ---------- */
.hero { position: absolute; left: var(--gut); top: calc(var(--r0) + var(--rp)); width: var(--hw, 430px); z-index: 5; }
.title {
  margin: 0; font: 400 calc(var(--rp) * 1.75)/calc(var(--rp) * 2) var(--brush); letter-spacing: .01em; color: var(--green);
  -webkit-text-stroke: 2.4px var(--ink); paint-order: stroke fill; transform: rotate(-2.2deg); transform-origin: 0 60%;
  text-shadow: 3px 3px 0 rgba(181, 214, 58, .8);
}
.lead { margin: 0; font: 700 calc(var(--rp) * .5)/var(--rp) var(--hand); color: var(--ink); }
.hint { margin: 0; font: 500 calc(var(--rp) * .42)/var(--rp) var(--hand); color: var(--rust); transform: rotate(-1deg); }
.tally { margin: 0; display: flex; gap: 28px; align-items: flex-end; min-height: calc(var(--rp) * 1.6); }
.tally div { display: flex; flex-direction: column-reverse; }
.tally dt { font: 400 calc(var(--rp) * .34)/1 var(--scrawl); color: var(--rust); }
.tally dd { margin: 0; font: 400 calc(var(--rp) * .95)/1 var(--brush); color: var(--ink); min-width: 1ch; }
.tally #c-orders { color: var(--green); -webkit-text-stroke: 1.6px var(--ink); paint-order: stroke fill; }
.status { margin: 0; font: 500 calc(var(--rp) * .4)/var(--rp) var(--hand); display: flex; align-items: center; gap: 10px; }
.dot { width: .55em; height: .55em; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--ink); display: inline-block; transform: translateY(2px); }
.note { margin: 0; min-height: calc(var(--rp) * .9); font: 700 calc(var(--rp) * .4)/1.1 var(--hand); color: var(--rust); opacity: 0; transform: translateY(6px) rotate(-1deg); transition: opacity .25s, transform .25s; }
.note.on { opacity: 1; transform: none; }

/* ---------- stage / scene ---------- */
.stage { position: absolute; right: 0; bottom: 0; z-index: 2; }
.view { position: relative; overflow: hidden; width: calc((1024 - var(--x0)) * var(--s) * 1px); height: calc((var(--y1) - var(--y0)) * var(--s) * 1px); }
.scene { position: absolute; display: block; overflow: hidden; left: calc(var(--x0) * var(--s) * -1px); top: calc(var(--y0) * var(--s) * -1px); width: calc(1024 * var(--s) * 1px); height: calc(1024 * var(--s) * 1px); }
#trace { opacity: .85; }
#trace .st, #trace path { stroke-linecap: round; }
.drawing #trace .st { stroke-dasharray: 1.01; stroke-dashoffset: 1.01; animation: draw .5s ease-out forwards; animation-delay: calc(.15s + var(--i) * .13s); }
.drawing #reveal .all { opacity: 0; animation: fadein .5s 3.4s forwards; }
.drawing #reveal .scr { stroke-dasharray: 1.01; stroke-dashoffset: 1.01; animation: draw 1.9s linear 1.2s forwards; }
.drawing .screen, .drawing #sprouts, .drawing #lamp, .drawing #steam, .drawing .cloud { opacity: 0; animation: fadein .5s 3.1s forwards; }
.lamp { opacity: .16; mix-blend-mode: multiply; }
.boil .lamp { animation: lamp 2.1s steps(1, end) infinite; }
@keyframes lamp { 0% { opacity: .1; } 18% { opacity: .26; } 30% { opacity: .14; } 52% { opacity: .3; } 60% { opacity: .16; } 80% { opacity: .22; } }
.steam { opacity: .4; }
.boil .steam { animation: steam 3.8s ease-in-out infinite; }
.boil .steam.s2 { animation-delay: 1.9s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: .6; } 100% { opacity: 0; transform: translateY(-30px); } }

/* cards */
.card { cursor: pointer; outline: none; -webkit-user-select: none; user-select: none; }
.card .hit, #slot .hit { fill: transparent; stroke: transparent; pointer-events: all; }
.card:focus-visible .hit, #slot:focus-visible .hit { stroke: var(--rust); stroke-width: 2.5; stroke-dasharray: 5 3; }
#slot { cursor: pointer; outline: none; }
.card .face { transform-box: fill-box; transform-origin: 50% 60%; transition: transform .15s; }
.card:hover .face { transform: translateY(-2px) rotate(-1.2deg); }
.card:active .face { transform: scale(.94); }
.card .bar { transform-box: fill-box; transform-origin: left center; animation: barfill var(--dur) linear infinite; animation-delay: var(--dl); }
@keyframes barfill { 0% { transform: scaleX(.04); } 88% { transform: scaleX(1); } 92% { transform: scaleX(1); } 92.1% { transform: scaleX(.04); } 100% { transform: scaleX(.04); } }
.card .tick { fill: none; stroke: #3E9A24; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1.01; stroke-dashoffset: 1.01; opacity: 0; pointer-events: none; }
.card.ordered .tick { animation: tick 1s ease-out forwards; }
@keyframes tick { 0% { stroke-dashoffset: 1.01; opacity: 1; } 35% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.card.ordered .face { animation: cardpress .42s ease-out; }
@keyframes cardpress { 0% { transform: scale(1); } 30% { transform: scale(.88) rotate(-2deg); } 65% { transform: scale(1.07) rotate(1deg); } 100% { transform: scale(1); } }
#slot.fire .hit { animation: slotfire .5s ease-out; }
@keyframes slotfire { 0% { fill: rgba(239, 210, 74, .8); } 100% { fill: rgba(239, 210, 74, 0); } }

/* people */
.person { transition: transform var(--t, .8s) linear; }
.person .walk, .person .hold { display: none; }
.person.walking .walk { display: inline; }
.person.walking .stand { display: none; }
.person.has-bag .hold { display: inline; }
.person .bubble { transition: opacity .3s; }
.person.served .bubble { opacity: 0; }
.draw-in .st { stroke-dasharray: 1.01; stroke-dashoffset: 1.01; animation: draw .45s ease-out forwards; animation-delay: calc(var(--i) * .07s); }
.bagfly { transition: transform var(--t, .55s) cubic-bezier(.35, 0, .65, 1); }

/* ---------- number plate = CA ---------- */
.plate {
  position: absolute; z-index: 6; padding: 0; border: 0; cursor: pointer; color: var(--ink); text-align: center;
  left: calc((888 - 188 * var(--pk) - var(--x0)) * var(--s) * 1px); top: calc((676 - 80 * var(--pk) - var(--y0)) * var(--s) * 1px);
  width: calc(188 * var(--pk) * var(--s) * 1px); height: calc(80 * var(--pk) * var(--s) * 1px);
  font: 700 calc(17 * var(--pk) * var(--s) * 1px)/1.16 var(--mono);
  background: repeating-linear-gradient(112deg, #F3E783 0 7px, #ECDD6C 7px 10px); border-radius: 3px; transform: rotate(-1.2deg);
  -webkit-user-select: text; user-select: text;
}
.plate:focus-visible { outline: 3px dashed var(--rust); outline-offset: 3px; }
.plate-frame, .scrib { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ca { position: absolute; inset: calc(11 * var(--pk) * var(--s) * 1px) calc(12 * var(--pk) * var(--s) * 1px); display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; letter-spacing: 0; }
.scrib path { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1.01; stroke-dashoffset: 1.01; opacity: 0; transition: opacity .3s; }
.plate.scribbling .scrib path { opacity: 1; animation: draw .42s linear forwards; }
.plate.scribbling .ca { opacity: .3; }
.plate.rewrite .ca { animation: rewrite .7s steps(14, end) both; }
@keyframes rewrite { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.copied {
  position: absolute; left: 50%; top: calc(100% + 6px); white-space: nowrap; font: 700 calc(30 * var(--s) * 1px)/1 var(--hand); color: var(--rust);
  transform: translateX(-50%) rotate(-3deg) scale(.6); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.copied::before { content: ""; position: absolute; left: 50%; top: -14px; width: 2px; height: 12px; background: var(--rust); transform: rotate(8deg); }
.plate.is-copied .copied { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); }

/* ---------- chrome: links + corners + page number ---------- */
.tools { position: fixed; top: 10px; right: 14px; z-index: 60; display: flex; align-items: flex-start; gap: 6px; }
.tool { position: relative; display: block; text-decoration: none; transition: transform .18s; }
.tool img { display: block; width: 62px; height: 62px; }
.tool-buy img { width: 68px; height: 68px; }
.tool:hover, .tool:focus-visible { transform: rotate(-6deg) scale(1.08); outline: none; }
.tool:focus-visible img { filter: drop-shadow(0 0 0 var(--rust)) drop-shadow(0 0 3px var(--rust)); }
.tool .cap { position: absolute; left: 50%; top: 100%; margin-top: -8px; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; font: 400 24px/1 var(--scrawl); color: var(--rust); }
.corner { position: fixed; bottom: 0; z-index: 70; width: 98px; height: 98px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.corner svg { width: 100%; height: 100%; display: block; overflow: visible; }
.corner.next { right: 0; transform-origin: 100% 100%; }
.corner.prev { left: 0; transform: scaleX(-1); transform-origin: 50% 100%; }
.corner.next:hover, .corner.next:focus-visible { transform: scale(1.22); outline: none; }
.corner.prev:hover, .corner.prev:focus-visible { transform: scaleX(-1.22) scaleY(1.22); outline: none; }
.corner.next:active { transform: scale(.94); }

/* ---------- sheet 2: order pad ---------- */
.pad { position: absolute; inset: 0; padding: calc(var(--r0) + var(--rp) * .2) 40px 0 var(--gut); overflow-y: auto; }
.h2 { margin: 0; font: 400 calc(var(--rp) * 1.2)/calc(var(--rp) * 1.5) var(--brush); color: var(--green); -webkit-text-stroke: 1.8px var(--ink); paint-order: stroke fill; transform: rotate(-1.6deg); transform-origin: 0 50%; text-shadow: 2px 2px 0 rgba(181, 214, 58, .8); }
.cols { display: grid; grid-template-columns: minmax(230px, 340px) 1fr; gap: 40px; align-items: start; margin-top: calc(var(--rp) * .3); padding-bottom: 130px; }
.lab { margin: 0; font: 400 calc(var(--rp) * .4)/1 var(--scrawl); color: var(--rust); }
.tallymarks svg { width: 100%; height: auto; display: block; }
.big { margin: 0; font: 400 calc(var(--rp) * 1.25)/1 var(--brush); color: var(--ink); }
.big small { font: 500 calc(var(--rp) * .4)/1 var(--hand); }
.fav { margin: 8px 0 0; font: 700 calc(var(--rp) * .4)/1.2 var(--hand); }
.fav b { color: var(--rust); }
.keylab { margin-top: calc(var(--rp) * .5); }
.menukey { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
.mk { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; }
.mk-g { grid-row: 1 / 3; width: 34px; height: 34px; } .mk-g svg { width: 100%; height: 100%; display: block; }
.mk-n { font: 700 21px/1 var(--hand); } .mk-c { font: 400 24px/1 var(--brush); color: var(--rust); }
.empty { margin: 0; padding-top: 16px; font: 500 calc(var(--rp) * .5)/var(--rp) var(--hand); max-width: 22em; }
.slips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 22px 18px; }
.slip {
  position: relative; display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 10px 12px 18px;
  background: #FFFDF2; border: 1.6px solid var(--ink); border-bottom: 0; transform: rotate(var(--rot)); animation: slipin .5s cubic-bezier(.3, 1.4, .5, 1) both;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 94% 100%, 88% calc(100% - 7px), 82% 100%, 76% calc(100% - 7px), 70% 100%, 64% calc(100% - 7px), 58% 100%, 52% calc(100% - 7px), 46% 100%, 40% calc(100% - 7px), 34% 100%, 28% calc(100% - 7px), 22% 100%, 16% calc(100% - 7px), 10% 100%, 5% calc(100% - 7px), 0 calc(100% - 3px));
}
@keyframes slipin { from { opacity: 0; transform: rotate(var(--rot)) translateY(-14px) scale(.9); } }
.slip-glyph { grid-row: 1 / 3; width: 44px; height: 44px; }
.slip-glyph svg { width: 100%; height: 100%; display: block; }
.slip-n { font: 700 14px/1 var(--mono); color: var(--ink-soft); text-align: right; grid-column: 3; }
.slip-name { font: 700 30px/1 var(--hand); grid-column: 2; grid-row: 1; }
.slip-t { font: 400 20px/1 var(--scrawl); color: var(--rust); grid-column: 2 / 4; grid-row: 2; }

/* ---------- sheet 3: margin ---------- */
.marg { position: absolute; inset: 0; padding: calc(var(--r0) + var(--rp) * .2) 40px 0 var(--gut); pointer-events: none; }
.marg .h2 { display: inline-block; }
.strip { position: absolute; right: 90px; top: calc(var(--r0) + var(--rp) * 1.45); width: min(52vw, 740px); margin: 0; transform: rotate(1.4deg); }
.strip img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; box-shadow: 0 2px 0 rgba(27, 36, 112, .25); }
.tape { position: absolute; width: 96px; height: 28px; background: rgba(233, 222, 150, .72); box-shadow: 0 0 0 1px rgba(150, 130, 60, .25); }
.tape.t1 { left: -30px; top: -8px; transform: rotate(-38deg); } .tape.t2 { right: -30px; bottom: -6px; transform: rotate(-36deg); }
.mnote { position: absolute; margin: 0; font: 400 calc(var(--rp) * .5)/1.1 var(--scrawl); color: var(--rust); }
.m1 { left: var(--gut); top: calc(var(--r0) + var(--rp) * 2.4); max-width: 260px; transform: rotate(-3deg); }
.m2 { right: 110px; top: calc(var(--r0) + var(--rp) * 5.5); transform: rotate(2deg); }
.m3 { left: calc(var(--gut) + 30px); bottom: calc(var(--rp) * 1.9); transform: rotate(-1.5deg); }
.pens { position: absolute; left: calc(var(--gut) + 20px); bottom: 22px; display: flex; align-items: center; gap: 14px; z-index: 5; pointer-events: auto; }
.pen { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 6px; border: 0; background: none; cursor: pointer; font: 400 24px/1 var(--scrawl); color: var(--ink); transition: transform .15s; }
.pen svg { width: 52px; height: 52px; display: block; }
.pen:hover { transform: rotate(-4deg); }
.pen.on { transform: translateY(-8px) rotate(-3deg); color: var(--rust); text-decoration: underline wavy var(--rust) 1.5px; text-underline-offset: 3px; }
.pen:focus-visible { outline: 2px dashed var(--rust); outline-offset: 2px; }
.pen.wipe { padding: 14px 10px 4px; }
.strokes { margin: 0 0 0 10px; font: 500 24px/1 var(--hand); }
.strokes span { font-family: var(--brush); font-size: 30px; }
.doodle { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; touch-action: none; cursor: crosshair; pointer-events: auto; }


/* ---------- small screens ---------- */
@media (max-width: 860px) {
  :root { --gut: 52px; }
  .cloud { display: none; }
  .margin-line { left: 38px; }
  .hero { position: absolute; left: var(--gut); right: 100px; top: 52px; width: auto; }
  .title { font-size: 60px; line-height: 64px; -webkit-text-stroke-width: 2px; }
  .lead { font-size: 23px; line-height: 27px; margin-top: 2px; }
  .hint { display: none; }
  .tally { gap: 16px; min-height: 0; margin-top: 10px; }
  .tally dt { font-size: 19px; } .tally dd { font-size: 44px; }
  .status { font-size: 21px; line-height: 26px; margin-top: 2px; }
  .note { position: absolute; left: 0; top: calc(100% + 4px); font-size: 22px; min-height: 0; white-space: nowrap; }
  .tools { top: 8px; right: 8px; gap: 2px; }
  .tool img { width: 46px; height: 46px; } .tool-buy img { width: 52px; height: 52px; }
  .tool .cap { font-size: 19px; }
  .corner { width: 78px; height: 78px; }
  .pad, .marg { padding-right: 16px; }
  .pad { padding-top: 60px; }
  .h2 { font-size: 46px; line-height: 52px; -webkit-text-stroke-width: 1.5px; }
  .cols { grid-template-columns: 1fr; gap: 14px; padding-bottom: 110px; }
  .tallybox { max-width: 340px; }
  .big { font-size: 56px; }
  .lab, .fav { font-size: 20px; }
  .empty { font-size: 24px; line-height: 28px; }
  .slips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .slip { grid-template-columns: 34px 1fr; padding: 8px 8px 16px; column-gap: 6px; }
  .slip-glyph { width: 34px; height: 34px; }
  .slip-n { display: none; }
  .slip-name { font-size: 24px; } .slip-t { font-size: 17px; grid-column: 2; }
  .marg { padding-top: 60px; }
  .strip { position: absolute; right: 22px; left: 62px; width: auto; top: 136px; }
  .m1 { left: 58px; top: 240px; font-size: 24px; max-width: 200px; }
  .m2 { right: 20px; top: 330px; font-size: 24px; }
  .m3 { left: 60px; bottom: 112px; font-size: 24px; }
  .pens { left: 56px; bottom: 14px; gap: 6px; }
  .pen svg { width: 42px; height: 42px; } .pen { font-size: 20px; padding: 2px 3px; }
  .strokes { font-size: 19px; margin-left: 2px; } .strokes span { font-size: 24px; }
}
@media (max-width: 860px) and (max-height: 700px) { .title { font-size: 50px; line-height: 52px; } .lead { font-size: 20px; line-height: 23px; } .tally dd { font-size: 36px; } }

/* ---------- reduced motion: everything lands at its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.turned { transition: none !important; }
  .sheet::after { transition: none; }
  .card .bar { animation: none; transform: scaleX(var(--p)); }
  .draw-in .st { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .person, .bagfly { transition: none !important; }
  .slip { animation: none; }
  .plate.rewrite .ca { animation: none; }
  .plate.scribbling .scrib path { animation: none; stroke-dashoffset: 0; }
  .card.ordered .face { animation: none; }
  .card.ordered .tick { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .copied { transition: none; }
}