/* Four existing affinity tests. Their questions, scores and pacing stay native. */
html:root #app.pd-app { --pd-ink:var(--px-text,#f5f1e8); --pd-muted:var(--px-muted,#c8c4d2); --pd-accent:var(--px-accent,#d8bb79); --pd-line:var(--px-line,#c8a96b40); --pd-panel:var(--px-surface,#141827); --pd-soft:var(--px-soft,#c8a96b0c); --pd-heading:var(--px-heading,Georgia,serif); min-height:0; position:relative; color:var(--pd-ink); }
html:root #app.pd-app > .step { min-height:0; padding:40px 32px 48px; }
html:root #app.pd-app .container { max-width:1000px; width:100%; margin:0 auto; }
html:root #app.pd-app .pd-intro { display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:center; gap:48px; text-align:left; flex:initial; }
html:root #app.pd-app .pd-copy { display:flex; flex-direction:column; align-items:flex-start; gap:20px; min-width:0; }
html:root #app.pd-app :is(.intro-symbol,.elements-preview) { font-size:30px; margin:0; line-height:1.2; justify-content:flex-start; gap:20px; }
html:root #app.pd-app .el { font-size:26px; }
html:root #app.pd-app .hero-title { font:500 clamp(32px,3.5vw,46px)/1.15 var(--pd-heading)!important; color:var(--pd-ink)!important; background:none; -webkit-text-fill-color:currentColor; letter-spacing:-.015em; text-transform:none; margin:0; overflow-wrap:anywhere; }
html:root #app.pd-app .hero-sub { font:400 16px/1.75 Inter,system-ui,sans-serif; font-style:normal; color:var(--pd-muted); margin:0; max-width:58ch; }
html:root #app.pd-app :is(.archetypes-preview,.mythologies-strip) { gap:8px 14px; justify-content:flex-start; margin:0; color:var(--pd-muted); font:400 13px/1.6 Inter,system-ui,sans-serif; flex-wrap:wrap; }
html:root #app.pd-app .archetypes-preview span { color:var(--pd-muted); background:var(--pd-soft); border-color:var(--pd-line); padding:5px 10px; opacity:1; }
html:root #app.pd-app .mythologies-strip { opacity:1; }
html:root #app.pd-app .pd-art { margin:0; width:100%; aspect-ratio:1; overflow:hidden; border:1px solid var(--pd-line); border-radius:140px 140px var(--px-radius,12px) var(--px-radius,12px); grid-column:2; grid-row:1; }
html:root #app.pd-app .pd-art img { display:block; width:100%; height:100%; object-fit:cover; }
html:root #app.pd-app :is(.btn-primary,.btn-reset) { font:600 15px/1.5 Inter,system-ui,sans-serif; letter-spacing:0; text-transform:none; padding:14px 26px; margin:4px 0 0; min-height:50px; max-width:100%; white-space:normal; }
html:root #app.pd-app .btn-reset { color:var(--pd-accent); border-color:var(--pd-line); border-radius:var(--px-radius,12px); background:var(--pd-soft); }
html:root #app.pd-app .btn-reset:hover { background:var(--pd-panel); }
html:root #app.pd-app #step-questions .container { max-width:900px; padding:28px; border:1px solid var(--pd-line); border-radius:var(--px-radius,12px); background:var(--pd-panel); }
html:root #app.pd-app .progress-bar-wrap { height:4px; background:var(--pd-soft); margin-bottom:12px; }
html:root #app.pd-app .progress-bar { background:var(--pd-accent); box-shadow:none; }
html:root #app.pd-app .progress-label { color:var(--pd-muted); font:400 13px/1.6 Inter,system-ui,sans-serif; letter-spacing:0; text-transform:none; margin:0 0 24px; }
html:root #app.pd-app .question-num { color:var(--pd-accent); font:500 28px/1.2 var(--pd-heading); margin:0 0 12px; }
html:root #app.pd-app .question-text { color:var(--pd-ink); font:500 clamp(25px,2.6vw,32px)/1.3 var(--pd-heading); margin:0 0 24px; letter-spacing:0; text-align:left; overflow-wrap:anywhere; }
html:root #app.pd-app .options-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
html:root #app.pd-app .opt-btn { align-items:center; gap:14px; padding:18px; min-height:76px; min-width:0; color:var(--pd-ink); background:var(--pd-soft); border-color:var(--pd-line); border-radius:var(--px-radius,12px); }
html:root #app.pd-app .opt-btn:hover { background:color-mix(in srgb,var(--pd-accent) 9%,var(--pd-panel)); }
html:root #app.pd-app .opt-btn.selected { background:color-mix(in srgb,var(--pd-accent) 14%,var(--pd-panel)); }
html:root #app.pd-app .opt-text { color:var(--pd-ink); font:400 16px/1.65 Inter,system-ui,sans-serif; min-width:0; overflow-wrap:anywhere; }
html:root #app.pd-app .opt-letter { color:var(--pd-accent); background:var(--pd-panel); border:1px solid var(--pd-line); border-radius:50%; flex-shrink:0; width:30px; height:30px; display:grid; place-items:center; font:500 15px/1 Inter,system-ui,sans-serif; }
html:root #app.pd-app #step-loading { padding-block:56px; }
html:root #app.pd-app #step-loading .container { gap:24px; }
html:root #app.pd-app .loading-title { font:500 28px/1.3 var(--pd-heading); color:var(--pd-ink); }
html:root #app.pd-app .loading-sub { font:400 15px/1.7 Inter,system-ui,sans-serif; color:var(--pd-muted); }
html:root #app.pd-app #step-result .container { max-width:900px; }
html:root #app.pd-app .result-header { display:grid; grid-template-columns:auto minmax(0,1fr) 100px; gap:20px; align-items:center; text-align:left; margin:0 0 24px; }
html:root #app.pd-app .result-symbol { font-size:34px; margin:0; }
html:root #app.pd-app .result-title { font:500 clamp(28px,3vw,38px)/1.2 var(--pd-heading)!important; color:var(--pd-ink)!important; background:none; -webkit-text-fill-color:currentColor; letter-spacing:0; overflow-wrap:anywhere; }
html:root #app.pd-app .pd-result-art { margin:0; width:100px; aspect-ratio:1.25; border:1px solid var(--pd-line); border-radius:40px 40px var(--px-radius,12px) var(--px-radius,12px); overflow:hidden; }
html:root #app.pd-app .pd-result-art img { display:block; width:100%; height:100%; object-fit:cover; }
html:root #app.pd-app .result-card { padding:32px; margin-bottom:24px; box-shadow:none; }
html:root #app.pd-app .result-text { max-width:74ch; margin:auto; }
html:root #app.pd-app .result-text p { color:var(--pd-ink); font:400 17px/1.9 Inter,system-ui,sans-serif; margin:0 0 22px; }
html:root #app.pd-app .result-text p:last-child { margin-bottom:0; }
html:root #app.pd-app .result-actions { justify-content:flex-start; }
@media(max-width:760px){
 html:root #app.pd-app > .step { padding:28px 20px 32px; }
 html:root #app.pd-app .pd-intro { grid-template-columns:minmax(0,1fr) 180px; gap:28px; }
 html:root #app.pd-app .options-grid { grid-template-columns:minmax(0,1fr); }
 html:root #app.pd-app #step-questions .container { padding:24px; }
 html:root #app.pd-app .result-card { padding:24px; }
}
@media(max-width:520px){
 html:root #app.pd-app > .step { padding:26px 16px 30px; }
 html:root #app.pd-app .pd-intro { grid-template-columns:minmax(0,1fr) 90px; gap:18px; }
 html:root #app.pd-app .pd-copy { display:contents; }
 html:root #app.pd-app .pd-copy > * { grid-column:1/-1; }
 html:root #app.pd-app .pd-copy > :is(.intro-symbol,.elements-preview) { grid-column:1; grid-row:1; }
 html:root #app.pd-app .hero-title { grid-column:1; grid-row:2; font-size:28px!important; }
 html:root #app.pd-app .pd-art { grid-column:2; grid-row:1/3; align-self:center; aspect-ratio:.8; }
 html:root #app.pd-app .elements-preview { gap:12px; }
 html:root #app.pd-app .el { font-size:22px; }
 html:root #app.pd-app .btn-primary { width:100%; }
 html:root #app.pd-app #step-questions .container { padding:20px 16px; }
 html:root #app.pd-app .opt-btn { padding:16px 12px; }
 html:root #app.pd-app .result-header { grid-template-columns:auto minmax(0,1fr) 64px; gap:12px; }
 html:root #app.pd-app .pd-result-art { width:64px; }
 html:root #app.pd-app .result-symbol { font-size:26px; }
 html:root #app.pd-app .result-title { font-size:26px!important; }
 html:root #app.pd-app .result-card { padding:22px 18px; }
}