@font-face {
  font-family:Inter;
  src:url('../assets/fonts/InterVariable.woff2') format('woff2');
  font-display:swap}

:root {
  color-scheme:dark;
  --bg:#0d0e0f;
  --panel:#17191a;
  --line:#333638;
  --fg:#f2f2f0;
  --muted:#b5b7b6;
  --accent:#c2f65c;
  --bad:#ffabab}

* {
  box-sizing:border-box}
[hidden] {
  display:none!important}
html {
  scroll-padding-top:95px}
body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.7 Inter,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif}
a {
  color:inherit;
  text-decoration:none}
button,input {
  font:inherit}
button,a,input {
  touch-action:manipulation}
button {
  cursor:pointer;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--fg);
  padding:9px 17px}
button:hover {
  border-color:var(--accent)}
button:disabled {
  opacity:.45;
  cursor:default}
a:hover {
  color:var(--accent)}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px}
h1,h2,h3,p {
  margin:0}
h1 {
  font-size:clamp(32px,5vw,56px);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1.3}
h2 {
  font-size:24px;
  line-height:1.4}
h3 {
  font-size:18px}
main,.site-head,footer {
  width:min(880px,calc(100% - 48px));
  margin:auto}
.site-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 0;
  border-bottom:1px solid var(--line)}
.site-head>a:last-child {
  font-size:13px;
  min-height:44px;
  display:flex;
  align-items:center;
  color:var(--muted)}
.brand {
  font-size:28px;
  font-weight:650;
  letter-spacing:-2px}
.brand span,h1 span {
  color:var(--accent)}
.intro {
  padding:54px 0 30px}
.eyebrow {
  font-size:11px;
  letter-spacing:3px;
  color:var(--accent);
  margin-bottom:17px}
.subtitle {
  color:var(--muted);
  margin-top:18px}
.facts {
  display:flex;
  gap:22px;
  margin-top:20px;
  font-size:12px;
  color:var(--muted)}
.tabs {
  display:flex;
  gap:26px;
  border-bottom:1px solid var(--line);
  margin-bottom:28px}
.tabs button {
  border:0;
  border-radius:0;
  padding:12px 0;
  color:var(--muted);
  border-bottom:2px solid transparent}
.tabs button[aria-current] {
  color:var(--accent);
  border-color:var(--accent)}
.notice {
  padding:14px 17px;
  background:#292617;
  border:1px solid #706436;
  border-radius:8px;
  color:#f1e5b9;
  margin:16px 0;
  font-size:14px}
.muted,.privacy {
  color:var(--muted);
  font-size:13px}
.privacy {
  margin:36px 0}
.toolbar {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin:20px 0}
.primary {
  background:var(--accent);
  color:#13170b;
  border-color:var(--accent);
  font-weight:600}
.progress-bar {
  position:sticky;
  top:0;
  z-index:3;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:12px 0;
  display:flex;
  gap:16px;
  align-items:center}
.progress-bar p {
  font-size:13px;
  white-space:nowrap}
.progress-bar progress {
  flex:1;
  min-width:35px;
  height:5px;
  accent-color:var(--accent)}
.progress-bar button {
  padding:4px 12px;
  font-size:13px}
.question {
  border:0;
  border-bottom:1px solid var(--line);
  margin:0;
  padding:28px 0;
  min-width:0;
  scroll-margin-top:15px}
.question legend {
  float:left;
  width:100%;
  font-size:17px;
  font-weight:500;
  line-height:1.7;
  margin-bottom:16px}
.question legend+.options {
  clear:both}
.q-meta {
  display:block;
  font-size:11px;
  font-weight:400;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:6px}
.q-meta b {
  color:var(--accent);
  font-weight:500}
.options {
  display:grid;
  gap:9px}
.option {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:9px;
  cursor:pointer;
  background:var(--panel);
  line-height:1.55;
  min-height:50px}
.option:hover {
  border-color:#6d7957}
.option:has(input:checked) {
  border-color:var(--accent);
  background:#202817}
.option input {
  margin:5px 0 0;
  accent-color:var(--accent);
  width:17px;
  height:17px;
  flex-shrink:0}
.letter {
  color:var(--muted);
  font-size:13px;
  line-height:25px;
  width:15px;
  flex-shrink:0}
.answer-box {
  font-size:14px;
  margin-top:16px;
  padding:16px;
  background:var(--panel);
  border-radius:8px}
.correct {
  color:var(--accent)}
.incorrect {
  color:var(--bad)}
.answer-box p+p {
  margin-top:7px}
.reference-note {
  color:#e5cc87;
  font-size:13px}
.submit-area {
  padding:30px 0;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center}
.result-head {
  background:var(--panel);
  padding:26px;
  border:1px solid var(--line);
  border-radius:12px;
  margin:18px 0}
.score {
  font-size:64px;
  letter-spacing:-4px;
  line-height:1.2;
  color:var(--accent)}
.score small {
  font-size:20px;
  color:var(--muted);
  letter-spacing:0}
.result-head h2 {
  font-size:16px;
  margin-bottom:16px}
.stats {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted);
  margin-top:14px}
.history-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:22px 0;
  border-bottom:1px solid var(--line)}
.history-item h3 {
  font-size:15px}
.history-item strong {
  font-size:22px;
  color:var(--accent)}
.empty {
  padding:46px 0}
.empty p {
  margin:12px 0 22px;
  color:var(--muted)}
.notes details {
  border-bottom:1px solid var(--line);
  padding:18px 0}
.notes summary {
  cursor:pointer;
  min-height:44px;
  font-size:18px}
.notes p,.notes ul {
  color:var(--muted);
  font-size:15px}
.notes li {
  margin:9px 0}
.notes h2 {
  margin:26px 0 15px}
footer {
  padding:25px 0 40px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted)}
.skip {
  position:absolute;
  top:-80px;
  left:20px;
  background:var(--accent);
  color:#111;
  padding:10px;
  z-index:9}
.skip:focus {
  top:10px}
#workspace:focus {
  outline:none}
.review-filter[aria-pressed=true] {
  border-color:var(--accent);
  color:var(--accent)}

@media(min-width:700px) {
  .options {
  grid-template-columns:1fr 1fr}
.question legend {
  font-size:18px}
}
@media(max-width:420px) {
  main,.site-head,footer {
  width:calc(100% - 32px)}
.intro {
  padding-top:35px}
.tabs {
  gap:22px}
.option {
  padding:13px 12px}
.history-item {
  flex-wrap:wrap}
.progress-bar {
  gap:9px}
.result-head {
  padding:21px}
.toolbar button {
  padding:9px 12px}
footer span {
  display:none}
}
@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important}
}