.hdr .prog{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.hdr .pbar{width:110px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.hdr .pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dk),var(--gold));width:0;transition:width .4s}
.hdr .grad{font-size:1.2rem;filter:grayscale(1);opacity:.35}
.hdr .grad.on{filter:none;opacity:1}
.hdr .iconbtn.play{text-decoration:none;font-size:.8rem}
@media (max-width:420px){.hdr .pbar{width:60px}}
.ak{max-width:860px;margin:0 auto;padding:6px 14px 40px}
.ak h1{font-family:var(--ff-serif);font-weight:600;font-size:clamp(1.5rem,4vw,2.1rem);margin:8px 0 6px}
.ak .lead{color:#dfe8e0;margin:0 0 16px;max-width:64ch}
.lessons{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.lessons button{flex:0 0 auto;border:1px solid var(--line);background:var(--panel);color:var(--cream);border-radius:99px;padding:7px 12px;font-size:.82rem;display:flex;align-items:center;gap:6px;white-space:nowrap}
.lessons button.on{border-color:var(--gold);background:rgba(212,169,59,.16)}
.lessons button .n{width:20px;height:20px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-size:.7rem;font-weight:700}
.lessons button.done .n{background:var(--ok);color:#0f2a1e}
.lesson{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.15));border:1px solid var(--line);border-radius:16px;padding:18px 18px 20px}
@media (max-width:480px){.lesson{padding:14px 12px 16px}}
.lesson h2{font-family:var(--ff-serif);font-weight:600;font-size:1.35rem;margin:0 0 10px}
.lesson h2 small{display:block;font-family:var(--ff);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.lesson p,.lesson li{color:#e6ede6;font-size:.98rem}
.lesson .theory{margin-bottom:14px}
.exercise{background:radial-gradient(120% 100% at 50% 0%,#2a6e4d,var(--felt) 55%,var(--felt-dk));border:2px solid var(--wood-hi);border-radius:14px;padding:14px;box-shadow:inset 0 0 40px rgba(0,0,0,.35)}
.exercise .q{font-weight:600;margin:0 0 10px;color:var(--cream)}
.exercise .cards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 12px;--cw:clamp(52px,14vw,86px)}
.exercise .cards .card{width:var(--cw);height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));position:relative;border:0;background:transparent;padding:0}
.exercise .cards .card svg{width:100%;height:auto;display:block}
.exercise .cards .card.pick{cursor:pointer;transition:transform .15s}
.exercise .cards .card.pick:hover{transform:translateY(-4px)}
.exercise .cards .card.sel{outline:3px solid var(--gold);outline-offset:2px;border-radius:8%;transform:translateY(-6px)}
.exercise .cards .card.ok{outline:3px solid var(--ok);outline-offset:2px;border-radius:8%}
.exercise .cards .card.bad{outline:3px solid #ff7b6e;outline-offset:2px;border-radius:8%}
.exercise .cards .card .lab{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-size:.66rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.exercise .cards.labeled{margin-bottom:26px}
.exercise .facts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 10px}
.exercise .facts span{background:var(--panel);border-radius:99px;padding:3px 10px;font-size:.8rem}
.exercise .facts span b{color:var(--gold)}
.opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.opts .btn{min-width:90px}
.opts .btn.ok{background:linear-gradient(180deg,#78e0a8,#3fb977);border-color:#25784a}
.opts .btn.bad{background:linear-gradient(180deg,#f0958a,#c8564b);border-color:#7d2e27;color:#fff}
.feedback{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.28);border-left:3px solid var(--gold);color:var(--cream);min-height:1.5em}
.feedback.good{border-left-color:var(--ok)} .feedback.badfb{border-left-color:#ff7b6e}
.next{display:flex;justify-content:space-between;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}
.next .streak{font-size:.82rem;color:var(--muted)}
.next .streak b{color:var(--gold)}
.diploma{text-align:center;padding:20px 10px}
.diploma .big{font-size:3rem}
.diploma h3{font-family:var(--ff-serif);font-weight:600;margin:6px 0}
table.vals{border-collapse:collapse;margin:8px 0 12px}
table.vals td,table.vals th{padding:4px 12px;border-bottom:1px solid var(--line);text-align:left}
table.vals th{color:var(--gold);font-weight:600}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:sp .8s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}