/* Ricay Zine — all styles. Tokens first (design handoff "Design Tokens"), then landing,
   info and maker sections. No build step: this file is served as-is. */

/* ---------- fonts (self-hosted; no Google Fonts at runtime) ---------- */
/* Good Sans ships as a single Regular weight — 600/700 usages render as synthetic bold.
   License for web embedding is a client question, not a code one. */
@font-face {
  font-family: "Good Sans";
  src: url("/fonts/good-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Oswald;
  src: url("/fonts/oswald-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Short Stack";
  src: url("/fonts/short-stack-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Caveat;
  src: url("/fonts/caveat-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Caveat;
  src: url("/fonts/caveat-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
/* Marker face for the scrap-paper layer — objects you'd pick up (labels, buttons). */
@font-face {
  font-family: "Permanent Marker";
  src: url("/fonts/permanent-marker-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* palette */
  --blue: #a8c7fa;
  --brown: #8d6e5c;
  --green: #a3c585;
  --pink: #f9a8c9;
  --orange: #fcbf6a;
  --coral: #fb8a8a;
  --royal: #2d55a5;
  --forest: #2e9150;
  /* ink / structure */
  --ink: #1d5c38;
  --border-green: #44815e;
  --ink-on-blue: #1e355e;
  --ink-on-pink: #5c2340;
  --ink-on-coral: #5c1f1f;
  /* surfaces */
  --cream: #f7f2e4;
  --paper: #fffdf6;
  --pale-green: #eaf1de;
  --body-ink: #2b2b2b;
  --kraft: #b3a084;
  /* type */
  --display: "Good Sans", Oswald, sans-serif;
  --body: "Short Stack", Karla, system-ui, sans-serif;
  --hand: Caveat, cursive;
  /* shadows */
  --shadow-hard: 4px 5px 0 rgba(0, 0, 0, 0.3);
  --shadow-hard-lg: 5px 6px 0 rgba(0, 0, 0, 0.3);
  --shadow-scrap: 0 6px 16px rgba(0, 0, 0, 0.25);
  --shadow-sheet: 0 14px 34px rgba(0, 0, 0, 0.38);
  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Release-only overshoot (~bounce 0.2). Press stays instant on --ease-out: slow where the
     user is deciding, fast where the system is responding. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================================================
   Scrap-paper token layer (design handoff "zine-tokens.css"). Additive — adds the
   physical-material layer (torn edges, paper fibre, tape, craft presets) the info
   page adopts. Overrides nothing above.
   ========================================================================== */
:root {
  /* ---- torn-edge silhouettes — clip-path polygons, percentage-based.
     A clipped element cannot cast a box-shadow — wrap it in a .scrap-lift span
     and let the WRAPPER carry the drop-shadow filter. */
  --torn-panel: polygon(0.6% 1.4%,14% 0.2%,29% 1.8%,44% 0.4%,60% 2%,75% 0.5%,89% 1.6%,99.4% 0.6%,100% 10%,98.6% 22%,100% 34%,99% 46%,100% 58%,98.7% 70%,100% 82%,99.2% 93%,100% 99.2%,87% 99%,72% 100%,57% 98.5%,42% 100%,27% 98.7%,13% 100%,1% 99.2%,0.2% 90%,1.4% 78%,0% 66%,1% 54%,0% 42%,1.3% 30%,0% 18%,0.7% 8%);
  --torn-a: polygon(0.8% 5%,12% 0%,26% 6%,40% 1%,55% 5%,69% 0.5%,83% 5%,99% 1%,100% 26%,98.6% 52%,100% 74%,99.2% 96%,84% 100%,70% 94%,56% 99%,41% 95%,27% 100%,13% 95%,0.6% 99%,0% 76%,1.4% 50%,0% 26%);
  --torn-b: polygon(1% 4%,13% 0.5%,27% 5%,41% 0%,56% 5.5%,70% 1%,84% 4%,99.2% 0.5%,100% 24%,98.8% 48%,100% 72%,99% 96%,85% 100%,71% 95%,57% 100%,42% 94%,28% 99%,14% 95%,0.8% 100%,0% 74%,1.2% 48%,0% 24%);
  --torn-c: polygon(0.6% 6%,12% 1%,26% 6.5%,41% 1.5%,55% 6%,70% 1%,84% 5.5%,99% 1.5%,100% 27%,98.7% 53%,100% 75%,99.3% 97%,85% 100%,70% 95%,56% 100%,42% 96%,27% 100%,13% 96%,0.7% 99%,0% 77%,1.5% 51%,0% 27%);
  --torn-slip: polygon(1% 6%,15% 0%,30% 7%,46% 1%,62% 6%,78% 0.5%,99% 4%,100% 34%,98.5% 66%,99% 96%,82% 100%,64% 94%,47% 100%,30% 95%,14% 100%,0.8% 96%,0% 66%,1.6% 34%);
  --torn-ticket: polygon(0.8% 4%,14% 0%,28% 5%,43% 0.5%,58% 5%,72% 0%,86% 4.5%,99.2% 1%,100% 30%,98.8% 60%,100% 88%,99% 99%,85% 99.5%,70% 100%,56% 95%,41% 100%,27% 96%,13% 100%,0.7% 98%,0% 70%,1.3% 40%,0% 14%);

  /* ---- paper grounds — two fibre gradients over a base tint. Order matters. */
  --paper-graph:
    repeating-linear-gradient(0deg, rgba(150,120,95,.15) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(150,120,95,.15) 0 1px, transparent 1px 14px),
    linear-gradient(176deg, #fdf9ee, #f2e9d4);
  --paper-orange:
    repeating-linear-gradient(94deg, rgba(255,255,255,.2) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(120,80,40,.07) 0 1px, transparent 1px 5px),
    linear-gradient(170deg, #fdd08c, #f8b153);
  --paper-green:
    repeating-linear-gradient(88deg, rgba(255,255,255,.22) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(60,90,40,.07) 0 1px, transparent 1px 5px),
    linear-gradient(174deg, #b6d497, #98bd78);
  --paper-pink:
    repeating-linear-gradient(92deg, rgba(255,255,255,.22) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(120,40,80,.06) 0 1px, transparent 1px 5px),
    linear-gradient(168deg, #fcbcd8, #f596bf);
  --paper-kraft:
    repeating-linear-gradient(96deg, rgba(255,255,255,.16) 0 1px, transparent 1px 3px),
    linear-gradient(172deg, #dcc7a6, #c8b08b);
  --paper-cream:
    repeating-linear-gradient(90deg, rgba(160,140,105,.1) 0 1px, transparent 1px 6px),
    linear-gradient(174deg, #fffdf6, #f2ebd8);
  --paper-blue:
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 4px),
    linear-gradient(172deg, #bdd5fb, #9dbdf6);

  /* ---- new ink pairings for the scrap grounds */
  --ink-on-orange: #6b3f10;
  --ink-on-green: #2c4419;
  --ink-on-kraft: #4a3728;

  /* ---- craft level: "Handmade" is the shipping default.
     Override the whole block under a body/section class to retune the feel. */
  --tilt-panel: -1deg;
  --tilt-1: -1.4deg;
  --tilt-2: 1.1deg;
  --tilt-3: -0.8deg;
  --tilt-4: 2deg;
  --tilt-5: 0.6deg;
  --tilt-note: 1.5deg;
  --tape-op: .92;
  --scrap-shadow: drop-shadow(3px 4px 0 rgba(0,0,0,.22));
  --panel-shadow: drop-shadow(5px 7px 8px rgba(0,0,0,.32));

  /* ---- scrap lettering */
  --scrap-font: "Permanent Marker", "Good Sans", sans-serif;
  --scrap-size: 19px;
  --scrap-size-sm: 19px;
  --scrap-weight: 400;
  --scrap-track: .1em;
}

/* Tidy — flat, no tape, soft shadows. For dense/administrative views. */
.craft-tidy {
  --tilt-panel: 0deg; --tilt-1: 0deg; --tilt-2: 0deg; --tilt-3: 0deg;
  --tilt-4: 0deg; --tilt-5: 0deg; --tilt-note: 0deg;
  --tape-op: 0;
  --scrap-shadow: drop-shadow(1px 2px 4px rgba(0,0,0,.18));
  --panel-shadow: drop-shadow(2px 4px 10px rgba(0,0,0,.22));
}
/* Ransom note — maximum collage. For the landing and campaign pages. */
.craft-ransom {
  --tilt-panel: -2.8deg; --tilt-1: -5deg; --tilt-2: 3.6deg; --tilt-3: -3.4deg;
  --tilt-4: 5.5deg; --tilt-5: -2.4deg; --tilt-note: 3.4deg;
  --tape-op: 1;
  --scrap-shadow: drop-shadow(5px 7px 0 rgba(0,0,0,.36));
  --panel-shadow: drop-shadow(9px 11px 6px rgba(0,0,0,.42));
}

/* ---- desk surfaces ---- */
.desk-kraft {
  background:
    repeating-linear-gradient(90deg, rgba(76,56,38,.12) 0 2px, transparent 2px 148px),
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(120,92,62,.05) 6px 9px,
      transparent 9px 21px, rgba(64,46,30,.05) 21px 24px),
    linear-gradient(180deg, #b9a488, #a6906f);
  --chrome-ink: var(--paper);
}
.desk-pink {
  background: #f3a4c6 url("/assets/backdrop-street-pink.jpg") center / cover no-repeat;
  --chrome-ink: var(--paper);
}
.desk-mat {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1px, transparent 1px 42px),
    linear-gradient(180deg, #337054, #23543f);
  --chrome-ink: #f1f6ea;
}
.desk-newsprint {
  background:
    radial-gradient(rgba(90,78,66,.2) 1px, transparent 1.5px) 0 0 / 5px 5px,
    linear-gradient(180deg, #e9e3d3, #dbd4c0);
  --chrome-ink: #3a3226;
}

/* ---- scrap components ---- */
/* Wrapper that carries the shadow for any clipped child. Always needed. */
.scrap-lift { position: relative; display: block; filter: var(--scrap-shadow); }
.scrap-lift-panel { position: relative; display: block; filter: var(--panel-shadow); }

/* A torn sheet of graph paper. Use for panels, cards, dialogs. */
.scrap-panel {
  position: relative;
  clip-path: var(--torn-panel);
  background: var(--paper-graph);
  transform: rotate(var(--tilt-panel));
}

/* A torn paper label/button. Pair with a --paper-* ground and an ink colour. */
.scrap {
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 15px 8px 17px;
  text-align: center;
  font-weight: var(--scrap-weight);
  font-size: var(--scrap-size);
  line-height: 1.05;
  font-family: var(--scrap-font);
  clip-path: var(--torn-a);
}
.scrap-sm { padding: 9px 6px 11px; font-size: var(--scrap-size-sm); }
.scrap-orange { background: var(--paper-orange); color: var(--ink-on-orange); clip-path: var(--torn-a);  transform: rotate(var(--tilt-1)); }
.scrap-green  { background: var(--paper-green);  color: var(--ink-on-green);  clip-path: var(--torn-b);  transform: rotate(var(--tilt-2)); }
.scrap-pink   { background: var(--paper-pink);   color: var(--ink-on-pink);   clip-path: var(--torn-c);  transform: rotate(var(--tilt-3)); }
.scrap-kraft  { background: var(--paper-kraft);  color: var(--ink-on-kraft);  clip-path: var(--torn-slip); transform: rotate(var(--tilt-4)); }
.scrap-blue   { background: var(--paper-blue);   color: var(--ink-on-blue);   clip-path: var(--torn-b);  transform: rotate(var(--tilt-2)); }
/* Outlined cream ticket. box-shadow:inset survives the clip; a normal box-shadow would not. */
.scrap-ticket {
  background: var(--paper-cream);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
  clip-path: var(--torn-ticket);
  transform: rotate(var(--tilt-5));
  padding: 13px 8px;
  letter-spacing: var(--scrap-track);
  font-size: var(--scrap-size-sm);
}
@media (hover: hover) and (pointer: fine) {
  .scrap:hover { filter: brightness(1.05); }
  .scrap-ticket:hover { filter: brightness(.98); }
}
.scrap:active { translate: 1px 2px; }

/* Scanned washi tape holding a scrap down. Sits in the .scrap-lift wrapper, never inside
   the clipped element. multiply knocks out the scan's white ground — do not pre-key. */
.tape {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: var(--tape-op);
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--body);
  color: var(--body-ink);
  -webkit-text-size-adjust: 100%;
}

.footer-band {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  font: 600 14px var(--display);
  letter-spacing: 0.2em;
  padding: 10px;
}

/* ---------- motion ---------- */
@keyframes drift1 {
  0% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(14px, -10px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(-4deg); }
}
@keyframes drift2 {
  0% { transform: translate(0, 0) rotate(3deg); }
  50% { transform: translate(-12px, 12px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(3deg); }
}
@keyframes bob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* ---------- landing ---------- */
.landing {
  min-height: 100svh;
  /* pink street-collage backdrop (Lu's duotone); flat pink shows while it loads */
  background: #f3a4c6 url("/assets/backdrop-street-pink.jpg") center / cover no-repeat;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.stage {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.about-pebble {
  position: absolute;
  left: 36px;
  top: 22px;
  z-index: 3;
  animation: drift1 9s ease-in-out infinite;
}
.about-pebble img {
  display: block;
  width: 170px;
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.22));
  transition: transform 180ms var(--ease-spring);
}
/* Aggregate-only pile count — left of the tape, clear of the footer band. */
.pile-scrap {
  position: absolute;
  left: 36px;
  bottom: 56px;
  z-index: 2;
  padding: 6px 14px;
  background: var(--paper);
  color: var(--body-ink);
  font: 400 22px/1 var(--hand);
  rotate: 2deg;
  box-shadow: var(--shadow-scrap);
}

.add-page-tape {
  position: absolute;
  right: 34px;
  bottom: 46px;
  z-index: 3;
  animation: drift2 11s ease-in-out infinite;
}
.add-page-tape img {
  display: block;
  width: 380px;
  max-width: 62vw;
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.22));
  transition: transform 180ms var(--ease-spring);
}
/* Hover is gated: on touch, :hover sticks after a tap and leaves controls looking pressed. */
@media (hover: hover) and (pointer: fine) {
  .about-pebble:hover img { transform: scale(1.06) rotate(-2deg); }
  .add-page-tape:hover img { transform: scale(1.05) rotate(1deg); }
}
.about-pebble:active img, .add-page-tape:active img {
  transform: translate(2px, 3px);
  transition: transform 110ms var(--ease-out);
}
.landing a:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }

.logo-wrap {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.logo-wrap img {
  display: block;
  width: 480px;
  max-width: 78vw;
  animation: bob 7s ease-in-out infinite;
  /* softer glow lifts the glitter sticker off the lighter pink collage without blobbing */
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 14px rgba(255, 250, 252, 0.55))
    drop-shadow(0 8px 16px rgba(120, 40, 80, 0.22));
}

@media (max-width: 720px) {
  .footer-band { font-size: 12px; letter-spacing: 0.18em; padding: 9px; }
  .about-pebble { left: 14px; top: 14px; }
  .about-pebble img { width: 112px; }
  .logo-wrap { top: 38%; }
  .logo-wrap img { width: 310px; }
  .add-page-tape { right: 12px; bottom: 44px; }
  .add-page-tape img { width: 260px; max-width: 74vw; }
}

/* Entrance: standalone `translate`, never `transform` — the drift/bob keyframes own transform.
   0/50/100ms stagger, settled by 380ms, and nothing is click-blocked while it plays. */
@media (prefers-reduced-motion: no-preference) {
  .about-pebble, .logo-wrap img, .add-page-tape {
    opacity: 1;
    translate: 0 0;
    transition: opacity 260ms var(--ease-out), translate 280ms var(--ease-out);
  }
  .logo-wrap img { transition-delay: 50ms; }
  .add-page-tape { transition-delay: 100ms; }
  @starting-style {
    .about-pebble, .logo-wrap img, .add-page-tape { opacity: 0; translate: 0 14px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Paused, not none — the 0% keyframe rotation is the buttons' only tilt, so `animation: none`
     would flatten the designed collage. Frozen but still a collage. */
  .about-pebble, .add-page-tape, .logo-wrap img { animation-play-state: paused; }
}

/* ---------- info page ---------- */
/* Newsprint desk surface comes from .desk-newsprint (on <body>); only layout here. */
.info-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.info-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
  border-bottom: 3px solid var(--ink);
  background: rgba(247, 242, 228, 0.95);
}
.back-link {
  font: 400 15px var(--display);
  letter-spacing: 0.1em;
  color: var(--chrome-ink);
  text-decoration: none;
}
.info-head img { height: 36px; margin-left: auto; }

/* Torn graph-paper sheet floating on the desk; .spread-lift carries its drop-shadow.
   Columns stay square — the spread itself is not tilted. */
.spread-lift { flex: 1; display: flex; flex-direction: column; }
.spread {
  --tilt-panel: 0deg;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(1080px, calc(100% - 56px));
  margin: 30px auto;
}
/* The spread rises in once. The chips are skipped deliberately — on a phone they sit far below
   the fold, so the stagger would only ever play unseen. */
@media (prefers-reduced-motion: no-preference) {
  .spread {
    opacity: 1;
    translate: 0 0;
    transition: opacity 300ms var(--ease-out), translate 320ms var(--ease-out);
  }
  @starting-style {
    .spread { opacity: 0; translate: 0 12px; }
  }
}
.info-col {
  padding: 38px 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.info-col.project { border-right: 3px solid var(--ink); }
.info-col.pack { background: var(--pale-green); }
.info-col.lu { grid-column: 1 / -1; border-top: 3px solid var(--ink); }
.workshop-note { font-style: italic; }

.sec-head { display: flex; align-items: baseline; gap: 12px; }
.sec-num { font: 400 18px var(--display); }
.sec-num.one { color: var(--coral); }
.sec-num.two { color: var(--royal); }
.sec-num.three { color: var(--coral); }
.sec-head h2 {
  margin: 0;
  font: 400 34px var(--display);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.info-col p { margin: 0; font: 400 16px/1.65 var(--body); max-width: 44ch; }

/* torn-paper ground, tilt and ink come from .scrap-blue; keep only the Caveat sizing */
.question-card { padding: 20px 22px; }
.question-card .q1 { font: 600 24px var(--hand); }
.question-card .q2 { font: 600 30px var(--hand); }

.chips { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
/* chips are torn scraps now; keep them pill-sized in the row, not full width */
.chips .scrap-lift { display: inline-block; }
.chips .scrap { width: auto; }

.kit-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* cream ticket ground + inset ink ring come from .scrap-ticket */
.kit-card.scrap-ticket { text-align: left; padding: 14px; }
.kit-card h3 {
  margin: 0;
  font: 400 13px var(--display);
  letter-spacing: 0.1em;
  color: var(--ink);
}
.kit-card ul { margin: 8px 0 0; padding-left: 18px; font: 400 14px/1.6 var(--body); }

/* torn pink-paper ground, tilt and ink come from .scrap-pink */
.qr-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}
.qr-tape { top: -9px; left: 24px; width: 70px; transform: rotate(-6deg); }
.qr-grid {
  width: 64px;
  height: 64px;
  background: var(--paper);
  border: 2px solid var(--ink);
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  padding: 5px;
}
.qr-grid i { display: block; }
.qr-grid i.on { background: var(--ink); }
.qr-card h3 { margin: 0; font: 400 15px var(--display); letter-spacing: 0.08em; }
.qr-card p { font: 400 13px var(--body); max-width: none; }

.signoff { margin-top: auto; font: 600 22px var(--hand); color: var(--ink); }
/* green torn-paper button in marker; .scrap + .scrap-green supply ground, clip, tilt, font */
.make-lift { align-self: start; }
.make-btn.scrap { width: auto; text-decoration: none; padding: 14px 22px; }
.info-page .footer-band { font-size: 13px; letter-spacing: 0.22em; padding: 9px; }

@media (max-width: 720px) {
  .info-head { padding: 12px 16px; }
  .info-head img { height: 30px; }
  .back-link { font-size: 14px; letter-spacing: 0.08em; }
  .spread { grid-template-columns: 1fr; width: calc(100% - 24px); margin: 14px auto; }
  .info-col { padding: 24px 20px; gap: 14px; }
  .info-col.project { border-right: none; }
  .sec-head h2 { font-size: 26px; letter-spacing: 0.03em; }
  .sec-num { font-size: 15px; }
  .info-col p { font-size: 14px; }
  .question-card { padding: 16px 18px; }
  .question-card .q1 { font-size: 20px; }
  .question-card .q2 { font-size: 26px; }
  .chips .scrap { font-size: 15px; padding: 7px 6px 9px; }
  .kit-cards { grid-template-columns: 1fr; }
  .kit-card.scrap-ticket { padding: 12px; }
  .kit-card h3 { font-size: 12px; letter-spacing: 0.08em; }
  .kit-card ul { font-size: 13px; }
  .qr-card { padding: 14px 16px; gap: 14px; }
  .qr-grid { width: 56px; height: 56px; padding: 4px; }
  .qr-card h3 { font-size: 13px; letter-spacing: 0.06em; }
  .qr-card p { font-size: 12px; }
  .make-btn { display: block; }
  .signoff { font-size: 20px; }
  .info-page .footer-band { font-size: 11px; letter-spacing: 0.16em; padding: 8px; }
}

/* ---------- maker ---------- */
/* Mockup 2(1): kraft desk, white rounded toolbox left, sheet centre, pink prompts note
   right with the Submit! scrap. Phone-first: below 720px the panels collapse around the
   sheet and download/submit pin to a fixed bottom bar. */
.maker {
  height: 100svh;
  /* wood table: layered CSS grain over the kraft tone — no image, no request, subtle
     on purpose: the cream sheet stays the hero */
  background:
    repeating-linear-gradient(90deg, rgba(76, 56, 38, 0.12) 0 2px, transparent 2px 148px),
    repeating-linear-gradient(90deg,
      transparent 0 6px, rgba(120, 92, 62, 0.05) 6px 9px,
      transparent 9px 21px, rgba(64, 46, 30, 0.05) 21px 24px),
    linear-gradient(180deg, #b9a488, #a6906f);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 300px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head head head"
    "toolbox sheet prompts"
    "status status status";
  column-gap: 14px;
  padding: 0 20px;
}
.mk-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 4px 0;
}
.back-arrow {
  font: 400 22px var(--display);
  color: var(--paper);
  text-decoration: none;
}
.tb-logo { height: 40px; }
/* The design drops the visible header title (the sheet's own "WHAT'S YOUR BILLERICAY?" is
   the heading). Keep the h1 for the document outline, but visually hidden. */
.mk-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Toolbox = torn graph-paper panel of scrap-paper buttons. The aside carries the panel
   drop-shadow; .scrap-panel (token layer) supplies the clip/graph/tilt, each button its
   own .scrap-lift shadow. */
.toolbox {
  grid-area: toolbox;
  align-self: start;
  position: relative;
  margin-top: 30px;
  filter: var(--panel-shadow);
}
.tb-panel {
  padding: 46px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.tb-slip { align-self: center; width: 78%; margin-top: 2px; }
.tb-dl { margin-top: 4px; }
.tb-tape-collage { top: -7px; left: 7px; width: 74px; transform: rotate(-8deg); }
.tb-tape-dl { bottom: -10px; right: -5px; width: 64px; transform: rotate(6deg); }
.toolbox-tape {
  position: absolute;
  top: -14px;
  left: -22px;
  width: 154px;
  transform: rotate(-3deg);
  pointer-events: none;
}
.tb-hint { font: 600 15px/1.25 var(--hand); color: var(--ink); text-align: center; padding: 2px 2px 0; }

.prompts {
  grid-area: prompts;
  align-self: start;
  position: relative;
  margin-top: 26px;
  width: 100%;
  aspect-ratio: 789 / 972;
  background: url("/assets/prompts-note.webp") center / contain no-repeat;
  transform: rotate(1.5deg);
  filter: drop-shadow(4px 5px 8px rgba(0, 0, 0, 0.2));
}
.prompts-list {
  position: absolute;
  inset: 12% 8% 9% 12%;
  overflow: hidden;
  font: 400 12px/1.35 ui-monospace, "Courier New", monospace;
  color: #3a2b2e;
}
.prompts-list ul { margin: 0 0 4px; padding: 0; list-style: none; }
.prompts-list li { margin-bottom: 3px; }
/* long "could include" paragraph must fit the fixed note graphic (overflow is hidden) */
.prompts-list p { margin: 0; font-size: 10px; line-height: 1.3; }
/* Desktop keeps the full note; the chip is the phones-only stand-in (shown below). */
.prompt-chip { display: none; }
.submit-scrap {
  position: absolute;
  right: -5%;
  bottom: -8%;
  width: 64%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.submit-scrap img {
  display: block;
  width: 100%;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.2));
  transition: transform 180ms var(--ease-spring);
}
.submit-scrap:active img { transform: translate(2px, 3px); transition: transform 110ms var(--ease-out); }

/* Press is instant, release springs back — the transition lives on the base rule, not :active. */
.pill, .btn-download, .btn-submit, .dialog-actions button, .make-btn {
  transition: transform 180ms var(--ease-spring), box-shadow 180ms var(--ease-spring);
}
.btn-download { background: var(--cream); color: var(--ink); border: 2px solid var(--ink); padding: 9px 16px; font: 600 14px var(--display); letter-spacing: 0.1em; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .pill:hover { filter: brightness(1.06); }
  .btn-download:hover { background: #efe9db; }
  .btn-submit:hover { filter: brightness(1.1); }
  .submit-scrap:hover img { transform: scale(1.05) rotate(-1deg); }
}
.pill:active, .btn-download:active, .make-btn:active,
.btn-submit:active, .dialog-actions button:active {
  transition: transform 110ms var(--ease-out), box-shadow 110ms var(--ease-out);
}
.pill:active, .btn-download:active, .dialog-actions button:active { transform: translate(1px, 2px); }
.make-btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); }
.btn-submit:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25); }
.btn-submit {
  background: var(--forest);
  color: var(--paper);
  border: none;
  padding: 9px 18px;
  font: 600 14px var(--display);
  letter-spacing: 0.1em;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.btn-submit:disabled { opacity: 0.55; box-shadow: none; }

.collage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.collage-grid button {
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
}
.collage-grid img { display: block; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .collage-grid button:hover { border-color: var(--royal); }
}

.sheet-area {
  grid-area: sheet;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px;
  /* size container so the sheet can fit BOTH dimensions — height:100% + max-width
     silently breaks the A5 aspect when the column is narrow */
  container-type: size;
}
.sheet {
  position: relative;
  aspect-ratio: 437 / 620;
  width: min(100cqw, calc(100cqh * 437 / 620));
  background: var(--paper);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
  container-type: inline-size;
}
/* on-sheet furniture — sized in cqi so it tracks the sheet, not the viewport */
.sheet-title {
  position: absolute;
  left: 4.6cqi;
  top: 3.2cqi;
  font: 600 5.43cqi "Permanent Marker", "Good Sans", sans-serif;
  letter-spacing: 0.09em;
  color: var(--ink);
  pointer-events: none;
}
.sheet-name {
  position: absolute;
  left: 4.6cqi;
  right: 4.6cqi;
  bottom: 2.2cqi;
  display: flex;
  align-items: baseline;
  gap: 1.6cqi;
}
.sheet-name span { font: 600 2.3cqi var(--display); letter-spacing: 0.1em; color: var(--ink); }
.sheet-name input {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 2px solid var(--ink);
  background: transparent;
  outline: none;
  font: 600 2.97cqi var(--hand);
  color: #223333;
  padding: 1px;
}

.piece {
  position: absolute;
  background: var(--paper);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  /* box-shadow ONLY — never left/top/width/height, dragging must stay 1:1. */
  transition: box-shadow 180ms var(--ease-out);
  /* the whole piece is the drag surface, so it must not hand the gesture to page scroll */
  touch-action: none;
  cursor: grab;
}
/* Pickup: shadow AND a hair of lift. Outside the no-preference block on purpose — this is state
   feedback, not a loop, and with motion off the piece must still read as picked up. */
.piece.held { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); scale: 1.02; cursor: grabbing; }
.piece.held, .piece.held * { user-select: none; -webkit-user-select: none; }
/* Standalone scale/opacity — they compose with the inline rotate() transform place() writes. */
.piece { scale: 1; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .piece {
    transition: transform 200ms var(--ease-out), box-shadow 180ms var(--ease-out),
      scale 200ms var(--ease-out), opacity 200ms var(--ease-out);
  }
  /* A transform transition while dragging would lag the 1:1 tracking. */
  .piece.held { transition: box-shadow 180ms var(--ease-out); }
  /* Worn only for the length of one ↻ tap; dragify strips it on pointerdown. */
  .piece.tilting { transition: transform 220ms var(--ease-spring), box-shadow 180ms var(--ease-out); }
  @starting-style {
    .piece { scale: 0.94; opacity: 0; }
  }
}
.piece.removing {
  opacity: 0;
  scale: 0.94;
  transition: opacity 140ms var(--ease-out), scale 140ms var(--ease-out);
}
.undo-btn { padding: 2px 8px; font-size: 12px; margin-left: 4px; }
.piece-ctl, .handle, .toolbar button, .dialog-actions button {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Only on the tapped piece — otherwise four sheets of buttons sit over the collage. */
.piece-ctl {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  gap: 6px;
  z-index: 2;
}
/* Press feedback for the drag affordances. Never transform the handle on hold — :active lasts
   the whole drag, so only a scale that settles back on release is safe. */
.piece-ctl button, .handle { transition: scale 180ms var(--ease-spring), filter 180ms var(--ease-spring); }
.piece-ctl button:active { scale: 0.9; }
.handle:active { scale: 0.88; }
.piece.active .piece-ctl { display: flex; }
/* The controls appear with the tap that activates the piece — display:none→flex, so the
   entrance needs allow-discrete to have anything to transition from. */
@media (prefers-reduced-motion: no-preference) {
  .piece.active .piece-ctl {
    opacity: 1;
    scale: 1;
    transition: opacity 160ms var(--ease-out), scale 160ms var(--ease-spring),
      display 160ms allow-discrete;
  }
  @starting-style {
    .piece.active .piece-ctl { opacity: 0; scale: 0.9; }
  }
}
.piece-ctl button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  font: 700 14px ui-monospace, monospace;
  cursor: pointer;
  padding: 0;
}
.ctl-rot { color: var(--ink-on-blue); }
.ctl-del { color: var(--ink-on-coral); }
.piece-body { position: absolute; inset: 0; overflow: hidden; }
.piece-body canvas { width: 100%; height: 100%; display: block; }
/* Opacity-only, so it stays the gentle floor under reduced motion too. */
.piece-body canvas.developed { opacity: 1; transition: opacity 220ms var(--ease-out); }
@starting-style {
  .piece-body canvas.developed { opacity: 0; }
}
.drop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font: 400 3.1cqi/1.2 var(--hand);
  color: #6f6b5c;
  border: 2px dashed rgba(45, 85, 165, 0.4);
  cursor: pointer;
}
/* Visually hidden but focusable — display:none makes photo slots keyboard-unreachable. */
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:has(input:focus-visible) { outline: 3px solid var(--royal); outline-offset: 2px; }
.piece textarea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  resize: none;
  border: none;
  outline: none;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(0deg, transparent 0 5.03cqi, rgba(45, 85, 165, 0.35) 5.03cqi, calc(5.03cqi + 1px));
  /* baseline sits on each rule: line-height = rule period; padding-top = period/2 − 0.3×font */
  font: 600 4.2cqi/5.03cqi var(--hand);
  color: #223333;
  padding: 1.13cqi 1.4cqi 0;
}
.handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  background: var(--blue);
  border: 1px solid var(--ink-on-blue);
  cursor: nwse-resize;
  touch-action: none;
  z-index: 2;
}

.maker :is(a, button):focus-visible {
  outline: 3px solid var(--royal);
  outline-offset: 2px;
}
.sheet-name input:focus-visible { border-bottom-color: var(--royal); }
.piece textarea:focus-visible { outline: 2px dashed var(--royal); outline-offset: -2px; }

.maker-status {
  grid-area: status;
  margin: 0;
  padding: 0 24px 2px;
  text-align: center;
  font: 600 15px var(--hand);
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  min-height: 1.2em;
}

.scrap-dialog {
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-hard-lg);
  padding: 0;
  max-width: 420px;
  width: calc(100% - 32px);
  /* Rises from the action-bar direction. Engines without @starting-style/allow-discrete
     just pop — acceptable, no JS fallback. */
  opacity: 1;
  translate: 0 0;
  transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out),
    display 200ms allow-discrete, overlay 200ms allow-discrete;
}
.scrap-dialog:not([open]) { opacity: 0; translate: 0 10px; }
@starting-style {
  .scrap-dialog[open] { opacity: 0; translate: 0 10px; }
}
.scrap-dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: background 200ms var(--ease-out), display 200ms allow-discrete,
    overlay 200ms allow-discrete;
}
.scrap-dialog[open]::backdrop { background: rgba(0, 0, 0, 0.45); }
@starting-style {
  .scrap-dialog[open]::backdrop { background: rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .scrap-dialog {
    transition: opacity 120ms var(--ease-out), display 120ms allow-discrete,
      overlay 120ms allow-discrete;
  }
  .scrap-dialog:not([open]) { translate: 0 0; }
  @starting-style {
    .scrap-dialog[open] { translate: 0 0; }
  }
}
.dialog-inner { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.dialog-lead { margin: 0; font: 400 15px/1.5 var(--body); }
.consent { display: flex; gap: 10px; font: 400 13px/1.5 var(--body); }
.dialog-status { margin: 0; font: 400 13px var(--body); color: var(--ink); min-height: 1.2em; }
/* Keyframed, not @starting-style: the element already exists, it only gains a class. */
@keyframes status-rise {
  from { opacity: 0; translate: 0 6px; }
}
@keyframes status-fade {
  from { opacity: 0; }
}
.dialog-status.landed, .maker-status.landed { animation: status-rise 250ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .dialog-status.landed, .maker-status.landed { animation-name: status-fade; }
}
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }
.dialog-actions button { font-family: var(--display); font-weight: 600; letter-spacing: 0.08em; cursor: pointer; }

/* Success state — their own page, then share/download, then the optional email. */
#submit-success { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
#success-preview {
  width: min(52vw, 200px);
  aspect-ratio: 437 / 620;
  box-shadow: var(--shadow-scrap);
  rotate: -2deg;
}
#submit-success button { font-family: var(--display); font-weight: 600; letter-spacing: 0.08em; cursor: pointer; }
.email-lead { margin: 0; font: 400 13px/1.4 var(--body); text-align: center; }
#print-email {
  font: 400 15px/1.4 var(--body);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--body-ink);
  background: var(--paper);
  color: var(--body-ink);
  width: min(100%, 260px);
}
#email-status { margin: 0; font: 400 13px/1.4 var(--body); }

/* Below 1000px the three-column grid can't hold an A5 sheet — stack instead:
   toolbox row, sheet, prompts note in flow; download/submit pin to a fixed bottom bar. */
@media (max-width: 1000px) {
  .maker {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100svh;
    padding: 0 0 76px;
  }
  .mk-head { padding: 10px 12px 4px; }
  .mk-title { transform: none; }
  .tb-logo { height: 30px; }
  .toolbox { margin: 14px 12px 4px; }
  /* scrap buttons wrap into a row; download stays in-flow (a fixed child would be clipped
     by the panel's clip-path) — submit remains the pinned bottom action. */
  .tb-panel { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 26px 10px 10px; }
  .tb-panel .scrap-lift { flex: 1 1 30%; }
  .tb-slip, .tb-dl { flex-basis: 45%; margin-top: 0; }
  .tb-slip { width: auto; align-self: auto; }
  .toolbox-tape { width: 96px; top: -10px; left: -4px; }
  .tb-hint { width: 100%; font-size: 14px; }
  .sheet-area { height: 82svh; padding: 10px 14px 12px; }
  .prompts { margin: 16px auto 8px; width: min(440px, 92vw); }
  .submit-scrap { position: fixed; right: 10px; bottom: 4px; width: 40%; max-width: 230px; z-index: 5; }
  .handle { right: -7px; bottom: -7px; width: 16px; height: 16px; }
}
/* Phones: no room for the prompts note — just the fixed Submit! scrap. */
@media (max-width: 720px) {
  .mk-title { display: none; }
  .tb-logo { margin-left: auto; }
  .pill { padding: 9px 6px; font-size: 13px; }
  .prompts { margin: 0; width: auto; aspect-ratio: auto; background: none; transform: none; filter: none; }
  .prompts-list { display: none; }
  .tb-hint { display: none; }
  /* one prompt at a time on a paper scrap; tap cycles. No animation — the maker stays calm. */
  .prompt-chip {
    display: block;
    width: fit-content;
    max-width: 88vw;
    margin: 0 auto 64px; /* clears the fixed Submit!/Download bar */
    border: none;
    background: var(--paper);
    box-shadow: var(--shadow-scrap);
    padding: 12px 16px; /* padding, not font-size — keeps the tap target ≥44px */
    font: 600 1.25rem/1.2 var(--hand);
    color: var(--ink);
    text-align: center;
    transform: rotate(-1.5deg);
    cursor: pointer;
  }
}

/* ---------- deadline scrap ---------- */
/* Static by design — it never joins the drift/bob loops, so reduced-motion needs nothing. */
.deadline-scrap {
  width: fit-content;
  background: var(--paper);
  box-shadow: var(--shadow-scrap);
  padding: 6px 14px;
  font: 600 17px var(--hand);
  color: var(--ink);
  transform: rotate(-2deg);
}
.landing .deadline-scrap { position: absolute; right: 22px; top: 24px; z-index: 3; }
.mk-head .deadline-scrap { margin-left: auto; }

/* ---------- press-to-peek example ---------- */
/* The scrap sits under the sheet in flow, so the sheet loses its row height to it. */
.sheet-area { flex-direction: column; gap: 4px; }
.sheet-area .sheet { width: min(100cqw, calc((100cqh - 32px) * 437 / 620)); }
.peek-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.peek-ghost.show { opacity: 0.9; visibility: visible; }
.peek-scrap {
  flex: none;
  border: none;
  background: var(--paper);
  box-shadow: var(--shadow-scrap);
  padding: 6px 14px;
  font: 600 17px var(--hand);
  color: var(--ink);
  transform: rotate(1.5deg);
  cursor: pointer;
  /* long-press IS the gesture — stop scroll, selection and the iOS callout hijacking it */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Stacked layout pins DOWNLOAD/Submit! over the bottom band — the scrap goes above the
   sheet instead, and .prompts (align-self: start from the desktop grid) has to stretch
   or the chip can't centre. */
@media (max-width: 1000px) {
  .peek-scrap { order: -1; }
  .prompts { align-self: stretch; }
  /* the scrap row plus the fixed bottom bar's bite out of the 82svh sheet area */
  .sheet-area .sheet { width: min(100cqw, calc((100cqh - 110px) * 437 / 620)); }
}

/* ---------- hand-drawn edges (border-shape, Chromium 148+; others keep straight borders) ---------- */
/* ponytail: literal shape() strings generated once (mulberry32-seeded wobble, calc(% + px)
   so amplitude stays constant while wavelength scales with the box); regen script kept out
   of the repo — tweak by regenerating, not by hand-editing coordinates. */
@supports (border-shape: shape(from 0% 0%, close)) {
  :root {
    --wobble-card: shape(from calc(0% + 0.0px) calc(0% + 0.0px), curve to calc(20% + 0.0px) calc(0% + 0.8px) with calc(10% + 0.0px) calc(0% + -1.8px), curve to calc(40% + 0.0px) calc(0% + 0.4px) with calc(30% + 0.0px) calc(0% + 0.2px), curve to calc(60% + 0.0px) calc(0% + 0.6px) with calc(50% + 0.0px) calc(0% + -0.6px), curve to calc(80% + 0.0px) calc(0% + 1.4px) with calc(70% + 0.0px) calc(0% + 0.4px), curve to calc(100% + 0.0px) calc(0% + 0.0px) with calc(90% + 0.0px) calc(0% + -1.4px), curve to calc(100% + 0.3px) calc(20% + 0.0px) with calc(100% + 2.1px) calc(10% + 0.0px), curve to calc(100% + 0.3px) calc(40% + 0.0px) with calc(100% + -1.5px) calc(30% + 0.0px), curve to calc(100% + 0.1px) calc(60% + 0.0px) with calc(100% + -1.9px) calc(50% + 0.0px), curve to calc(100% + 1.3px) calc(80% + 0.0px) with calc(100% + 2.0px) calc(70% + 0.0px), curve to calc(100% + 0.0px) calc(100% + 0.0px) with calc(100% + 0.4px) calc(90% + 0.0px), curve to calc(80% + 0.0px) calc(100% + 0.9px) with calc(90% + 0.0px) calc(100% + 2.4px), curve to calc(60% + 0.0px) calc(100% + 0.7px) with calc(70% + 0.0px) calc(100% + -1.3px), curve to calc(40% + 0.0px) calc(100% + -0.4px) with calc(50% + 0.0px) calc(100% + 2.2px), curve to calc(20% + 0.0px) calc(100% + -0.3px) with calc(30% + 0.0px) calc(100% + 2.3px), curve to calc(0% + 0.0px) calc(100% + 0.0px) with calc(10% + 0.0px) calc(100% + 2.2px), curve to calc(0% + 1.1px) calc(80% + 0.0px) with calc(0% + -0.3px) calc(90% + 0.0px), curve to calc(0% + 0.7px) calc(60% + 0.0px) with calc(0% + -0.3px) calc(70% + 0.0px), curve to calc(0% + 0.4px) calc(40% + 0.0px) with calc(0% + 2.1px) calc(50% + 0.0px), curve to calc(0% + -1.0px) calc(20% + 0.0px) with calc(0% + -2.2px) calc(30% + 0.0px), curve to calc(0% + 0.0px) calc(0% + 0.0px) with calc(0% + -1.8px) calc(10% + 0.0px), close);
    --wobble-btn: shape(from calc(0% + 0.0px) calc(0% + 0.0px), curve to calc(33.3% + 0.0px) calc(0% + -0.8px) with calc(16.7% + 0.0px) calc(0% + -0.2px), curve to calc(66.7% + 0.0px) calc(0% + -0.0px) with calc(50% + 0.0px) calc(0% + 0.6px), curve to calc(100% + 0.0px) calc(0% + 0.0px) with calc(83.3% + 0.0px) calc(0% + -1.2px), curve to calc(100% + -0.7px) calc(33.3% + 0.0px) with calc(100% + -1.0px) calc(16.7% + 0.0px), curve to calc(100% + 0.8px) calc(66.7% + 0.0px) with calc(100% + -0.9px) calc(50% + 0.0px), curve to calc(100% + 0.0px) calc(100% + 0.0px) with calc(100% + 1.0px) calc(83.3% + 0.0px), curve to calc(66.7% + 0.0px) calc(100% + -0.2px) with calc(83.3% + 0.0px) calc(100% + -1.2px), curve to calc(33.3% + 0.0px) calc(100% + -0.3px) with calc(50% + 0.0px) calc(100% + 0.0px), curve to calc(0% + 0.0px) calc(100% + 0.0px) with calc(16.7% + 0.0px) calc(100% + 0.2px), curve to calc(0% + -0.7px) calc(66.7% + 0.0px) with calc(0% + -1.3px) calc(83.3% + 0.0px), curve to calc(0% + -0.2px) calc(33.3% + 0.0px) with calc(0% + -1.3px) calc(50% + 0.0px), curve to calc(0% + 0.0px) calc(0% + 0.0px) with calc(0% + 0.0px) calc(16.7% + 0.0px), close);
    --wobble-chip: shape(from calc(0% + 0.0px) calc(0% + 0.0px), curve to calc(33.3% + 0.0px) calc(0% + 0.5px) with calc(16.7% + 0.0px) calc(0% + -0.1px), curve to calc(66.7% + 0.0px) calc(0% + 0.3px) with calc(50% + 0.0px) calc(0% + 0.5px), curve to calc(100% + 0.0px) calc(0% + 0.0px) with calc(83.3% + 0.0px) calc(0% + -1.0px), curve to calc(100% + -0.0px) calc(33.3% + 0.0px) with calc(100% + 0.6px) calc(16.7% + 0.0px), curve to calc(100% + -0.0px) calc(66.7% + 0.0px) with calc(100% + 0.4px) calc(50% + 0.0px), curve to calc(100% + 0.0px) calc(100% + 0.0px) with calc(100% + 0.9px) calc(83.3% + 0.0px), curve to calc(66.7% + 0.0px) calc(100% + 0.2px) with calc(83.3% + 0.0px) calc(100% + -0.2px), curve to calc(33.3% + 0.0px) calc(100% + 0.6px) with calc(50% + 0.0px) calc(100% + 0.3px), curve to calc(0% + 0.0px) calc(100% + 0.0px) with calc(16.7% + 0.0px) calc(100% + -0.3px), curve to calc(0% + -0.3px) calc(66.7% + 0.0px) with calc(0% + -0.1px) calc(83.3% + 0.0px), curve to calc(0% + -0.4px) calc(33.3% + 0.0px) with calc(0% + -0.9px) calc(50% + 0.0px), curve to calc(0% + 0.0px) calc(0% + 0.0px) with calc(0% + -0.8px) calc(16.7% + 0.0px), close);
    --wobble-scrap-a: shape(from calc(0% + 0.0px) calc(0% + 0.0px), curve to calc(14.3% + 0.0px) calc(0% + 0.2px) with calc(7.1% + 0.0px) calc(0% + 0.1px), curve to calc(28.6% + 0.0px) calc(0% + 0.5px) with calc(21.4% + 0.0px) calc(0% + 1.1px), curve to calc(42.9% + 0.0px) calc(0% + 0.2px) with calc(35.7% + 0.0px) calc(0% + 3.5px), curve to calc(57.1% + 0.0px) calc(0% + 0.2px) with calc(50% + 0.0px) calc(0% + -4.2px), curve to calc(71.4% + 0.0px) calc(0% + -0.3px) with calc(64.3% + 0.0px) calc(0% + 1.1px), curve to calc(85.7% + 0.0px) calc(0% + 2.1px) with calc(78.6% + 0.0px) calc(0% + -0.2px), curve to calc(100% + 0.0px) calc(0% + 0.0px) with calc(92.9% + 0.0px) calc(0% + -0.8px), curve to calc(100% + -1.1px) calc(14.3% + 0.0px) with calc(100% + -1.7px) calc(7.1% + 0.0px), curve to calc(100% + 1.9px) calc(28.6% + 0.0px) with calc(100% + 3.4px) calc(21.4% + 0.0px), curve to calc(100% + 0.6px) calc(42.9% + 0.0px) with calc(100% + 2.2px) calc(35.7% + 0.0px), curve to calc(100% + -0.5px) calc(57.1% + 0.0px) with calc(100% + 1.2px) calc(50% + 0.0px), curve to calc(100% + -0.6px) calc(71.4% + 0.0px) with calc(100% + 3.7px) calc(64.3% + 0.0px), curve to calc(100% + 0.5px) calc(85.7% + 0.0px) with calc(100% + -0.8px) calc(78.6% + 0.0px), curve to calc(100% + 0.0px) calc(100% + 0.0px) with calc(100% + -3.4px) calc(92.9% + 0.0px), curve to calc(85.7% + 0.0px) calc(100% + -1.6px) with calc(92.9% + 0.0px) calc(100% + -3.1px), curve to calc(71.4% + 0.0px) calc(100% + -0.7px) with calc(78.6% + 0.0px) calc(100% + 1.8px), curve to calc(57.1% + 0.0px) calc(100% + 2.7px) with calc(64.3% + 0.0px) calc(100% + 2.5px), curve to calc(42.9% + 0.0px) calc(100% + -2.9px) with calc(50% + 0.0px) calc(100% + -2.4px), curve to calc(28.6% + 0.0px) calc(100% + 2.1px) with calc(35.7% + 0.0px) calc(100% + 2.0px), curve to calc(14.3% + 0.0px) calc(100% + 0.9px) with calc(21.4% + 0.0px) calc(100% + -2.4px), curve to calc(0% + 0.0px) calc(100% + 0.0px) with calc(7.1% + 0.0px) calc(100% + -0.5px), curve to calc(0% + 2.1px) calc(85.7% + 0.0px) with calc(0% + 0.8px) calc(92.9% + 0.0px), curve to calc(0% + 2.1px) calc(71.4% + 0.0px) with calc(0% + -3.6px) calc(78.6% + 0.0px), curve to calc(0% + -0.7px) calc(57.1% + 0.0px) with calc(0% + 3.2px) calc(64.3% + 0.0px), curve to calc(0% + -2.5px) calc(42.9% + 0.0px) with calc(0% + -4.7px) calc(50% + 0.0px), curve to calc(0% + -0.0px) calc(28.6% + 0.0px) with calc(0% + 3.4px) calc(35.7% + 0.0px), curve to calc(0% + -1.4px) calc(14.3% + 0.0px) with calc(0% + 0.3px) calc(21.4% + 0.0px), curve to calc(0% + 0.0px) calc(0% + 0.0px) with calc(0% + 0.0px) calc(7.1% + 0.0px), close);
    --wobble-scrap-b: shape(from calc(0% + 0.0px) calc(0% + 0.0px), curve to calc(14.3% + 0.0px) calc(0% + -2.6px) with calc(7.1% + 0.0px) calc(0% + -4.1px), curve to calc(28.6% + 0.0px) calc(0% + -1.2px) with calc(21.4% + 0.0px) calc(0% + 1.3px), curve to calc(42.9% + 0.0px) calc(0% + -1.7px) with calc(35.7% + 0.0px) calc(0% + -1.8px), curve to calc(57.1% + 0.0px) calc(0% + 2.7px) with calc(50% + 0.0px) calc(0% + 0.1px), curve to calc(71.4% + 0.0px) calc(0% + -2.9px) with calc(64.3% + 0.0px) calc(0% + 3.3px), curve to calc(85.7% + 0.0px) calc(0% + -1.7px) with calc(78.6% + 0.0px) calc(0% + 2.1px), curve to calc(100% + 0.0px) calc(0% + 0.0px) with calc(92.9% + 0.0px) calc(0% + -4.1px), curve to calc(100% + -2.0px) calc(14.3% + 0.0px) with calc(100% + -4.9px) calc(7.1% + 0.0px), curve to calc(100% + -1.4px) calc(28.6% + 0.0px) with calc(100% + 0.3px) calc(21.4% + 0.0px), curve to calc(100% + 0.3px) calc(42.9% + 0.0px) with calc(100% + 4.4px) calc(35.7% + 0.0px), curve to calc(100% + -2.9px) calc(57.1% + 0.0px) with calc(100% + -1.6px) calc(50% + 0.0px), curve to calc(100% + -2.1px) calc(71.4% + 0.0px) with calc(100% + 2.9px) calc(64.3% + 0.0px), curve to calc(100% + 1.9px) calc(85.7% + 0.0px) with calc(100% + 2.7px) calc(78.6% + 0.0px), curve to calc(100% + 0.0px) calc(100% + 0.0px) with calc(100% + -2.8px) calc(92.9% + 0.0px), curve to calc(85.7% + 0.0px) calc(100% + -1.3px) with calc(92.9% + 0.0px) calc(100% + 3.4px), curve to calc(71.4% + 0.0px) calc(100% + -0.1px) with calc(78.6% + 0.0px) calc(100% + 1.3px), curve to calc(57.1% + 0.0px) calc(100% + -1.6px) with calc(64.3% + 0.0px) calc(100% + -4.5px), curve to calc(42.9% + 0.0px) calc(100% + -2.5px) with calc(50% + 0.0px) calc(100% + -3.9px), curve to calc(28.6% + 0.0px) calc(100% + -1.9px) with calc(35.7% + 0.0px) calc(100% + -1.5px), curve to calc(14.3% + 0.0px) calc(100% + 1.7px) with calc(21.4% + 0.0px) calc(100% + -2.1px), curve to calc(0% + 0.0px) calc(100% + 0.0px) with calc(7.1% + 0.0px) calc(100% + 1.9px), curve to calc(0% + 2.4px) calc(85.7% + 0.0px) with calc(0% + 0.2px) calc(92.9% + 0.0px), curve to calc(0% + 1.9px) calc(71.4% + 0.0px) with calc(0% + 4.5px) calc(78.6% + 0.0px), curve to calc(0% + -1.1px) calc(57.1% + 0.0px) with calc(0% + 1.5px) calc(64.3% + 0.0px), curve to calc(0% + -1.8px) calc(42.9% + 0.0px) with calc(0% + 4.1px) calc(50% + 0.0px), curve to calc(0% + 1.8px) calc(28.6% + 0.0px) with calc(0% + -1.1px) calc(35.7% + 0.0px), curve to calc(0% + 1.1px) calc(14.3% + 0.0px) with calc(0% + -3.4px) calc(21.4% + 0.0px), curve to calc(0% + 0.0px) calc(0% + 0.0px) with calc(0% + 4.0px) calc(7.1% + 0.0px), close);

  }
  .kit-card, .question-card, .qr-card, .scrap-dialog { border-shape: var(--wobble-card); }
  .make-btn, .tb-info,
  .btn-photo, .btn-text, .btn-download, .btn-submit,
  .dialog-actions button { border-shape: var(--wobble-btn); }
  .chips > * { border-shape: var(--wobble-chip); }
}