.wbcay, .wbcay * { box-sizing: border-box; }
.wbcay {
  --ink: #f8f4e8; --muted: #c8c4b9; --gold: #ffca67; --hot: #ff6e5b; --deep: #100b1d;
  position: relative; isolation: isolate; z-index: 0; width: 100%; max-width: 1100px; min-height: 690px;
  margin: 28px auto; overflow: hidden; border-radius: 32px; color: var(--ink); background:
  radial-gradient(circle at 5% 95%, rgba(238,78,87,.24), transparent 34%),
  radial-gradient(circle at 92% 10%, rgba(88,74,190,.30), transparent 35%), #100b1d;
  box-shadow: 0 30px 80px rgba(15,8,28,.32); font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.5;
}
.wbcay button { font: inherit; }
.wbcay [hidden] { display: none !important; }
.wbcay__aurora { position:absolute; inset:-25%; z-index:-1; opacity:.55; filter:blur(70px); pointer-events:none; background:conic-gradient(from 180deg, transparent, #8b358c, transparent 28%, #224a7e, transparent 55%, #c85447, transparent); animation:wbcay-drift 16s ease-in-out infinite alternate; }
.wbcay__shell { width:100%; min-height:690px; padding:clamp(28px,5vw,64px); background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:42px 42px; }
.wbcay__header { text-align:center; max-width:760px; margin:0 auto 28px; }
.wbcay__eyebrow { margin:0 0 8px; color:var(--gold); text-transform:uppercase; letter-spacing:.26em; font-size:12px; font-weight:700; }
.wbcay h2, .wbcay h3 { color:var(--ink); font-family:Georgia, 'Times New Roman', serif; letter-spacing:-.04em; line-height:1.02; }
.wbcay h2 { margin:0; font-size:clamp(42px,7vw,78px); }
.wbcay__intro { max-width:600px; margin:18px auto 0; color:var(--muted); font-size:clamp(15px,2vw,18px); }
.wbcay__quiz { max-width:820px; margin:0 auto; }
.wbcay__intro-screen { min-height:300px; display:flex; align-items:center; flex-direction:column; justify-content:center; text-align:center; }
.wbcay__intro-screen p { color:#e4ded2; font-size:18px; }
.wbcay__constellation { display:flex; gap:36px; margin-bottom:18px; color:var(--gold); font-size:22px; }
.wbcay__constellation span:nth-child(2) { transform:translateY(-18px); font-size:34px; }
.wbcay__primary, .wbcay__secondary { min-height:52px; border-radius:999px; padding:13px 24px; cursor:pointer; font-weight:700; transition:transform .2s, box-shadow .2s, background .2s; }
.wbcay__primary { border:0; color:#1c1020; background:linear-gradient(135deg,#ffe29a,var(--gold) 48%,#ff8b61); box-shadow:0 12px 34px rgba(255,175,88,.25); }
.wbcay__primary span { display:inline-block; margin-left:8px; transition:transform .2s; }
.wbcay__primary:hover { transform:translateY(-2px); box-shadow:0 16px 38px rgba(255,175,88,.34); }
.wbcay__primary:hover span { transform:translateX(4px); }
.wbcay__primary:focus-visible, .wbcay__secondary:focus-visible, .wbcay__answer:focus-visible, .wbcay__back:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.wbcay__progress-wrap { max-width:680px; margin:8px auto 36px; }
.wbcay__counter { margin:0 0 9px; text-align:right; color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; }
.wbcay__progress { height:6px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.10); }
.wbcay__progress span { display:block; height:100%; width:16.66%; border-radius:inherit; background:linear-gradient(90deg,var(--hot),var(--gold)); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.wbcay__fieldset { margin:0; padding:0; border:0; }
.wbcay__fieldset legend { width:100%; margin:0 0 26px; color:var(--ink); text-align:center; font-family:Georgia,'Times New Roman',serif; font-size:clamp(27px,4vw,42px); font-weight:700; line-height:1.15; outline:0; }
.wbcay__answers { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wbcay__answer { display:grid; grid-template-columns:40px 1fr 26px; gap:10px; align-items:center; min-height:82px; padding:15px 18px; border:1px solid rgba(255,255,255,.13); border-radius:18px; color:var(--ink); text-align:left; cursor:pointer; background:rgba(255,255,255,.055); box-shadow:inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(12px); transition:border-color .2s, transform .2s, background .2s; }
.wbcay__answer:hover, .wbcay__answer.is-selected { transform:translateY(-2px); border-color:rgba(255,202,103,.75); background:rgba(255,202,103,.11); }
.wbcay__answer-index { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--gold); background:rgba(255,202,103,.12); font-size:13px; font-weight:700; }
.wbcay__arrow { color:var(--gold); opacity:0; transform:translateX(-6px); transition:.2s; }
.wbcay__answer:hover .wbcay__arrow { opacity:1; transform:none; }
.wbcay__back { display:block; margin:22px auto 0; padding:8px; border:0; color:var(--muted); cursor:pointer; background:transparent; }
.wbcay__back:hover { color:#fff; }
.wbcay__enter { animation:wbcay-in .45s cubic-bezier(.2,.8,.2,1) both; }
.wbcay__enter--back { animation-name:wbcay-in-back; }
.wbcay__result-screen { display:grid; grid-template-columns:minmax(280px,.9fr) 1.1fr; gap:clamp(28px,5vw,60px); align-items:center; max-width:920px; margin:8px auto 0; outline:0; }
.wbcay__result-image-wrap { position:relative; aspect-ratio:1; }
.wbcay__result-image { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 26px 30px rgba(0,0,0,.35)); animation:wbcay-reveal .8s cubic-bezier(.2,.9,.2,1) both; }
.wbcay__result-glow { position:absolute; inset:12%; border-radius:50%; background:radial-gradient(circle,var(--gold),var(--hot) 38%,transparent 68%); filter:blur(28px); opacity:.28; animation:wbcay-pulse 3s ease-in-out infinite; }
.wbcay__reveal { margin:0 0 3px; color:var(--gold); text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:700; }
.wbcay h3 { margin:0; font-size:clamp(44px,6vw,72px); }
.wbcay__tagline { margin:8px 0 18px; color:#ffcf7a; font:italic 700 clamp(19px,2.5vw,26px) Georgia,'Times New Roman',serif; }
.wbcay__description { margin:0; color:#ded8cd; font-size:16px; }
.wbcay__traits { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px; }
.wbcay__traits span { padding:7px 12px; border:1px solid rgba(255,255,255,.15); border-radius:99px; color:#f1eadf; font-size:12px; text-transform:uppercase; letter-spacing:.08em; background:rgba(255,255,255,.06); }
.wbcay__actions { display:flex; flex-wrap:wrap; gap:10px; }
.wbcay__secondary { border:1px solid rgba(255,255,255,.22); color:var(--ink); background:transparent; }
.wbcay__secondary:hover { background:rgba(255,255,255,.08); }
.wbcay__status { min-height:24px; margin:9px 0 0; color:var(--gold); font-size:13px; }
@keyframes wbcay-in { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:none; } }
@keyframes wbcay-in-back { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:none; } }
@keyframes wbcay-reveal { from { opacity:0; transform:scale(.76) rotate(-3deg); } to { opacity:1; transform:none; } }
@keyframes wbcay-pulse { 50% { transform:scale(1.12); opacity:.38; } }
@keyframes wbcay-drift { to { transform:translate3d(8%,-5%,0) rotate(18deg); } }
@media (max-width:700px) {
  .wbcay { min-height:620px; margin:12px auto; border-radius:22px; }
  .wbcay__shell { min-height:620px; padding:30px 18px; }
  .wbcay__answers, .wbcay__result-screen { grid-template-columns:1fr; }
  .wbcay__answer { min-height:68px; }
  .wbcay__result-image-wrap { width:min(76vw,310px); margin:0 auto; }
  .wbcay__result-copy { text-align:center; }
  .wbcay__traits, .wbcay__actions { justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .wbcay *, .wbcay *::before, .wbcay *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}