@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root{--pink:#f8dce8;--pink2:#f4c5d8;--navy:#142747;--navy2:#20395f;--cream:#fffafc;--ink:#142747;--muted:#69758a}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 10%,#fff4f8 0,transparent 32%),linear-gradient(135deg,#f8dce8,#f3c7d9 55%,#fbe8ef);color:var(--ink);font-family:'DM Sans',sans-serif;display:grid;place-items:center;overflow-x:hidden}
.decor{position:fixed;color:#fff9fc;opacity:.75;font-size:clamp(2rem,5vw,4rem);pointer-events:none;animation:float 6s ease-in-out infinite}
.decor-one{top:9%;left:8%}.decor-two{top:18%;right:10%;animation-delay:1s}.decor-three{bottom:12%;left:13%;animation-delay:2s}
.app{width:min(100% - 28px,520px);padding:22px 0 18px;position:relative;z-index:1}
.brand{text-align:center;margin-bottom:14px}
.monkey-badge{position:relative;width:68px;height:68px;margin:0 auto 10px;border-radius:22px;background:#fff9fc;box-shadow:0 8px 25px #14274712;display:grid;place-items:center;font-size:34px;transform:rotate(-4deg)}
.monkey-badge i{position:absolute;font-style:normal;font-size:18px;right:2px;top:-8px;transform:rotate(12deg)}
.monkey-badge.big{width:78px;height:78px;font-size:39px;margin-bottom:14px}
.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:700;color:#65728a;margin:0 0 12px}
.panel{display:none;background:rgba(255,250,252,.92);border:1px solid #fff;box-shadow:0 22px 70px #14274716;border-radius:28px;padding:clamp(24px,6vw,38px);text-align:center;backdrop-filter:blur(12px);animation:appear .45s ease}
.panel.active{display:block}
h1{font-family:'Playfair Display',serif;font-size:clamp(2.25rem,8vw,3.35rem);line-height:1.06;margin:8px 0 16px;color:var(--navy);font-weight:600}
h1 em{color:#c65f8c;font-weight:500}
h2{font-family:'Playfair Display',serif;font-size:clamp(1.45rem,5vw,2rem);line-height:1.25;margin:12px 0 22px}
.sub{color:#667187;line-height:1.75;font-size:14px;margin:0 auto 24px}
.primary{border:0;background:var(--navy);color:white;border-radius:999px;padding:15px 22px;min-height:52px;font:600 14px 'DM Sans',sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:18px;text-decoration:none;cursor:pointer;box-shadow:0 8px 18px #14274720;transition:transform .2s,background .2s}
.primary:hover{transform:translateY(-2px);background:var(--navy2)}
.primary span{color:#f5bfd5;font-size:18px}
.tiny{font-size:11px;color:#9aa1ae;margin:18px 0 0}
.mini-stars,.final-stars{color:#d78aaa;letter-spacing:.3em}
.quiz-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;letter-spacing:.12em;color:#778196}
.progress{height:6px;border-radius:99px;background:#f2e5eb;margin:13px 0 24px;overflow:hidden}
.progress div{height:100%;width:10%;background:linear-gradient(90deg,#d982a8,#142747);border-radius:99px;transition:width .35s}
.question-card{text-align:left}
.hint-tag{display:inline-block;border-radius:99px;background:#f8e4ed;color:#bd648d;padding:7px 11px;font-size:9px;font-weight:700;letter-spacing:.13em}
.answers{display:grid;gap:10px}
.answer{width:100%;border:1px solid #e9e7ed;background:#fff;border-radius:15px;padding:14px 15px;text-align:left;font:500 13px 'DM Sans',sans-serif;color:#25344e;cursor:pointer;transition:.18s;display:flex;align-items:center;gap:12px}
.answer .letter{width:26px;height:26px;border-radius:9px;background:#f9e8ef;color:#c16d91;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
.answer:hover{border-color:#d98eae;background:#fff8fb;transform:translateY(-1px)}
.answer.selected{background:#142747;color:#fff;border-color:#142747}
.answer.selected .letter{background:#f5c5d8;color:#142747}
.quiz-bottom{display:flex;justify-content:space-between;margin-top:22px;color:#a0a5b0;font-size:10px}
.voice-heart{font-size:38px;color:#d47fa3;margin-bottom:8px}
.audio-card{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border:1px solid #f0dce5;background:#fff;border-radius:18px}
.play{width:46px;height:46px;border:0;border-radius:50%;background:var(--navy);color:#fff;font-size:15px;cursor:pointer;flex-shrink:0}
.audio-info{flex:1;min-width:0}
.audio-info strong{font-size:12px}
.audio-info span{font-size:10px;color:#8b94a4}
.wave{height:22px;margin:7px 0;background:repeating-linear-gradient(90deg,#d987a9 0 3px,transparent 3px 7px);mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);border-radius:4px;opacity:.7}
.wave.playing{animation:pulse .65s ease-in-out infinite alternate}
.text-button{display:block;margin:22px auto 0;background:none;border:0;color:#c1668f;font-weight:700;cursor:pointer}
.hidden{display:none}
.call-button{margin-bottom:12px}
.secondary{display:block;margin:0 auto;border:1px solid #dce1e9;background:transparent;color:#526078;padding:12px 18px;border-radius:99px;font:600 12px 'DM Sans',sans-serif;cursor:pointer}
footer{text-align:center;font-size:10px;color:#9d7c8c;margin-top:18px;letter-spacing:.04em}
footer span{color:#c66b92}
@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(8deg)}}
@keyframes pulse{from{transform:scaleY(.55)}to{transform:scaleY(1.15)}}
@media(max-width:420px){.app{width:min(100% - 20px,520px)}.panel{padding:23px 20px;border-radius:23px}.answer{padding:12px}}