:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; color: #263044; background: #f5f1e8; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
.lab { max-width: 1120px; margin: 0 auto; padding: 22px; }
header { margin-bottom: 16px; }
.eyebrow { margin: 0 0 5px; color: #a34b2d; font-size: 12px; font-weight: 800; letter-spacing: .13em; }
h1 { margin: 0; font-size: clamp(26px, 4vw, 40px); }
header > p:last-child { margin: 8px 0 0; color: #606b7d; }
.topbar { position: sticky; z-index: 5; top: 0; display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #d9d0c1; border-radius: 15px; background: color-mix(in srgb, #f5f1e8 94%, transparent); backdrop-filter: blur(10px); }
select, button, input { min-height: 44px; border: 1px solid #aeb5c1; border-radius: 10px; color: inherit; background: #fff; }
select { width: 100%; padding: 8px 11px; font-weight: 700; }
button { padding: 8px 14px; cursor: pointer; font-weight: 700; }
a.button { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 14px; border: 1px solid #6a4a2b; border-radius: 10px; color: #fff; background: #6a4a2b; font-weight: 700; text-decoration: none; }
button.primary { border-color: #3157b7; color: #fff; background: #3157b7; }
button.warn { border-color: #b45d3b; color: #8b3218; background: #fff4ed; }
.progress-wrap { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
progress { width: 150px; height: 12px; accent-color: #278a64; }
.unit-head { margin: 20px 0 12px; padding: 18px; border-left: 6px solid #b45d3b; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(40,35,25,.07); }
.unit-head h2 { margin: 0 0 5px; font-size: clamp(21px, 3vw, 30px); }
.unit-head p { margin: 0; color: #647084; }
.questions { display: grid; gap: 12px; }
.question { padding: 15px; border: 1px solid #ddd8ce; border-radius: 13px; background: #fff; }
.question.correct { border-color: #278a64; box-shadow: inset 4px 0 #278a64; }
.question.wrong { border-color: #d26745; box-shadow: inset 4px 0 #d26745; }
.qtext { margin: 0 0 10px; font-size: 16px; font-weight: 650; line-height: 1.75; }
.number { display: inline-grid; width: 27px; height: 27px; margin-right: 7px; place-items: center; border-radius: 50%; color: #fff; background: #435578; font-size: 13px; }
.answer-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.answer-row input { flex: 1 1 230px; padding: 8px 11px; border-width: 2px; }
.answer-row input:focus { border-color: #3157b7; outline: 3px solid rgba(49,87,183,.16); }
.feedback { margin: 8px 0 0; color: #687386; font-size: 14px; }
.correct .feedback { color: #176c4a; }
.wrong .feedback { color: #a34024; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0; }
.summary { padding: 14px 16px; border-radius: 12px; background: #e8eefc; font-weight: 700; }
.guide-intro { margin: 18px 0; padding: 17px; border-radius: 13px; background: #fff7e7; line-height: 1.75; }
.source-figure { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(240px, .8fr); gap: 18px; align-items: center; margin: 18px 0; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 8px 25px rgba(40,35,25,.08); }
.source-figure img { display: block; width: 100%; max-height: 390px; object-fit: contain; border-radius: 9px; background: #e9e6df; }
.source-figure figcaption { line-height: 1.75; }
.source-figure figcaption b { display: block; margin-bottom: 7px; font-size: 18px; }
.source-figure figcaption p { margin: 0 0 9px; }
.source-figure figcaption a { color: #3157b7; }
.guide-list { display: grid; gap: 13px; }
.guide-card { padding: 17px; border: 1px solid #d9d0c1; border-radius: 13px; background: #fff; }
.guide-card h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.65; }
.guide-answer { margin: 0 0 8px; color: #974326; font-size: 18px; font-weight: 800; }
.guide-explain { margin: 0; line-height: 1.8; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0; }
.empty { padding: 28px; border-radius: 14px; text-align: center; background: #fff; }
@media (max-width: 680px) { .lab { padding: 15px 11px; } .topbar, .source-figure { grid-template-columns: 1fr; } .progress-wrap { justify-content: space-between; } progress { flex: 1; } .question { padding: 13px 11px; } .actions button { flex: 1 1 44%; } }
@media (prefers-color-scheme: dark) { :root { color: #edf1f8; background: #111722; } header > p:last-child, .unit-head p, .feedback { color: #b8c1d0; } .topbar { border-color: #404b5e; background: rgba(17,23,34,.94); } select, button, input, .unit-head, .question, .empty, .guide-card, .source-figure { color: #edf1f8; border-color: #4a566b; background: #1d2635; } .summary { background: #26334c; } .guide-intro { background: #332b1d; } .guide-answer { color: #ffad8f; } .source-figure img { background: #111722; } .source-figure figcaption a { color: #9bb7ff; } button.warn { color: #ffc0aa; background: #3b241d; } }