html,body{min-height:100%}
body{
  margin:0;color:#fff;min-height:100vh;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.25) 100%),
    url('../img/pendle-hill.jpg') center 10%/cover no-repeat fixed,#0b0b0b;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.noscript{background:#ffc9c9;color:#111;padding:.75rem;text-align:center}
.hdr{position:sticky;top:0;z-index:10;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.12)}
.hdr-inner{max-width:1100px;margin:0 auto;padding:.6rem .9rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.back{appearance:none;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.55);color:#fff;border-radius:10px;padding:.45rem .75rem;font-weight:800;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
.brand{font-weight:800;color:#fff}
.wrap{max-width:1100px;margin:0 auto;padding:1rem 1rem 2rem}
h1{color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.5);margin:.6rem 0 .2rem;font-size:clamp(26px,4vw,44px)}
.card{background:#fff;color:#111;border:1px solid rgba(0,0,0,.15);border-radius:14px;padding:1rem;box-shadow:0 6px 16px rgba(0,0,0,.08);margin:.8rem 0}
.controls{display:flex;gap:.6rem;flex-wrap:wrap;margin:.75rem 0}
.controls.space-between{justify-content:space-between}
.btn{background:#111;color:#fff;border:0;border-radius:10px;padding:.55rem .85rem;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.btn.secondary{background:#fff;color:#111;border:1px solid rgba(0,0,0,.2)}
.pill{display:inline-block;background:#fff3b0;border:1px solid rgba(0,0,0,.16);border-radius:999px;padding:.25rem .55rem;margin-left:.3rem}
.pill.strong{font-weight:800}
.muted{color:#555}
.options{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.opt{border:1px solid rgba(0,0,0,.15);border-radius:10px;padding:.6rem .7rem;background:#fff;display:flex;gap:.6rem;align-items:flex-start}
.opt.correct{border-color:#0c7a43;background:#f0fff6}
.opt.incorrect{border-color:#b00020;background:#fff0f0}
.text{margin-top:.3rem;width:100%;max-width:420px;padding:.55rem .7rem;border-radius:8px;border:1px solid rgba(0,0,0,.25)}
.progress{height:8px;background:#eee;border-radius:999px;overflow:hidden;flex:1;margin-left:.6rem}
.bar{height:100%;width:0;background:#ffd60a}
.qtext{margin:.2rem 0 .6rem}
.review{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem}
.pre{background:#f7f7f7;border:1px solid rgba(0,0,0,.15);border-radius:8px;padding:.6rem;white-space:pre-wrap;word-wrap:break-word;margin-top:.5rem}