:root { --bg:#f6f4ef; --card:#fff; --ink:#1c1c1a; --mute:#6b6a65; --line:#e3dfd5; --acc:#1f4d3a; --acc-ink:#fff; --ok:#1f7a4d; --bad:#b3261e; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.top { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { font-weight:700; color:var(--acc); text-decoration:none; }
main { max-width:760px; margin:0 auto; padding:20px 16px 64px; }
h1 { font-size:1.5rem; line-height:1.25; margin:.2em 0 .6em; }
h2 { font-size:1.15rem; margin:1.4em 0 .5em; }
a { color:var(--acc); }
.card { display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; margin:14px 0; color:inherit; text-decoration:none; }
.narrow { max-width:420px; margin:8vh auto 0; }
label { display:block; font-weight:600; margin:.8em 0 .3em; }
input[type=tel], input[type=text] { width:100%; padding:14px; font-size:1.1rem; border:1px solid var(--line); border-radius:10px; background:#fff; }
input.code { letter-spacing:.4em; text-align:center; font-size:1.5rem; }
.btn { display:inline-block; width:100%; margin-top:14px; padding:14px 18px; background:var(--acc); color:var(--acc-ink); border:0; border-radius:10px; font-size:1.05rem; font-weight:600; text-align:center; text-decoration:none; cursor:pointer; }
.btn.ghost { background:transparent; color:var(--acc); border:1px solid var(--acc); }
.link { background:none; border:0; color:var(--acc); font-size:.95rem; padding:10px 0; cursor:pointer; text-decoration:underline; }
.hint, .meta, .crumb { color:var(--mute); font-size:.92rem; }
.crumb a { text-decoration:none; }
.error { color:var(--bad); font-weight:600; }
.ok { color:var(--ok); }
.bar { height:8px; background:var(--line); border-radius:8px; overflow:hidden; margin:10px 0 6px; }
.bar span { display:block; height:100%; background:var(--acc); }
.course h2 { margin:0; }
.chapter h2 { border-top:1px solid var(--line); padding-top:1.2em; }
.lessons { list-style:none; padding:0; margin:0; }
.lessons .row { display:flex; gap:10px; align-items:flex-start; padding:12px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.lessons .mark { flex:0 0 1.4em; text-align:center; }
.lessons .done .mark { color:var(--ok); font-weight:700; }
.lessons .locked { color:var(--mute); }
.lessons .pct { margin-left:auto; color:var(--mute); font-size:.9rem; white-space:nowrap; }
.prose { overflow-wrap:anywhere; }
.prose h2 { font-size:1.3rem; } .prose h3 { font-size:1.12rem; margin-top:1.5em; } .prose h4 { font-size:1rem; margin-top:1.3em; }
.prose blockquote { margin:1em 0; padding:.6em 1em; border-left:4px solid var(--acc); background:var(--card); border-radius:0 10px 10px 0; }
.prose blockquote p { margin:.3em 0; }
.prose table { display:block; overflow-x:auto; border-collapse:collapse; margin:1em 0; font-size:.93rem; background:var(--card); }
.prose th, .prose td { border:1px solid var(--line); padding:8px 10px; vertical-align:top; min-width:7em; text-align:left; }
.prose th { background:#efece4; }
.prose hr { border:0; border-top:1px solid var(--line); margin:1.6em 0; }
.prose img { max-width:100%; height:auto; }
.prose code { background:#efece4; padding:.1em .3em; border-radius:4px; font-size:.9em; }
fieldset { border:0; border-top:1px solid var(--line); margin:0; padding:16px 0 8px; }
legend { font-weight:600; padding:0; float:left; width:100%; margin-bottom:8px; }
.opt { display:flex; gap:12px; align-items:flex-start; font-weight:400; margin:0; padding:12px; border:1px solid var(--line); border-radius:10px; clear:both; margin-top:8px; cursor:pointer; }
.opt input { margin-top:.35em; flex:0 0 auto; width:18px; height:18px; accent-color:var(--acc); }
.opt:has(input:checked) { border-color:var(--acc); background:#eef4f0; }
.result.pass { border-color:var(--ok); } .result.fail { border-color:var(--bad); }
.result .big { font-size:1.2rem; font-weight:600; }
.answers { padding-left:1.3em; }
.answers li { margin:14px 0; padding-left:6px; }
.answers .q { font-weight:600; margin:0 0 .2em; } .answers p { margin:.2em 0; }
.answers .wrong strong { color:var(--bad); } .answers .right strong { color:var(--ok); }