:root {
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  color: #17231c;
  background: #f3f7f4;
  --green: #176b43;
  --green-dark: #0e5031;
  --line: #dbe6df;
  --muted: #66756c;
  --good: #137a45;
  --bad: #b33a2e;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
.shell { width: min(760px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 48px; }
.topbar { display:flex; justify-content:space-between; align-items:end; gap:16px; }
.eyebrow { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing:.04em; }
h1 { margin: 2px 0 0; font-size: clamp(30px, 7vw, 46px); letter-spacing:-.04em; }
.ghost, .secondary { background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px; cursor:pointer; }
.scorebar { display:grid; grid-template-columns:repeat(3,1fr); background:#fff; border:1px solid var(--line); border-radius:16px; margin:20px 0 14px; overflow:hidden; }
.scorebar div { text-align:center; padding:12px; border-right:1px solid var(--line); }
.scorebar div:last-child { border-right:0; }
.scorebar span { display:block; font-size:22px; font-weight:800; }
.scorebar small { color:var(--muted); }
.settings { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; margin-bottom:14px; }
.hidden { display:none !important; }
.setting-group { margin-bottom:16px; }
.setting-group strong { display:block; margin-bottom:8px; }
.setting-group label { margin-right:14px; display:inline-flex; gap:5px; align-items:center; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip input { display:none; }
.chip span { display:inline-block; padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#fff; }
.chip input:checked + span { color:#fff; background:var(--green); border-color:var(--green); }
.danger-link { border:0; background:transparent; color:#9b3028; text-decoration:underline; padding:0; cursor:pointer; }
.card { background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(20px, 5vw, 34px); box-shadow:0 14px 40px rgba(30,70,45,.07); }
.meta { display:flex; gap:8px; margin-bottom:22px; }
.meta span { font-size:12px; font-weight:800; border-radius:999px; padding:5px 9px; background:#edf4ef; color:var(--green-dark); }
.question { font-size:clamp(24px, 5vw, 34px); line-height:1.45; font-weight:800; min-height:130px; display:flex; align-items:center; }
#answer { width:100%; font-size:22px; padding:15px 16px; border:2px solid #ccd9d1; border-radius:14px; outline:none; }
#answer:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(23,107,67,.10); }
.actions { display:grid; grid-template-columns:2fr 1fr; gap:10px; margin-top:12px; }
.primary { border:0; background:var(--green); color:#fff; border-radius:12px; padding:13px 18px; font-weight:800; cursor:pointer; }
.primary:hover { background:var(--green-dark); }
.secondary { font-weight:700; }
.result { border-top:1px solid var(--line); margin-top:22px; padding-top:22px; }
.result.correct .result-title { color:var(--good); }
.result.wrong .result-title { color:var(--bad); }
.result-title { font-size:26px; font-weight:900; }
.expected { margin-top:9px; font-size:20px; font-weight:800; }
.result p { color:#34453b; line-height:1.75; }
.result-foot { display:flex; gap:10px; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; margin:16px 0; }
.ai-badge { background:#eef0fb; color:#4e5899; padding:4px 8px; border-radius:999px; }
.wide { width:100%; }
.hint { color:var(--muted); text-align:center; font-size:12px; line-height:1.6; }
@media (max-width: 520px) {
  .shell { width:min(100% - 18px, 760px); padding-top:16px; }
  .topbar { align-items:center; }
  .question { min-height:150px; }
  .actions { grid-template-columns:1fr; }
  .settings label { margin-bottom:7px; }
}