/* Peka, cute edition. Paper and indigo ink from the risograph art, one coral accent for actions,
   pastel tiles (butter, mint, lilac) for her 3 ways in rank order, pink for her voice.
   Type: Baloo 2 for headings, Nunito for text. Both rounded, both self-hosted.
   Shape rule: buttons and chips are pills, boxes 22 px, small tiles 14 px, faces round. Stickers tilt a little.
   Light only on purpose: the art is ink on paper and has no dark version. */
@font-face { font-family: "Nunito"; src: url("/fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-ext.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; src: url("/fonts/baloo-2.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; src: url("/fonts/baloo-2-ext.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
:root {
	--ground: #fcefd2; /* paper */
	--surface: #fff8ea;
	--ink: #24305e; /* text, outlines, shadows */
	--body2: #3e4775;
	--muted: #5e6588;
	--line: #ebd8b2;
	--edge: rgba(36, 48, 94, 0.22);
	--rose: #c2483b; /* the one action color */
	--rose-deep: #a93c35; /* rose for small text, passes AA on paper */
	--heart: #f38c8c;
	--pink: #f9c9c4; /* her voice */
	--butter: #fce3a6; /* way 1 */
	--mint: #d4e8cf; /* way 2, and the invite */
	--lilac: #dcd7f3; /* way 3 */
	--teal: #3f6b4a;
	--r: 22px;
	--r-sm: 14px;
	--print: 0 5px 0 var(--ink);
	--print-soft: 0 4px 0 rgba(36, 48, 94, 0.22);
	--display: "Baloo 2", ui-rounded, "Nunito", system-ui, sans-serif;
	--sans: "Nunito", ui-rounded, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* Controls: tap fires at once, and a long press does not select the label. Body text stays selectable. */
a, button, [role="button"], [role="radio"], label { touch-action: manipulation; }
button, .btn, .cta, .ghost, .choice, .pill, .task, .copy, .story-pause { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 500 16px/24px var(--sans); }
/* Paper grain, fixed so it never repaints on scroll */
body::before { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .19 0 0 0 0 .37 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: var(--rose-deep); }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; text-wrap: balance; outline: none; }
h1 { font-size: 32px; line-height: 34px; letter-spacing: -0.01em; }
h2 { font-size: 26px; line-height: 29px; }
h3 { font-size: 21px; line-height: 25px; }
p { margin: 0; }
button { font: inherit; }
.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.top { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 4px; font: 800 25px/1 var(--display); color: var(--rose-deep); text-decoration: none; }
.brand .riso { margin-top: -3px; }
.side { font-size: 13px; font-weight: 700; color: var(--muted); }
.chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 800; line-height: 18px; color: var(--ink); }
.chip.pink { background: var(--pink); }
.chip.butter { background: var(--butter); }
.chip.mint { background: var(--mint); }
.tilt { transform: rotate(-2deg); }
.foot { margin: 32px 20px 36px; font-size: 13px; line-height: 19px; font-weight: 600; color: var(--muted); }
.pad { padding: 28px 16px 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.center { text-align: center; }
.note { font-size: 13px; line-height: 19px; font-weight: 600; color: var(--muted); }
.small { font-size: 12px; line-height: 17px; }
.body2 { font-size: 15px; line-height: 22px; color: var(--body2); }
.rose { color: var(--rose-deep); }
.num { font-variant-numeric: tabular-nums; }
.icon { display: block; flex-shrink: 0; color: var(--ink); }
/* Risograph stickers (riso.ts): hearts, smileys, sparkles and way badges */
.riso { display: block; flex-shrink: 0; overflow: visible; }
.sticker { display: inline-flex; flex-shrink: 0; }
.doodle { position: absolute; pointer-events: none; }
.doodle .riso { animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: rotate(12deg) scale(0.86); } }
/* A hand-drawn squiggle under section headings */
h3 { padding-bottom: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='10' viewBox='0 0 72 10'%3E%3Cpath d='M2 6c6-5 12 5 18 0s12-5 18 0 12 5 18 0 10-4 14-1' fill='none' stroke='%23e0675a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 72px 10px; }
.r0 { background: var(--butter); }
.r1 { background: var(--mint); }
.r2 { background: var(--lilac); }

/* Art: each character is cut out and sits on a pastel riso blob (ArtBox and the home story). Notes keep a strip of tape. */
.tape { position: absolute; z-index: 2; top: -11px; left: 50%; width: 82px; height: 22px; margin-left: -41px; background: rgba(246, 198, 97, 0.85); border-radius: 3px; transform: rotate(-4deg); }
.tape.pink { background: rgba(243, 140, 140, 0.75); transform: rotate(5deg); }
.art-box { position: relative; aspect-ratio: 1 / 1; width: min(270px, 70vw); margin: 6px auto 0; flex-shrink: 0; }
.art-box .cut { animation: float 3.2s ease-in-out infinite; }

/* Buttons: one primary (coral pill), one secondary (paper pill) */
.btn, .cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-align: center; background: var(--rose); color: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 13px 22px; font: 800 20px/24px var(--display); text-decoration: none; cursor: pointer; box-shadow: var(--print); transition: transform 0.08s, box-shadow 0.08s; }
.btn .icon, .cta .icon { color: #fff; }
.btn:active, .cta:active, .ghost:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled, .cta:disabled { opacity: 0.5; cursor: default; }
.ghost { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--surface); color: var(--ink); font: 800 18px/24px var(--display); text-decoration: none; cursor: pointer; box-shadow: var(--print-soft); transition: transform 0.08s, box-shadow 0.08s; }
.link { background: none; border: 0; padding: 8px; font: 700 15px/20px var(--sans); color: var(--body2); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }

/* Faces and speech bubbles */
.face { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 2px var(--ink); flex-shrink: 0; }
.face.md { width: 52px; height: 52px; border-width: 3px; }
.face.lg { width: 64px; height: 64px; border-width: 3px; box-shadow: 0 0 0 2.5px var(--ink); }
.said-row { display: flex; align-items: flex-end; gap: 8px; }
.said-row.me { flex-direction: row-reverse; }
.bubble-vague { background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 18px 18px 18px 5px; padding: 8px 12px; font-size: 14px; line-height: 20px; font-weight: 600; }
.bubble-rose { background: var(--rose); color: #fff; border: 2px solid var(--ink); border-radius: 18px 18px 5px 18px; padding: 8px 12px; font-size: 14px; line-height: 20px; font-weight: 600; }

/* Home */
/* The page is one screen tall (svh: the visible height with the browser bars shown), plus the note under the
   button. The story takes what is left, so the button never sits below the fold. */
.home { position: relative; padding: 6px 20px 0; display: flex; flex-direction: column; gap: 12px; min-height: calc(100vh - 39px); min-height: calc(100svh - 39px); }
/* If a screen is too short even for the smallest story (a phone held sideways), the button stays in view. */
.home > .btn { position: sticky; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 2; }
@media (max-height: 640px) {
	.home h1 { font-size: 27px; line-height: 29px; }
}
.home-spark { top: 0; right: 26px; }
.wavy { color: var(--rose-deep); text-decoration: underline wavy #f6c661; text-decoration-thickness: 3px; text-underline-offset: 7px; }

/* Home story: frames cross-fade, a bar per frame fills while it shows. */
.story { position: relative; margin: 4px -8px 0; flex: 1 1 0; min-height: 260px; container-type: size; }
/* Below the caption: a dot per frame (the current one stretches and fills), then pause. The row is 20px tall;
   the pause button keeps its 44px tap area by spilling into the gaps around the row. */
.story-foot { height: 20px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; padding-left: 44px; }
.story-foot .story-pause { margin: -12px 0; }
.story-bars { display: flex; align-items: center; gap: 6px; }
.story-bars i { width: 8px; height: 8px; border-radius: 999px; background: rgba(36, 48, 94, 0.22); overflow: hidden; position: relative; transition: width 0.3s ease; }
.story-bars i::after { content: ""; position: absolute; inset: 0; width: 0; background: #e0675a; }
.story-bars i.done { background: #e0675a; }
.story-bars i.on { width: 30px; }
.story-bars i.on::after { animation: fill var(--story-ms, 3800ms) linear forwards; }
.story.paused .story-bars i.on::after { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }
.frame { margin: 0; display: none; }
.frame.on { display: block; animation: frame-in 0.6s ease-out; }
@keyframes frame-in { from { opacity: 0; } to { opacity: 1; } }
/* Each frame: a pastel blob, the characters cut out on top with a print shadow, then the doodles. */
.frame-art { position: relative; aspect-ratio: 1 / 1; cursor: pointer; width: min(100%, 100cqh - 86px); margin-inline: auto; container-type: inline-size; }
.frame-art .blob, .frame-art .doo, .art-box .blob, .art-box .doo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.frame-art .doo, .art-box .doo { pointer-events: none; }
.frame-art .cuts { position: absolute; inset: 0; }
.cut { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 0 rgba(36, 48, 94, 0.13)); }
/* Blob 1 plus everything above its middle: the cutout's bottom follows the blob's curve */
.cut.clip { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M106 12c40 4 76 34 80 72 4 40-22 80-62 92S38 172 20 136 2 56 34 30 70 9 106 12z'/%3E%3Crect width='200' height='108'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M106 12c40 4 76 34 80 72 4 40-22 80-62 92S38 172 20 136 2 56 34 30 70 9 106 12z'/%3E%3Crect width='200' height='108'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.cut.her, .cut.him { top: auto; width: 49%; height: auto; }
.cut.her { left: -1%; bottom: 4%; }
.cut.him { left: auto; right: -1%; bottom: 2%; }
.frame.on .cut { animation: float 3.2s ease-in-out infinite; }
.frame.on .cut.him { animation-delay: 0.8s; }
@keyframes float { 50% { translate: 0 -5px; } }
.d-bob { animation: d-bob 2.8s ease-in-out infinite; }
@keyframes d-bob { 50% { transform: translateY(-4px); } }
.d-drop { opacity: 0; animation: d-drop 1.3s linear infinite; }
@keyframes d-drop { 0% { opacity: 0; transform: translateY(-3px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
.d-q { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: d-q 2.6s ease-in-out infinite; }
@keyframes d-q { 0%, 100% { opacity: 0; transform: scale(0.5) rotate(-10deg); } 18%, 72% { opacity: 1; transform: scale(1) rotate(6deg); } }
.d-rise { opacity: 0; animation: d-rise 2.8s ease-out infinite; }
@keyframes d-rise { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0px), -44px) scale(1.05); } }
.d-tw { transform-box: fill-box; transform-origin: center; animation: d-tw 2.4s ease-in-out infinite; }
@keyframes d-tw { 0%, 100% { opacity: 0.25; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }
.d-dash { animation: d-dash 1.2s linear infinite; }
@keyframes d-dash { to { stroke-dashoffset: -14; } }
.frame figcaption { min-height: 56px; padding: 10px 18px 0; display: flex; align-items: center; justify-content: center; text-align: center; font: 700 19px/23px var(--display); text-wrap: balance; }
.story-pause { width: 44px; height: 44px; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.story-pause > span { display: flex; align-items: center; justify-content: center; }
.story-pause .icon { color: var(--ink); }
.story-pause:active, .pill:active, .copy:active { opacity: 0.6; }
.story-pause .ic-play, .story.paused .story-pause .ic-pause { display: none; }
.story.paused .story-pause .ic-play { display: block; }
/* Frame 4: her real result card, small */
.mini-phone { position: absolute; left: 50%; top: 50%; width: 64%; transform: translate(-50%, -52%) rotate(-3deg); background: var(--surface); border: 2.5px solid var(--ink); border-radius: 26px; padding: 20px 12px 14px; box-shadow: var(--print); display: flex; flex-direction: column; gap: 6px; }
.mini-phone::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--edge); }
.mp-title { font: 800 16px/18px var(--display); margin-bottom: 2px; }
.mp-way { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1.5px solid var(--ink); border-radius: 12px; font-size: 13px; font-weight: 800; }
.mp-way span { width: 24px; height: 24px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mp-msg { margin-top: 2px; background: var(--rose); color: #fff; border: 1.5px solid var(--ink); border-radius: 12px 12px 12px 4px; padding: 7px 9px; font-size: 12px; line-height: 16px; font-weight: 700; }
.frame.on .mp-way, .frame.on .mp-msg { animation: pop-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.frame.on .mp-way.r0 { animation-delay: 0.3s; }
.frame.on .mp-way.r1 { animation-delay: 0.7s; }
.frame.on .mp-way.r2 { animation-delay: 1.1s; }
.frame.on .mp-msg { animation-delay: 1.7s; }
/* On a short screen the art is smaller than the 351px the phone was drawn for, and its fixed-size text would
   overflow the art. Below 340px the phone keeps its drawn width and the whole phone scales down instead. */
@container (max-width: 339px) { .mini-phone { width: 225px; transform: translate(-50%, -52%) rotate(-3deg) scale(var(--mp-k, 0.88)); } }
@container (max-width: 310px) { .mini-phone { --mp-k: 0.81; } }
@container (max-width: 285px) { .mini-phone { --mp-k: 0.74; } }
@container (max-width: 260px) { .mini-phone { --mp-k: 0.67; } }
@container (max-width: 235px) { .mini-phone { --mp-k: 0.6; } }
@container (max-width: 210px) { .mini-phone { --mp-k: 0.53; } }
@container (max-width: 185px) { .mini-phone { --mp-k: 0.47; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: none; } }

/* Quiz */
.quiz { flex-grow: 1; display: flex; flex-direction: column; }
.progress { height: 14px; margin: 2px 20px 0; border-radius: 999px; background: var(--surface); border: 2px solid var(--ink); overflow: hidden; flex-shrink: 0; }
.progress i { display: block; height: 100%; border-radius: 999px; background: var(--heart); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.q-body { padding: 26px 20px 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.q-body h1 { margin-bottom: 6px; }
.choice { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 16px 18px; border-radius: var(--r); border: 2.5px solid var(--ink); background: var(--surface); font: 800 17px/22px var(--sans); color: var(--ink); cursor: pointer; min-height: 58px; box-shadow: var(--print-soft); transition: transform 0.08s; }
.choice:active { transform: translateY(2px); }
.choice .radio { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; flex-shrink: 0; }
.choice[aria-pressed="true"] { background: var(--pink); box-shadow: var(--print); }
.choice[aria-pressed="true"] .radio { border: 7px solid var(--rose); }
.hint { margin-top: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--muted); }
.statement { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px; }
.statement .said-row { gap: 10px; }
.bubble-q { background: #fff; border: 2.5px solid var(--ink); border-radius: 26px 26px 26px 8px; padding: 20px; box-shadow: var(--print); }
.bubble-q h1 { font-size: 29px; line-height: 33px; }
.ask { margin-left: 62px; font-size: 14px; font-weight: 700; color: var(--muted); }
.scale { padding: 4px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
/* The love meter: 5 hearts filled to their own level (riso.ts meterHeart), each with its word below */
.hearts { display: flex; align-items: flex-end; background: var(--surface); border: 2.5px solid var(--ink); border-radius: 28px; padding: 12px 2px 10px; box-shadow: var(--print-soft); touch-action: none; user-select: none; -webkit-user-select: none; }
.h { position: relative; flex: 1; min-width: 0; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.hw { height: 74px; display: flex; align-items: flex-end; justify-content: center; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* .lit: the heart under the finger while dragging, or the picked one */
.h.lit .hw { transform: translateY(-6px) scale(1.12); }
.meter { overflow: visible; transform-origin: 50% 80%; }
.meter.tick { animation: tick 0.22s ease-out; }
@keyframes tick { 50% { transform: scale(1.12); } }
.meter.squish { animation: squish 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes squish { 30% { transform: scale(1.28, 0.82); } 60% { transform: scale(0.9, 1.12); } }
.meter .slosh { animation: slosh 1.4s linear infinite; }
@keyframes slosh { to { transform: translateX(-32px); } }
.hl { min-height: 28px; padding: 2px 6px; border-radius: 999px; display: flex; align-items: center; text-align: center; font-size: 12px; line-height: 14px; font-weight: 800; color: var(--muted); transition: background-color 0.15s, color 0.15s; }
.h.lit .hl { background: var(--rose); color: #fff; }
.h:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 16px; }
/* Mini hearts that pop out of a picked heart */
.burst { position: absolute; left: 50%; top: 38px; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; opacity: 0; animation: burst 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.burst i:nth-child(even) { animation-delay: 0.03s; }
@keyframes burst { 0% { opacity: 1; transform: rotate(var(--r)) translateY(-6px) scale(0.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--r)) translateY(-46px) scale(1); } }
.bar { padding: 10px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bar .row, .fixed .row { display: flex; gap: 12px; width: 100%; }
.bar .ghost { flex: none; font-size: 16px; padding: 8px 22px; }
.bar .row { justify-content: center; }
.sheet { flex-grow: 1; padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.mark { background: var(--pink); border-radius: 10px; padding: 0 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.feel { display: flex; gap: 8px; }
.pill { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: var(--r); border: 2.5px solid var(--ink); background: var(--surface); font: 800 15px/18px var(--sans); color: var(--ink); cursor: pointer; min-height: 48px; box-shadow: var(--print-soft); }

.pill[aria-pressed="true"] { background: var(--heart); box-shadow: var(--print); }
.sheet .cta { margin-top: auto; }
.gate { padding: 18px 20px 190px; display: flex; flex-direction: column; gap: 8px; }
.fields { margin-top: 10px; background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--print-soft); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 800; font-size: 14px; color: var(--ink); }
.field input { font: 600 17px/24px var(--sans); padding: 12px 16px; border-radius: var(--r-sm); border: 2px solid var(--edge); background: #fff; color: var(--ink); width: 100%; }
.field input:focus { border-color: var(--ink); outline: none; }
.field input::placeholder { color: #7b8099; }
.error { color: #a8261b; font-size: 14px; line-height: 20px; font-weight: 700; }
.error:empty { display: none; }
.fixed { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; background: rgba(252, 239, 210, 0.97); padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 2.5px solid var(--ink); }
.fixed .ghost { flex: 1; }
.fixed .cta { flex: 1.4; font-size: 18px; padding: 11px 16px; }

/* Result */
.hero { position: relative; overflow: hidden; margin: 6px 16px 0; border: 2.5px solid var(--ink); border-radius: 28px; box-shadow: var(--print); padding: 26px 18px 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: var(--pink); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; mix-blend-mode: multiply; }
.hero > :not(.hero-bg) { position: relative; }
.hi { font-size: 16px; font-weight: 800; }
.stickers { display: flex; gap: 12px; margin-top: 6px; }
.stickers span { display: block; filter: drop-shadow(0 4px 0 #24305e); }
.stickers span:nth-child(1) { transform: rotate(-6deg); }
.stickers span:nth-child(2) { transform: translateY(-6px); }
.stickers span:nth-child(3) { transform: rotate(6deg); }
.way { display: flex; gap: 12px; align-items: center; padding: 14px; border: 2.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--print-soft); }
.way strong { font: 800 19px/22px var(--display); }
.way p { margin-top: 2px; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--body2); }
.chat { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.note-paper { position: relative; margin: 16px 6px 0; background: #fff4c2; border: 2px solid var(--ink); border-radius: 6px 6px 22px 6px; padding: 22px 18px 18px; transform: rotate(-1.5deg); box-shadow: 0 4px 0 var(--ink); font-size: 15px; line-height: 22px; font-weight: 600; }
.note-paper .tape { top: -12px; }
.note-paper strong { display: block; margin-bottom: 4px; font: 800 19px/22px var(--display); color: var(--teal); }
.invite { background: var(--mint); border: 2.5px solid var(--ink); border-radius: 26px; padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--print); text-align: center; }
.invite .said-row { text-align: left; }
.pair { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pair .face:first-child { transform: rotate(-6deg); }
.pair .face:last-child { transform: rotate(6deg); }
.invite .ghost { flex: none; }
.invite .note { color: var(--teal); }
#bridge { padding-top: 32px; gap: 14px; }
.phone { position: relative; overflow: hidden; background: var(--surface); border: 2.5px solid var(--ink); border-radius: 26px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--print); }
.phone-top { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--muted); }
.phone strong { font: 800 18px/22px var(--display); }
.bubble { background: var(--rose); color: #fff; border-radius: var(--r-sm); padding: 10px 12px; font-size: 14px; line-height: 20px; font-weight: 600; }
.blurred { display: flex; flex-direction: column; gap: 8px; filter: blur(3px); opacity: 0.8; padding-bottom: 36px; }
.blurred i { height: 10px; border-radius: 5px; background: var(--line); }
.lock { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
.lock .icon { color: #fff; }
.offer-wrap { padding: 22px 16px 28px; }
.offer { background: var(--surface); border: 2.5px solid var(--ink); border-radius: 26px; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--print); }
.offer[hidden] { display: none; }
.downsell { border-color: var(--rose); box-shadow: 0 5px 0 var(--rose); gap: 12px; }
.val { display: flex; gap: 12px; align-items: flex-start; }
.val strong { display: block; font-size: 15px; line-height: 21px; font-weight: 800; }
.val span:not(.vi) { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); }
.vi { display: flex; flex-shrink: 0; }
.price-row { gap: 12px; border-top: 2px dashed var(--edge); padding-top: 14px; display: flex; align-items: center; justify-content: space-between; }
.price { font: 800 34px/36px var(--display); }
.tag { white-space: nowrap; flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--ink); background: var(--mint); border: 2px solid var(--ink); padding: 4px 10px; border-radius: 999px; }
.price-pair { display: flex; align-items: baseline; gap: 10px; }
.price-pair s { color: var(--muted); font-weight: 700; }
.pay { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pay span { font-size: 11px; font-weight: 800; color: var(--body2); border: 1.5px solid var(--edge); border-radius: 999px; padding: 3px 10px; background: #fff; }
.faq { border-top: 2px dashed var(--edge); font-size: 14px; }
.faq summary { cursor: pointer; font-weight: 800; list-style: none; padding: 12px 0; min-height: 44px; display: flex; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { margin: 0 0 10px; font-weight: 600; color: var(--muted); }
.list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--body2); }
.sticky { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(252, 239, 210, 0.97); border-top: 2.5px solid var(--ink); }
.sticky strong { font: 800 20px/1 var(--display); white-space: nowrap; }
.sticky .cta { flex: 1; padding: 10px 14px; font-size: 18px; }
.sticky[hidden] { display: none; }

/* Report */
.report-hero { margin: 6px 16px 0; background: var(--lilac); border: 2.5px solid var(--ink); border-radius: 28px; box-shadow: var(--print); padding: 24px 18px; display: flex; flex-direction: column; gap: 12px; }
.report-hero > p:not(.chip) { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--body2); }
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ink); border-radius: 999px; padding: 9px 14px; font: 800 13px/18px var(--sans); cursor: pointer; min-height: 44px; background: var(--surface); color: var(--ink); }
.pick::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%; }
.pick[aria-pressed="true"] { background: var(--heart); }
.pick[aria-pressed="true"]::before { border: 0; background: var(--ink); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 6px 8px; font-size: 15px; font-weight: 700; }
.bars .num { text-align: right; }
.track { grid-column: 1 / 3; height: 12px; border-radius: 999px; background: var(--surface); border: 2px solid var(--ink); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 999px; background: var(--heart); }
.card { border: 2px solid var(--ink); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 22px; font-weight: 600; background: var(--surface); box-shadow: var(--print-soft); }
p.card { display: block; }
.card.r0 { background: var(--butter); }
.card.r1 { background: var(--mint); }
.card.r2 { background: var(--lilac); }
.card .way { padding: 0; border: 0; box-shadow: none; background: none; }
.card strong { font-weight: 800; }
.msg { padding: 18px; gap: 12px; }
.msg p { font-size: 18px; line-height: 27px; }
.copy { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 9px 16px; font: 800 14px/20px var(--sans); color: var(--ink); cursor: pointer; min-height: 44px; align-self: flex-start; }
.week { display: inline-block; margin-right: 6px; background: var(--butter); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 8px; font-size: 13px; font-weight: 800; }

/* His page: a letter with her face as the stamp */
.letter { position: relative; background: var(--surface); border: 2.5px solid var(--ink); border-radius: 24px; padding: 22px 20px 18px; box-shadow: 0 5px 0 var(--rose); background-image: repeating-linear-gradient(transparent 0 29px, rgba(36, 48, 94, 0.1) 29px 30px); background-position: 0 16px; }
.stamp { position: absolute; top: -14px; right: 16px; width: 62px; height: 72px; background: #fff; border: 2px dashed var(--rose); border-radius: 6px; padding: 4px; transform: rotate(6deg); box-shadow: 0 3px 0 var(--ink); }
.stamp img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.letter .to { font: 800 17px/22px var(--display); color: var(--rose-deep); margin-bottom: 4px; }
.letter p.body { padding-right: 52px; font-size: 18px; line-height: 30px; font-weight: 700; }
.letter .ps { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--rose-deep); }
.task { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 14px; background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--r); font: 700 15px/21px var(--sans); color: var(--ink); cursor: pointer; min-height: 58px; box-shadow: var(--print-soft); transition: transform 0.08s; }
.task:active { transform: translateY(2px); }
.task .riso { filter: drop-shadow(0 2px 0 rgba(36, 48, 94, 0.25)); }
.task .ic-on, .task[aria-pressed="true"] .ic-off { display: none; }
.task[aria-pressed="true"] .ic-on { display: block; }
.task[aria-pressed="true"] { background: var(--pink); box-shadow: var(--print); }
.end { background: var(--lilac); border: 2.5px solid var(--ink); border-radius: 26px; padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--print); }
.end .head { display: flex; align-items: flex-start; gap: 12px; }
.end h2 { font-size: 22px; line-height: 25px; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	.doodle .riso, .art-box .cut, .frame.on, .frame.on .cut, .frame.on .mp-way, .frame.on .mp-msg, .meter .slosh, .meter.tick, .meter.squish { animation: none; }
	.hw { transition: none; }
	.doo * { animation: none !important; opacity: 1; }
	.d-fly { display: none; }
	.story-bars i.on::after { animation: none; width: 100%; }
}

/* Site footer: privacy, terms, contact */
.site-foot { margin: 36px 20px 28px; padding-top: 16px; border-top: 2px dashed rgba(36, 48, 94, 0.18); display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 19px; font-weight: 700; color: var(--muted); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(36, 48, 94, 0.35); }
.site-foot p { margin: 0; }
.delete-link { margin: 28px 20px 0; }
.delete-link a { color: var(--muted); }

/* Privacy, terms and delete pages */
.legal { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.legal section { display: flex; flex-direction: column; gap: 8px; }
.legal h2 { font-size: 21px; line-height: 25px; margin-top: 10px; }
.legal p, .legal li { font-size: 15px; line-height: 23px; font-weight: 600; color: var(--body2); }
.legal p { margin: 0; }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: var(--rose-deep); }
.cta.danger { background: var(--rose-deep); }
/* The result page's sticky price bar would cover the footer: leave room under it. */
.app:has(#sticky) .site-foot { margin-bottom: 104px; }
.foot + .site-foot { margin-top: 0; }