.learning-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding:14px 22px; border-bottom:1px solid var(--line); }
.learning-note { color:var(--muted); font-size:.88rem; line-height:1.65; }
.learning-companion { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); gap:24px; padding:22px; border-top:1px solid var(--line); }
.learning-companion h3 { margin:0 0 8px; }
.live-code { min-width:0; }
.live-code summary,.approach-comparison>summary,.memory-inspector>summary { cursor:pointer; font-weight:650; padding:8px 0; }
.live-code .code-panel { margin:12px 0 0; }
.live-code pre { max-height:350px; overflow:auto; font-size:.86rem; }
.reference-line { display:grid; grid-template-columns:2.6em max-content; gap:1em; min-width:100%; width:max-content; border-left:3px solid transparent; padding:1px 12px 1px 2px; margin-left:-2px; }
.reference-line .line-number { color:#90959e; text-align:right; user-select:none; }
.code-current { border-left-color:#b3a2ff; background:rgba(152,130,237,.22); }
.code-variable { background:#6b5c12; color:#fff9c7; outline:1px solid #baa455; border-radius:2px; }
.trace-variables { display:flex; flex-wrap:wrap; gap:8px; max-height:350px; overflow:auto; padding:3px; }
.trace-variable { display:flex; flex-direction:column; text-align:left; max-width:100%; min-width:100px; gap:3px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:9px 12px; }
.trace-variable code { overflow-wrap:anywhere; white-space:pre-wrap; font-size:.84rem; }
.trace-variable small { color:var(--muted); font-size:.72rem; }
.trace-variable.selected { border-color:var(--primary); box-shadow:0 0 0 2px rgba(147,130,237,.24); }
.variable-selected { outline:2px solid #dba82f; outline-offset:3px; border-radius:5px; }
svg .variable-selected { outline:none; filter:drop-shadow(0 0 4px #dba82f); }
svg g.variable-selected circle { stroke:#dba82f; stroke-width:4; }
.learning-focus-dialog { width:calc(100vw - 28px); height:calc(100dvh - 28px); max-width:none; max-height:none; border:1px solid var(--line); border-radius:14px; padding:0; background:var(--paper); color:var(--ink); overflow:auto; }
.learning-focus-dialog::backdrop { background:rgba(0,0,0,.78); }
.learning-focus-dialog .lab { margin:0; border:0; border-radius:0; }
.learning-focus-dialog .learning-toolbar { position:sticky; top:0; z-index:20; background:var(--paper); }
.learning-focus-dialog .animation-controls { position:sticky; top:var(--focus-toolbar-height,80px); bottom:0; z-index:15; background:var(--paper); box-shadow:0 -2px 12px #0002; }
.learning-focus-dialog .visual-stage { min-height:46dvh; max-height:58dvh; overflow:auto; }
/* Compact recursive views include the graph, values and explanation in one
   stage. Keep them in normal flow instead of spilling into the legend when
   a later playback frame becomes taller. Full-tree views still scroll. */
.learning-focus-dialog .visual-stage.focus-stage { max-height:none; }
.learning-focus-dialog .visual-stage > * { flex-shrink:0; }
.focus-settings { border-bottom:1px solid var(--line); }
.focus-settings>summary { cursor:pointer; color:var(--muted); padding:12px 22px; font-size:.88rem; }
.in-focus-mode #input-error:empty,.in-focus-mode #nn-error:empty { display:none; }
.learning-focus-dialog .lab-workspace { grid-template-columns:minmax(0,1fr) 290px; }
.learning-focus-dialog .ai-playback { position:sticky; top:var(--focus-toolbar-height,80px); z-index:10; background:var(--paper); padding:14px; }
.learning-focus-dialog [role=tabpanel] { padding:16px; }
.learning-focus-dialog .ai-chart-grid,.learning-focus-dialog .nn-visual-grid { grid-template-columns:minmax(0,1.8fr) minmax(250px,.7fr); }
.memory-inspector { margin-top:20px; font-size:.86rem; }
.memory-inspector h4 { color:var(--muted); font-size:.78rem; margin:18px 0 8px; }
.memory-call { border:1px solid var(--line); border-radius:8px; margin:7px 0; padding:9px; display:flex; flex-direction:column; gap:5px; overflow-wrap:anywhere; }
.memory-call.active { border-color:var(--primary); }
.memory-call dl { margin:0; }
.memory-call dl>div { display:flex; flex-wrap:wrap; gap:8px; }
.memory-call dt { color:var(--muted); }
.memory-call dd { margin:0; }
.memory-call small { color:var(--muted); }
.approach-comparison { padding:20px 22px; border-top:1px solid var(--line); }
.comparison-choices,.comparison-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.comparison-choices label,.complexity-inputs label { display:flex; flex-direction:column; gap:6px; font-size:.9rem; }
.comparison-choices select,.complexity-inputs input,.complexity-inputs select { padding:9px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); max-width:100%; }
.comparison-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.comparison-columns>section { min-width:0; border:1px solid var(--line); border-radius:12px; padding:14px; }
.comparison-columns h3 { margin:0 0 12px; }
.comparison-stage { height:330px; overflow:auto; padding:12px; border:1px solid var(--line); border-radius:8px; }
.comparison-stage .array-row { justify-content:flex-start; }
.comparison-explanation { min-height:4.5em; font-size:.9rem; }
.comparison-controls label { flex:1; min-width:80px; }
.comparison-controls input { width:100%; accent-color:var(--primary); }
.comparison-error,#growth-error { color:#d95757; }
.neural-live-code { padding:22px; border:1px solid var(--line); border-radius:12px; }
.neural-live-code .trace-variables { margin:16px 0; }
.complexity-inputs { display:grid; grid-template-columns:180px minmax(180px,1fr) minmax(220px,.8fr); gap:24px; align-items:center; }
.complexity-inputs input[type=range] { padding:0; accent-color:var(--primary); }
.growth-choices { display:flex; flex-wrap:wrap; gap:18px; margin:24px 0; padding:15px; border:1px solid var(--line); border-radius:9px; }
.growth-choices label { display:flex; align-items:center; gap:8px; }
.growth-choices span { border-bottom:3px solid; }
#growth-chart svg { display:block; width:100%; height:auto; min-width:400px; }
#growth-chart { overflow:auto; }
#growth-chart text { fill:var(--ink); font-size:12px; }
.growth-table { width:100%; border-collapse:collapse; }
.growth-table td,.growth-table th { padding:12px; border-bottom:1px solid var(--line); text-align:left; }
.growth-table caption { text-align:left; margin:14px 0; font-weight:650; }
@media (max-width:900px) {
  .learning-companion,.comparison-columns,.complexity-inputs { grid-template-columns:minmax(0,1fr); }
  .learning-focus-dialog .lab-workspace,.learning-focus-dialog .ai-chart-grid,.learning-focus-dialog .nn-visual-grid { grid-template-columns:minmax(0,1fr); }
  .learning-focus-dialog .visual-stage { min-height:38dvh; }
  .learning-focus-dialog .inspector { border-left:0; border-top:1px solid var(--line); }
  .learning-focus-dialog .ai-panel { padding:14px; }
  .learning-focus-dialog .section-line h2 { font-size:1.1rem; }
  .learning-focus-dialog .ai-playback { gap:7px; padding:9px 0; }
  .learning-focus-dialog .ai-playback .btn { min-height:44px; padding:8px 10px; font-size:.85rem; }
  .learning-toolbar,.learning-companion,.approach-comparison { padding:14px; }
  .learning-focus-dialog { width:100vw; height:100dvh; border-radius:0; }
  .trace-variables { max-height:220px; }
}
@media (prefers-reduced-motion:reduce) { .learning-focus-dialog * { scroll-behavior:auto!important; } }