:root { --ink:#5e4a59; --muted:#9b8292; --pink:#f8dce6; --pink-strong:#e989ad; --lilac:#ece2fa; --cream:#fffaf5; --line:#f0dfe5; --white:#fff; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 0 0,#ffe7ef 0,transparent 32%),radial-gradient(circle at 100% 5%,#e8dcfa 0,transparent 28%),var(--cream); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.app-shell { width:min(100%,580px); margin:auto; padding:32px 18px max(24px,env(safe-area-inset-bottom)); }.hero { position:relative; text-align:center; padding:8px 0 24px; }.sparkle { position:absolute; color:#d7b0f0; font-size:28px; margin:-4px 0 0 105px; }.eyebrow { margin:0; color:#bd8fa5; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }.hero h1 { margin:8px 0 5px; font:700 34px/1 Georgia,serif; color:#714e64; }.hero h1 span { font:22px/1 sans-serif; }.subtitle { margin:0; font-size:14px; color:var(--muted); }.progress { display:flex; gap:6px; justify-content:center; margin:0 0 20px; }.progress i { width:28px; height:5px; border-radius:9px; background:#eadfe4; }.progress i.active { background:var(--pink-strong); }.card { background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.9); border-radius:26px; padding:22px; box-shadow:0 12px 35px rgba(126,86,112,.1); }.card h2 { margin:0 0 7px; font:700 23px/1.2 Georgia,serif; }.hint { margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.45; }.choices { display:grid; gap:10px; }.choice { display:grid; grid-template-columns:42px 1fr auto; grid-template-rows:auto auto; column-gap:10px; align-items:center; width:100%; min-height:67px; padding:10px 11px; border:1px solid var(--line); border-radius:17px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; transition:.16s ease; }.choice:hover,.choice:focus { border-color:#e6a6bc; background:#fff8fa; transform:translateY(-1px); }.choice span { grid-row:1/3; display:grid; place-items:center; width:38px; height:38px; border-radius:13px; background:var(--lilac); font-size:19px; }.choice b { font-size:15px; }.choice small { color:var(--muted); font-size:12px; margin-top:2px; }.choice em { grid-column:3; grid-row:1/3; font-size:25px; font-style:normal; color:#d7b9c6; }.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.slot { padding:13px 7px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:#fff; font-weight:600; cursor:pointer; }.slot:hover { background:#fff3f7; border-color:#eaa5be; }.form { display:grid; gap:12px; }.field { display:grid; gap:6px; font-size:13px; color:var(--muted); }.field input { width:100%; padding:14px; border:1px solid var(--line); border-radius:13px; font:16px inherit; color:var(--ink); outline:none; }.field input:focus { border-color:#df8dad; box-shadow:0 0 0 3px #fce9ef; }.primary,.secondary { width:100%; border:0; border-radius:15px; padding:15px; cursor:pointer; font-weight:700; font-size:15px; }.primary { color:white; background:linear-gradient(135deg,#e985aa,#d9789f); box-shadow:0 7px 15px #ebbed0; }.primary:disabled { opacity:.55; cursor:wait; }.secondary { margin-top:10px; color:#9b7183; background:#f9edf2; }.summary { display:grid; gap:11px; padding:15px; margin:18px 0; border-radius:17px; background:#fff7f9; }.summary div { display:flex; justify-content:space-between; gap:10px; font-size:14px; }.summary span { color:var(--muted); }.summary b { text-align:right; }.success { text-align:center; padding:14px 2px 8px; }.success .big { display:block; margin:5px auto 14px; font-size:48px; }.success p { line-height:1.5; color:var(--muted); }.notice { text-align:center; color:var(--muted); line-height:1.5; }.error { margin:0 0 12px; padding:11px; border-radius:12px; background:#fff0f3; color:#b34f73; font-size:13px; }.loader { text-align:center; color:var(--muted); padding:24px; } @media (max-width:360px){ .app-shell{padding-inline:12px}.card{padding:18px}.grid{grid-template-columns:1fr 1fr} }