.stage{width:min(100%,calc(100dvh * 9 / 16));--glow:209,46,70}.host{transition:opacity .24s}.caption{font-size:clamp(19px,4.8vw,25px)}.choice-panel{width:100%;padding:22px 18px 18px;border-radius:24px;background:rgba(0,0,0,.75);backdrop-filter:blur(10px)}.poles{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.poles p{margin:0;color:#fff;font-size:17px;line-height:1.55;font-weight:700;word-break:keep-all}.poles p:last-child{text-align:right}.opts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.choice{display:grid;place-items:center;aspect-ratio:1;padding:0;border:1px solid #ddc4c7;border-radius:50%;background:#201b1c;font-size:18px;min-height:44px;text-shadow:none}.choice:first-child,.choice:last-child{background:#4d2630}.choice.picked{background:#c5354d;border-color:#ffcad3}.scale-labels{display:flex;justify-content:space-between;gap:8px;margin-top:14px;font-size:12px;color:#eee4e5}.layer{padding-bottom:calc(36px + env(safe-area-inset-bottom));padding-left:16px;padding-right:16px}.gate button{background:#cb354c;border-radius:16px;width:100%;max-width:340px;text-shadow:none}.gate{padding-bottom:calc(36px + env(safe-area-inset-bottom))}.result{padding:32px 24px calc(36px + env(safe-area-inset-bottom))}.result h1{font-size:28px}.result h2{color:#ffc0cb}.result a,.result button{display:inline-block;margin:16px 10px 12px 0;padding:12px 18px;background:#48222b;border:0;border-radius:12px;font:inherit}.result ol{padding-left:20px}.result li{margin-bottom:22px;line-height:1.7}.result li small{display:block;color:#cac2b5}.result .selection{color:#ffc0cb}.progress{max-width:70%;text-align:right}@media(max-width:650px){.stage{width:100%}}@media(prefers-reduced-motion:reduce){.host{transition:none}}
.choice-panel{background:none;backdrop-filter:none}
.choice{background:#8d6070;border-color:#b98a9b;color:#fff9fb}
.choice:first-child,.choice:last-child{background:#713b4b;border-color:#a97487}
.choice:nth-child(3){background:#f0e4e7;border-color:#e2cbd3;color:#65434f}
.choice.picked{background:#b63853;border-color:#ffd1dd;color:#fff9fb}
@property --choice-ring-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.choice:after{inset:-5px;width:auto;height:auto;padding:2px;border-radius:50%;background:conic-gradient(#ffd1dd var(--choice-ring-angle),transparent 0);transform:none;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;transition:none;pointer-events:none}
.choice:hover:after,.choice:focus-visible:after,.choice.picked:after{width:auto}
.choice.picked:after{animation:choice-ring .24s ease-out both}
@keyframes choice-ring{to{--choice-ring-angle:360deg}}
@media(prefers-reduced-motion:reduce){.choice.picked:after{animation:none;--choice-ring-angle:360deg}}