.pi-lesson { --pi-teal:#187568; --pi-orange:#b76819; --pi-purple:#7950a0; }
.pi-lesson h2 { margin-top:2.5rem; }
.pi-note, .pi-path { padding:1rem 1.2rem; margin:1.25rem 0; background:#f1f7f8; border:1px solid var(--bf-border); border-radius:9px; }
.pi-path { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; padding:1rem; }
.pi-path > div { min-width:0; padding:.8rem; background:white; border:1px solid var(--bf-border); border-radius:6px; }
.pi-path strong, .pi-path span { display:block; }
.pi-path strong { color:var(--pi-teal); font-size:.9rem; }
.pi-path span { margin-top:.5rem; font-size:.8rem; line-height:1.6; }
.pi-grid, .pi-plots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin:1rem 0; }
.pi-grid > *, .pi-plots > * { min-width:0; }
.pi-plots figure { margin:0; }
.pi-network, .pi-chart { display:block; width:100%; }
.pi-network text { paint-order:stroke fill; stroke:white; stroke-width:3px; stroke-linejoin:round; }
.pi-lesson h4 { font-size:.95rem; }
.pi-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem 1rem; }
.pi-controls label { display:block; font-size:.85rem; font-weight:400; margin:.35rem 0; }
.pi-controls select { width:100%; min-width:0; display:block; margin:.35rem 0 0; padding:.4rem; border:1px solid #becbd5; border-radius:5px; background:white; font-size:16px; }
.pi-controls output { float:right; font-weight:600; font-variant-numeric:tabular-nums; }
.pi-controls input[type=range] { width:100%; min-height:32px; display:block; padding:0; margin:0; border:0; box-shadow:none; background:transparent; accent-color:var(--pi-teal); cursor:ew-resize; }
.pi-check { display:flex; align-items:flex-start; gap:.5rem; font-size:.85rem; font-weight:400; margin:1rem 0; }
.pi-check input { margin:.3rem 0 0; accent-color:var(--pi-teal); }
.pi-table-wrap { max-width:100%; overflow:auto; }
.pi-table { width:100%; font-size:.8rem; font-variant-numeric:tabular-nums; margin:.8rem 0; }
.pi-table th, .pi-table td { padding:.5rem; text-align:right; white-space:nowrap; }
.pi-table th:first-child, .pi-table td:first-child { text-align:left; }
.pi-table tr[data-selected=true] { background:#eaf4ef; }
.pi-table button { font:inherit; padding:.25rem .45rem; border:1px solid #b8c9c5; border-radius:4px; background:white; color:#245e53; cursor:pointer; }
.pi-badge { display:inline-block; padding:.2rem .4rem; border-radius:4px; background:#eef1f4; color:#53626d; font-size:.78rem; }
.pi-badge[data-state=safe] { color:#215844; background:#e4f1e8; }
.pi-badge[data-state=unsafe] { color:#9c2430; background:#fde9e8; }
.pi-false-safe { display:block; margin-top:.2rem; font-size:.72rem; color:#a82632; }
.pi-legend { display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin:.5rem 0; font-size:.8rem; }
.pi-legend span::before { content:''; display:inline-block; width:1rem; height:3px; margin-right:.35rem; vertical-align:middle; background:var(--line-color); }
.pi-console { padding:1rem; background:#eef3f7; font-family:Monaco,Consolas,monospace; font-size:13px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.pi-model-preview { max-height:20rem; overflow:auto; }
.pi-loss-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin:1rem 0; }
.pi-loss-stats > div { padding:.7rem; background:#edf5f4; border-radius:6px; }
.pi-loss-stats span { display:block; font-size:.78rem; }
.pi-loss-stats strong { display:block; font-size:1rem; font-variant-numeric:tabular-nums; }
.pi-lesson summary { cursor:pointer; color:var(--bf-blue); font-size:.9rem; }
.pi-lesson details { margin:1rem 0; }
.pi-lesson button:disabled { opacity:.6; cursor:wait; }
@media(max-width:800px) { .pi-grid { grid-template-columns:1fr; } .pi-path { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .pi-plots { grid-template-columns:1fr; } .pi-loss-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .pi-controls { grid-template-columns:1fr; } .pi-path { gap:.5rem; padding:.7rem; } }