:root{
  --ink:#10263a; --ink2:#173c52; --gold:#c99b43; --gold2:#e9c875;
  --paper:#f1e5c9; --paper2:#dfcfab; --teal:#2e7e7d; --rust:#9b5338;
  --green:#3d7b60; --red:#9c403c; --shadow:rgba(24,31,35,.25);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);background:
  radial-gradient(circle at 15% 0%,rgba(233,200,117,.22),transparent 28%),
  linear-gradient(135deg,#0d1e2d,#17384b 55%,#0d2530);font-family:Georgia,'Times New Roman',serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.1;background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,#fff 4px)}
.shell{width:min(1040px,92vw);margin:16px auto 28px;position:relative;z-index:2}
.card{background:linear-gradient(145deg,var(--paper),#f8edcf 45%,var(--paper2));border:3px solid var(--gold);box-shadow:0 12px 30px var(--shadow),inset 0 0 0 2px rgba(16,38,58,.18);border-radius:18px;position:relative}
.card:after{content:"";position:absolute;inset:7px;border:1px solid rgba(16,38,58,.2);border-radius:11px;pointer-events:none}
.hero{display:grid;grid-template-columns:1fr 240px;gap:16px;padding:24px 28px;overflow:hidden}
.eyebrow{font:700 13px/1.2 Arial,sans-serif;letter-spacing:.18em;color:var(--rust)}
h1{font-size:clamp(34px,5.5vw,62px);line-height:.86;margin:10px 0 14px;letter-spacing:-.05em;color:var(--ink)}
h1 span{color:var(--teal);text-shadow:2px 2px 0 var(--gold2)}
.tagline{font-size:19px;margin:0 0 18px;font-weight:700}
.badges{display:flex;gap:8px;flex-wrap:wrap}.badges span,.pill{font:700 12px Arial,sans-serif;letter-spacing:.07em;background:var(--ink);color:#fff;border:2px solid var(--gold);padding:7px 9px;border-radius:999px}
.mascot{min-height:160px;display:flex;align-items:center;justify-content:center;position:relative}.llama{font-size:100px;filter:drop-shadow(4px 6px 0 rgba(16,38,58,.18));transform:scaleX(-1)}.shades{position:absolute;font-size:40px;top:41px;left:92px}.sunburst{position:absolute;width:150px;height:150px;border-radius:50%;background:repeating-conic-gradient(var(--gold2) 0 8deg,transparent 8deg 16deg);opacity:.55}.mascot-ribbon{position:absolute;right:-38px;bottom:14px;transform:rotate(-8deg);background:var(--rust);color:#fff;border:3px solid var(--gold2);padding:9px 40px;font:900 13px Arial,sans-serif;letter-spacing:.1em;text-align:center}
.setup-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin-top:14px}.panel{padding:22px 24px}.full-width{grid-column:1/-1}.panel h2,.results h2{margin:0 0 15px;font-size:25px}.panel label{display:block;font:700 15px Arial,sans-serif;margin:14px 0}.panel select{width:100%;margin-top:7px;padding:12px 13px;border:2px solid var(--ink2);border-radius:10px;background:#fff8e7;color:var(--ink);font:700 15px Arial,sans-serif}.toggle-row{display:flex!important;align-items:center;gap:9px}.toggle-row input{width:18px;height:18px}.primary,.secondary{border-radius:10px;padding:13px 16px;font:900 14px Arial,sans-serif;letter-spacing:.08em;cursor:pointer;transition:.15s transform,.15s filter}.primary{border:2px solid #0a1b28;background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--gold)}.secondary{border:2px solid var(--ink);background:transparent;color:var(--ink)}button:hover{transform:translateY(-1px);filter:brightness(1.07)}button:active{transform:translateY(1px)}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat-grid div{background:rgba(255,255,255,.42);border:2px solid rgba(16,38,58,.18);padding:16px;border-radius:12px;text-align:center}.stat-grid strong{display:block;font:900 29px Arial,sans-serif;color:var(--teal)}.stat-grid span{font:700 12px Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em}.small{font:13px/1.5 Arial,sans-serif;opacity:.75}.chips{display:flex;flex-wrap:wrap;gap:9px}.chip{padding:8px 10px;border:1px solid var(--ink2);border-radius:8px;background:rgba(255,255,255,.45);font:700 13px Arial,sans-serif}.chip b{color:var(--teal)}
.quiz-layout{display:grid;grid-template-columns:220px 1fr;gap:14px;margin-top:14px}.side-console{padding:20px;align-self:start;position:sticky;top:16px}.avatar-seal{display:none}.side-console h3{text-align:center;font:900 14px Arial,sans-serif;letter-spacing:.12em}.meter-label,.side-stat{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:13px;font:700 14px Arial,sans-serif}.meter{height:10px;background:#cdbd9c;border:1px solid var(--ink);border-radius:999px;overflow:hidden;margin-top:6px}.meter>div{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .25s}.side-stat{padding-top:10px;border-top:1px solid rgba(16,38,58,.25)}.side-console .secondary{width:100%;margin-top:20px}
.question-card{padding:24px 28px;min-height:500px}.question-topline{display:flex;justify-content:space-between;align-items:center;font:700 13px Arial,sans-serif;color:var(--rust)}.question-card h2{font-size:clamp(24px,2.7vw,31px);line-height:1.2;margin:18px 0 24px}.answers{display:grid;gap:12px}.answer{width:100%;text-align:left;padding:15px 16px;border:2px solid var(--ink2);border-radius:12px;background:#fff9e9;color:var(--ink);font:700 17px/1.4 Arial,sans-serif;cursor:pointer;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}.answer .key{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:13px}.answer:hover{background:#fff2c9}.answer.correct{border-color:var(--green);background:#e4f0df}.answer.wrong{border-color:var(--red);background:#f2dcd2}.answer.dim{opacity:.68}.answer:disabled{cursor:default}.feedback{margin-top:20px;border-top:2px dashed rgba(16,38,58,.25);padding-top:18px}.feedback-title{display:flex;gap:10px;align-items:center;font:900 18px Arial,sans-serif}.feedback-title span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff}.feedback p{font:16px/1.55 Arial,sans-serif}.correct-note{background:rgba(46,126,125,.1);border-left:4px solid var(--teal);padding:10px 12px}.keyboard-hint{margin-top:18px;font:12px Arial,sans-serif;opacity:.62}kbd{border:1px solid #876;background:#fff7df;border-radius:4px;padding:2px 5px}
.results{margin-top:18px;padding:36px;text-align:center}.ribbon{display:inline-block;background:var(--rust);color:#fff;border:2px solid var(--gold2);padding:7px 14px;font:900 11px Arial,sans-serif;letter-spacing:.15em}.final-score{font:900 clamp(60px,10vw,110px) Arial,sans-serif;color:var(--teal);text-shadow:3px 3px 0 var(--gold2);margin:8px}.results p{font:16px/1.5 Arial,sans-serif}.weak-areas{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px 0}.weak-areas span{background:rgba(156,64,60,.12);border:1px solid var(--rust);padding:7px 9px;border-radius:8px;font:700 12px Arial,sans-serif}.result-actions{display:flex;gap:12px;justify-content:center}
footer{display:flex;justify-content:space-between;color:#e9d8ad;font:700 11px Arial,sans-serif;letter-spacing:.12em;padding:18px 4px}.hidden{display:none!important}.gear{position:fixed;color:rgba(233,200,117,.12);font-size:180px;z-index:0;animation:turn 40s linear infinite}.gear-a{left:-50px;bottom:-50px}.gear-b{right:-45px;top:20%;font-size:130px;animation-direction:reverse}@keyframes turn{to{transform:rotate(360deg)}}
@media(max-width:800px){.hero{grid-template-columns:1fr}.mascot{display:none}.setup-grid,.quiz-layout{grid-template-columns:1fr}.side-console{position:relative;top:auto;display:block}.side-console h3{text-align:left}.question-card{padding:22px 18px}.hero{padding:22px 20px}footer{flex-direction:column;gap:8px;text-align:center}}