/* MAKE IT POP · the cringe test for graphic designers */
:root {
  --paper: #f3efe6;
  --ink: #111;
  --blue: #2f3bff;
  --lime: #d8ff3e;
  --red: #ff4a1c;
  --pink: #ff8fc7;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --disp: 'Anton', Impact, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--sans);
  overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.25em; height: 1.25em; display: block; }

/* paper: faint layout grid + soft ink blobs */
.paper {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40vmax 40vmax at 8% 12%, rgba(216,255,62,.55), transparent 60%),
    radial-gradient(38vmax 38vmax at 96% 30%, rgba(255,143,199,.45), transparent 60%),
    radial-gradient(44vmax 44vmax at 50% 108%, rgba(47,59,255,.22), transparent 60%),
    linear-gradient(rgba(17,17,17,.055) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(17,17,17,.055) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--paper);
  animation: drift 18s ease-in-out infinite alternate;
  background-size: auto, auto, auto, 28px 28px, 28px 28px, auto;
}
@keyframes drift { to { background-position: 6vmax 4vmax, -5vmax 6vmax, 3vmax -5vmax, 0 0, 0 0, 0 0; } }

/* ---------- screens ---------- */
.screen {
  position: fixed; inset: 0; z-index: 1; display: none; flex-direction: column;
  height: 100vh; height: 100svh;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 0;
}
.screen.on { display: flex; animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- buttons ---------- */
.big {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 62px; padding: 0 30px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 19px; letter-spacing: -.01em;
  box-shadow: 0 6px 0 var(--blue), 0 14px 30px rgba(17,17,17,.18);
  transition: transform .12s, box-shadow .12s;
}
.big:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--blue), 0 6px 14px rgba(17,17,17,.18); }
.big:focus-visible, .act:focus-visible, .ghost:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 62px; padding: 0 22px; border-radius: 999px;
  border: 2px solid var(--ink); background: rgba(255,255,255,.7); font-weight: 700; font-size: 17px;
}
.ghost:active { transform: translateY(2px); }

/* ---------- 1 · intro ---------- */
#intro { align-items: center; padding-bottom: calc(52px + var(--safe-b)); }
.reg { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.6; opacity: .75; }
.r-tl { left: 14px; } .r-tr { right: 14px; }
.cmyk { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 20px); left: 50%; transform: translateX(-50%); display: flex; gap: 3px; }
.cmyk i { width: 14px; height: 14px; display: block; }
.cmyk i:nth-child(1) { background: #00aeef; } .cmyk i:nth-child(2) { background: #ec008c; }
.cmyk i:nth-child(3) { background: #fff200; } .cmyk i:nth-child(4) { background: #111; }

.hero { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center; padding-top: 56px; }
.sel {
  --P: min(44vw, 27svh, 270px);
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: calc(var(--P) * .1) calc(var(--P) * .16) calc(var(--P) * .06);
  animation: grow .7s cubic-bezier(.3,1.5,.5,1) 1.55s both;
}
.sel::before { /* selection box */
  content: ''; position: absolute; inset: 0; border: 1.5px solid var(--blue);
  animation: show .01s linear 1.05s both;
}
@keyframes show { from { opacity: 0; } }
@keyframes grow { from { transform: scale(.9); } to { transform: scale(1); } }
.mk {
  font-family: var(--serif); font-style: italic; font-size: calc(var(--P) * .3); line-height: 1;
  margin: 0 0 calc(var(--P) * -.02) calc(var(--P) * .03);
  animation: slideIn .6s cubic-bezier(.2,1.2,.4,1) .15s both;
}
@keyframes slideIn { from { opacity: 0; transform: translateY(30%); } }
.pop { font-family: var(--disp); font-size: var(--P); line-height: .86; color: var(--blue); display: flex; letter-spacing: .01em; }
.pop b {
  font-weight: 400; display: inline-block;
  text-shadow: .035em .035em 0 var(--lime), .07em .07em 0 var(--red), .105em .105em 0 var(--ink);
  animation: popIn .7s cubic-bezier(.2,1.7,.4,1) both, wob 2.6s ease-in-out 3s infinite;
}
.pop b:nth-child(1) { animation-delay: .35s, 3s; }
.pop b:nth-child(2) { animation-delay: .5s, 3.25s; }
.pop b:nth-child(3) { animation-delay: .65s, 3.5s; }
@keyframes popIn { from { transform: scale(0) rotate(-20deg); } }
@keyframes wob { 0%, 100% { transform: none; } 30% { transform: translateY(-4%) rotate(-3deg); } 60% { transform: translateY(1%) rotate(2deg); } }
.hn { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--blue); animation: show .01s linear 1.05s both; }
.hn1 { left: -5px; top: -5px; } .hn2 { left: calc(50% - 4.5px); top: -5px; } .hn3 { right: -5px; top: -5px; }
.hn4 { left: -5px; top: calc(50% - 4.5px); } .hn5 { right: -5px; top: calc(50% - 4.5px); }
.hn6 { left: -5px; bottom: -5px; } .hn7 { left: calc(50% - 4.5px); bottom: -5px; } .hn8 { right: -5px; bottom: -5px; }
.dim {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  font: 700 11px/1 var(--mono); color: #fff; background: var(--blue); padding: 5px 7px; border-radius: 4px; white-space: nowrap;
  animation: show .01s linear 1.05s both;
}
.cursor {
  position: absolute; right: -14px; bottom: -18px; width: 26px; height: 26px;
  fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round;
  animation: cursorIn .55s cubic-bezier(.3,.8,.4,1) 1s both;
}
@keyframes cursorIn { from { opacity: 0; transform: translate(70px, 60px); } }
.bubble {
  position: absolute; bottom: calc(100% + 12px); right: -8px;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 2px solid var(--ink); border-radius: 16px 16px 16px 4px;
  padding: 6px 12px 6px 6px; font: 700 15px/1 var(--sans); white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink);
  animation: bubble .5s cubic-bezier(.2,1.8,.4,1) 2.2s both;
  transform-origin: 0 100%;
}
.bubble b { width: 22px; height: 22px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; font: 700 11px/1 var(--mono); }
@keyframes bubble { from { opacity: 0; transform: scale(.2); } }

.sub {
  margin: 34px 0 22px; text-align: center; font-weight: 650; font-size: clamp(18px, 4.8vw, 24px); letter-spacing: -.015em;
  animation: slideIn .6s ease .7s both;
}
.sub em { font-family: var(--serif); font-weight: 400; font-size: 1.22em; }
#start { animation: slideIn .6s ease .9s both; }
#start .ico { width: 22px; height: 22px; }
.legal { position: absolute; left: 14px; bottom: calc(12px + var(--safe-b)); font-size: 11px; color: var(--ink); opacity: .45; text-decoration: none; }
.legal:hover { opacity: .8; text-decoration: underline; }

/* ---------- 2 · deck ---------- */
.top { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 2px 10px; }
.brand { font-family: var(--serif); font-style: italic; font-size: 22px; }
.brand b { font-family: var(--disp); font-style: normal; font-weight: 400; color: var(--blue); font-size: 26px; letter-spacing: .02em; }
.count { font: 700 15px/1 var(--mono); }
.chips { display: flex; gap: 4px; }
.chips i { flex: 1; height: 8px; border-radius: 3px; background: rgba(17,17,17,.1); transition: background .3s, transform .3s; }
.chips i.now { background: var(--ink); }
.chips i.y { background: var(--cc); box-shadow: inset 0 0 0 1.5px var(--ink); }
.chips i.n { background: repeating-linear-gradient(-45deg, rgba(17,17,17,.35) 0 2px, transparent 2px 5px); }

.stage { flex: 1 1 auto; min-height: 0; position: relative; container-type: size; margin: 12px 0 6px; }
.card {
  position: absolute; left: 50%; top: 50%;
  width: min(92cqw, 66cqh, 420px); aspect-ratio: 7 / 10;
  margin: 0; border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 2px var(--ink), 0 18px 40px rgba(17,17,17,.18);
  container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none;
  transform: translate(-50%, -50%) translateY(calc(var(--k, 0) * 12px)) scale(calc(1 - var(--k, 0) * .045));
  transition: transform .3s cubic-bezier(.2,.9,.3,1.1);
  cursor: grab;
}
.card.drag { transition: none; cursor: grabbing; }
.card.fly { transition: transform .42s cubic-bezier(.4,0,.8,.5); }
.card[data-k="1"], .card[data-k="2"] { pointer-events: none; }
.card[data-k="2"] .art > *, .card[data-k="1"] .art > * { animation-play-state: paused; }
.art { position: absolute; inset: 0 0 40% 0; background: var(--c); color: var(--f); container-type: size; overflow: hidden; }
.art > div { position: absolute; inset: 0; }
.label { position: absolute; inset: 60% 0 0 0; padding: 4.6cqw 6cqw 5cqw; display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.code { display: flex; justify-content: space-between; font: 700 3.5cqw/1 var(--mono); letter-spacing: .02em; }
.q { margin: auto 0; font-weight: 720; font-size: 6.5cqw; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.who { font-family: var(--serif); font-style: italic; font-size: 4.6cqw; line-height: 1; opacity: .7; }
.stamp {
  position: absolute; top: 5cqw; z-index: 3; opacity: 0; pointer-events: none;
  font: 400 8.5cqw/1 var(--disp); letter-spacing: .03em; padding: 1.6cqw 3cqw 1.2cqw;
  border: .9cqw solid var(--ink); border-radius: 2cqw;
}
.stamp.yes { left: 5cqw; transform: rotate(-12deg); background: var(--ink); color: var(--lime); }
.stamp.no { right: 5cqw; transform: rotate(12deg); background: #fff; color: var(--ink); }

.actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  width: 100%; max-width: 440px; margin: 0 auto; padding-bottom: calc(60px + var(--safe-b));
}
.hint { grid-column: 1 / -1; grid-row: 1; margin: 0; text-align: center; font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .5; transition: opacity .3s; }
.hint.off { opacity: 0; }
.act {
  grid-row: 2; min-height: 64px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 750; font-size: 19px; letter-spacing: -.01em; border: 2px solid var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.act em { font-style: normal; }
.act .ico { width: 24px; height: 24px; }
.act.no { background: #fff; box-shadow: 0 5px 0 var(--ink); }
.act.yes { background: var(--ink); color: var(--lime); box-shadow: 0 5px 0 var(--blue); }
.act:active, .act.hit { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.act.yes:active, .act.yes.hit { box-shadow: 0 1px 0 var(--blue); }
.act:disabled { cursor: default; }

/* ---------- 3 · result ---------- */
#result { padding-bottom: calc(60px + var(--safe-b)); }
.proofwrap { flex: 1 1 auto; min-height: 0; container-type: size; position: relative; }
.proof {
  position: absolute; left: 50%; top: 50%;
  width: min(90cqw, 74cqh, 440px); aspect-ratio: 4 / 5;
  background: #fffdf8; color: var(--ink); container-type: inline-size;
  box-shadow: 0 0 0 1px rgba(17,17,17,.12), 0 24px 50px rgba(17,17,17,.2);
  padding: 8cqw 8cqw 6cqw; display: flex; flex-direction: column;
  transform: translate(-50%, -50%) rotate(-1.2deg);
}
#result.on .proof { animation: printOut .9s cubic-bezier(.2,1,.3,1) both; }
@keyframes printOut { from { transform: translate(-50%, 30%) rotate(4deg); opacity: 0; } }
.crop { position: absolute; width: 4cqw; height: 4cqw; border: 0 solid var(--ink); }
.crop.k1 { left: 3cqw; top: 3cqw; border-left-width: 1px; border-top-width: 1px; }
.crop.k2 { right: 3cqw; top: 3cqw; border-right-width: 1px; border-top-width: 1px; }
.crop.k3 { left: 3cqw; bottom: 3cqw; border-left-width: 1px; border-bottom-width: 1px; }
.crop.k4 { right: 3cqw; bottom: 3cqw; border-right-width: 1px; border-bottom-width: 1px; }
.ptop { display: flex; justify-content: space-between; font: 700 3.2cqw/1 var(--mono); letter-spacing: .06em; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; margin-top: 4cqw; }
.pct { font: 400 26cqw/.9 var(--disp); color: var(--blue); text-shadow: 1cqw 1cqw 0 var(--lime), 2cqw 2cqw 0 var(--ink); white-space: nowrap; }
.pct small { font-size: .42em; margin-left: 1cqw; }
.approved {
  font: 400 6.4cqw/1 var(--disp); letter-spacing: .04em; color: var(--red);
  border: .9cqw solid var(--red); border-radius: 1.6cqw; padding: 1.6cqw 2.4cqw 1.2cqw;
  transform: rotate(10deg); flex: none;
}
#result.on .approved { animation: thump .45s cubic-bezier(.3,1.8,.5,1) 1s both; }
@keyframes thump { from { opacity: 0; transform: rotate(10deg) scale(2.4); } }
.plabel { font: 700 3cqw/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-top: 3cqw; opacity: .6; }
.ptitle { font: 400 9.4cqw/1 var(--serif); font-style: italic; margin-top: 3.6cqw; letter-spacing: -.01em; text-wrap: balance; }
.pline { font-weight: 600; font-size: 4.2cqw; line-height: 1.2; margin-top: 2cqw; }
.pchips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.8cqw; margin-top: auto; }
.pchips i { aspect-ratio: 4 / 5; border-radius: 1cqw; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 0 1px var(--ink); background: #fff; }
.pchips i::before { content: ''; flex: 1; background: var(--cc); }
.pchips i.n::before { background: repeating-linear-gradient(-45deg, rgba(17,17,17,.22) 0 1px, transparent 1px 4px); }
.pchips i span { font: 700 1.6cqw/1 var(--mono); padding: .9cqw .6cqw .7cqw; white-space: nowrap; overflow: hidden; }
.pbar { display: flex; align-items: center; gap: 1cqw; margin-top: 4cqw; }
.pbar i { width: 3.4cqw; height: 3.4cqw; display: block; }
.pbar i:nth-child(1) { background: #00aeef; } .pbar i:nth-child(2) { background: #ec008c; } .pbar i:nth-child(3) { background: #fff200; }
.pbar i:nth-child(4) { background: #111; } .pbar i:nth-child(5) { background: var(--blue); } .pbar i:nth-child(6) { background: var(--lime); }
.pbar span { margin-left: auto; font: 700 2.8cqw/1 var(--mono); }
.rbtns { display: flex; justify-content: center; gap: 10px; padding-top: 12px; }
.rbtns .big .ico { width: 22px; height: 22px; }
.rbtns .big, .rbtns .ghost { white-space: nowrap; }
.rbtns .big { padding: 0 26px; }

.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px); z-index: 20;
  transform: translate(-50%, -160%); background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: transform .35s cubic-bezier(.2,1.4,.4,1); pointer-events: none;
}
.toast.on { transform: translate(-50%, 0); }

/* short screens */
@media (max-height: 700px) {
  .hero { padding-top: 44px; }
  .sub { margin: 24px 0 16px; }
  .big, .ghost, .act { min-height: 56px; }
  .chips i { height: 6px; }
}
@media (min-width: 900px) {
  .sel { --P: min(26vw, 30svh, 300px); }
}

/* =================== CARD ART =================== */
/* 1 bigger */
.a-bigger { display: grid; place-items: center; }
.a-bigger .sheet { position: relative; width: 52cqw; height: 66cqh; background: #fff; transform: rotate(-4deg); box-shadow: 1.2cqw 1.2cqw 0 rgba(0,0,0,.25); }
.a-bigger .logo {
  position: absolute; left: 50%; top: 34%; translate: -50% -50%;
  font: 400 7cqw/1 var(--disp); color: #fff; background: var(--ink); padding: 1.4cqw 2.4cqw; white-space: nowrap;
  animation: biggr 3.2s cubic-bezier(.5,0,.5,1.4) infinite;
}
@keyframes biggr { 0%, 12% { scale: .55; } 40% { scale: 1; } 62% { scale: 1.7; } 86%, 100% { scale: 3.1; } }
.a-bigger .sheet i { position: absolute; left: 14%; height: 2.6cqh; background: #d9d9de; border-radius: 1cqh; }
.a-bigger .l1 { top: 66%; width: 72%; } .a-bigger .l2 { top: 75%; width: 56%; } .a-bigger .l3 { top: 84%; width: 64%; }

/* 2 pop */
.a-pop { display: grid; place-items: center; }
.a-pop .burst { position: absolute; width: 86cqh; height: 86cqh; left: 50%; top: 50%; translate: -50% -50%; fill: #fff; animation: spin 14s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.a-pop span {
  position: relative; font: 400 32cqh/1 var(--disp); color: var(--pink); letter-spacing: .02em;
  text-shadow: .6cqh .6cqh 0 var(--red), 1.2cqh 1.2cqh 0 var(--blue), 1.8cqh 1.8cqh 0 var(--ink);
  animation: pulse 1.1s cubic-bezier(.3,1.8,.5,1) infinite alternate;
}
@keyframes pulse { from { scale: .9; rotate: -4deg; } to { scale: 1.06; rotate: 3deg; } }

/* 3 layers panel */
.a-layers { display: grid; place-items: center; }
.a-layers .panel { width: 76cqw; background: #2a2a2e; color: #e8e8ea; border-radius: 2cqw; overflow: hidden; font: 500 3.7cqw/1.1 var(--sans); box-shadow: 1.6cqw 1.6cqw 0 rgba(0,0,0,.28); transform: rotate(2deg); }
.a-layers .hd { padding: 2.4cqw 3.4cqw; font: 700 2.8cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #9a9aa2; background: #222226; }
.a-layers .row { display: flex; align-items: center; gap: 2.6cqw; padding: 2.5cqw 3.4cqw; border-top: 1px solid #3a3a40; white-space: nowrap; }
.a-layers .row i { width: 3cqw; height: 3cqw; border-radius: 50%; border: .5cqw solid currentColor; flex: none; opacity: .8; }
.a-layers .row.on { background: var(--blue); color: #fff; animation: blink 2.4s steps(1) infinite; }
@keyframes blink { 50% { background: #3d4aff; } }

/* 4 files */
.a-files .f {
  position: absolute; width: 33cqw; height: 46cqh; background: #fff; border-radius: 1.4cqw;
  box-shadow: 0 0 0 .4cqw rgba(0,0,0,.12), 1.2cqw 1.2cqw 0 rgba(0,0,0,.18);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh;
  animation: drop 4s cubic-bezier(.3,1.5,.5,1) infinite both;
}
.a-files .f::after { content: ''; position: absolute; right: 0; top: 0; border: 3cqw solid transparent; border-right-color: var(--c); border-top-color: var(--c); }
.a-files .f b { font: 400 7cqw/1 var(--disp); background: #ff7a00; color: #2b1200; padding: 2cqw 2.4cqw; border-radius: 1.4cqw; }
.a-files .f span { font: 700 2.5cqw/1 var(--mono); color: #111; white-space: nowrap; }
.a-files .f1 { left: 7%; top: 8%; animation-delay: 0s; }
.a-files .f2 { left: 22%; top: 18%; animation-delay: .3s; }
.a-files .f3 { left: 37%; top: 28%; animation-delay: .6s; }
.a-files .f4 { left: 52%; top: 38%; animation-delay: .9s; }
@keyframes drop { 0% { opacity: 0; transform: translateY(-30%) rotate(-8deg); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* 5 pixel logo */
.a-pixels { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqh; }
.a-pixels .px { display: grid; grid-template-columns: repeat(10, 1fr); width: 56cqh; height: 56cqh; padding: 2cqh; background: #fff; transform: rotate(-3deg); box-shadow: 1.4cqw 1.4cqw 0 rgba(0,0,0,.2); filter: contrast(1.1) saturate(.9); }
.a-pixels .px i { display: block; }
.a-pixels .meta { font: 700 3.2cqw/1 var(--mono); background: var(--ink); color: #fff; padding: 1.6cqw 2.4cqw; border-radius: 1cqw; }

/* 6 every colour */
.a-hues { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.8cqw; padding: 0 7cqw; align-content: center; }
.a-hues i { aspect-ratio: 1; border-radius: 1.4cqw; display: grid; place-items: center; animation: hue 3s ease-in-out infinite; }
.a-hues i:nth-child(odd) { animation-delay: -1.5s; }
.a-hues i b { width: 46%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.a-hues i:first-child { outline: .8cqw solid #fff; outline-offset: .6cqw; animation: none; }
@keyframes hue { 50% { transform: scale(.88); } }

/* 7 exposure invoice */
.a-receipt { display: grid; place-items: center; }
.a-receipt .rcpt {
  position: relative; width: 52cqw; background: #fff; color: #111; padding: 4cqw 4.4cqw 5cqw; font: 400 3.1cqw/1.2 var(--mono);
  transform: rotate(-3deg); box-shadow: 1.4cqw 1.4cqw 0 rgba(0,0,0,.2);
  -webkit-mask: radial-gradient(1.6cqw at 50% 100%, transparent 98%, #000) 0 0 / 4cqw 100%; mask: radial-gradient(1.6cqw at 50% 100%, transparent 98%, #000) 0 0 / 4cqw 100%;
}
.a-receipt .t { font: 400 6cqw/1 var(--disp); letter-spacing: .06em; margin-bottom: 2.4cqw; }
.a-receipt .ln, .a-receipt .tot { display: flex; justify-content: space-between; gap: 2cqw; padding: .9cqw 0; white-space: nowrap; }
.a-receipt .tot { border-top: .4cqw dashed #111; margin-top: 1.6cqw; padding-top: 2cqw; font-weight: 700; }
.a-receipt .stampx {
  position: absolute; right: 8%; bottom: 7%; font: 400 6.4cqw/1 var(--disp); letter-spacing: .05em; color: #e3002b;
  border: .8cqw solid #e3002b; padding: 1.2cqw 2cqw .9cqw; border-radius: 1.4cqw; background: rgba(255,255,255,.85);
  transform: rotate(-12deg); animation: thumpS 3s cubic-bezier(.3,1.8,.5,1) infinite;
}
@keyframes thumpS { 0%, 20% { opacity: 0; scale: 2; } 32%, 100% { opacity: 1; scale: 1; } }

/* 8 whiter white */
.a-white { display: flex; align-items: center; justify-content: center; gap: 6cqw; }
.a-white .sw { display: flex; flex-direction: column; align-items: center; gap: 2.4cqh; }
.a-white .sw i { width: 32cqw; aspect-ratio: 1; background: #fff; display: block; box-shadow: 1.2cqw 1.2cqw 0 rgba(0,0,0,.2); }
.a-white .sw span { font: 700 3.4cqw/1 var(--mono); }
.a-white .sw em { order: -1; font: italic 400 5.4cqw/1 var(--serif); }
.a-white .sw:last-child i { animation: whiter 2.2s ease-in-out infinite; }
@keyframes whiter { 50% { box-shadow: 1.2cqw 1.2cqw 0 rgba(0,0,0,.2), 0 0 6cqw 2cqw rgba(255,255,255,.9); } }

/* 9 lorem flyers */
.a-lorem .fl { position: absolute; left: 50%; top: 50%; width: 48cqw; height: 70cqh; translate: -50% -50%; background: #fff; box-shadow: 1cqw 1cqw 0 rgba(0,0,0,.16); }
.a-lorem .b3 { rotate: 9deg; } .a-lorem .b2 { rotate: -6deg; }
.a-lorem .b1 { rotate: 1deg; padding: 5cqw 4.4cqw; display: flex; flex-direction: column; gap: 2.2cqw; }
.a-lorem .b1 b { font: 800 6cqw/1.02 var(--sans); letter-spacing: -.03em; color: #111; }
.a-lorem .b1 i { height: 2.2cqh; background: #d9d9de; border-radius: 1cqh; display: block; }
.a-lorem .b1 i.s { width: 60%; }
.a-lorem .badge { position: absolute; right: 9%; bottom: 8%; width: 24cqw; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; font: 400 5cqw/1 var(--disp); rotate: -14deg; animation: pulse 1.2s ease-in-out infinite alternate; }

/* 10 3am clock */
.a-clock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqh; }
.a-clock .face { position: relative; width: 60cqh; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.4cqh var(--lime); }
.a-clock .face::before {
  content: ''; position: absolute; inset: 4%; border-radius: 50%;
  background: repeating-conic-gradient(from -1.5deg, #111 0 3deg, transparent 3deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 78%, #000 79%); mask: radial-gradient(circle, transparent 78%, #000 79%);
}
.a-clock .face i { position: absolute; left: 50%; bottom: 50%; background: #111; border-radius: 2cqh; transform-origin: 50% 100%; }
.a-clock .h { width: 2.4cqh; height: 26%; margin-left: -1.2cqh; rotate: 113deg; animation: spin 30s linear infinite; }
.a-clock .m { width: 1.6cqh; height: 38%; margin-left: -.8cqh; rotate: 282deg; animation: spin 2.5s linear infinite; }
.a-clock .face b { position: absolute; left: 50%; top: 50%; width: 5cqh; height: 5cqh; margin: -2.5cqh; border-radius: 50%; background: var(--red); }
.a-clock .am { font: 700 5cqw/1 var(--mono); color: var(--lime); letter-spacing: .06em; }

/* 11 stretched logo */
.a-stretch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7cqh; }
.a-stretch .ban { width: 84cqw; height: 30cqh; background: #fff; display: grid; place-items: center; box-shadow: 1.4cqw 1.4cqw 0 rgba(0,0,0,.2); overflow: hidden; }
.a-stretch .lg { display: inline-flex; align-items: center; gap: 2cqw; font: 400 9cqw/1 var(--disp); color: #111; animation: stretch 2.6s cubic-bezier(.6,0,.3,1) infinite alternate; }
.a-stretch .lg i { width: 9cqw; aspect-ratio: 1; border-radius: 50%; background: var(--blue); display: block; }
@keyframes stretch { 0%, 20% { transform: scale(1, 1); } 80%, 100% { transform: scale(2.3, .62); } }
.a-stretch .key { position: relative; font: 700 4cqw/1 var(--mono); padding: 2.4cqw 6cqw; background: #fff; border-radius: 1.6cqw; box-shadow: 0 1.2cqw 0 #111, 0 0 0 .5cqw #111; color: #111; }
.a-stretch .key::after { content: ''; position: absolute; left: -6%; right: -6%; top: 50%; height: 1cqw; background: var(--red); rotate: -12deg; border-radius: 1cqw; }

/* 12 empty moodboard */
.a-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4cqw; padding: 10cqh 9cqw; }
.a-board i { border: .6cqw dashed currentColor; border-radius: 1.6cqw; background: rgba(255,255,255,.35); animation: float 3s ease-in-out infinite alternate; display: grid; place-items: center; font: 400 14cqh/1 var(--disp); font-style: normal; }
.a-board i:nth-child(2n) { animation-delay: -1s; } .a-board i:nth-child(3n) { animation-delay: -2s; }
.a-board i.qm { background: #fff; border-style: solid; color: #111; }
@keyframes float { to { transform: translateY(-2.4cqh) rotate(1.5deg); } }

/* 13 word file */
.a-doc { display: grid; place-items: center; }
.a-doc .doc { position: relative; width: 40cqw; height: 66cqh; background: #fff; border-radius: 1.4cqw; padding: 0 4cqw; display: flex; flex-direction: column; gap: 2.4cqh; box-shadow: 1.4cqw 1.4cqw 0 rgba(0,0,0,.25); animation: shake 2.4s ease-in-out infinite; }
.a-doc .doc b { margin: 7cqh -4cqw 2cqh; background: #111; color: #fff; font: 400 6cqw/1 var(--disp); padding: 2cqw 4cqw; letter-spacing: .04em; }
.a-doc .doc i { height: 2.4cqh; background: #d9d9de; border-radius: 1cqh; display: block; }
.a-doc .doc i:last-child { width: 62%; }
@keyframes shake { 0%, 60%, 100% { rotate: 0deg; } 66% { rotate: -4deg; } 72% { rotate: 4deg; } 78% { rotate: -2deg; } }
.a-doc .d { position: absolute; width: 4.4cqw; aspect-ratio: 1; background: #8fd3ff; border: .5cqw solid #111; border-radius: 0 50% 50% 50%; rotate: 45deg; animation: sweat 1.6s ease-in infinite; }
.a-doc .d1 { left: 25%; top: 16%; } .a-doc .d2 { right: 24%; top: 12%; animation-delay: .5s; } .a-doc .d3 { right: 20%; top: 34%; animation-delay: 1s; }
@keyframes sweat { 0% { opacity: 0; translate: 0 -2cqh; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 9cqh; } }

/* 14 centre everything */
.a-centre { display: grid; place-items: center; }
.a-centre .pg { position: relative; width: 56cqw; height: 72cqh; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.4cqh; box-shadow: 1.4cqw 1.4cqw 0 rgba(0,0,0,.2); }
.a-centre .pg i { height: 2.6cqh; background: #111; border-radius: 1cqh; display: block; }
.a-centre .pg i:first-child { height: 5cqh; }
.a-centre .gv, .a-centre .gh { position: absolute; background: #ff2fa0; animation: guide 1.6s ease-in-out infinite alternate; }
.a-centre .gv { left: 50%; top: -6%; bottom: -6%; width: 2px; margin-left: -1px; }
.a-centre .gh { top: 50%; left: -8%; right: -8%; height: 2px; margin-top: -1px; }
@keyframes guide { from { opacity: .3; } }

/* 15 free font ransom */
.a-ransom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 2cqh 1.4cqw; padding: 0 8cqw; }
.a-ransom span { display: inline-block; padding: 1cqw 2cqw; line-height: 1; box-shadow: .8cqw .8cqw 0 rgba(0,0,0,.25); animation: float 2.4s ease-in-out infinite alternate; }
.a-ransom .gap { width: 100%; height: 0; padding: 0; box-shadow: none; }
.a-ransom .r1 { font: 400 17cqw var(--disp); background: #fff; color: #111; rotate: -8deg; }
.a-ransom .r2 { font: italic 400 18cqw var(--serif); background: var(--pink); color: #111; rotate: 6deg; animation-delay: -.6s; }
.a-ransom .r3 { font: 700 13cqw var(--mono); background: #111; color: var(--lime); rotate: -4deg; animation-delay: -1.2s; }
.a-ransom .r4 { font: 800 15cqw var(--sans); background: var(--lime); color: #111; rotate: 9deg; animation-delay: -1.8s; }
.a-ransom .r5 { font: italic 400 17cqw var(--serif); background: #fff; color: var(--red); rotate: 5deg; animation-delay: -.3s; }
.a-ransom .r6 { font: 400 15cqw var(--disp); background: var(--blue); color: #fff; rotate: -7deg; animation-delay: -.9s; }
.a-ransom .r7 { font: 700 13cqw var(--mono); background: #ffd23f; color: #111; rotate: 4deg; animation-delay: -1.5s; }
.a-ransom .r8 { font: 800 16cqw var(--sans); background: #fff; color: #111; rotate: -10deg; animation-delay: -2.1s; }

/* 16 90s word art */
.a-wordart { display: flex; flex-direction: column; align-items: center; justify-content: center; perspective: 60cqw; }
.a-wordart span {
  font: 400 25cqh/.95 var(--disp); letter-spacing: .02em;
  background: linear-gradient(90deg, #ff2a6d, #ffb000, #d8ff3e, #00e0c6, #3f6bff, #c13fff, #ff2a6d) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(.5cqh .5cqh 0 #7a2bff) drop-shadow(.5cqh .5cqh 0 #3a0f8a) drop-shadow(.5cqh .5cqh 0 #fff);
  animation: rainbow 2.4s linear infinite, tilt 2.4s ease-in-out infinite alternate;
}
.a-wordart span:last-child { font-size: 31cqh; animation-delay: 0s, -1.2s; }
@keyframes rainbow { to { background-position: -200% 0; } }
@keyframes tilt { from { transform: rotateX(18deg) rotateY(-16deg) skewX(-8deg); } to { transform: rotateX(8deg) rotateY(16deg) skewX(4deg); } }

/* 17 revisions */
.a-rev .v { position: absolute; top: 44%; width: 26cqw; height: 36cqh; background: #fff; color: #111; display: grid; place-items: center; font: 400 9cqw/1 var(--disp); border-radius: 1.4cqw; }
.a-rev .first { left: 12%; box-shadow: 1.2cqw 1.2cqw 0 rgba(0,0,0,.2); animation: pulse 1.2s ease-in-out infinite alternate; }
.a-rev .last { right: 12%; box-shadow: 1.2cqw 1.2cqw 0 #ddd, 2.4cqw 2.4cqw 0 #bbb, 3.6cqw 3.6cqw 0 #999, 4.8cqw 4.8cqw 0 #777, 6cqw 6cqw 0 rgba(0,0,0,.25); }
.a-rev svg { position: absolute; left: 20%; top: 12%; width: 60%; fill: none; stroke: #111; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* 18 spec work */
.a-spec .c { position: absolute; top: 50%; left: 50%; width: 28cqw; height: 40cqh; background: #fff; border-radius: 1.6cqw; display: grid; place-items: center; box-shadow: 1.2cqw 1.2cqw 0 rgba(0,0,0,.22); }
.a-spec .c1 { translate: -138% -44%; rotate: -10deg; } .a-spec .c2 { translate: -50% -56%; rotate: 2deg; } .a-spec .c3 { translate: 38% -44%; rotate: 10deg; }
.a-spec .c i { display: block; }
.a-spec .o { width: 12cqw; aspect-ratio: 1; border-radius: 50%; background: #111; }
.a-spec .t { width: 0; height: 0; border-left: 7cqw solid transparent; border-right: 7cqw solid transparent; border-bottom: 12cqw solid #111; }
.a-spec .s { width: 11cqw; aspect-ratio: 1; background: #111; rotate: 12deg; }
.a-spec .tag { position: absolute; right: 7%; top: 9%; background: var(--lime); color: #111; font: 400 6cqw/1 var(--disp); padding: 2cqw 3cqw 1.6cqw 4.4cqw; border-radius: .8cqw 1.6cqw 1.6cqw .8cqw; rotate: 14deg; clip-path: polygon(16% 0, 100% 0, 100% 100%, 16% 100%, 0 50%); animation: swing 2s ease-in-out infinite alternate; }
@keyframes swing { to { rotate: 4deg; } }

/* 19 bad kerning */
.a-kern { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqh; }
.a-kern .w { background: #fff; color: #111; padding: 4cqh 5cqw; display: flex; font: 400 21cqh/1 var(--disp); box-shadow: 1.4cqw 1.4cqw 0 rgba(0,0,0,.2); }
.a-kern .w span { display: inline-block; }
.a-kern .g1 { margin-left: 5cqw; animation: kern 2s ease-in-out infinite alternate; }
.a-kern .g2 { margin-left: -1.6cqw; }
.a-kern .g3 { margin-left: 6cqw; animation: kern 2s ease-in-out -1s infinite alternate; }
@keyframes kern { to { margin-left: 1cqw; } }
.a-kern .ruler { display: flex; gap: 4cqw; align-items: flex-end; }
.a-kern .ruler i { display: block; height: 3cqh; border: .5cqw solid #ff2fa0; border-top: 0; }
.a-kern .ruler i:nth-child(1) { width: 10cqw; } .a-kern .ruler i:nth-child(2) { width: 2cqw; } .a-kern .ruler i:nth-child(3) { width: 13cqw; }

/* 20 wow */
.a-wow { display: grid; place-items: center; }
.a-wow span { font: italic 400 34cqh/1 var(--serif); color: #111; letter-spacing: -.02em; animation: pulse 1.4s ease-in-out infinite alternate; }
.a-wow .st { position: absolute; fill: #fff; stroke: #111; stroke-width: 1.2; animation: twinkle 1.6s ease-in-out infinite; }
.a-wow .s1 { width: 16cqh; left: 10%; top: 12%; } .a-wow .s2 { width: 11cqh; right: 12%; top: 18%; animation-delay: .5s; } .a-wow .s3 { width: 13cqh; right: 20%; bottom: 10%; animation-delay: 1s; }
@keyframes twinkle { 0%, 100% { scale: .5; rotate: 0deg; } 50% { scale: 1.1; rotate: 45deg; } }

@media (prefers-reduced-motion: reduce) {
  .art *, .art *::before, .paper { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* desktop: keep the header in the card column */
.top, .chips { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }