/* Interactive lessons (lib/lesson.js). Colours come from the data-c ancestor. */
.fr{display:inline-grid;vertical-align:middle;text-align:center;line-height:1.1;font-size:.92em;margin:0 .1em}.fr i{font-style:normal;border-bottom:.07em solid currentColor;padding:0 .2em}.fr b{font-weight:500}
.ls{display:grid;gap:14px;max-width:760px;margin-inline:auto;width:100%}
.ls-dots{list-style:none;margin:0;padding:0;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.ls-dots li{width:24px;height:6px;border-radius:99px;background:var(--line-2);transition:background .3s,width .3s}.ls-dots li.done{background:var(--c)}.ls-dots li.now{background:var(--c-ink);width:44px}
.ls-card{display:grid;gap:14px;padding:clamp(16px,3.5vw,26px);border-radius:24px;background:#fff;border:1.5px solid var(--line-2);box-shadow:0 8px 28px rgba(20,18,58,.06)}
.ls-in{animation:ls-in .45s ease both}@keyframes ls-in{from{opacity:0;transform:translateY(14px)}}
.ls-title{margin:0;font:600 clamp(22px,4.5vw,30px) var(--serif);color:var(--c-ink)}
.ls-body{line-height:1.6;color:var(--ink)}.ls-body p{margin:0 0 .6em}.ls-body p:last-child{margin:0}
.ls-viz{display:grid;place-items:center;padding:10px;border-radius:18px;background:var(--c-soft)}
.ls-svg{width:100%;max-width:440px;max-height:330px;height:auto}
.ls-read{margin:0;text-align:center;font:700 18px var(--sans);color:var(--c-ink);min-height:1.5em;font-variant-numeric:tabular-nums}
.ls-controls{display:grid;gap:8px}.ls-controls:empty{display:none}
.ls-ctl{display:grid;grid-template-columns:minmax(96px,150px) 1fr 44px;gap:12px;align-items:center;font-weight:700;font-size:14px}
.ls-range{width:100%;accent-color:var(--c);height:28px}
.ls-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:800;color:var(--c-ink)}
.ls-prompt,.ls-q{margin:0;font:600 clamp(18px,3.4vw,22px) var(--sans);line-height:1.45}
.ls-ask:empty{display:none}.ls-ask{display:grid;gap:12px}
.ls-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ls-opt{padding:14px 16px;border-radius:16px;border:2px solid var(--line-2);background:#fff;font:700 18px var(--sans);cursor:pointer;color:var(--ink);text-align:center;transition:border-color .15s,background .15s,transform .15s}
.ls-opt:hover:not(:disabled){border-color:var(--c);background:var(--c-soft);transform:translateY(-2px)}
.ls-opt.ok{border-color:#17753A;background:#e6f6ec}.ls-opt.no{border-color:#B3261E;background:#fdeceb;opacity:.75}
.ls-answer{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ls-input{width:150px;height:50px;padding:0 14px;border-radius:14px;border:2px solid var(--line-2);font:700 24px var(--sans);text-align:center;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}.ls-input:focus{outline:0;border-color:var(--c);box-shadow:0 0 0 4px var(--c-soft)}
.ls-input.ok{border-color:#17753A;background:#e6f6ec}.ls-input.no{border-color:#B3261E;background:#fdeceb;animation:shake .4s}
.ls-unit{font-weight:700;color:var(--ink-2)}
.ls-fb:empty{display:none}.ls-fb{line-height:1.55;padding:11px 15px;border-radius:14px}
.ls-fb.good{background:#e6f6ec;color:#0e5a2a}.ls-fb.bad{background:#fdeceb;color:#8c1d16}.ls-fb.hint{background:#FFF1D0;color:#6b4a00}
.ls-nav{display:flex;justify-content:space-between;gap:10px}.ls-nav .btn:disabled{opacity:.45;cursor:not-allowed}.ls-nav .btn.ready{animation:ls-pulse 1.2s ease 2}.ls-nav [hidden]{display:none}
@keyframes ls-pulse{50%{transform:scale(1.06)}}
@media(max-width:560px){.ls-ctl{grid-template-columns:1fr 44px}.ls-ctl span{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.ls-in,.ls-nav .btn.ready{animation:none}}