:root{
  color-scheme:dark;
  --bg:#0f172a;
  --card:#020617;
  --panel:#1e293b;
  --text:#fff;
  --muted:#cbd5e1;
  --muted2:#94a3b8;
  --line:#64748b;
  --accent:#fde047;
  --accentText:#111827;
  --green:#22c55e;
  --greenDeep:#166534;
  --red:#991b1b;
  --redSoft:#7f1d1d;
  --focus:#93c5fd;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  min-height:100vh;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  line-height:1.6;
}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.page-shell{min-height:100vh;display:flex;justify-content:center;padding:16px}
.app-card{
  width:100%;
  max-width:480px;
  align-self:flex-start;
  background:var(--card);
  border:4px solid #fff;
  border-radius:28px;
  padding:20px;
}
.back-link{color:#60a5fa;font-size:14px;font-weight:700}
.app-header{margin:22px 0;text-align:center}
.brand{margin:0 0 3px;color:var(--muted);font-size:12px}
h1{margin:0;font-size:clamp(24px,7vw,32px);line-height:1.3}
.course-title{margin:10px 0 0;color:#fde047;font-size:17px;font-weight:800}
.lead{margin:12px auto 0;color:var(--muted);font-size:14px;line-height:1.8}
.screen{width:100%}
.hidden{display:none!important}
.panel{background:var(--panel);border-radius:18px;padding:18px}
#status-screen{text-align:center}
#status-screen h2{margin:12px 0 5px;font-size:20px}
#status-message{margin:0;color:var(--muted);font-size:14px;white-space:pre-line}
.spinner{
  width:38px;height:38px;margin:2px auto 8px;
  border:4px solid rgba(255,255,255,.2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.primary-button{
  display:block;width:100%;min-height:52px;margin-top:16px;
  border:0;border-radius:14px;background:var(--accent);color:var(--accentText);
  font-weight:800;cursor:pointer;
}
.primary-button:disabled{cursor:not-allowed;opacity:.45}
.secondary-link{
  display:block;width:100%;min-height:48px;margin-top:12px;padding:10px 14px;
  border:1px solid #64748b;border-radius:14px;background:#334155;color:#fff;
  text-align:center;text-decoration:none;font-weight:800;
}
.secondary-link:hover{background:#475569}
.quiz-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.badge{
  display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;
  border-radius:999px;background:var(--accent);color:var(--accentText);
  font-size:12px;font-weight:800;
}
.badge-subtle{background:#334155;color:var(--muted)}
.question-panel{margin-bottom:14px}
.spot-name{margin:0 0 8px;color:#facc15;font-size:13px;font-weight:800}
.question-text{margin:0;font-size:19px;line-height:1.7}
.answer-area{margin-top:18px}
.choice-list{display:grid;gap:10px}
.choice-button{
  width:100%;min-height:50px;padding:12px 14px;
  border:1px solid var(--line);border-radius:13px;background:var(--card);
  color:var(--text);text-align:left;font-weight:750;cursor:pointer;
}
.choice-button:hover:not(:disabled){border-color:var(--accent)}
.choice-button.correct{border-color:#86efac;background:var(--green);color:#fff}
.choice-button.incorrect{border-color:#f87171;background:var(--red);color:#fff}
.choice-button:disabled{cursor:default}
.input-answer{
  width:100%;min-height:50px;padding:12px 14px;
  border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--text)
}
.check-button{
  width:100%;min-height:50px;margin-top:10px;border:0;border-radius:13px;
  background:var(--accent);color:var(--accentText);font-weight:800;cursor:pointer
}
.feedback{margin-bottom:14px;border-radius:18px;padding:16px}
.feedback.correct{background:var(--greenDeep)}
.feedback.incorrect{background:var(--redSoft)}
.feedback h3{margin:0 0 7px;font-size:20px}
.feedback p{margin:5px 0 0;font-size:14px}
.result-summary{margin-bottom:18px;text-align:center}
.result-small{margin:0;color:var(--muted);font-size:17px;font-weight:700}
.result-large{
  margin:2px 0 0;color:var(--accent);
  font-size:clamp(32px,10vw,46px);font-weight:900;line-height:1.25
}
.review-section h2{margin:0 0 12px;font-size:20px}
.review-list{display:grid;gap:13px}
.review-card{overflow:hidden;border:1px solid #475569;border-radius:16px;background:var(--panel)}
.review-card.correct{border-color:#4ade80}
.review-card.incorrect{border-color:#f87171}
.review-body{padding:15px}
.review-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:7px}
.review-number{color:var(--muted2);font-size:12px;font-weight:800}
.review-mark{flex:none;font-size:13px;font-weight:900}
.review-card.correct .review-mark{color:#86efac}
.review-card.incorrect .review-mark{color:#fca5a5}
.review-question{margin:0 0 10px;font-weight:800;line-height:1.65}
.review-answer,.review-user-answer,.review-explanation,.review-spot,.review-relation{
  margin:5px 0 0;font-size:13px;line-height:1.65
}
.review-answer strong{color:#fde047}
.review-user-answer,.review-explanation,.review-relation{color:var(--muted)}
.detail-link{
  display:block;min-height:46px;padding:10px 14px;border-top:1px solid #475569;
  background:#334155;color:#fff;text-align:center;text-decoration:none;font-weight:800
}
.detail-link:hover{background:#475569}
.next-note{margin:8px 0 0;color:var(--muted2);text-align:center;font-size:12px}
.error-panel{background:var(--redSoft)}
.site-footer{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px 16px 40px;color:var(--muted2);font-size:13px
}
.site-footer a{color:#60a5fa}
@media(max-width:420px){
  .page-shell{padding:8px}
  .app-card{border-width:3px;border-radius:22px;padding:15px}
  .panel{padding:15px}
  .question-text{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}