* { box-sizing: border-box; }
/* 15 px: por videollamada comprimida 13 px se lee mal en las pantallas chicas */
body { margin:0; font:15px/1.35 -apple-system,system-ui,sans-serif; background:#fff; color:#333; overflow:hidden; }
#ui { position:fixed; top:0; left:0; width:262px; height:100%; padding:12px 14px; background:#f7f7f7;
      border-right:1px solid #ddd; overflow-y:auto; }
/* sin uppercase: convertía f(x1,x2) en F(X1,X2) y el panel y el rótulo del eje 3D
   escribían distinto la misma cosa */
h2 { font-size:12px; letter-spacing:.04em; color:#666; margin:10px 0 4px;
     border-top:1px solid #e2e2e2; padding-top:8px; }
#viewBtns button { font-size:12.5px; line-height:1.2; padding:4px; }
h2:first-child { margin-top:0; border:0; padding-top:0; }
select, button { width:100%; padding:5px 6px; font:inherit; margin-bottom:6px; }
button { cursor:pointer; }
input[type=range] { width:100%; margin:2px 0 4px; }
label { display:block; margin:5px 0 1px; color:#555; }
/* #999 sobre #f7f7f7 no llega a AA; #555 da ~7:1 */
.val { float:right; color:#555; font-variant-numeric:tabular-nums; }
.row { display:flex; gap:8px; align-items:center; margin:5px 0; }
.row input[type=checkbox] { margin:0; }
.row button { margin:0; }
.hint { color:#767676; font-size:12px; margin-top:12px; line-height:1.45; }
kbd { background:#eee; border:1px solid #ccc; border-radius:3px; padding:0 4px; font-size:12px; }
.neuron { border:1px solid #e0e0e0; border-radius:4px; padding:7px; margin-bottom:7px; background:#fff; }
.neuron b { font-size:12px; color:#666; }
.neuron label { margin:3px 0 0; font-size:13px; }
/* ---- pestañas: cada una es una herramienta distinta, no un "modo" de la misma ----
   El desplegable de modo obligaba a textos del tipo "acá la altura significa otra cosa".
   Con dos pestañas la pregunta no existe: la pestaña ES el modo. */
#tabs { display:flex; gap:0; margin:0 0 10px; }
#tabs button { margin:0; padding:8px 6px; font-size:14px; font-weight:600; line-height:1.15;
               background:#e9e9e9; color:#555; border:1px solid #c4c4c4; border-bottom:3px solid #c4c4c4; }
#tabs button:first-child { border-radius:5px 0 0 0; }
#tabs button:last-child { border-radius:0 5px 0 0; border-left:0; }
#tabs button:hover { background:#dfe9f4; color:#333; }
#tabs button.on { background:#0a6ebd; border-color:#0a6ebd; border-bottom-color:#074f88; color:#fff; }
body.tab-feature .onlyNeuron, body.tab-neuron .onlyFeature { display:none; }
/* ---- presets de clase: siempre visibles, arriba de todo ---- */
.presets { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:8px; }
.presets button { margin:0; padding:5px 6px; font-size:12.5px; line-height:1.2; text-align:left;
                  background:#fff; border:1px solid #c4c4c4; border-radius:4px; color:#333; }
.presets button:hover { background:#eaf2fb; }
.presets button.on { background:#0a6ebd; border-color:#0a6ebd; color:#fff; font-weight:600; }
.presets button:last-child { grid-column:1 / -1; }
/* ---- plegados: el panel entero no entra en 768 px y la clase usa 6 controles ---- */
details { margin:6px 0; border-top:1px solid #e2e2e2; padding-top:7px; }
summary { cursor:pointer; color:#555; font-size:13px; padding:1px 0; }
summary:hover { color:#000; }
.sub { font-size:12px; color:#666; margin:8px 0 3px; }
/* curva de error: un número que baja de a 0.0001 no comunica; la forma sí */
#spark { display:block; width:100%; height:40px; background:#fff;
         border:1px solid #dcdcdc; border-radius:3px; margin:4px 0 6px; }
/* ReLU muerta: sus 4 gradientes son exactamente 0 para siempre. Sin aviso, la
   pérdida se estanca sin explicación; con aviso, es un momento didáctico. */
.neuron.dead { border-color:#c0392b; }
.neuron .dead-msg { display:none; color:#c0392b; font-size:11px; margin-top:4px; }
.neuron.dead .dead-msg { display:block; }
/* el peso real se fue del rango del slider: el slider miente, el número no */
.val.out { color:#c0392b; }
.hidden { display:none; }
/* métricas sobre el canvas: es lo único que la clase mira mientras entrena,
   no puede vivir al final de un panel que scrollea */
/* el canvas de Three se agrega al body después de estos nodos: sin z-index los tapa */
#hud, #ctx { z-index:2; }
#hud { position:fixed; top:16px; left:286px; font-variant-numeric:tabular-nums;
       font-size:28px; color:#333; pointer-events:none; letter-spacing:-.01em; }
#hud span { color:#aaa; font-size:20px; }
#hud b { font-weight:600; }
#ctx { position:fixed; bottom:14px; left:286px; right:24px; max-width:1180px;
       font-size:15px; line-height:1.45; color:#444; text-wrap:pretty;
       background:rgba(255,255,255,.82); border-left:3px solid #0a6ebd; padding:8px 12px;
       border-radius:0 4px 4px 0;
       pointer-events:none; }
input:disabled + label, .off { color:#bbb; }