/* Minat, 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.22s cubic-bezier(0.34, 1.8, 0.6, 1), box-shadow 0.22s cubic-bezier(0.34, 1.8, 0.6, 1); }
.btn .icon, .cta .icon { color: #fff; }
/* Press: the button goes down at once (no transition while held) and springs back up a little past its place. */
.btn:active, .cta:active, .ghost:active { transform: translateY(4px) scale(0.985); box-shadow: 0 1px 0 var(--ink); transition-duration: 0s; }
.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.22s cubic-bezier(0.34, 1.8, 0.6, 1), box-shadow 0.22s cubic-bezier(0.34, 1.8, 0.6, 1); }
.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, .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); }
/* Between quiz screens (quiz.js go): the screen slides out toward where it is going, then the next one slides in
   from the other side, part by part. The progress bar and the Kembali row stay put. */
.quiz[data-leave="next"] > :not(.progress, .bar) { animation: q-out-next 120ms ease-in forwards; }
.quiz[data-leave="back"] > :not(.progress, .bar) { animation: q-out-back 120ms ease-in forwards; }
.enter-next { animation: q-in-next 420ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.enter-back { animation: q-in-back 420ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes q-out-next { to { opacity: 0; transform: translateX(-28px) scale(0.98); } }
@keyframes q-out-back { to { opacity: 0; transform: translateX(28px) scale(0.98); } }
@keyframes q-in-next { from { opacity: 0; transform: translateX(40px) scale(0.98); } }
@keyframes q-in-back { from { opacity: 0; transform: translateX(-40px) scale(0.98); } }
.q-body { padding: 26px 20px 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.q-body h1 { margin-bottom: 6px; }
/* The pay pages (pay-views.tsx): "Cek lagi" keeps its own height in the column. */
.q-body > .ghost { flex: none; }
.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.22s cubic-bezier(0.34, 1.8, 0.6, 1), box-shadow 0.22s cubic-bezier(0.34, 1.8, 0.6, 1); }
.choice:active, .pill:active, .task:active { transform: translateY(3px) scale(0.985); box-shadow: 0 1px 0 rgba(36, 48, 94, 0.22); transition-duration: 0s; }
.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); }
/* The top of the first statement screen (quiz.js introBlock): the ad's question and what the test is. */
.q-intro { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 0; }
.q-hook { font: 800 23px/26px var(--display); color: var(--ink); text-wrap: balance; }
.q-line { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--body2); }
.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); transition: transform 0.22s cubic-bezier(0.34, 1.8, 0.6, 1), box-shadow 0.22s cubic-bezier(0.34, 1.8, 0.6, 1); }

.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; }
/* A pay button that first asks for her email (views.tsx PayButton, the "lite" gate test). */
.pay-form { display: flex; flex-direction: column; gap: 12px; }
.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; }
.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: 8px 12px; border-top: 2px dashed var(--edge); padding-top: 14px; display: flex; flex-wrap: wrap; 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; }
.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; }
/* Her own statements, quoted (views.tsx Words), and the sample report link in arm c of the offer test. */
.words-box { margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.words-box figcaption { font-size: 13px; line-height: 18px; font-weight: 800; color: var(--muted); }
.words { margin: 0; background: var(--surface); border: 2px solid var(--ink); border-radius: 18px 18px 18px 6px; box-shadow: 0 3px 0 var(--rose); padding: 14px 16px; font-size: 16px; line-height: 24px; font-weight: 700; }
.offer .sample { display: block; text-align: center; margin-top: 4px; }
/* Laporan berdua (views.tsx BerduaPage, PairReady) and "Kenapa belum?" (PreviewPage #reasons). */
/* .stack sets display, so the answer and the rest stay hidden until her guess (berdua.js). */
#reveal[hidden], #rest[hidden] { display: none; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duo .card { display: flex; flex-direction: column; gap: 6px; }
.duo ol { margin: 0; padding-left: 18px; }
.pair-ready { display: flex; flex-direction: column; gap: 8px; }
.pair-ready .cta { margin-top: 6px; }
.buka { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--muted); font-style: italic; }
.reasons { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
/* The price with the old price struck through ("harga coret", views.tsx PreviewPage). */
.price-pair { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.price-pair s { color: var(--muted); font-weight: 700; }
.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 .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, .enter-next, .enter-back { 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; }

/* Paying QRIS from the same phone, under the pay button. */
.qris-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 14px 16px; border: 2px dashed var(--edge); border-radius: 18px; background: #fff; text-align: left; }
.qris-steps strong { font: 800 15px/20px var(--display); }
.qris-steps ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 21px; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
/* Her own full report, locked, above the price. */
.locked-report { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 16px 16px 58px; border: 2.5px solid var(--ink); border-radius: 22px; background: var(--surface); overflow: hidden; }
.locked-report strong { font: 800 17px/22px var(--display); }
.locked-report ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.locked-report li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; color: var(--muted); }
.locked-report .blur { filter: blur(5px); user-select: none; color: var(--ink); }
.locked-report .locked { position: absolute; left: 50%; bottom: 14px; 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; }
.locked-report .locked .icon { color: #fff; }
/* The invite again, after "Simpan ringkasanku aja". */
.invite-again { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.invite-again .ghost { flex: none; }