:root{
  --bg:#f7f7f5; --panel:#ffffff; --ink:#1c1c1a; --muted:#6b6b66;
  --line:#e2e2dd; --accent:#1f5f4f; --accent-ink:#ffffff;
  --ok:#1a6b45; --ok-bg:#e8f4ed; --ng:#a52f2f; --ng-bg:#faeceb;
  --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16171a; --panel:#1e2024; --ink:#e8e8e4; --muted:#9a9a94;
    --line:#32343a; --accent:#4fae92; --accent-ink:#10221d;
    --ok:#6fd3a3; --ok-bg:#16302a; --ng:#f08a80; --ng-bg:#331f1e;
  }
}
:root[data-theme="dark"]{
  --bg:#16171a; --panel:#1e2024; --ink:#e8e8e4; --muted:#9a9a94;
  --line:#32343a; --accent:#4fae92; --accent-ink:#10221d;
  --ok:#6fd3a3; --ok-bg:#16302a; --ng:#f08a80; --ng-bg:#331f1e;
}
*{box-sizing:border-box}
/* .btn などに display を指定すると、ブラウザ標準の [hidden]{display:none} を
   打ち消してしまう。JS の el.hidden を確実に効かせるため明示しておく。 */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  line-height:1.75;font-size:16px}
.wrap{max-width:820px;margin:0 auto;padding:20px 16px 72px}
a{color:var(--accent)}
header.site{border-bottom:1px solid var(--line);background:var(--panel)}
header.site .wrap{padding:12px 16px;display:flex;gap:12px;align-items:center}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.brand-text{font-weight:700;font-size:16px}
.logo{display:block;height:34px;width:auto}
/* ロゴは配色ごとに差し替える。既定(ライト)ではダーク用を出さない。 */
.only-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .only-light{display:none}
  :root:not([data-theme="light"]) .only-dark{display:block}
}
:root[data-theme="dark"] .only-light{display:none}
:root[data-theme="dark"] .only-dark{display:block}
:root[data-theme="light"] .only-light{display:block}
:root[data-theme="light"] .only-dark{display:none}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted)}
h1{font-size:22px;line-height:1.5;margin:0 0 6px}
h2{font-size:17px;margin:28px 0 10px}
.lede{color:var(--muted);font-size:14px;margin:0 0 22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:12px}
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:inherit}
.tile:hover{border-color:var(--accent)}
.tile .t{font-weight:600;font-size:15px}
.tile .m{color:var(--muted);font-size:13px;margin-top:4px}
.badge{display:inline-block;font-size:12px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:1px 9px;margin-left:6px}
.src{font-size:12px;color:var(--muted);margin-top:14px;padding-top:10px;
  border-top:1px dashed var(--line)}
footer.site{border-top:1px solid var(--line);margin-top:40px;background:var(--panel)}
footer.site .wrap{padding:18px 16px;font-size:12px;color:var(--muted)}
footer.site nav{margin-bottom:8px;display:flex;gap:16px;flex-wrap:wrap}
footer.site nav a{color:var(--muted)}
.prose h2{font-size:16px;margin:26px 0 8px}
.prose p{margin:0 0 12px;font-size:15px}
.prose table.info{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 12px}
.prose table.info th,.prose table.info td{text-align:left;vertical-align:top;
  padding:8px 10px;border-bottom:1px solid var(--line);font-weight:400}
.prose table.info th{width:9em;color:var(--muted);white-space:nowrap}

.bar{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);
  margin-bottom:8px}
.bar .pos{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.bar .track{flex:1;height:10px;background:var(--line);border-radius:999px;
  overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
/* span のままだとインライン要素なので width も height も効かない */
.bar .fill{display:block;height:100%;background:var(--accent);width:0;
  border-radius:999px;transition:width .25s ease}
.bar .rate{font-variant-numeric:tabular-nums}
.score{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);
  margin:0 0 14px}
.score b{color:var(--ink);font-variant-numeric:tabular-nums}
.score .rate.pass{color:var(--ok)}
.score .rate.fail{color:var(--ng)}
.stem{font-size:17px;margin:0 0 16px;white-space:pre-wrap}
.figs img{max-width:100%;border:1px solid var(--line);border-radius:6px;
  background:#fff;margin-bottom:10px}
.choices{list-style:none;padding:0;margin:0}
.choices li{margin-bottom:8px}
.choice{width:100%;text-align:left;display:flex;gap:10px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;font:inherit;color:inherit;cursor:pointer}
.choice:hover:not(:disabled){border-color:var(--accent)}
.choice:disabled{cursor:default}
.choice .n{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--muted)}
.choice.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.choice.correct{border-color:var(--ok);background:var(--ok-bg)}
.choice.wrong{border-color:var(--ng);background:var(--ng-bg)}
.btn:disabled{opacity:.45;cursor:default}
.hint{font-size:13px;color:var(--muted);margin:12px 0 0}
.skip{display:block;text-align:center;margin-top:14px;font-size:14px;
  color:var(--muted);background:none;border:0;font:inherit;font-size:14px;
  text-decoration:underline;cursor:pointer}
.skip:hover{color:var(--ink)}
dialog.modal{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);color:var(--ink);padding:22px 24px;max-width:420px;
  width:calc(100% - 32px);font:inherit}
dialog.modal::backdrop{background:rgba(0,0,0,.45)}
dialog.modal h2{margin:0 0 10px;font-size:17px}
dialog.modal p{margin:0 0 18px;font-size:14px;color:var(--muted)}
dialog.modal .actions{margin:0;justify-content:flex-end}
.pass-line{margin-top:10px;font-size:14px}
.pass-line.ok{color:var(--ok)} .pass-line.ng{color:var(--ng)}
.breakdown{margin-top:14px;font-size:14px;width:100%;border-collapse:collapse}
.breakdown th,.breakdown td{text-align:left;padding:6px 8px;
  border-bottom:1px solid var(--line);font-weight:400}
.breakdown th{color:var(--muted);font-size:13px}
.breakdown td.num{text-align:right;font-variant-numeric:tabular-nums}
.breakdown tr.below td{color:var(--ng)}
.theme{margin-left:auto;font:inherit;font-size:13px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:4px 8px}
.verdict{margin:34px 0 0;padding:16px 18px;border-radius:var(--radius);
  border:2px solid var(--line);background:var(--panel);scroll-margin-top:64px}
.verdict.ok{border-color:var(--ok);background:var(--ok-bg)}
.verdict.ng{border-color:var(--ng);background:var(--ng-bg)}
.verdict .head{font-weight:700;margin-bottom:8px}
.verdict.ok .head{color:var(--ok)}
.verdict.ng .head{color:var(--ng)}
.verdict .why{white-space:pre-wrap}
.verdict .pending{color:var(--muted);font-size:14px;margin:0}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);
  border:0;border-radius:var(--radius);padding:11px 22px;font:inherit;
  font-weight:600;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
/* 出題中の主要ボタンは押しやすいよう幅を広く取る。2つ並ぶことはない
   (回答する と 次の問題へ は排他)ので、同じ幅に揃える。 */
.btn.wide{min-width:240px;max-width:100%}
.actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.opts{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:14px;
  color:var(--muted);margin-bottom:16px}
.opts label{display:flex;gap:6px;align-items:center;cursor:pointer}
.result .big{font-size:34px;font-weight:700}
.review{margin-top:18px}
.review a{display:block;padding:8px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;font-size:14px}
.review .mk{font-weight:700;margin-right:8px}
.review .mk.ok{color:var(--ok)}
.review .mk.ng{color:var(--ng)}
@media(max-width:600px){ .stem{font-size:16px} .wrap{padding:16px 12px 64px} }