/* Paper Trail kit: the toys' own styles. Load AFTER notes.css.
   Rule for this file: every selector starts with a toy's own class (.ptr, .tear-stage, .ims, .emo,
   .fc, .spoiler, .fd, .wallbox, .pile, .sn-back) or a class the toy's script adds (.dusting, .dusted),
   so nothing here can restyle the page around it. Keyframe names carry the toy's prefix for the same reason.
   The extra voices' styles live in voices.css (not loaded until Phase 3). */

/* screen-reader-only text */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ================= dust.js: a word turning to dust ================= */
/* while the grains fly, they stand in for the letters, so the real glyphs go invisible */
.dusting { color: transparent; }
/* afterwards only the hollow outline is left */
.dusted { color: transparent; -webkit-text-stroke: max(1px, .012em) rgba(255,255,255,.6); animation: dust-ghost .8s ease both; }
@keyframes dust-ghost { from { -webkit-text-stroke-color: transparent; } }
/* hold to rewind: a VHS-style label while the tape runs back */
.dust-rew { position: absolute; left: 0; top: -22px; font: 600 12px/1 var(--mono); letter-spacing: .12em; color: #fff; opacity: 0; pointer-events: none; }
.rewinding .dust-rew { opacity: 1; animation: dust-blink 1s steps(2) infinite; }
@keyframes dust-blink { 50% { opacity: .25; } }

/* ================= tear.js: the card machine ================= */
/* touch-action: the script decides per touch (paper, ball or fan = no scroll; anywhere else = the page scrolls) */
.tear-stage { position: relative; height: clamp(440px, calc(100svh - 230px), 560px);   /* printer, bin and floor all fit on the first screen */ touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tear-cv { position: absolute; pointer-events: none; z-index: 3; }   /* the stage plus a margin; tear.js sizes and places it */
.tear-hit { position: absolute; inset: 0; z-index: 3; }
.tear-hit.grab { cursor: grabbing; }
.tear-stage .pr { position: absolute; left: 50%; top: 6px; width: 268px; height: 64px; margin-left: -134px; z-index: 5; border-radius: 14px 14px 5px 5px;
  background: linear-gradient(#2c2c2c, #191919 70%, #121212); box-shadow: 0 1px 0 #444 inset, 0 -1px 0 #000 inset, 0 22px 34px rgba(0,0,0,.7); }
.tear-stage .pr-lbl { position: absolute; left: 18px; top: 14px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9a9a9a; }
.tear-stage .pr-led { position: absolute; right: 20px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #333; }
.tear-stage .pr.busy .pr-led { background: var(--accent); box-shadow: 0 0 6px 1px rgba(255,59,48,.7); }
.tear-stage .pr.busy { animation: pr-judder .09s linear infinite; }
@keyframes pr-judder { 50% { transform: translateY(.7px); } }
/* the slot the paper comes out of, a dark lip just above the teeth */
.tear-stage .pr-slot { position: absolute; left: 22px; right: 22px; bottom: 6px; height: 5px; border-radius: 3px; background: #050505; box-shadow: 0 1px 0 #333; }
/* metal tear bar on the underside of the slot, teeth pointing down at the paper */
.tear-stage .teeth { position: absolute; left: 50%; top: 67px; width: 236px; margin-left: -118px; height: 10px; z-index: 6; pointer-events: none;
  background: linear-gradient(#cfcfcf, #8d8d8d) top/100% 3px no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) top/100% 3px no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 3px/8px 7px repeat-x;
  mask: linear-gradient(#000 0 0) top/100% 3px no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 3px/8px 7px repeat-x;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.7)); }
.tear-stage .teeth::before { content: ""; position: absolute; inset: 3px 0 0; background: linear-gradient(90deg, #8a8a8a, #d6d6d6 30%, #9a9a9a 55%, #e2e2e2 80%, #8a8a8a); }
.tear-stage .hint { position: absolute; left: 70px; right: 110px; bottom: 16px; margin: 0; text-align: center; font: 500 11.5px/1.4 var(--mono); color: var(--gray); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: opacity .4s; }
.tear-stage .hint.gone { opacity: 0; }
/* the score lives under the stage as plain text, so it never sits on top of the printer */
.tear-score { margin: 0; font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.tear-score b { display: inline-block; color: var(--text); }

/* ================= sticky.js: the wall, Cascade layout ================= */
.wallbox { position: relative; overflow-x: clip; padding-bottom: 44px; }   /* folded flaps sit off-note; keep them from widening the page */
.shelfs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 26px 32px; }
.pile { position: relative; list-style: none; margin: 0; padding: 0; height: 340px; }
.pile .sticky { position: absolute; width: min(176px, 60%); }
.pile .sn .n-title { font-size: 14px; }
/* newest top-right, each older note one step down and left, tucked behind */
.pile .sticky:nth-child(1) { right: 2%; top: 0; }
.pile .sticky:nth-child(2) { right: 20%; top: 24%; }
.pile .sticky:nth-child(3) { right: 38%; top: 48%; }
/* the newest sits proud of the wall; older ones lie flatter and have faded a little */
.pile .sticky:nth-child(1) .sn { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 16px 18px rgba(0,0,0,.6)); }
.pile .sticky:nth-child(n+2) .sn-paper { filter: saturate(.8) brightness(.96); }
.pile .sticky:nth-child(3) .sn-paper { filter: saturate(.65) brightness(.92) sepia(.12); }
/* slap on: drops from slightly above, lands, settles. Oldest first, newest last. Only when scripts run, so no-JS readers see every note */
.js .shelfs .sticky { opacity: 0; }
.js .shelfs.on .sticky { animation: wall-slap .5s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc((2 - var(--i)) * .16s); }
@keyframes wall-slap { from { opacity: 0; transform: translateY(-18px) scale(1.08); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
/* clear the wall: notes let go and flutter down out of the board; the line painted behind them shows */
.wallbox.cleared, .wallbox.back { overflow: clip; }
.wallbox.cleared .shelfs .sticky, .wallbox.back .shelfs .sticky { opacity: 1; }
.wallbox.cleared .shelfs .sticky { animation: wall-letgo 1s cubic-bezier(.5,0,.9,.55) both; animation-delay: calc(var(--k) * .12s); pointer-events: none; }
.wallbox.back .shelfs .sticky { animation: wall-putback .7s steps(9) both; animation-delay: calc((8 - var(--k)) * .06s); }
@keyframes wall-letgo { 0% { transform: none; } 18% { transform: translateY(-10px) rotate(calc(var(--fr) * -.15)); } 100% { transform: translate(var(--fx), 1100px) rotate(var(--fr)); opacity: 1; } }
@keyframes wall-putback { from { transform: translate(var(--fx), 1100px) rotate(var(--fr)); } to { transform: none; } }
.wallbox .wall-said { position: absolute; z-index: 0; inset: 70px 24px 60px; display: grid; place-items: center; margin: 0; text-align: center; font: 400 clamp(26px, 4vw, 44px)/1.1 var(--font-display); text-transform: uppercase; color: rgba(242,238,227,.9); opacity: 0; pointer-events: none; transition: opacity .5s; }
.wallbox.cleared .wall-said { opacity: 1; transition-delay: 1.1s; }
.wallbox .shelf-head { transition: opacity .4s; } .wallbox.cleared .shelf-head { opacity: 0; }   /* the empty wall is just the message */
.wallbox .wall-clear { position: absolute; z-index: 2; right: 0; bottom: 0; min-height: 44px; appearance: none; border: 0; background: none; padding: 10px 0 10px 12px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); cursor: pointer; }
.wallbox .wall-clear:hover, .wallbox .wall-clear:focus-visible { color: var(--text); }
/* the message on the back of the paper. The fold mirrors the paper, so the text is pre-mirrored the same way and lands reading along the crease */
.sn-back { position: absolute; top: 78%; font: 700 14px/1 'Caveat', cursive; color: rgba(40,36,30,.75); white-space: nowrap; pointer-events: none; }
.sn-back.l { left: 22%; transform: translate(-50%, -50%) rotate(45deg) scaleY(-1); }
.sn-back.r { left: 78%; transform: translate(-50%, -50%) rotate(-45deg) scaleY(-1); }

/* ================= printer.js: the bill that prints as you read ================= */
.ptr { position: relative; height: 100%; }
.ptr-body { position: absolute; left: 0; right: 0; top: 14px; height: 74px; z-index: 3; border-radius: 12px 12px 5px 5px;
  background: linear-gradient(#2c2c2c, #191919 70%, #121212); box-shadow: 0 1px 0 #444 inset, 0 18px 30px rgba(0,0,0,.7); }
.ptr-lbl { position: absolute; left: 16px; top: 14px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9a9a9a; }
.ptr-led { position: absolute; right: 16px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #333; }
.ptr-lcd { position: absolute; left: 16px; top: 34px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; color: #ff8a80; }
.ptr-slot { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 5px; border-radius: 3px; background: #050505; box-shadow: 0 1px 0 #333; }
.ptr-body.busy { animation: pr-judder .09s linear infinite; }
.ptr-body.busy .ptr-led { background: #4cd964; box-shadow: 0 0 6px 1px rgba(76,217,100,.6); }
.ptr.empty .ptr-led { animation: ptr-blink .8s steps(1) 6; }
.ptr.tearable .ptr-slip, .ptr.torn .ptr-slip { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ptr.tearable .ptr-slip:active { cursor: grabbing; }
.ptr.torn .ptr-end { background: none; }   /* torn, not run out: no end-of-roll stripe */
.ptr.tearable .ptr-lcd { animation: ptr-blink 1.2s steps(1) 4; }
/* torn: the top edge is ragged teeth now, not the clean slot edge */
.ptr.torn .ptr-slip::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px; background: linear-gradient(45deg, var(--paper) 50%, transparent 50%) 0 0/10px 10px repeat-x, linear-gradient(-45deg, var(--paper) 50%, transparent 50%) 0 0/10px 10px repeat-x; }
@keyframes ptr-blink { 50% { background: var(--accent); box-shadow: 0 0 6px 1px rgba(255,59,48,.7); } }
.ptr-mouth { position: absolute; left: 22px; right: 22px; top: 82px; bottom: 0; clip-path: inset(0 -100vmax -100vmax); }   /* only the top edge clips (paper comes out of the slot); the sides stay free */
.ptr-mouth::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; z-index: 2; background: linear-gradient(rgba(0,0,0,.6), transparent); }
.ptr-sway { height: 100%; transform-origin: 50% 0; }
.ptr-slip { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; flex-direction: column-reverse; background: var(--paper) var(--grain); color: var(--ink); font: 500 12px/1.5 var(--mono); padding: 0 14px; }
.ptr-slip p { margin: 0; padding: 6px 0; border-bottom: 1.5px dashed #A9A396; display: flex; justify-content: space-between; gap: 8px; }
.ptr-slip .ptr-meter { border: 0; padding-top: 2px; font-size: 11px; color: #5f5b54; }
.ptr-slip .ptr-tot { font-weight: 600; color: var(--stamp); border-bottom: 2px solid var(--ink); }
/* thermal head: each line burns in left to right, slightly uneven like real thermal ink */
.ptr-slip p { clip-path: inset(0 100% 0 0); }
.ptr-slip p.ink { clip-path: inset(0 0 0 0); transition: clip-path .34s steps(10); }
.ptr-stamp { height: 0; margin: 0 auto; width: max-content; max-width: 100%; text-align: center; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--stamp);
  border: 2px solid transparent; border-radius: 4px; padding: 0 8px; transform: rotate(-6deg); mix-blend-mode: multiply; opacity: 0; }
.ptr-stamp.in { height: auto; padding: 6px 8px; margin: 10px auto 4px; border-color: var(--stamp); opacity: .88; animation: stampin .45s cubic-bezier(.2,1.6,.4,1); }
/* real rolls print a coloured stripe near the end to warn you */
.ptr-end { height: 0; }
.ptr.empty .ptr-end { height: 22px; margin: 0 -14px; background: linear-gradient(transparent 6px, #e9a4b4 6px, #e9a4b4 16px, transparent 16px); }
/* the torn tip of the slip, where the last customer's receipt was ripped off */
.ptr-zig { flex: none; height: 10px; margin: 0 -14px -10px; background: linear-gradient(135deg, var(--paper) 50%, transparent 50%) 0 0/10px 10px repeat-x, linear-gradient(225deg, var(--paper) 50%, transparent 50%) 0 0/10px 10px repeat-x; }
/* a jam waits for a tap; tear-off and reprint get real buttons too, so the toy works without dragging */
.ptr.jammed .ptr-body { cursor: pointer; } .ptr.jammed .ptr-led { background: #ff3b30; animation: ptr-blink .4s steps(1) 12; }
.ptr.jammed .ptr-lcd { animation: ptr-blink 1s steps(1) 5; }
.ptr-btn { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; min-height: 36px; appearance: none; border: 1px solid #3a3a3a; background: #0b0b0b; color: var(--text); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ptr-btn:hover { border-color: #777; }
.ptr-btn[hidden], .ptr-key[hidden] { display: none; }
/* the printer's own key, right of the display: Tear when the bill is done, Clear when it jams */
.ptr-key { position: absolute; right: 12px; top: 28px; min-width: 52px; min-height: 30px; appearance: none; border: 1px solid #444; border-radius: 6px; background: #0d0d0d; color: #ff8a80; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 0 10px; cursor: pointer; box-shadow: 0 2px 0 #000; }
.ptr-key:hover { color: #fff; border-color: #777; }
.ptr-key:active { transform: translateY(1px); box-shadow: none; }

/* ================= chat.js: meme mode as an iMessage thread (dark mode) ================= */
.ims { width: min(375px, 100%); height: 640px; border-radius: 44px; background: #000; border: 1px solid #2a2a2c; box-shadow: 0 0 0 7px #1a1a1c, 0 30px 60px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: #fff; }
.ims-status { display: flex; justify-content: space-between; align-items: center; padding: 16px 28px 6px; font-size: 15px; color: #fff; }
.ims-head { display: grid; grid-template-columns: 40px 1fr 40px; justify-items: center; align-items: center; padding: 2px 10px 8px; background: rgba(28,28,30,.92); border-bottom: .5px solid #38383a; }
.ims-back { justify-self: start; color: #0A84FF; font-size: 34px; line-height: .8; }
.ims-av { grid-column: 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 500; background: linear-gradient(#a5abb8, #858994); }
.ims-name { grid-column: 2; font-size: 11.5px; color: #e5e5ea; margin-top: 4px; }
.ims-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 12px; scrollbar-width: none; }
.ims-time { text-align: center; font-size: 11px; color: #8e8e93; margin: 4px 0 10px; } .ims-time b { font-weight: 600; }
.ims .b { position: relative; max-width: 74%; padding: 7px 12px 8px; border-radius: 18px; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ims .b.gap { margin-top: 10px; }
.ims .b.me { align-self: flex-end; background: #0A6CDB; }   /* a shade under iMessage blue, so white text clears 4.5:1 */
.ims .b.them { align-self: flex-start; background: #26252A; transform-origin: 0 100%; animation: ims-popin .32s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes ims-popin { from { transform: scale(.4); opacity: 0; } }
/* the classic tail: a coloured curl, then a page-coloured cut-out that shapes it */
.ims .b.tail::before, .ims .b.tail::after { content: ""; position: absolute; bottom: 0; height: 20px; }
.ims .b.me.tail::before { right: -7px; width: 20px; background: #0A6CDB; border-bottom-left-radius: 16px 14px; }
.ims .b.me.tail::after { right: -26px; width: 26px; background: #000; border-bottom-left-radius: 10px; }
.ims .b.them.tail::before { left: -7px; width: 20px; background: #26252A; border-bottom-right-radius: 16px 14px; }
.ims .b.them.tail::after { left: -26px; width: 26px; background: #000; border-bottom-right-radius: 10px; }
.ims .b.gif { padding: 0; background: none; } .ims .b.gif::before, .ims .b.gif::after { display: none; }
.ims .b.gif img { display: block; width: 200px; height: auto; min-height: 120px; border-radius: 18px; background: #1c1c1e; }
.ims .b.dots { display: flex; gap: 4px; padding: 12px 14px; }
.ims .b.dots i { width: 8px; height: 8px; border-radius: 50%; background: #8e8e93; animation: ims-dot 1.2s infinite; }
.ims .b.dots i:nth-child(2) { animation-delay: .2s; } .ims .b.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ims-dot { 30% { opacity: 1; transform: translateY(-1px); } 0%, 60%, 100% { opacity: .45; } }
.ims-receipt { align-self: flex-end; margin: 3px 4px 0; font-size: 11px; color: #8e8e93; }
.ims-tap { position: absolute; top: -18px; left: -14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; cursor: pointer;
  background: #3a3a3c; border: 2px solid #000; animation: ims-tapin .4s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes ims-tapin { from { transform: scale(0); } }
.ims .b.them .ims-tap { left: auto; right: -14px; background: #0A6CDB; }     /* your reaction on their bubble sits top-right, in blue */
.ims-tap.pop { animation: ims-tappop .26s ease-in forwards; }
@keyframes ims-tappop { 35% { transform: scale(1.35); } to { transform: scale(0); opacity: 0; } }
.ims-pick { position: absolute; z-index: 3; bottom: calc(100% + 8px); display: flex; gap: 2px; padding: 4px 6px; border-radius: 22px; background: #2c2c2e; box-shadow: 0 6px 18px rgba(0,0,0,.5); animation: ims-tapin .25s cubic-bezier(.3,1.5,.5,1) both; }
.ims .b.me .ims-pick { right: 0; transform-origin: 90% 100%; } .ims .b.them .ims-pick { left: 0; transform-origin: 10% 100%; }
.ims-pick button { appearance: none; border: 0; background: none; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer; }
.ims-pick button:hover, .ims-pick button:focus-visible { background: #3a3a3c; }
.ims-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 26px; }
.ims-plus { width: 32px; height: 32px; border-radius: 50%; background: #2c2c2e; color: #aeaeb2; display: grid; place-items: center; font-size: 22px; font-weight: 300; }
.ims-field { flex: 1; position: relative; min-height: 34px; border: 1px solid #3a3a3c; border-radius: 18px; padding: 7px 40px 7px 12px; font-size: 15.5px; line-height: 1.25; }
.ims-ph { color: #8e8e93; } .ims-field.typing .ims-ph { display: none; }
.ims-send { position: absolute; right: 4px; bottom: 4px; width: 26px; height: 26px; border-radius: 50%; background: #0A84FF; display: grid; place-items: center; font-size: 15px; font-weight: 700;
  transform: scale(0); transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.ims-field.typing .ims-send { transform: scale(1); }
.ims-field.ready .ims-send { background: #409cff; }

/* ================= emoji.js: the post in emoji, tap a line to decode ================= */
.emo-count { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin: 0 0 18px; }
.emo-count b { display: inline-block; color: var(--text); } .emo.all .emo-count span { display: none; }
.emo-line { position: relative; margin: 0 0 6px; padding: 10px 52px 10px 12px; border-radius: 10px; font-size: 26px; line-height: 2.1; cursor: pointer; transition: background .2s; }
.emo-line:hover { background: #111; } .emo-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.emo-line ruby { ruby-position: under; ruby-align: center; margin: 0 .08em; }
/* closed, the words take no room so the emoji sit tight; decoding grows them, the emoji shuffle apart and the words drop in */
.emo-line rt { font: 600 0px/1.2 var(--font-ui); letter-spacing: 0; color: var(--text-soft); opacity: 0; transform: translateY(-8px);
  transition: font-size .35s cubic-bezier(.3,1.2,.5,1), opacity .3s, transform .4s cubic-bezier(.3,1.5,.5,1); transition-delay: calc(var(--k) * 45ms); }
.emo-line.open rt { font-size: 12px; opacity: 1; transform: none; }
.emo-react { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font-size: 30px; opacity: 0; scale: .2; }
.emo-line.open .emo-react { animation: emo-react .9s cubic-bezier(.3,1.6,.5,1) .35s both; }
@keyframes emo-react { 0% { opacity: 0; scale: .2; rotate: 0deg; } 40% { opacity: 1; scale: 1.15; rotate: -14deg; } 60% { rotate: 12deg; } 80% { rotate: -6deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
.emo-badge { margin: 18px 0 0; text-align: center; font: 600 14px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); opacity: 0; }
.emo.all .emo-badge { animation: emo-badge .7s cubic-bezier(.3,1.6,.5,1) .5s both; }
@keyframes emo-badge { from { opacity: 0; transform: translateY(-30px) rotate(-8deg); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .emo-line { font-size: 22px; padding-right: 44px; } .emo-line.open rt { font-size: 11px; } }

/* ================= flap.js: split-flap letters ================= */
.flap { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.fc { position: relative; display: inline-block; width: .8em; height: 1.24em; perspective: 300px; }
.fc::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; z-index: 3; background: #000; pointer-events: none; }   /* the hinge seam */
.fc .h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #161616; color: #f2f2f2; backface-visibility: hidden; }
.fc .h i { position: absolute; left: 0; right: 0; height: 1.24em; display: grid; place-items: center; font-style: normal; }
.fc .fl-t, .fc .fl-ft { top: 0; border-radius: 3px 3px 0 0; } .fc .fl-b, .fc .fl-fb { bottom: 0; border-radius: 0 0 3px 3px; }
.fc .fl-b i, .fc .fl-fb i { bottom: 0; }
/* the hinge: a dark seam and a touch of shade on the lower leaf */
.fc .fl-t { box-shadow: inset 0 -1px 0 #000; } .fc .fl-b { background: linear-gradient(#0f0f0f, #161616 40%); }
.fc[data-ch="-"] .h i { opacity: .28; }   /* a spare tile: a dim dash, so the board shows it is empty, not missing */
.fc .fl-ft { transform-origin: 50% 100%; z-index: 2; visibility: hidden; } .fc .fl-fb { transform-origin: 50% 0; z-index: 2; visibility: hidden; }
.fc.go .fl-ft { visibility: visible; animation: fc-top .1s ease-in both; }
.fc.go .fl-fb { visibility: visible; animation: fc-bot .1s ease-out .05s both; }
@keyframes fc-top { from { transform: rotateX(0); } to { transform: rotateX(-90deg); filter: brightness(.6); } }
@keyframes fc-bot { from { transform: rotateX(90deg); filter: brightness(1.4); } to { transform: rotateX(0); } }
.fc[hidden] { display: none; }

/* ================= spoiler.js: guessed numbers under dust ================= */
/* only hidden when the script runs; with JavaScript off the guess is plain text */
.js .spoiler { position: relative; display: inline-block; color: transparent; cursor: pointer; border-radius: 4px; user-select: none; -webkit-user-select: none; }
.js .spoiler.open { color: inherit; background: rgba(255,214,10,.14); transition: color .3s, background 1.4s; user-select: text; -webkit-user-select: text; }
.spoiler canvas { position: absolute; left: -48px; top: -36px; width: calc(100% + 96px); height: calc(100% + 72px); pointer-events: none; z-index: 5; }   /* roomy, so grains can leave the number instead of being cut off at its edge */
.spoiler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ================= found.js: toys found, pinned to the corner ================= */
.fd { position: fixed; right: 16px; bottom: 16px; z-index: 80; margin: 0; padding: 8px 12px; border: 1px solid #333; border-radius: 6px; background: #0b0b0b; font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); max-width: calc(100vw - 32px); pointer-events: none; }
.fd b { color: var(--text); }
.fd .fd-msg { display: block; text-transform: none; letter-spacing: 0; color: var(--text); }
.fd .fd-msg:empty { display: none; }
.fd.done { border-color: var(--accent); }

/* ================= board.js: the notes board (home) and the notes under each post ================= */
.notes-board { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--hairline); }   /* the board opens the section; the button sits under it */
.bd-head h2 { margin: 0; font: 400 24px/1 var(--font-display); text-transform: uppercase; }
.bd-head p { margin: 0; max-width: 42ch; color: var(--text); font-size: 17px; line-height: 1.5; }
/* the invitation under the board's caption: the line on the left, a solid paper button at the right */
.bd-head { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 24px; margin-top: 14px; }
.bd-copy { display: grid; gap: 6px; }
.bd-copy p { max-width: none; }
.bd-copy .bd-hint { font-size: 12px; line-height: 1.6; color: var(--gray); }   /* beats .bd-head p: the hint stays a small caption */   /* the button comes first for screen readers, but sits on the right */
/* charcoal cork (the dyed black kind) in a matte black frame, to sit in the site's black: dark granules, pale grey flecks
   and slow patches of tone, and the holes
   old pins left (--holes, drawn by board.js). isolation keeps every note's layer inside the board, under the sticky header */
.bd-board { --nw: 140px; position: relative; isolation: isolate; list-style: none; margin: 0; padding: 0; min-height: 440px; border: 12px solid #141414; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 6px 18px rgba(0,0,0,.55), 0 0 0 1px #262626, 0 1px 0 1px rgba(255,255,255,.05);
  background:
    var(--holes, linear-gradient(transparent, transparent)) 0 0 / auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .06 0 0 0 0 .06 0 0 0 3 -1.5'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .6 0 0 0 0 .57 0 0 0 3 -1.75'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23l)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 1.1 -.3'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23t)'/%3E%3C/svg%3E"),
    #34322F; }
.bd-note { position: absolute; width: var(--nw); color: var(--ink); -webkit-touch-callout: none; --lk: var(--bk, 1); }   /* light notes lift more in a gust */
/* the note hangs from its pin: it turns round that point; while carried it trails a little behind your hand (--sway),
   and a fast scroll sets it swaying in the breeze (--breeze from the board, each note at its own strength --bk) */
.bd-note .sn { touch-action: pan-y; transform-origin: calc(50% + var(--px, 0px)) var(--py, 15px); rotate: calc(var(--sway, 0deg) + var(--breeze, 0deg) * var(--bk, 1)); transition: scale .18s, rotate .25s ease-out;
  filter: brightness(calc(1 - var(--lv, 0) * var(--lk) * .006)) drop-shadow(0 1px 1px rgba(0,0,0,.4)) drop-shadow(0 calc(6px + var(--lv, 0) * var(--lk) * .5px) calc(6px + var(--lv, 0) * var(--lk) * .4px) rgba(0,0,0,.35)); }   /* lifted by a gust, its shadow falls further away */
.bd-note.moving .sn, .bd-note.turning .sn { cursor: grabbing; scale: 1.04; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)) drop-shadow(0 22px 20px rgba(0,0,0,.5)); }
.bd-note.turning .sn, .bd-note.moving .sn { transition: scale .18s; }
.bd-note:not(.moving) { transition: translate .3s cubic-bezier(.3, 1.8, .5, 1); }   /* a note that never tore free springs back */
.bd-note.held .sn { scale: 1.07; }
/* the bottom edge is the handle you swing it by (its last corners belong to the peel, in sticky.js) */
.bd-swing { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 2; cursor: grab; }
.bd-note.turning .bd-swing { cursor: grabbing; }
/* the push pin, top middle. Tear the note off and the pin stays in the cork (a loose pin, board.js); a new one is pushed in where it lands */
.bd-pin { --p1: #fff; --p2: #c9c9c9; --p3: #6f6f6f; position: absolute; z-index: 4; left: calc(50% + var(--px, 0px)); top: calc(var(--py, 15px) - 7px); width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 32%, var(--p1), var(--p2) 38%, var(--p3)); box-shadow: 2px 4px 3px rgba(0,0,0,.45); transition: translate .2s ease-out, scale .2s ease-out, box-shadow .2s; }
.bd-pin[data-pin=blue] { --p1: #d6e6ff; --p2: #2f6fd6; --p3: #123a7a; }
.bd-pin[data-pin=green] { --p1: #d9f5d3; --p2: #2f9a4a; --p3: #11502a; }
.bd-pin[data-pin=yellow] { --p1: #fff7c9; --p2: #f0c020; --p3: #8a6a00; }
.bd-pin[data-pin=white] { --p1: #fff; --p2: #f1efe9; --p3: #a9a59b; }
.bd-pin[data-pin=black] { --p1: #9a9a9a; --p2: #2a2a2a; --p3: #050505; }
/* the custom pins: a flat brass tack, and three shaped ones drawn in ::before (a clipped shape can't cast its own shadow,
   so the shadow sits on the pin and the shape inside it) */
.bd-pin[data-pin=brass] { width: 19px; height: 19px; margin-left: -9.5px; top: calc(var(--py, 15px) - 9px); box-shadow: 1px 2px 2px rgba(0,0,0,.5);
  background: radial-gradient(circle at 42% 38%, #fff6cf 0 8%, #e8c56a 14% 26%, #a87822 31% 36%, #f0d68c 42% 62%, #8a5f16 70% 100%); }
.bd-pin:is([data-pin=heart], [data-pin=star], [data-pin=daisy]) { background: none; box-shadow: none; filter: drop-shadow(2px 4px 2px rgba(0,0,0,.45)); }
.bd-pin:is([data-pin=heart], [data-pin=star], [data-pin=daisy])::before { content: ""; position: absolute; inset: -2px; }
.bd-pin[data-pin=heart]::before { background: radial-gradient(circle at 34% 30%, #ffd0dc, #e0446d 45%, #8e1236); clip-path: path('M9.5 17.5 L2 10 A4.4 4.4 0 0 1 9.5 3.6 A4.4 4.4 0 0 1 17 10 Z'); }
.bd-pin[data-pin=star]::before { background: radial-gradient(circle at 42% 38%, #fff4b8, #f2b705 50%, #9a6c00);
  clip-path: polygon(50% 0, 62% 35%, 99% 36%, 69% 58%, 80% 94%, 50% 72%, 20% 94%, 31% 58%, 1% 36%, 38% 35%); }
.bd-pin[data-pin=daisy]::before { background: radial-gradient(circle, #f2b705 0 19%, #b07d00 23%, transparent 25%),
  radial-gradient(circle at 50% 18%, #fff 0 17%, transparent 19%), radial-gradient(circle at 78% 34%, #fff 0 17%, transparent 19%),
  radial-gradient(circle at 78% 66%, #fff 0 17%, transparent 19%), radial-gradient(circle at 50% 82%, #fff 0 17%, transparent 19%),
  radial-gradient(circle at 22% 66%, #fff 0 17%, transparent 19%), radial-gradient(circle at 22% 34%, #fff 0 17%, transparent 19%); }
.bd-note.pinned .bd-pin { --p1: #ff8a80; --p2: var(--accent); --p3: #8b0f08; }   /* ten +1s turn any pin red */
.bd-note.unpinned .bd-pin { opacity: 0; transition: none; }
.bd-hole { position: absolute; z-index: 3; left: calc(50% + var(--px, 0px)); top: calc(var(--py, 15px) - 1px); width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .15s; pointer-events: none; }
.bd-note.unpinned .bd-hole { opacity: 1; }   /* the paper keeps the hole the pin made */
/* loose pins sit in the cork on their own: left (centre) and top are the point; pick one up and it lifts.
   One torn off a note keeps the scrap of paper it ripped out, caught under its head */
.bd-loose, .bd-air { position: absolute; top: 0; margin: -7.5px 0 0 -7.5px; z-index: 2147482500; }
.bd-loose:not(.up) { z-index: 0; }   /* a pin left in the cork stays under any note dropped over it, like a real one */
.bd-loose { width: 15px; height: 15px; pointer-events: auto; cursor: grab; touch-action: none; transition: scale .15s; }
.bd-loose > .bd-pin { left: 0; top: 0; margin: 0; }
.bd-loose > .bd-pin[data-pin=brass] { left: -2px; top: -2px; }
.bd-loose::after { content: ""; position: absolute; inset: -14px; }   /* a finger-sized handle */
.bd-loose.up { cursor: grabbing; scale: 1.35; transition: none; }
.bd-loose.up > .bd-pin:not([data-pin=heart], [data-pin=star], [data-pin=daisy]) { box-shadow: 6px 20px 8px rgba(0,0,0,.3); }
.bd-scrap { position: absolute; left: calc(7.5px - var(--sw) / 2 - var(--spx, 0px)); top: calc(7.5px - var(--spy, 15px)); width: var(--sw); height: calc(var(--spy, 15px) + 40px); rotate: var(--sr, 0deg); transform-origin: calc(50% + var(--spx, 0px)) var(--spy, 15px);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); pointer-events: none; }   /* the very piece the rip took: same sheet width, lines, angle and age */
.bd-scrap b { position: absolute; inset: 0; background: var(--edge, none), var(--lines), var(--c); filter: sepia(calc(var(--age, 0) * .35)) brightness(calc(1 - var(--age, 0) * .05)); }
.bd-air { pointer-events: none; }
/* the pin tin in the top right (the bottom right is where the "toys found" badge floats): a few heads showing; drop a loose pin in it to put it away */
.bd-tin { position: absolute; z-index: 2147482400; right: 16px; top: 14px; width: 64px; height: 64px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #1b1b1b 0 58%, transparent 59%), radial-gradient(circle at 38% 30%, #f0f0f0, #9a9a9a 45%, #4a4a4a);
  box-shadow: 0 6px 10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.25); }
.bd-tin i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff, #c9c9c9 38%, #6f6f6f); box-shadow: 1px 2px 2px rgba(0,0,0,.6); }
.bd-tin i:nth-child(1) { left: 20px; top: 18px; } .bd-tin i:nth-child(2) { left: 33px; top: 22px; background: radial-gradient(circle at 35% 32%, #d6e6ff, #2f6fd6 38%, #123a7a); }
.bd-tin i:nth-child(3) { left: 24px; top: 32px; background: radial-gradient(circle at 35% 32%, #fff7c9, #f0c020 38%, #8a6a00); } .bd-tin i:nth-child(4) { left: 37px; top: 35px; }
.bd-tin i:nth-child(5) { left: 29px; top: 25px; background: radial-gradient(circle at 35% 32%, #d9f5d3, #2f9a4a 38%, #11502a); }
.bd-tin b { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
@media (prefers-reduced-motion: no-preference) {
  .bd-pin.in, .bd-loose.in, .bd-note.landed .bd-pin { animation: bd-pin-in .34s cubic-bezier(.3, 1.6, .5, 1); }
}
@keyframes bd-pin-in { from { translate: 0 -20px; scale: 1.25; } 55% { translate: 0 1px; scale: .88; } to { translate: 0 0; scale: 1; } }
/* four kinds of stationery; the lines sit --lh apart, starting at the sheet's top padding (--lt), so handwriting rests on them */
[data-p] { --lh: 19px; --lt: 28px; --rule: rgba(60,100,170,.28); --lines: repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh)) 0 var(--lt) / 100% var(--lh); }
[data-p=cream] { --c: #F6F3EA; --edge: linear-gradient(90deg, transparent 15%, rgba(200,60,60,.38) 15% calc(15% + 1px), transparent 0); }
[data-p=yellow] { --c: #F3E7A2; --rule: rgba(70,110,170,.3); --edge: linear-gradient(90deg, transparent 13%, rgba(200,60,60,.4) 13% calc(13% + 1px), transparent 0 calc(13% + 3px), rgba(200,60,60,.4) 0 calc(13% + 4px), transparent 0); }
[data-p=pink] { --c: #F4E4E0; --edge: linear-gradient(transparent calc(var(--lt) + var(--lh) - 1px), rgba(200,60,60,.45) 0 calc(var(--lt) + var(--lh)), transparent 0); }
[data-p=mint] { --c: #E9EFE6; --lines: linear-gradient(90deg, rgba(60,120,110,.2) 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(rgba(60,120,110,.2) 1px, transparent 1px) 0 var(--lt) / 10px 10px; --edge: none; }
.bd-paper { aspect-ratio: auto; min-height: calc(var(--nw) * 1.05); padding: var(--lt) 9% 40px 17%; background: var(--edge, none), var(--lines), var(--c);
  filter: sepia(calc(var(--age, 0) * .35)) brightness(calc(1 - var(--age, 0) * .05)); }   /* notes yellow a little over a month */
.bd-paper::before { content: none; }
.bd-note.ripped .bd-paper { padding-top: calc(var(--lt) + var(--lh)); }   /* torn: the writing starts a line lower, clear of the new pin */
.bd-paper::after { content: ""; position: absolute; right: 0; bottom: 0; width: calc(10px + var(--age, 0) * 26px); height: calc(10px + var(--age, 0) * 26px);
  background: linear-gradient(135deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.02)); pointer-events: none; }   /* and the corner curls */
.bd-note .n-meta > :last-child { white-space: nowrap; }
.bd-note .n-meta { font: 500 9px/var(--lh) var(--mono); color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; gap: 6px; text-transform: uppercase; }
/* the country's flag, big and faded into the top left corner like a watermark; it sits behind the writing */
.bd-wm { position: absolute; z-index: -1; top: -5px; left: -7px; width: 42%; height: auto; rotate: -6deg; opacity: .45; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask: linear-gradient(135deg, #000 40%, transparent 82%); mask: linear-gradient(135deg, #000 40%, transparent 82%); }
/* written by hand, in one of two hands (Kalam also writes Devanagari) */
.bd-text { margin: 0; font: 600 18px/var(--lh) 'Caveat', 'Kalam', cursive; color: #22305A; overflow-wrap: anywhere; white-space: pre-line; }
.bd-text:empty { display: none; }
.bd-note.hand-b .bd-text { font: 400 13px/var(--lh) 'Kalam', cursive; color: #1F1D1A; }
.bd-by { margin: 0; font: 600 15px/var(--lh) 'Caveat', 'Kalam', cursive; color: var(--ink-soft); text-align: right; }
.bd-note.hand-b .bd-by { font: 400 12px/var(--lh) 'Kalam', cursive; }   /* the same hand signs it */
/* a doodle, drawn back from its numbers in pen */
.bd-ink { display: block; width: 100%; aspect-ratio: 1; margin: 2px 0; }
.bd-ink path { fill: none; stroke: #22305A; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bd-stamp { position: absolute; right: 9%; bottom: 10px; width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid #B0231A;
  border-radius: 50%; color: #B0231A; rotate: -12deg; opacity: .88; mix-blend-mode: multiply; }
.bd-stamp svg { width: 15px; height: 15px; }
.bd-wait { position: absolute; left: 9%; bottom: 12px; rotate: -4deg; font: 600 9px/1 var(--mono); letter-spacing: .1em; color: #B0231A; text-transform: uppercase;
  border: 2px solid #B0231A; border-radius: 4px; padding: 4px 5px; opacity: .92; mix-blend-mode: multiply; }
.bd-paper:has(.bd-wait) { padding-bottom: 62px; }   /* room for the waiting stamp under the signature */
.bd-yours { position: absolute; z-index: 3; top: 4px; left: -6px; rotate: -8deg; font: 600 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(27,26,24,.88); color: var(--paper); padding: 5px 7px; pointer-events: none; }   /* a strip of black tape, so you can spot your own */
.bd-acts { display: none; position: absolute; z-index: 2147482600; gap: 2px; padding-top: 6px; white-space: nowrap; }   /* padding, not margin: the gap belongs to the buttons, so the pointer never crosses another note on the way down   /* lifted out under the note you're on (board.js showActs) */
.bd-acts.up { display: flex; animation: bd-acts-in .15s ease-out; }
.bd-acts.up.r { translate: -100% 0; }   /* right half of the board: they hang from the note's right edge */
@keyframes bd-acts-in { from { opacity: 0; } }
.bd-acts button { min-height: 44px; padding: 0 8px; appearance: none; border: 0; background: none; color: rgba(250,240,225,.85); text-shadow: 0 1px 2px rgba(0,0,0,.7); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.bd-acts button:hover:not(:disabled) { color: #fff; }
.bd-acts .bd-plus b { color: #fff; font-weight: 600; }
.bd-empty { position: absolute; inset: 45% 0 auto; margin: 0; text-align: center; color: rgba(250,240,225,.85); font: 500 13px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
/* red yarn from a reply to the note it answers; it never catches a click */
.bd-yarn { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2147483000; }
.bd-yarn path { fill: none; stroke: #C0281E; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(1px 3px 1.5px rgba(0,0,0,.4)); }
.bd-yarn .tw { stroke: #D9CFBC; stroke-width: 1.1; stroke-dasharray: 3 1.6; opacity: .8; }   /* pale twine: notes from the same browser */

/* the button: a solid paper pill with a red plus. Pointing at it lifts it onto a red edge, the letters wave, the plus turns */
.bd-call { position: relative; display: inline-flex; align-items: center; gap: 12px; flex: none; min-height: 52px; margin: 0; padding: 0 8px 0 22px; border: 2px solid var(--paper); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; text-transform: inherit; text-align: left; cursor: pointer; transition: translate .2s, box-shadow .2s, background .2s, color .2s; box-shadow: 0 2px 0 -1px var(--accent); }
.bd-plus-i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); transition: rotate .3s cubic-bezier(.3, 1.6, .5, 1); }
.bd-plus-i::before, .bd-plus-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 3px; translate: -50% -50%; background: #fff; border-radius: 2px; }
.bd-plus-i::after { rotate: 90deg; }
.bd-call:hover, .bd-call:focus-visible { translate: 0 -2px; box-shadow: 0 5px 0 -1px var(--accent); }
.bd-call:hover .bd-plus-i { rotate: 90deg; }
.bd-call:active { translate: 0 1px; box-shadow: 0 1px 0 -1px var(--accent); }
.bd-call-t > span { display: inline-block; }
.bd-call:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .bd-call:hover .bd-call-t > span { animation: bd-wave .5s calc(var(--i) * 28ms) cubic-bezier(.3, 1.6, .5, 1); }
}
@keyframes bd-wave { 40% { translate: 0 -.18em; rotate: -4deg; } }
/* under the board: how to play, what just happened, and putting it back */
.bd-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; margin-top: 14px; }   /* the cork's caption: how to play on the left, its two switches on the right */
.bd-hint { margin: 0; font: 500 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.bd-said { margin: 0; color: var(--text-soft); font-size: 14px; }
.bd-said:empty { display: none; }
.bd-tally { margin-right: auto; }   /* where the board's notes came from, left of Show all / Tidy */
.bd-tally:empty { display: none; }
.bd-tidy { min-height: 44px; padding: 0; appearance: none; border: 0; background: none; color: var(--gray); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.bd-tidy:hover { color: var(--text); }
.bd-more { padding: 0 18px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--text); }   /* opens more of the board: a real button, not a caption */
.bd-more:hover { border-color: var(--text); }

/* the drawer: slides in from the left over a dimmed page */
.bd-drawer { position: fixed; inset: 0 auto 0 0; width: min(400px, 100vw); height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-right: 1px solid var(--hairline);
  background: var(--bg, #000); color: var(--text); overflow-y: auto; overscroll-behavior: contain; translate: -100% 0;
  transition: translate .35s cubic-bezier(.2, .8, .25, 1), display .35s allow-discrete, overlay .35s allow-discrete; }
.bd-drawer[open] { translate: 0 0; }
@starting-style { .bd-drawer[open] { translate: -100% 0; } }
.bd-drawer::backdrop { background: rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .bd-drawer { transition: none; } }
.bd-drawer-in { padding: 24px 28px 40px; display: grid; gap: 20px; }
.bd-drawer-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bd-drawer-top h3 { margin: 0; font: 400 32px/.95 var(--font-display); text-transform: uppercase; }
.bd-close { min-height: 44px; padding: 0 4px; appearance: none; border: 0; background: none; color: var(--gray); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.bd-close:hover { color: var(--text); }
.bd-re { margin: 0; color: var(--text-soft); font-size: 14px; }
.bd-re button { min-height: 44px; padding: 0; appearance: none; border: 0; background: none; color: var(--gray); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.bd-form { display: grid; gap: 22px; }
.bd-mode { display: flex; width: fit-content; margin: 0; padding: 3px; border: 1px solid var(--hairline); border-radius: 999px; }
.bd-mode label { position: relative; cursor: pointer; }
.bd-mode input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.bd-mode span { display: block; padding: 10px 18px; border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.bd-mode label:has(:checked) span { background: var(--paper); color: var(--ink); }
.bd-mode label:has(:focus-visible) span { outline: 2px solid var(--text); outline-offset: 2px; }
.bd-drawer .bd-paper { --lh: 22px; --lt: 34px; min-height: 280px; padding-bottom: 46px; rotate: -1deg; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 12px 14px rgba(0,0,0,.5)); }
.bd-drawer .bd-paper:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.bd-drawer .bd-stamp { width: 32px; height: 32px; bottom: 14px; } .bd-drawer .bd-stamp svg { width: 18px; height: 18px; }
.bd-write { flex: 1; width: 100%; min-height: 154px; resize: none; border: 0; padding: 0; background: none; color: #22305A; font: 600 23px/22px 'Caveat', 'Kalam', cursive; outline: none; }
.bd-write::placeholder { color: #6B675F; }
.bd-pad canvas { display: block; width: 100%; aspect-ratio: 1; touch-action: none; cursor: crosshair; }
.bd-rub { min-height: 44px; padding: 0; appearance: none; border: 0; background: none; color: var(--ink-soft); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.bd-sign { display: flex; gap: 6px; align-items: baseline; margin-top: 10px; font: 600 20px/1 'Caveat', 'Kalam', cursive; color: var(--ink-soft); }
.bd-name-in { flex: 1; min-width: 0; border: 0; border-bottom: 1.5px dashed rgba(0,0,0,.3); padding: 4px 0; background: none; color: var(--ink); font: inherit; outline: none; }
.bd-name-in::placeholder { color: #6B675F; }
.bd-left { position: absolute; left: 9%; bottom: 16px; font: 500 11px/1 var(--mono); color: var(--ink-soft); }
.bd-left.low { color: #B0231A; }
.bd-tray { display: flex; flex-direction: column; gap: 16px; }
.bd-tray fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.bd-tray legend { margin-bottom: 8px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.bd-sw, .bd-st, .bd-pk { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.bd-sw::before { content: ""; width: 28px; height: 28px; border-radius: 3px; background: var(--edge, none), var(--lines), var(--c); }
.bd-sw:not([data-p=mint]) { --lines: repeating-linear-gradient(transparent 0 6px, var(--rule) 6px 7px); --edge: none; }   /* the lines drawn small enough to show on a swatch */
.bd-st { border: 1px solid var(--hairline); color: var(--text-soft); }
.bd-st svg { width: 24px; height: 24px; }
.bd-pk .bd-pin { position: static; margin: 0; width: 18px; height: 18px; }
.bd-sw input, .bd-st input, .bd-pk input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.bd-sw:has(:checked), .bd-st:has(:checked), .bd-pk:has(:checked) { box-shadow: 0 0 0 2px var(--accent); color: var(--text); }
.bd-sw:has(:focus-visible), .bd-st:has(:focus-visible), .bd-pk:has(:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.bd-from-in { display: flex; gap: 10px; align-items: center; min-height: 44px; color: var(--text-soft); font-size: 15px; cursor: pointer; }
.bd-from-in input { width: 18px; height: 18px; accent-color: var(--accent); }
.bd-go { align-self: start; min-height: 46px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 15px/1 var(--font-ui); cursor: pointer; }
.bd-go:disabled { opacity: .6; cursor: progress; }
.bd-msg { margin: 0; min-height: 1.5em; color: var(--text-soft); font-size: 15px; }


/* motion: a new note slaps on, a +1 presses it, taking one back peels it off, a new stamp thumps down */
@media (prefers-reduced-motion: no-preference) {
  .bd-note.landed { animation: bd-slap .5s cubic-bezier(.2, .9, .3, 1.2) both; }
  .bd-note.pressed .bd-paper { animation: bd-press .22s ease-out; }
  .bd-note.peeled { animation: bd-peel .45s ease-in forwards; }
  .bd-stamp-new.thump { animation: bd-thump .32s cubic-bezier(.3, 1.4, .5, 1); }
}
@keyframes bd-slap { from { opacity: 0; transform: translateY(-46px) scale(1.14) rotate(7deg); } 70% { opacity: 1; transform: scale(.98); } to { transform: none; } }
@keyframes bd-press { 50% { transform: scale(.965); } }
@keyframes bd-peel { to { opacity: 0; transform: translate(30px, -50px) rotate(14deg); } }
@keyframes bd-thump { from { opacity: 0; transform: scale(1.9); } 60% { opacity: .88; transform: scale(.9); } to { transform: none; } }

@media (max-width: 700px) {
  .bd-head { flex-direction: column; align-items: stretch; gap: 12px; text-align: left; }   /* phone: the button full width, the line under it */
  .bd-call { width: 100%; justify-content: space-between; }
  .bd-board { --nw: 120px; border-width: 8px; }
  [data-p] { --lh: 17px; --lt: 26px; }
  .bd-paper { padding-right: 8%; padding-bottom: 36px; }
  .bd-text { font-size: 16px; } .bd-note.hand-b .bd-text { font-size: 12px; }
  .bd-by { font-size: 14px; } .bd-note.hand-b .bd-by { font-size: 11px; }
  .bd-note .n-meta { font-size: 8px; }
  .bd-stamp { width: 22px; height: 22px; bottom: 8px; } .bd-stamp svg { width: 13px; height: 13px; }
  .bd-acts button { padding: 0 5px; font-size: 10px; }
  .bd-tin { right: 8px; top: 8px; scale: .8; transform-origin: 100% 0; }
  .bd-more { order: -1; width: 100%; margin-bottom: 10px; }   /* phone: straight under the cork it opens */
  .bd-drawer-in { padding: 18px 16px 40px; }
  .bd-name-in { font-size: 16px; }   /* under 16px an iPhone zooms the page when you tap the box */
}

/* READ stamp (read.js): red rubber stamp after the meta line once a post is finished; --accent, not --stamp: 5.9:1 on black */
.read-stamp { display: inline-block; margin-left: 6px; padding: 1px 7px 0; border: 2px solid var(--accent); border-radius: 3px; font: 600 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); transform: rotate(-7deg); vertical-align: 1px; }
.read-stamp.slam { animation: read-slam .32s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes read-slam { from { transform: rotate(-16deg) scale(2.2); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .read-stamp.slam { animation: none; } }
.ptr-slip i { font-style: normal; }