:root { --bg:#05060a; --ink:#f0ece4; --ink-dim:#a8a094; --ink-mute:#6b655c; --amber:#e8b96a; --cyan:#7df9ff; --line:rgba(240,236,228,.08); --line-strong:rgba(240,236,228,.16); }
.scene-ui { position: fixed; z-index: 50; pointer-events: none; }
.scene-ui.hidden { display: none !important; }
#ml-loss-hud { top: 5rem; right: 1.5rem; width: 260px; background: rgba(5,6,10,.85); border: 1px solid rgba(232,185,106,.35); border-radius: 12px; padding: 1rem 1.25rem; font-family: 'JetBrains Mono', monospace; backdrop-filter: blur(10px); }
#ml-loss-hud .ml-label { font-size: .6rem; color: var(--ink-mute); letter-spacing: .2em; text-transform: uppercase; margin-bottom: .4rem; }
#ml-loss-hud .ml-val { font-size: 1.8rem; color: var(--amber); font-weight: 600; line-height: 1; margin-bottom: .4rem; }
#ml-loss-hud .ml-sub { font-size: .7rem; color: var(--ink-dim); }
#ml-params-hud { top: 5rem; left: 1.5rem; width: 200px; background: rgba(5,6,10,.85); border: 1px solid rgba(125,249,255,.35); border-radius: 12px; padding: .9rem 1.1rem; font-family: 'JetBrains Mono', monospace; backdrop-filter: blur(10px); }
#ml-params-hud .row { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: .25rem; }
#ml-params-hud .k { color: var(--ink-mute); }
#ml-params-hud .v { color: var(--cyan); font-weight: 600; }
#ml-code { bottom: 8rem; left: 50%; transform: translateX(-50%); width: min(560px, 92vw); background: rgba(5,6,10,.94); border: 1px solid rgba(232,185,106,.4); border-radius: 12px; padding: 1rem 1.25rem; font-family: 'JetBrains Mono', monospace; font-size: .7rem; line-height: 1.55; color: var(--ink); backdrop-filter: blur(14px); max-height: 42vh; overflow-y: auto; box-shadow: 0 0 40px rgba(232,185,106,.15); }
#ml-code .kw { color: #c792ea; } #ml-code .num { color: #f78c6c; } #ml-code .str { color: #c3e88d; } #ml-code .com { color: #6b655c; font-style: italic; } #ml-code .fn { color: #82aaff; }
#ml-loss-chart { bottom: 8rem; right: 1.5rem; width: 200px; height: 100px; background: rgba(5,6,10,.88); border: 1px solid var(--line-strong); border-radius: 10px; padding: .5rem; }
#ml-loss-chart canvas { width: 100%; height: 100%; display: block; }
#ml-progress { bottom: 8rem; left: 50%; transform: translateX(-50%); width: min(420px, 86vw); background: rgba(5,6,10,.85); border: 1px solid var(--line-strong); border-radius: 100px; padding: .5rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: .7rem; display: flex; align-items: center; gap: .75rem; }
#ml-progress .bar { flex: 1; height: 4px; background: rgba(240,236,228,.1); border-radius: 2px; overflow: hidden; }
#ml-progress .bar > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--amber), var(--cyan)); transition: width .15s linear; }
#ml-progress .t { color: var(--ink-dim); }

/* ═══════════════════════════════════════════════════════════
   LAYOUT: mobile — no overlaps between any overlays
   Top:    params (left) + loss (right), gap ≥ 15px
   Bottom: progress (left) + chart (right), gap ≥ 10px
   All above subtitle (which sits at bottom: 5.5rem)
   ═══════════════════════════════════════════════════════════ */

/* Desktop clean base */
#ml-progress {
  bottom: 12rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(420px, 86vw);
}
#ml-loss-chart {
  bottom: 12rem;
  right: 1.5rem;
  left: auto;
  transform: none;
  width: 200px;
  height: 100px;
}
#ml-code {
  bottom: 12rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(560px, 92vw);
  max-height: 38vh;
  overflow-y: auto;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  /* Top row — side by side, no overlap */
  #ml-params-hud {
    top: 3.5rem;
    left: 0.5rem;
    right: auto;
    width: calc(40vw - 0.5rem);
    padding: 0.5rem 0.55rem;
  }
  #ml-params-hud .row { font-size: 0.68rem; margin-bottom: 0.2rem; }
  #ml-params-hud .k { font-size: 0.62rem; }
  #ml-params-hud .v { font-size: 0.7rem; }

  #ml-loss-hud {
    top: 3.5rem;
    right: 0.5rem;
    left: auto;
    width: calc(55vw - 0.5rem);
    padding: 0.5rem 0.55rem;
  }
  #ml-loss-hud .ml-label { font-size: 0.52rem; margin-bottom: 0.25rem; }
  #ml-loss-hud .ml-val { font-size: 1.05rem; margin-bottom: 0.2rem; }
  #ml-loss-hud .ml-sub { font-size: 0.52rem; }

  /* Bottom row — progress left, chart right */
  #ml-progress {
    bottom: 12rem;
    left: 0.5rem;
    right: auto;
    width: calc(55vw - 0.5rem);
    transform: none;
    font-size: 0.56rem;
    padding: 0.35rem 0.5rem;
    gap: 0.4rem;
  }
  #ml-progress .t { font-size: 0.55rem; }

  #ml-loss-chart {
    bottom: 12rem;
    right: 0.5rem;
    left: auto;
    transform: none;
    width: calc(40vw - 0.5rem);
    height: 68px;
    padding: 0.3rem;
  }

  /* Code panel — full width, above subtitle */
  #ml-code {
    bottom: 12rem;
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    transform: none;
    max-height: 28vh;
    font-size: 0.56rem;
    padding: 0.6rem 0.75rem;
    line-height: 1.45;
  }
}

/* ── Very narrow (small phones) ── */
@media (max-width: 360px) {
  #ml-params-hud { width: calc(38vw - 0.5rem); }
  #ml-loss-hud   { width: calc(58vw - 0.5rem); }
  #ml-loss-hud .ml-val { font-size: 0.95rem; }
  #ml-progress   { width: calc(55vw - 0.5rem); font-size: 0.52rem; }
  #ml-loss-chart { width: calc(40vw - 0.5rem); height: 60px; }
}

/* ═══ #ml-code interactivity — allow touch/scroll, block camera ═══ */
#ml-code {
  pointer-events: auto !important;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  user-select: text;
  -webkit-user-select: text;
  cursor: auto;
}
#ml-code pre {
  user-select: text;
  -webkit-user-select: text;
}
#ml-code::-webkit-scrollbar {
  width: 6px;
}
#ml-code::-webkit-scrollbar-thumb {
  background: rgba(232,185,106,0.5);
  border-radius: 3px;
}
#ml-code::-webkit-scrollbar-track {
  background: rgba(240,236,228,0.05);
}


.code-line {
  display: block;
  padding: 1px 5px;
  border-left: 2px solid transparent;
  margin: 0 -5px;
  white-space: pre;
  transition: background 0.25s, border-left-color 0.25s, opacity 0.25s;
}
.code-line.highlight {
  background: rgba(232,185,106,0.16);
  border-left-color: #e8b96a;
  color: #fff;
}
.code-line.dimmed {
  opacity: 0.32;
}