:root { --blue:#0B132B; --purple:#4A0E4E; --green:#004D40; --teal:#00BFA5; --muted:rgba(255,255,255,.72); --border:rgba(255,255,255,.14); }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:#0d1117; color:#fff; line-height:1.6; min-height:100vh; }
.topbar { padding:1rem 16px; border-bottom:1px solid var(--border); background:var(--blue); }
.topbar a { color:var(--teal); text-decoration:none; font-weight:600; }
main { max-width:680px; margin:0 auto; padding:2rem 16px 2rem; }
.site-foot { max-width:680px; margin:0 auto; padding:1rem 16px 5rem; border-top:1px solid var(--border); color:var(--muted); font-size:.9rem; }
.site-foot a { color:var(--teal); }
.site-foot a:focus-visible, .site-foot button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.site-foot .btn-link { font:inherit; padding:0 4px; }
h1,h2 { font-family:'Playfair Display',serif; line-height:1.2; margin-bottom:1rem; }
h1 { font-size:clamp(1.8rem,6vw,2.6rem); }
h2 { font-size:clamp(1.6rem,5vw,2.2rem); color:var(--teal); }
h2.plain { font-family:'Inter',sans-serif; font-size:1.2rem; color:#fff; }
h3 { margin:1.5rem 0 .5rem; }
p { margin-bottom:1rem; color:var(--muted); }
.eyebrow { font-family:'Roboto Mono',monospace; font-size:.75rem; letter-spacing:3px; text-transform:uppercase; color:var(--teal); margin-bottom:.75rem; }
.progress { font-family:'Roboto Mono',monospace; font-size:.85rem; color:var(--teal); margin-bottom:.5rem; }
.bar { height:6px; background:var(--border); border-radius:3px; margin-bottom:1.5rem; overflow:hidden; }
.bar span { display:block; height:100%; background:var(--teal); }
fieldset.qset { border:0; margin-bottom:1rem; min-width:0; }
legend { font-family:'Playfair Display',serif; font-size:1.35rem; font-weight:700; margin-bottom:1rem; padding:0; color:#fff; }
legend:focus { outline:none; }
legend:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.opt { position:relative; margin-bottom:.6rem; }
.opt input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; inset:0; }
.opt label { display:block; padding:.9rem 1rem .9rem 3rem; min-height:48px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.04); color:#fff; position:relative; cursor:pointer; }
.opt label::before { content:''; position:absolute; left:1rem; top:50%; width:20px; height:20px; margin-top:-10px; border:2px solid var(--teal); border-radius:50%; }
.opt input:checked + label { border-color:var(--teal); background:rgba(0,191,165,.14); }
.opt input:checked + label::after { content:''; position:absolute; left:1.3rem; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--teal); }
.opt input:focus-visible + label { outline:3px solid #fff; outline-offset:2px; }
.error { color:#ffb4b4; background:rgba(255,80,80,.12); border:1px solid #ff8a8a; border-radius:8px; padding:.7rem 1rem; font-weight:600; }
.error[hidden] { display:none; }
.nav { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.nav2 { margin-top:1rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:50px; font:600 1.0625rem 'Inter',sans-serif; text-decoration:none; cursor:pointer; border:1px solid transparent; }
.btn:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.btn-primary { background:#00BFA5; color:#0B132B; border-color:#00BFA5; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(11,19,43,.24); }
.btn-primary:hover { background:#26d4ba; border-color:#26d4ba; }
.btn-ghost { background:transparent; color:#fff; border-color:var(--border); }
.btn-ghost:disabled { opacity:.4; cursor:not-allowed; }
.btn-link { background:none; color:var(--teal); text-decoration:underline; min-height:44px; padding:0 8px; }
.score { color:#fff; font-weight:600; }
.disclaimer { border-left:3px solid var(--teal); padding:.5rem 1rem; margin:1rem 0; background:rgba(255,255,255,.04); }
.disclaimer p { color:#fff; margin-bottom:.6rem; }
.steps { list-style:none; }
.steps li { padding:.7rem 0; border-bottom:1px solid var(--border); color:var(--muted); }
.steps a, .home a { color:var(--teal); font-weight:600; }
.steps a:focus-visible, .home a:focus-visible, .topbar a:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.home { margin-top:1.5rem; }
noscript p { color:#ffb4b4; }
[hidden] { display:none !important; }
@media (max-width:420px) { .nav .btn { flex:1 1 100%; } }
/* R15: directory, shared topbar links and post-result feedback */
.topbar .sep { color:var(--muted); margin:0 .5rem; }
main.wide { max-width:880px; }
.original-link { border:1px solid var(--teal); border-radius:10px; padding:1rem; background:rgba(0,191,165,.08); }
.original-link a { color:var(--teal); font-weight:700; font-size:1.1rem; }
.original-link span { font-size:.9rem; }
.quiz-cards { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:1.5rem 0; }
.qcard { position:relative; border:1px solid var(--border); border-radius:10px; padding:1.1rem 1.1rem .4rem; background:rgba(255,255,255,.04); }
.qcard:focus-within { outline:3px solid #fff; outline-offset:2px; }
.qcard h2 { font-size:1.25rem; margin-bottom:.5rem; }
.qcard h2 a { color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.qcard h2 a::after { content:''; position:absolute; inset:0; }
.qcard h2 a:focus { outline:none; }
.qmeta { font-family:'Roboto Mono',monospace; font-size:.8rem; }
.small { font-size:.85rem; }
.topbar a:focus-visible, .original-link a:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.feedback { padding-left:1.25rem; }
.feedback li { margin-bottom:1rem; color:var(--muted); }
.feedback .fb-q { color:#fff; font-weight:600; margin-bottom:.25rem; }
.feedback .fb-a { margin-bottom:.25rem; }