:root{color-scheme:light;--ink:#123544;--muted:#546c76;--line:#d2e0e3;--accent:#006c67;font-family:system-ui,-apple-system,sans-serif;background:#edf3f3;color:var(--ink)}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:820px;margin:auto;padding:calc(12px + env(safe-area-inset-top)) 18px 12px}header span{font-weight:750}a{color:var(--accent);text-underline-offset:3px}button,input,select{font:inherit}button,summary{cursor:pointer}button{min-height:48px;border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:white;color:var(--ink);font-weight:650}button:disabled{opacity:.5;cursor:default}.primary{background:var(--accent);color:white;border-color:var(--accent)}main{max-width:760px;margin:auto;padding:0 18px calc(30px + env(safe-area-inset-bottom))}.intro,.muted,footer{color:var(--muted);font-size:14px;line-height:1.5}article,#stats{background:#fff;padding:26px;border:1px solid var(--line);border-radius:20px;margin:16px 0}h1{font-size:clamp(21px,4vw,28px);line-height:1.38;margin:14px 0 24px;overflow-wrap:anywhere}h2{font-size:20px}.meta{display:flex;gap:10px;justify-content:space-between;font-size:13px;font-weight:750;color:var(--accent)}#topic{margin:12px 0 0}.option{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:12px;padding:15px;margin:10px 0;line-height:1.45;overflow-wrap:anywhere}.option:has(input:checked){background:#e7f5f2;border-color:var(--accent)}input{flex-shrink:0;width:20px;height:20px;accent-color:var(--accent);margin:2px 0}.confidence{display:flex;align-items:center;gap:12px;margin:22px 0}.actions{display:flex;gap:10px;margin-top:18px}.actions button{flex:1}.navigation{border-top:1px solid var(--line);padding-top:18px}details{margin-top:22px;border:1px solid var(--line);border-radius:12px;padding:16px}summary{min-height:30px;font-weight:650}#theoryBody{line-height:1.65;overflow-wrap:anywhere}#feedback{border-left:4px solid var(--accent);padding-left:16px;margin-top:24px}#correctAnswer{white-space:pre-line;line-height:1.5;overflow-wrap:anywhere}.match-row{display:block;margin:20px 0;line-height:1.5}.match-row span{display:block;margin-bottom:8px}select{width:100%;min-height:48px;border:1px solid var(--line);border-radius:10px;background:white;padding:10px;color:var(--ink)}.stat-row{padding:12px 0;border-bottom:1px solid var(--line);line-height:1.6}#storageError{background:#fff1d6;padding:16px;color:#6b3b00}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #df8b32;outline-offset:3px}[hidden]{display:none!important}@media(max-width:420px){main{padding-left:12px;padding-right:12px}header{padding-left:12px;padding-right:12px}article,#stats{padding:18px 15px;border-radius:16px}.meta{flex-wrap:wrap}.actions button{padding:12px 8px}header span{display:none}}
.score{font-size:54px;font-weight:800;margin:16px 0 0;letter-spacing:-2px;color:var(--accent)}progress{width:100%;height:12px;accent-color:var(--accent)}
/* iPhone 17 portrait: 402 CSS px, flexible height in Safari and installed PWA. */
@media (max-width:600px) and (pointer:coarse){
  html{scroll-padding-top:16px;scroll-padding-bottom:190px;-webkit-text-size-adjust:100%}
  body{padding-bottom:calc(154px + env(safe-area-inset-bottom))}
  header{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  article{padding:20px 18px;margin-top:12px}
  h1{font-size:23px;line-height:1.38;margin-bottom:20px}
  .option{min-height:58px;padding:15px 13px;font-size:17px}
  .intro{font-size:13px;margin-top:0;margin-bottom:10px}
  #controls{position:fixed;z-index:10;left:0;right:0;bottom:0;background:#f8fbfb;border-top:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 22px #1235440c}
  #controls .actions{margin:0;gap:10px}
  #controls .navigation{padding-top:8px;border-top:0}
  #controls button{min-height:52px;font-size:16px}
  #controls #before:not([hidden]) + .navigation button{min-height:44px;background:transparent;border:0;color:var(--muted)}
  .dashboard-open #controls{display:none}
  .dashboard-open{padding-bottom:env(safe-area-inset-bottom)}
  #feedback,details{scroll-margin-bottom:180px}
}
@media (max-height:480px) and (pointer:coarse){#controls{position:static;box-shadow:none;padding:8px 0}body{padding-bottom:0}}
.dashboard-open #card{display:none}
/* Keep coverage visible above the question and while reading long answers. */
.trainer-top{position:sticky;top:0;z-index:12;background:#edf3f3;border-bottom:1px solid var(--line)}
.trainer-top header{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:4px}
#trainingProgress{max-width:760px;margin:auto;padding:8px 18px 10px}
.progress-counts,.progress-detail{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.progress-counts{font-size:14px;line-height:1.4}.progress-counts strong{color:var(--accent)}
#coverageBar{display:block;height:6px;margin:7px 0;border:0;border-radius:8px;overflow:hidden;background:var(--line)}
#coverageBar::-webkit-progress-bar{background:var(--line)}
#coverageBar::-webkit-progress-value{background:var(--accent)}
#coverageBar::-moz-progress-bar{background:var(--accent)}
.progress-detail{font-size:12px;color:var(--muted);line-height:1.4}
.dashboard-open #trainingProgress{display:none}
html{scroll-padding-top:calc(150px + env(safe-area-inset-top))}
@media(max-width:420px){#trainingProgress{padding-left:16px;padding-right:16px}}
@media(max-height:480px) and (pointer:coarse){.trainer-top{position:static}}