:root{--black:#090806;--gold:#d7a72a;--gold2:#f3d57b;--cream:#f4efe3;--line:rgba(215,167,42,.28);--max:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--cream);font-family:Arial,Helvetica,sans-serif;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select{font:inherit}
[hidden]{display:none!important}
.wrap{width:min(calc(100% - 36px),var(--max));margin:auto}
.skip{position:absolute;left:-999px;top:10px;background:#fff;color:#000;padding:10px;z-index:99}
.skip:focus{left:10px}
.eyebrow{color:var(--gold2);font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
header{position:sticky;top:0;z-index:50;background:rgba(9,8,6,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:Georgia,serif;font-weight:700;letter-spacing:.04em}
.brand img{width:55px;height:55px;border-radius:50%}
.navlinks{display:flex;align-items:center;gap:24px}
.navlinks a{text-decoration:none;font-size:.92rem;font-weight:700}
.navlinks a:hover,.navlinks a:focus,.navlinks a.active{color:var(--gold2)}
.menu{display:none;border:1px solid var(--line);background:transparent;color:#fff;font-size:1.5rem;border-radius:5px;padding:4px 11px}
.quiz-hero{padding:80px 0;background:radial-gradient(circle at 80% 42%,rgba(180,121,15,.26),transparent 28%),linear-gradient(115deg,#050504,#171006 58%,#070605);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:65px}
.quiz-hero h1{font-family:Georgia,serif;font-size:clamp(3rem,7vw,6rem);line-height:.95;margin:12px 0 24px;letter-spacing:-.04em}
.quiz-hero p{max-width:760px;color:#d6cebf;font-size:1.15rem}
.hero-mark{justify-self:end;width:min(100%,280px);aspect-ratio:1;border:1px solid var(--gold);border-radius:50%;display:grid;place-content:center;text-align:center;background:rgba(0,0,0,.3)}
.hero-mark strong{font-family:Georgia,serif;color:var(--gold2);font-size:8rem;line-height:.8}
.hero-mark span{color:#d7ccb5;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:900;margin-top:20px}
.quiz-section{padding:80px 0}
.quiz-layout{display:grid;grid-template-columns:.38fr .62fr;gap:28px;align-items:start}
.quiz-setup,.quiz-panel{border:1px solid var(--line);background:#100e0a;padding:30px}
.quiz-setup{position:sticky;top:105px}
.quiz-setup h2,.quiz-panel h2,.quiz-about h2{font-family:Georgia,serif;line-height:1.1}
.quiz-setup h2{font-size:2rem;margin:8px 0 25px}
.quiz-setup label{display:block;color:#e5dccb;font-weight:800;font-size:.82rem;margin:17px 0 7px}
.quiz-setup select{width:100%;min-height:50px;border:1px solid #80641f;background:#050504;color:#fff;padding:10px}
.button{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f0ca67,#ae7813);color:#100c05;text-decoration:none;padding:13px 20px;border-radius:4px;font-weight:900;border:1px solid #f5db87;cursor:pointer}
.button.alt{background:transparent;color:var(--gold2);border-color:var(--gold)}
.quiz-setup .button{width:100%;margin-top:25px}
.setup-note{color:#aaa18f;font-size:.84rem;margin:18px 0 0}
.quiz-panel{min-height:480px}
.loading{display:grid;place-items:center;min-height:400px;color:var(--gold2)}
#quiz-welcome,#quiz-complete,#quiz-error{padding:40px 15px}
#quiz-welcome h2,#quiz-complete h2,#quiz-error h2{font-size:clamp(2rem,4vw,3.3rem);margin:8px 0 16px}
.welcome-facts{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.welcome-facts span{border:1px solid var(--line);padding:15px 18px;color:#cfc4b1}
.welcome-facts strong{color:var(--gold2);font-family:Georgia,serif;font-size:1.3rem;margin-right:5px}
.progress-row{display:flex;justify-content:space-between;gap:15px;color:#d7ccba;font-weight:800;font-size:.84rem}
.progress-track{height:6px;background:#2b251b;margin:12px 0 32px}
.progress-track span{display:block;width:10%;height:100%;background:linear-gradient(90deg,#ae7813,#f3d57b);transition:width .25s}
fieldset{border:0;padding:0;margin:0}
legend{font-family:Georgia,serif;font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.25;font-weight:700;margin-bottom:25px}
.answer-options{display:grid;gap:12px}
.answer-option{position:relative}
.answer-option input{position:absolute;opacity:0;pointer-events:none}
.answer-option label{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--line);padding:16px 18px;color:#e0d7c8;background:#0a0907;cursor:pointer}
.answer-option label:before{content:attr(data-letter);display:grid;place-items:center;flex:0 0 34px;height:34px;border:1px solid var(--gold);color:var(--gold2);font-weight:900}
.answer-option label:hover,.answer-option input:focus+label{border-color:var(--gold2)}
.answer-option input:checked+label{border-color:var(--gold);background:#2a1d07;color:#fff}
.answer-option input:checked+label:before{background:var(--gold);color:#090806}
.quiz-controls{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
.quiz-controls button:disabled{opacity:.35;cursor:not-allowed}
.complete-mark{width:70px;height:70px;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;color:var(--gold2);font-size:2.3rem;margin-bottom:25px}
.complete-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.error{color:#f1c8c8}
.quiz-about{padding:75px 0;background:#f2eee4;color:#18140d}
.quiz-about .eyebrow{color:#8e630d}
.quiz-about h2{font-size:clamp(2rem,4.5vw,3.8rem);max-width:850px;margin:8px 0 20px}
.quiz-about p{max-width:820px;color:#5d5648;font-size:1.06rem}
.text-link{color:#7a5207;font-weight:900}
footer{padding:45px 0;background:#050504;color:#aaa18f}
.foot{display:grid;grid-template-columns:1.1fr .9fr;gap:30px}
.foot strong,.foot a{color:#e6c45f}
.social{display:flex;gap:18px;justify-content:flex-end;flex-wrap:wrap}
.social a{text-decoration:none;font-weight:800}
.legal{font-size:.82rem;border-top:1px solid var(--line);margin-top:30px;padding-top:20px}
@media(max-width:920px){.menu{display:block}
.navlinks{display:none;position:absolute;top:78px;left:0;right:0;padding:20px;background:#0b0a08;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}
.navlinks.open{display:flex}
.hero-grid,.quiz-layout{grid-template-columns:1fr}
.hero-mark{justify-self:start;width:190px}
.quiz-setup{position:static}
.foot{grid-template-columns:1fr}
.social{justify-content:flex-start}
}
@media(max-width:600px){.wrap{width:min(calc(100% - 26px),var(--max))}
.brand span{font-size:.84rem}
.brand img{width:48px;height:48px}
.quiz-hero{padding:55px 0}
.hero-mark{width:145px}
.hero-mark strong{font-size:5rem}
.quiz-section{padding:55px 0}
.quiz-setup,.quiz-panel{padding:22px}
.quiz-panel{min-height:420px}
.progress-row,.quiz-controls{align-items:stretch;flex-direction:column}
.quiz-controls .button,.complete-actions .button{width:100%}
.answer-option label{padding:14px}
.complete-actions{flex-direction:column}
}

/* Step 12: scored results, explanations, retakes, and profile connections */
.result-summary{display:flex;align-items:center;gap:22px;border:1px solid var(--line);background:#090806;padding:20px;margin-top:20px}
.result-summary>strong{font-family:Georgia,serif;color:var(--gold2);font-size:clamp(2.5rem,6vw,4.5rem);line-height:1}
.result-summary p{margin:0;color:#d8cebc}
.result-review{margin-top:50px;padding-top:35px;border-top:1px solid var(--line)}
.result-review>h2{font-size:clamp(1.8rem,4vw,2.7rem);margin:8px 0 22px}
.review-item{border:1px solid var(--line);background:#090806;padding:22px;margin-top:16px}
.review-item.correct{border-left:5px solid #67b878}
.review-item.incorrect{border-left:5px solid #c96868}
.review-item h3{font-family:Georgia,serif;font-size:1.2rem;line-height:1.35;margin:0 0 13px}
.review-item p{margin:8px 0;color:#d6cdbc}
.review-item .review-status{font-weight:900}
.review-item.correct .review-status{color:#91d49e}
.review-item.incorrect .review-status{color:#ec9999}
.review-explanation{padding-top:12px;border-top:1px solid var(--line)}
.profile-link{display:inline-block;color:var(--gold2);font-weight:900;margin-top:9px}
.workbook-link{margin-left:14px}
@media(max-width:600px){
  .result-summary{align-items:stretch;flex-direction:column}
  .complete-actions .button.alt{width:100%}
  .review-item{padding:17px}
  .result-summary>strong{font-size:3.2rem}
}