.gnn-lesson { --gnn-teal:#187568; --gnn-orange:#b76819; --gnn-purple:#7950a0; }
.gnn-lesson h2 { margin-top:2.5rem; }
.gnn-note, .gnn-path { margin:1.25rem 0; padding:1rem 1.2rem; border:1px solid var(--bf-border); border-radius:9px; background:#f1f7f8; }
.gnn-path { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; padding:1rem; }
.gnn-path > div { min-width:0; padding:.8rem; background:white; border:1px solid var(--bf-border); border-radius:6px; }
.gnn-path strong, .gnn-path span { display:block; }
.gnn-path strong { font-size:.9rem; color:var(--gnn-teal); }
.gnn-path span { margin-top:.5rem; font-size:.8rem; line-height:1.6; }
.gnn-lab-top { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); gap:1.5rem; margin:1rem 0; align-items:start; }
.gnn-network { width:100%; display:block; }
.gnn-network .gnn-node { cursor:pointer; outline:none; }
.gnn-network .gnn-node:focus-visible circle { stroke:var(--gnn-orange); stroke-width:4; }
.gnn-network text { paint-order:stroke fill; stroke:white; stroke-width:3px; stroke-linejoin:round; }
.gnn-chart { display:block; width:100%; }
.gnn-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin:1rem 0; }
.gnn-pair > *, .gnn-lab-top > * { min-width:0; }
.gnn-pair figure, .gnn-lab-top figure { margin:0; }
.gnn-lesson h4 { font-size:.95rem; }
.gnn-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem 1.1rem; }
.gnn-controls label, .gnn-coefficients label, .gnn-replay label { display:block; margin:.35rem 0; font-size:.85rem; font-weight:400; }
.gnn-controls output, .gnn-coefficients output { float:right; font-weight:600; font-variant-numeric:tabular-nums; }
.gnn-controls select { display:block; width:100%; margin:.35rem 0 0; padding:.4rem; min-width:0; border:1px solid #becbd5; border-radius:5px; background:white; font-size:16px; }
.gnn-controls input[type=range], .gnn-coefficients input, .gnn-replay input { display:block; width:100%; min-height:32px; padding:0; margin:0; border:0; box-shadow:none; background:transparent; accent-color:var(--gnn-teal); cursor:ew-resize; }
.gnn-coefficients { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.gnn-switches { display:flex; flex-wrap:wrap; gap:.3rem 1rem; margin:.8rem 0; }
.gnn-switches label { display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; font-weight:400; min-height:35px; margin:0; }
.gnn-switches input { margin:0; accent-color:var(--gnn-teal); }
.gnn-replay { margin:1rem 0; padding:.9rem 1rem; background:#edf5f4; border-radius:7px; }
.gnn-replay strong { color:var(--gnn-teal); }
.gnn-readout { padding:1rem; white-space:pre-wrap; overflow-wrap:anywhere; background:#eef3f7; font-family:Monaco,Consolas,monospace; font-size:13px; line-height:1.8; }
.gnn-table { width:100%; font-size:.8rem; font-variant-numeric:tabular-nums; margin:.8rem 0; }
.gnn-table th, .gnn-table td { padding:.45rem; white-space:nowrap; text-align:right; }
.gnn-table th:first-child, .gnn-table td:first-child { text-align:left; }
.gnn-table tr[data-focus=true] { background:#eaf4ef; }
.gnn-table-wrap { max-width:100%; overflow-x:auto; }
.gnn-legend { display:flex; flex-wrap:wrap; gap:.6rem 1rem; font-size:.8rem; margin:.5rem 0 1rem; }
.gnn-legend span::before { content:''; display:inline-block; width:1rem; height:3px; margin-right:.35rem; vertical-align:middle; background:var(--line-color); }
.gnn-weights { font-size:12px; max-height:12rem; overflow:auto; white-space:pre-wrap; }
.gnn-learning { padding:1.25rem; margin:1.5rem 0; border:1px solid var(--bf-border); border-radius:12px; background:#f7fafc; }
.gnn-learning .bf-code-actions { margin-top:.7rem; }
.gnn-learning button:disabled { cursor:wait; opacity:.65; }
.gnn-lesson summary { cursor:pointer; color:var(--bf-blue); font-size:.9rem; }
.gnn-lesson details { margin:1rem 0; }
.gnn-code-guide { margin:.8rem 0; font-size:.9rem; }
.gnn-lesson [data-case-preview] { max-height:22rem; overflow:auto; }
@media(max-width:800px) { .gnn-lab-top { grid-template-columns:1fr; } .gnn-path { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .gnn-pair { grid-template-columns:1fr; } }
@media(max-width:480px) { .gnn-controls { grid-template-columns:1fr; } .gnn-coefficients { grid-template-columns:1fr; } .gnn-learning { padding:.8rem; } .gnn-path { padding:.7rem; gap:.6rem; } }