:root { color-scheme: light; --ink:#28243e; --muted:#6d6677; --cream:#fffaf2; --pink:#f7d8d7; --purple:#6d50a3; --line:#e8dfd8; }
* { box-sizing:border-box; }
body { margin:0; font-family: ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif; background: radial-gradient(circle at 90% 0%, #f7d8d7 0, transparent 38%), radial-gradient(circle at 0 50%, #ded8f5 0, transparent 35%), var(--cream); color:var(--ink); }
.page { width:min(100%, 480px); min-height:100vh; margin:auto; padding:24px 22px 32px; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:-.03em; font-size:20px; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; background:#2b2643; color:#fff; }
.hero { margin:auto 0; padding:40px 0 25px; }
.eyebrow { color:var(--purple); font-weight:800; font-size:12px; letter-spacing:.14em; }
h1 { font-size:clamp(34px,9vw,48px); line-height:1.04; letter-spacing:-.055em; margin:12px 0 18px; }
h2 { font-size:24px; line-height:1.25; letter-spacing:-.035em; }
p { line-height:1.5; }
.hero > p { color:var(--muted); font-size:17px; }
.hero-card,.panel,.result { background:#fff; border:1px solid var(--line); border-radius:26px; box-shadow:0 12px 35px #2b264311; }
.hero-card { margin:30px 0; padding:20px; text-align:center; transform:rotate(-2deg); }
.hero-pet { font-size:86px; }
.speech { font-size:23px; font-weight:800; line-height:1.2; }
small,.note { color:var(--muted); }
.note { font-size:13px !important; margin-top:30px; }
footer { display:flex; gap:22px; padding-top:25px; font-size:13px; color:var(--muted); }
a { color:inherit; }
.party { gap:0; }
.party > section { padding-top:36px; }
.photo-frame { width:100%; aspect-ratio:4 / 3; overflow:hidden; background:#f2eaf0; border-radius:26px; box-shadow:0 10px 30px #2b264322; }
.photo-frame img { width:100%; height:100%; object-fit:cover; }
.helper { font-size:16px; color:var(--muted); margin:24px 0 14px; }
.choices { display:grid; gap:11px; }
.choice { width:100%; min-height:76px; padding:17px 19px; text-align:left; font-family:inherit; font-size:18px; font-weight:700; line-height:1.3; color:var(--ink); background:#fff; border:2px solid var(--line); border-radius:18px; cursor:pointer; box-shadow:0 3px 0 #e5dcd7; }
.choice:hover:not(:disabled),.choice:focus-visible { border-color:var(--purple); outline:none; }
.choice:disabled { opacity:.66; cursor:default; }
.vote-message { min-height:28px; font-size:14px; color:var(--purple); font-weight:700; }
.result { background:#2b2643; border:0; color:#fff; padding:22px; margin-top:18px; }
.result .eyebrow { color:#f6c2ab; }
.result h2 { margin:10px 0; }
.result p { margin:0; opacity:.8; }
.report { margin-top:27px; font-size:13px; color:var(--muted); }
.report summary { cursor:pointer; text-decoration:underline; }
.report label { display:block; margin:10px 0 4px; }
.report select { display:block; width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.subtle-button { margin:14px 0 0; padding:10px 13px; border:0; border-radius:10px; color:#fff; background:var(--ink); cursor:pointer; }
#report-message { display:block; padding-top:7px; }
.centered { text-align:center; margin:auto 0; padding:36px 20px; }
.centered h1 { font-size:28px; }
.emoji { font-size:62px; }
.spinner { width:35px; height:35px; border:4px solid #ded8f5; border-top-color:var(--purple); border-radius:50%; margin:auto; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.hidden { display:none !important; }