:root {
  --desk: #231f1b;
  --desk-2: #2e2924;
  --plastic: #d8cfbb;
  --plastic-lt: #ece5d5;
  --plastic-dk: #b3a88f;
  --plastic-edge: #8f846d;
  --ink: #221e1a;
  --paper: #f5f1e6;
  --bar: rgba(118, 160, 112, 0.17);
  --mustard: #d9a21b;
  --ketchup: #b23a2c;
  --ketchup-dk: #7e2419;
  --lcd: #a2ac8c;
  --lcd-ink: #1c2318;
  --paper-w: min(100% - 20px, 480px);
  --gutter: 30px;
  --ui: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --dot: 'Doto', 'VT323', 'Courier New', monospace;
  --lcdfont: 'VT323', 'Courier New', monospace;
  --display: 'Rubik Mono One', 'Arial Black', sans-serif;
  --marker: 'Permanent Marker', 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--desk);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
svg { display: block; }

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, var(--desk-2), var(--desk));
}
.app.flipped { flex-direction: column-reverse; }

/* ---------- desk / paper ---------- */

.desk {
  position: relative;
  flex: 1 1 0;
  min-height: 110px;
}
.desk::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.55), transparent);
}
.flipped .desk::after { inset: 0 0 auto 0; background: linear-gradient(to bottom, rgba(10, 8, 6, 0.55), transparent); }

.viewport {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #5a5147 transparent;
  outline: none;
  padding-top: 26px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.flipped .viewport { padding-top: 0; padding-bottom: 26px; }

.paper {
  flex: none;
  width: var(--paper-w);
  margin: auto auto 0;
  padding: 8px var(--gutter);
  font-family: var(--dot);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.32;
  color: #262330;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 12px 10px, var(--desk) 0 4.4px, rgba(0, 0, 0, 0.18) 4.6px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 12px) 10px, var(--desk) 0 4.4px, rgba(0, 0, 0, 0.18) 4.6px, transparent 5.4px),
    linear-gradient(to right, transparent 23.5px, rgba(0, 0, 0, 0.12) 23.5px 24.5px, transparent 24.5px calc(100% - 24.5px), rgba(0, 0, 0, 0.12) calc(100% - 24.5px) calc(100% - 23.5px), transparent calc(100% - 23.5px)),
    repeating-linear-gradient(to bottom, var(--bar) 0 2.64em, transparent 2.64em 5.28em);
  background-size: 24px 20px, 100% 20px, 100% 100%, calc(100% - 50px) 100%;
  background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0, center 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 14px 30px rgba(0, 0, 0, 0.45);
  will-change: transform;
}
.paper { transition: opacity 0.25s; }
.flipped .paper { margin: 0 auto auto; }
/* A torn piece is in hand: the printer keeps going behind it, out of sight. */
.viewport.covered { touch-action: none; }
.viewport.covered .paper { opacity: 0; transition: none; }
.paper:empty { visibility: hidden; padding-block: 0; }
/* Grabbed: the sheet lifts off the desk as it strains against the perforation. */
.paper.tugging {
  cursor: grabbing;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 calc(14px + var(--strain, 0) * 14px) calc(30px + var(--strain, 0) * 24px) rgba(0, 0, 0, 0.5);
}
/* The ripped-off piece floats free of the desk: held in front of the slot, then thrown. */
.paper.torn {
  position: fixed;
  margin: 0;
  z-index: 40;
  pointer-events: none;
}
.paper.torn.held {
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 18px 36px rgba(0, 0, 0, 0.5);
}
.paper.torn.grabbed {
  cursor: grabbing;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 26px 50px rgba(0, 0, 0, 0.55);
}

.pline {
  width: fit-content;
  max-width: 100%;
  white-space: pre;
  overflow: hidden;
  opacity: var(--ink, 1);
  transform: translateX(var(--jit, 0));
  min-height: 1.32em;
}
.pline.bold, .pline.verdict { text-shadow: 0.7px 0 0 currentColor, 0 0.4px 0 currentColor; }
.pline.dim { opacity: calc(var(--ink, 1) * 0.72); }
.pline.rule { opacity: calc(var(--ink, 1) * 0.8); }
.pline.verdict.escalate { color: #a3261c; }
.pline.verdict.comfort { color: #5a3a7a; }
.pline.perf { color: rgba(0, 0, 0, 0.3); font-weight: 700; letter-spacing: -1px; }

.desk-hint {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(236, 229, 213, 0.8);
  width: max-content;
  margin: 0 auto;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(35, 31, 27, 0.82);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 2;
}
.desk-hint.show { opacity: 1; }
.desk-hint.throw { z-index: 41; color: var(--mustard); }
@media (max-height: 560px) {
  .app:has(.form input:focus) .desk { min-height: 48px; }
  .app:has(.form input:focus) .console { min-height: 0; height: auto; flex: 1 1 auto; }
}
.flipped .desk-hint { top: auto; bottom: 4px; }

/* ---------- printer slot ---------- */

.slot {
  position: relative;
  flex: none;
  height: 28px;
  background: linear-gradient(to bottom, var(--plastic-edge), var(--plastic-dk) 30%, var(--plastic));
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
  z-index: 3;
}
.flipped .slot { background: linear-gradient(to top, var(--plastic-edge), var(--plastic-dk) 30%, var(--plastic)); }
.slot-mouth {
  position: absolute;
  left: 6px;
  right: 24px;
  top: 5px;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(to bottom, #0f0d0b, #2b2622);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.4);
}
.flipped .slot-mouth { top: auto; bottom: 5px; }
.slot .led { position: absolute; right: 8px; top: 7px; }
.flipped .slot .led { top: auto; bottom: 7px; }
.head {
  position: absolute;
  top: -1px;
  left: calc((100% + 30px - min(100% + 10px, 480px)) / 2 + var(--gutter) - 12px);
  width: 12px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(to right, #57504a, #2d2824);
  box-shadow: 0 0 0 1px #15120f;
  opacity: 0.35;
  transition: opacity 0.2s;
}
.head::after { content: ''; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: #7a1f16; }
.head.go { opacity: 1; }

/* ---------- console ---------- */

.console {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  height: 56%;
  min-height: 330px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.35), transparent 40px),
    var(--plastic);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding-bottom: env(safe-area-inset-bottom);
}
.flipped .console { flex-direction: column-reverse; padding-bottom: 0; padding-top: env(safe-area-inset-top); }

.strip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  border-bottom: 1px solid var(--plastic-dk);
  background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, 0.035) 3px 4px);
}
.flipped .strip { border-bottom: 0; border-top: 1px solid var(--plastic-dk); }
.led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4f9a4a;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.12);
}
.app[data-printer='printing'] .led { background: #e2a72a; animation: blink 0.35s steps(2) infinite; }
@keyframes blink { 50% { background: #7a5a18; } }
.strip-id {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
/* Equal lanes either side of the logo keep it centred; the weaner's lane is stretched over the strip padding and gap
   so he stands exactly halfway between the screen edge and the logo. */
.weaner-lane,
.strip-spacer { flex: 1 1 0; min-width: 0; }
.weaner-lane {
  display: flex;
  justify-content: center;
  min-width: 34px;
  margin-left: -12px;
  margin-right: -8px;
}
.lefty .weaner-lane { margin-left: -8px; margin-right: -10px; }
.brand {
  min-width: 0;
  overflow: hidden;
  font-family: var(--display);
  font-size: clamp(13px, 3.8vw, 18px);
  letter-spacing: 0.02em;
  color: #5c5343;
  white-space: nowrap;
}
.brand b { color: var(--ketchup); font-weight: 400; }
.brand small { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0; color: #8a7f68; margin-left: 2px; }
@media (max-width: 459px) { .brand small { display: none; } }
.strip-keys { flex: none; display: flex; gap: 5px; }
.lefty .strip { flex-direction: row-reverse; }

.key {
  width: 38px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(to bottom, var(--plastic-lt), #dcd3c0);
  box-shadow: 0 3px 0 var(--plastic-edge), 0 4px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 #fff;
  transition: transform 0.06s, box-shadow 0.06s;
}
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--plastic-edge), inset 0 1px 0 #fff; }
.key svg { width: 20px; height: 20px; fill: none; stroke: #3d372f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.key[aria-pressed='true'] svg { stroke: var(--ketchup); }
#btnSound .snd-off { display: none; }
#btnSound[aria-pressed='false'] .snd-on { display: none; }
#btnSound[aria-pressed='false'] .snd-off { display: block; }
#btnSound[aria-pressed='true'] svg { stroke: #3d372f; }
#btnSound[aria-pressed='false'] svg { stroke: #9a8f79; }
.flipped #btnFlip svg { transform: rotate(180deg); }
.lefty #btnHand svg { transform: scaleX(-1); }

/* ---------- form ---------- */

.form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 12px 8px;
  scrollbar-width: none;
}
.form::-webkit-scrollbar { display: none; }
.form > .row:first-child { margin-top: auto; }
.flipped .form > .row:first-child { margin-top: 0; }
.flipped .form > .row:last-child { margin-bottom: auto; }
.flipped .form { padding-bottom: 30px; }

.row { padding: 5px 0; border-radius: 10px; }
.row-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6f59;
  margin: 0 2px 4px;
}
.row.nag { animation: nag 0.5s; box-shadow: 0 0 0 2px var(--ketchup); }
@keyframes nag {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.chips {
  position: relative;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 1px 2px 5px;
  margin: 0 -12px;
  padding-inline: 12px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 22px), transparent);
}
.chips::-webkit-scrollbar { display: none; }
.chips::after { content: ''; flex: 0 0 10px; }

.chip {
  flex: none;
  scroll-snap-align: center;
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  background: linear-gradient(to bottom, var(--plastic-lt), #ddd4c1);
  box-shadow: 0 3px 0 var(--plastic-edge), 0 4px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 #fff;
  color: #3a342b;
  transition: transform 0.06s, box-shadow 0.06s, background 0.15s;
}
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--plastic-edge), inset 0 1px 0 #fff; }
.chip.on {
  background: linear-gradient(to bottom, #3b352e, #2a2520);
  color: #f2c542;
  box-shadow: 0 3px 0 #15120f, 0 4px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.chip.on::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #f2c542;
  vertical-align: 2px;
}

.age-line { display: flex; gap: 8px; align-items: center; }
.age-line .stepper { flex: 1 1 150px; max-width: 200px; }
.chip-flag { padding: 0 11px; font-size: 13px; }
.chip-flag.on { color: #ff9f8f; }
.chip-flag.on::before { background: #ff7a66; }

.seg {
  display: flex;
  height: 42px;
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--plastic-edge), inset 0 1px 0 #fff;
  overflow: hidden;
  flex: none;
}
.seg-btn {
  border: 0;
  width: 44px;
  font-size: 13.5px;
  font-weight: 700;
  background: linear-gradient(to bottom, var(--plastic-lt), #ddd4c1);
  color: #6b6150;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--plastic-dk); }
.seg-btn.on { background: #2e2924; color: #f2c542; }

/* ---------- LCD steppers ---------- */

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fields-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 12px;
  border: 2px dashed var(--plastic-dk);
  border-radius: 10px;
  font-size: 13.5px;
  color: #7a6f59;
  text-align: center;
}

.stepper {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  height: 54px;
  border-radius: 10px;
  background: #2c2722;
  padding: 3px;
  gap: 3px;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.step {
  border: 0;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: linear-gradient(to bottom, #58514a, #3f3934);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 0 #161310;
  -webkit-user-select: none;
  user-select: none;
}
.step:active { background: #2f2a25; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5); }
.step svg { width: 18px; height: 18px; fill: none; stroke: #e9e2d2; stroke-width: 2.6; stroke-linecap: round; }

.lcd {
  position: relative;
  display: block;
  min-width: 0;
  border-radius: 5px;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent 30%),
    var(--lcd);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  cursor: text;
}
.lcd-label {
  position: absolute;
  top: 2px;
  left: 6px;
  right: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(28, 35, 24, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.lcd input {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 12px 34px 0 6px;
  border: 0;
  background: transparent;
  font-family: var(--lcdfont);
  font-size: 30px;
  line-height: 1;
  color: var(--lcd-ink);
  outline: none;
  text-align: left;
}
.lcd input::placeholder { color: rgba(28, 35, 24, 0.28); }
.lcd-unit {
  position: absolute;
  right: 5px;
  bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(28, 35, 24, 0.65);
  pointer-events: none;
}
.lcd:focus-within { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--mustard); }
.stepper.bad { box-shadow: 0 0 0 2px var(--ketchup), inset 0 2px 4px rgba(0, 0, 0, 0.5); }
.field.opt .lcd { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent 30%), #b1b79f; }

@media (max-width: 370px) {
  .key { width: 34px; }
}
@media (max-width: 350px) {
  .stepper { grid-template-columns: 34px 1fr 34px; }
  .lcd input { font-size: 26px; }
}

/* ---------- action bar ---------- */

.actionbar {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 12px 12px;
  z-index: 4;
}
.flipped .actionbar { align-items: flex-start; padding-top: 12px; padding-bottom: 0; }

.print {
  flex: 1;
  height: 74px;
  border: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 14px;
  background: linear-gradient(to bottom, #c9493a, var(--ketchup));
  color: #fff4e6;
  box-shadow: 0 5px 0 var(--ketchup-dk), 0 8px 14px rgba(60, 12, 6, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.07s, box-shadow 0.07s;
}
.print:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ketchup-dk), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.print-text { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* Device badge: a cream porthole with the chosen kit drawn in ink. */
.print-device {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #fffaf0, var(--paper) 55%, #e2dac6);
  box-shadow: 0 0 0 2px var(--ketchup-dk), 0 0 0 4px rgba(255, 244, 230, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.12), inset 0 2px 3px rgba(0, 0, 0, 0.12);
}
.print-device[hidden] { display: none; }
.print-device.pop { animation: device-pop 0.32s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes device-pop { from { transform: scale(0.6) rotate(-12deg); } to { transform: none; } }
.device-icon { width: 38px; height: 38px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.device-icon .fill { fill: var(--mustard); }
.device-icon .dot { fill: var(--ink); stroke: none; }
.device-icon .hose { stroke-width: 6; }
.device-icon .cut { stroke: var(--paper); stroke-width: 4; stroke-dasharray: 1.4 2.2; stroke-linecap: butt; }
@media (prefers-reduced-motion: reduce) { .print-device.pop { animation: none; } }

.print-top { font-family: var(--display); font-size: 22px; letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
/* Disclaimer in the logo's typeface, shrunk down to fine print. */
.print-note { margin-top: -1px; font-family: var(--display); font-size: 7px; letter-spacing: 0.02em; line-height: 1.2; text-align: center; opacity: 0.9; }
.print-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.app[data-printer='printing'] .print-top::after { content: ' >>'; }
.app[data-printer='printing'] .print-sub { font-size: 0; }
.app[data-printer='printing'] .print-sub::before { content: 'tap to fast-forward'; font-size: 11px; }

/* ---------- the weaner ---------- */

/* He stands on the strip beside the logo and pokes out over the divider; the spot only reserves his waistline. */
.weaner-spot {
  position: relative;
  flex: none;
  width: 34px;
  height: 36px;
}
.weaner {
  position: absolute;
  z-index: 6;
  left: -11px;
  bottom: -7px;
  width: 56px;
  height: 73px;
  cursor: pointer;
  outline: none;
}
.weaner:focus-visible .wn-svg { filter: drop-shadow(0 0 0 var(--mustard)) drop-shadow(0 0 3px var(--mustard)); }
.wn-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 100%;
  animation: wn-bob 2.8s ease-in-out infinite;
}
@keyframes wn-bob { 50% { transform: translateY(-2px) scaleY(1.015); } }
.busy .wn-svg { animation: wn-jitter 0.14s linear infinite; }
@keyframes wn-jitter { 50% { transform: translate(0.8px, -1px) rotate(-1deg); } }

.wn-eyes, .wn-brows, .wn-pupils { transform-box: fill-box; transform-origin: center; transition: transform 0.12s; }
.blink .wn-eyes { transform: scaleY(0.12); }
.glare .wn-pupils { transform: translateX(-1.6px); }
.glare .wn-brows, .signing .wn-brows, .offering .wn-brows { transform: translateY(1.8px); }
.wn-mouth { transform-box: fill-box; transform-origin: center; }
.signing .wn-mouth, .reading .wn-mouth { animation: wn-grr 0.5s ease-in-out infinite alternate; }
@keyframes wn-grr { to { transform: scaleX(1.1) scaleY(0.85); } }

.wn-arm {
  transform-box: view-box;
  transform-origin: 87.5px 80px;
  transform: rotate(6deg);
}
.signing .wn-arm { animation: wn-armup 0.36s cubic-bezier(0.3, 1.5, 0.5, 1) forwards, wn-armwave 0.9s ease-in-out 0.36s infinite alternate; }
.signing.lower .wn-arm { animation: wn-armdown 0.4s ease-in forwards; }
@keyframes wn-armup { from { transform: rotate(6deg); } to { transform: rotate(-150deg); } }
@keyframes wn-armwave { from { transform: rotate(-150deg); } to { transform: rotate(-166deg); } }
@keyframes wn-armdown { from { transform: rotate(-158deg); } to { transform: rotate(6deg); } }

/* The sign rig pivots on the hand; the wave pivots on the shoulder so arm and sign move together. */
.wn-rig {
  position: absolute;
  z-index: 1;
  left: 46px;
  top: 24px;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.signing .wn-rig { animation: wn-rise 0.38s cubic-bezier(0.3, 1.5, 0.5, 1) forwards; }
.signing.lower .wn-rig { animation: wn-drop 0.4s ease-in forwards; }
@keyframes wn-rise { from { opacity: 0; transform: translateY(60px) rotate(25deg); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes wn-drop { from { opacity: 1; transform: none; } 70% { opacity: 1; } to { opacity: 0; transform: translateY(60px) rotate(20deg); } }

.wn-wave { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: -5px 13px; }
.signing .wn-wave { animation: wn-wave 0.9s ease-in-out 0.36s infinite alternate; }
@keyframes wn-wave { from { transform: rotate(8deg); } to { transform: rotate(-8deg); } }

.wn-stick {
  position: absolute;
  left: -3px;
  bottom: -4px;
  width: 6px;
  height: 44px;
  border-radius: 2px;
  background: linear-gradient(to right, #c79a5f, #9b6e37);
  box-shadow: 0 0 0 1px #6e4b22;
}
.wn-board {
  position: absolute;
  bottom: 36px;
  left: -40px;
  width: 160px;
  min-height: 56px;
  display: grid;
  place-items: center;
  padding: 7px 9px 6px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(120, 84, 38, 0.06) 7px 8px),
    #eedfbd;
  border: 2px solid #7a5a30;
  box-shadow: 0 8px 18px rgba(20, 12, 4, 0.35), inset 0 0 0 3px rgba(255, 255, 255, 0.35);
  transform: rotate(var(--tilt, 0deg));
  font-family: var(--marker);
  font-size: 14px;
  line-height: 1.12;
  text-align: center;
  color: #2a1d12;
}
/* Left-handed, he lives by the right edge, so the sign and note swing out over the logo instead of off-screen. */
.lefty .wn-board { left: auto; right: -40px; }
.lefty .wn-note-paper { left: auto; right: -6px; transform-origin: 100% 100%; }
.wn-board[data-kind='serious'] { color: var(--ketchup-dk); border-color: var(--ketchup); }
.wn-board[data-kind='serious']::before {
  content: 'NOTICE';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 3px;
  background: var(--ketchup);
  color: #fff4e6;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.2em;
}
.wn-board[data-kind='nag'] { background: #f4d04a; border-color: #8a6b10; }

/* Sign gets thrown on the floor when the sources come out. */
.weaner.toss .wn-rig { animation: wn-toss 0.45s cubic-bezier(0.5, 0, 0.9, 0.5) forwards; }
.weaner.toss .wn-arm { animation: wn-armtoss 0.45s ease-in forwards; }
@keyframes wn-toss {
  from { opacity: 1; transform: none; }
  30% { opacity: 1; transform: translate(6px, -10px) rotate(-8deg); }
  to { opacity: 0; transform: translate(40px, 150px) rotate(120deg); }
}
@keyframes wn-armtoss { from { transform: rotate(-158deg); } 30% { transform: rotate(-172deg); } to { transform: rotate(6deg); } }

/* Digging in the coat pocket. */
.wn-pocket { transform-box: fill-box; transform-origin: center; }
.rummage .wn-arm { animation: wn-dig 0.2s ease-in-out infinite alternate; }
.rummage .wn-pocket { animation: wn-jig 0.2s ease-in-out infinite alternate; }
.rummage .wn-pupils { transform: translate(1.4px, 2.2px); }
@keyframes wn-dig { from { transform: rotate(14deg); } to { transform: rotate(24deg); } }
@keyframes wn-jig { to { transform: translateY(1.2px) rotate(-3deg); } }

/* The crumpled sources note, thrust forward in his fist. */
.wn-note {
  position: absolute;
  z-index: 3;
  left: 53px;
  top: 30px;
  width: 0;
  height: 0;
  opacity: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.wn-note-paper {
  position: absolute;
  left: -6px;
  bottom: -3px;
  width: 108px;
  min-height: 50px;
  display: grid;
  place-items: center;
  padding: 8px 10px 7px 12px;
  font-family: var(--marker);
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
  color: #2a1d12;
  filter: drop-shadow(0 6px 8px rgba(20, 12, 4, 0.4));
  transform: rotate(-6deg);
  transform-origin: 0 100%;
}
.wn-note-fist {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c4533a;
  border: 1.2px solid #7d2a1b;
}
.offering .wn-note {
  pointer-events: auto;
  cursor: pointer;
  animation: wn-thrust 0.55s cubic-bezier(0.3, 1.3, 0.5, 1) forwards, wn-flap 1.4s ease-in-out 0.55s infinite;
}
.offering .wn-arm { animation: wn-armoffer 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) forwards, wn-armjab 1.4s ease-in-out 0.55s infinite; }
.reading .wn-note { visibility: hidden; }
.stashing .wn-note { animation: wn-pocket-in 0.45s ease-in forwards; }
.stashing .wn-arm { animation: wn-armstash 0.45s ease-in forwards; }
@keyframes wn-thrust {
  from { opacity: 0; transform: translate(-19px, 14px) scale(0.15) rotate(-30deg); }
  40% { opacity: 1; transform: translate(-8px, 2px) scale(0.5) rotate(-10deg); }
  75% { opacity: 1; transform: translate(3px, -4px) scale(1.12) rotate(3deg); }
  to { opacity: 1; transform: none; }
}
@keyframes wn-flap {
  0%, 100% { opacity: 1; transform: none; }
  15% { opacity: 1; transform: translate(3px, -2px) rotate(3deg) scale(1.05); }
  30% { opacity: 1; transform: none; }
}
@keyframes wn-pocket-in {
  from { opacity: 1; transform: none; }
  70% { opacity: 1; }
  to { opacity: 0; transform: translate(-19px, 14px) scale(0.15) rotate(-30deg); }
}
@keyframes wn-armoffer { from { transform: rotate(20deg); } to { transform: rotate(-120deg); } }
@keyframes wn-armjab { 0%, 30%, 100% { transform: rotate(-120deg); } 15% { transform: rotate(-114deg); } }
@keyframes wn-armstash { from { transform: rotate(-120deg); } 60% { transform: rotate(22deg); } to { transform: rotate(6deg); } }

/* Crumpled paper: creases, highlights and a ragged edge. */
.crumple {
  background:
    linear-gradient(118deg, transparent 28%, rgba(0, 0, 0, 0.07) 29%, rgba(255, 255, 255, 0.45) 30.5%, transparent 33%),
    linear-gradient(32deg, transparent 52%, rgba(255, 255, 255, 0.5) 53%, rgba(0, 0, 0, 0.07) 55%, transparent 58%),
    linear-gradient(164deg, transparent 63%, rgba(0, 0, 0, 0.08) 64%, transparent 67%),
    linear-gradient(76deg, transparent 18%, rgba(0, 0, 0, 0.05) 19%, transparent 21%),
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.6), transparent 42%),
    radial-gradient(circle at 78% 78%, rgba(90, 60, 20, 0.12), transparent 48%),
    #efe8d4;
  clip-path: polygon(2% 5%, 16% 0, 33% 3%, 51% 0, 68% 2.5%, 85% 0, 100% 4%, 97.5% 22%, 100% 41%, 98% 59%, 100% 78%, 97% 100%, 81% 97%, 63% 100%, 45% 96.5%, 27% 100%, 9% 97%, 0 99%, 2.5% 80%, 0 61%, 3% 42%, 0 23%);
}

/* ---------- sources sheet ---------- */

.sources {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sources[hidden] { display: none; }
.sources-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(34, 32, 30, 0.74);
  -webkit-backdrop-filter: grayscale(1) blur(1.5px);
  backdrop-filter: grayscale(1) blur(1.5px);
  opacity: 0;
  transition: opacity 0.25s;
}
.sources.open .sources-backdrop { opacity: 1; }
.sources-hold {
  position: relative;
  width: min(100vw - 44px, 400px);
  margin-top: 56px;
  opacity: 0;
  transform: translate(-40px, -60px) rotate(-14deg) scale(0.85);
  transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.2s;
}
.sources.open .sources-hold { opacity: 1; transform: none; }
.sources.closing .sources-hold { opacity: 0; transform: translate(-60px, -80px) rotate(-18deg) scale(0.7); transition: transform 0.26s ease-in, opacity 0.26s ease-in; }

/* Held by one corner, at arm's length, swaying a little. */
.sources-swing { position: relative; transform-origin: 14px 12px; animation: wn-stinky 2.6s ease-in-out infinite alternate; }
@keyframes wn-stinky { from { transform: rotate(1.5deg); } to { transform: rotate(4.5deg); } }
.sources-shadow { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.5)); }
.sources-sheet {
  position: relative;
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px 24px 24px 28px;
  color: #2a1d12;
  scrollbar-width: thin;
}
.sources-title {
  margin: 0 40px 4px 0;
  font-family: var(--marker);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  transform: rotate(-1.5deg);
}
.sources-sub { margin: 0 0 12px; font-size: 13px; color: #6b5a44; }
.sources-list { margin: 0; padding-left: 20px; display: grid; gap: 9px; font-size: 14px; line-height: 1.35; }
.sources-list a { color: #1f3f66; text-decoration: underline; text-decoration-color: rgba(31, 63, 102, 0.35); text-underline-offset: 2px; }
.sources-list a:hover, .sources-list a:focus-visible { text-decoration-color: currentColor; }
.sources-list small { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8a7f68; white-space: nowrap; }
.sources-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(90, 60, 20, 0.08);
  font-size: 26px;
  line-height: 1;
  color: #6b5a44;
}
.sources-done {
  width: 100%;
  height: 46px;
  margin-top: 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(to bottom, #c9493a, var(--ketchup));
  color: #fff4e6;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 0 var(--ketchup-dk);
}
.sources-done:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ketchup-dk); }
.sources-hand {
  position: absolute;
  z-index: 2;
  left: -105px;
  top: -97px;
  width: 150px;
  height: 140px;
  overflow: visible;
  pointer-events: none;
  fill: none;
}
.sources-stink {
  position: absolute;
  z-index: 1;
  top: -54px;
  left: 42%;
  width: 72px;
  height: 56px;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: #9dbb4a;
  stroke-width: 3;
  stroke-linecap: round;
}
.sources-stink path { opacity: 0; animation: wn-stink 1.9s ease-in-out infinite; }
.sources-stink path:nth-child(2) { animation-delay: 0.6s; }
.sources-stink path:nth-child(3) { animation-delay: 1.2s; }
@keyframes wn-stink {
  from { opacity: 0; transform: translateY(10px); }
  40% { opacity: 0.9; }
  to { opacity: 0; transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .wn-svg, .signing .wn-wave, .signing .wn-arm, .signing .wn-mouth, .reading .wn-mouth, .rummage .wn-arm, .rummage .wn-pocket, .sources-swing, .sources-stink path { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .offering .wn-note, .offering .wn-arm { animation-iteration-count: 1, 1 !important; }
  .sources-stink path { opacity: 0.7; }
}

.noscript { color: var(--paper); text-align: center; padding: 2rem; }