/* Skin for the embedded career quiz (quiz.css is the platform stylesheet; site.css loads after it). */
:root{--accent:oklch(42% 0.09 215);--accent-soft:oklch(93% 0.03 205);--bg:var(--paper);--panel:oklch(99% 0.004 240);--line:oklch(88% 0.015 245);--ink:oklch(18% 0.03 260)}
.qhero{padding:clamp(36px,6vw,80px) 0 clamp(24px,4vw,48px);max-width:60ch}.qhero .sub{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);margin:20px 0 28px}.qhero .ctas{display:flex;gap:12px;flex-wrap:wrap}
#hero.hidden{display:none}
#quiz.live{background:var(--panel);border-radius:var(--r);margin-top:24px}
#quiz h2,#quiz h3{font-family:var(--serif)}
[data-theme="dark"]{--accent:var(--petrol);--accent-soft:oklch(26% 0.05 205);--bg:var(--paper);--panel:oklch(19% 0.025 262);--line:oklch(30% 0.03 258);--ink:oklch(95% 0.008 230);--mute:oklch(70% 0.02 245)}
[data-theme="dark"] #quiz .choice{background:oklch(22% 0.025 260);color:var(--ink);border-color:var(--line)}[data-theme="dark"] #quiz .choice:hover{border-color:var(--petrol)}
[data-theme="dark"] #quiz .n,[data-theme="dark"] #quiz .choice .k{background:oklch(28% 0.03 258);color:var(--ink)}

/* Keep results in the shared palette and never gate them on an entrance effect. */
#quiz [style*="--c:"]{--c:var(--accent)!important}
#quiz .reveal{animation:none;opacity:1;transform:none}
[data-theme="dark"] #quiz .reveal .rolel,[data-theme="dark"] #quiz .res .why,[data-theme="dark"] #quiz .result .whyp.close{color:var(--ink-2)}
[data-theme="dark"] #quiz .mono{color:var(--paper)}