.ai-lesson { --ai-teal:#187568; --ai-purple:#7950a0; --ai-red:#b94b40; }
.ai-lesson h2 { margin-top:2.5rem; }
.ai-intro, .ai-diagram { margin:1.5rem 0; padding:1.25rem; border:1px solid var(--bf-border); border-radius:12px; background:#f4f8fb; }
.ai-intro strong { color:var(--ai-teal); }
.ai-path, .ai-loop { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; padding:0; margin:1rem 0; list-style:none; }
.ai-path li, .ai-loop li { min-width:0; margin:0; padding:.8rem; border:1px solid var(--bf-border); border-radius:7px; background:white; font-size:.85rem; }
.ai-path strong, .ai-loop strong { display:block; margin-bottom:.35rem; }
.ai-path span, .ai-loop span { display:block; font-size:.78rem; line-height:1.6; color:var(--bf-muted); }
.ai-diagram svg { display:block; width:100%; height:auto; }
.ai-diagram svg text { font-size:14px; }
.ai-note { padding:1rem; background:#edf5f4; border-left:3px solid var(--ai-teal); font-size:.88rem; }
.ai-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin:1rem 0; }
.ai-grid > *, .ai-grid figure { min-width:0; margin:0; }
.ai-chart { display:block; width:100%; overflow:hidden; }
.ai-grid h4 { margin:.7rem 0 .5rem; font-size:.9rem; }
.ai-legend { display:flex; gap:.6rem 1.1rem; flex-wrap:wrap; margin:.5rem 0 1rem; font-size:.78rem; }
.ai-legend span::before { content:''; display:inline-block; width:1.1rem; height:3px; margin-right:.35rem; vertical-align:middle; background:var(--line-color); }
.ai-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem 1.5rem; }
.ai-controls label { font-size:.85rem; font-weight:400; display:block; margin:.4rem 0; }
.ai-controls select { display:block; width:100%; min-width:0; margin:.35rem 0 0; font-size:16px; padding:.4rem; border:1px solid #becbd5; border-radius:5px; background:#fff; }
.ai-controls input[type=range], .ai-replay input { display:block; width:100%; accent-color:var(--ai-teal); min-height:32px; padding:0; margin:0; border:0; box-shadow:none; background:transparent; cursor:ew-resize; }
.ai-controls output { float:right; font-weight:600; font-variant-numeric:tabular-nums; }
.ai-readout { padding:1rem; background:#edf3f7; border-radius:7px; font-family:Monaco,Consolas,monospace; font-size:13px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
.ai-replay { margin:1rem 0; padding:.8rem 1rem; background:#edf5f4; border-radius:7px; }
.ai-replay label { font-size:.85rem; font-weight:400; }
.ai-replay output { font-weight:600; }
.ai-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ai-stat-label { font-size:.75rem; }
.ai-resources { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:1rem 0; }
.ai-resources a { display:block; padding:1rem; border:1px solid var(--bf-border); border-radius:7px; font-size:.85rem; }
.ai-resources small { display:block; margin-top:.3rem; color:var(--bf-muted); }
.ai-lesson details { margin:1rem 0; }
.ai-lesson summary { cursor:pointer; color:var(--bf-blue); font-size:.9rem; }
.ai-lesson .bf-console { margin:1rem 0; }
.ai-source { margin-top:1rem; }
.ai-source figcaption { color:var(--bf-muted); font-size:.8rem; }
.ai-source img { width:100%; height:auto; border:1px solid var(--bf-border); border-radius:8px; }
.ai-table { max-width:100%; overflow:auto; }
.ai-table table { font-size:.85rem; }
.ai-table th, .ai-table td { padding:.6rem; }
.ai-lesson button:disabled { cursor:wait; opacity:.6; }
@media(max-width:760px) { .ai-path, .ai-loop { grid-template-columns:repeat(2,minmax(0,1fr)); } .ai-grid { grid-template-columns:1fr; } .ai-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .ai-controls, .ai-resources { grid-template-columns:1fr; } .ai-intro, .ai-diagram { padding:.8rem; } .ai-diagram svg text { font-size:17px; } }