/* Physarum — slime mould on a canvas
   ----------------------------------------------------------------------
   Added 2026-10-05. Self-contained and additive: every selector here is
   scoped under #slime, so it cannot reach anything already on the page.

   The panel is near-black with an amber palette, which isn't a theme
   choice — Physarum polycephalum really is that yellow. */

#slime{
  background:var(--bg);
  border-top:1px solid var(--border);
}

#slime .sl-intro{
  max-width:62ch;
  color:var(--muted);
}

#slime .sl-console{
  /* identity, handed to the shared .panel system */
  --panel-top:#131116;
  --panel-bottom:#08080b;
  --panel-rim:rgba(255,220,150,.09);
  --panel-ink:#f3e9d4;
  --panel-dim:#9a8e78;
  --panel-accent:#f0a81f;
  --panel-accent-soft:rgba(240,168,31,.65);
  --panel-btn-top:#2a241a;
  --panel-btn-bottom:#1b1711;
  --panel-btn-on-top:#5a3d08;
  --panel-btn-on-bottom:#3d2905;

  --sl-line:rgba(255,220,150,.14);
  --sl-ink:#f3e9d4;
  --sl-dim:#9a8e78;
  --sl-amber:#f0a81f;

  margin-top:var(--space-m);
  padding:clamp(14px, 2.6vw, 22px);
}

/* ---------- the field ---------- */

#slime .sl-stage{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#07060a;
  border:1px solid var(--sl-line);
  aspect-ratio:3 / 2;
}

/* The canvas renders at a fixed 480x320 and is scaled to fit; the
   upscale softening suits the subject, so smoothing is left on. */
#slime .sl-stage canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;      /* dragging food shouldn't pan the page */
  cursor:crosshair;
}

#slime .sl-status{
  min-height:1.4em;
  margin:9px 2px 0;
  font-size:var(--fs-sm);
  color:var(--sl-dim);
}

/* ---------- transport ---------- */

#slime .sl-transport{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin-bottom:14px;
}

/* Chrome is .panel-* in panel.css. */
/* ---------- sliders ---------- */

#slime .sl-knobs{
  display:grid;
  gap:8px 18px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--sl-line);
}

#slime .sl-knobs label{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:var(--fs-xs);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--sl-dim);
}

#slime .sl-knobs input[type="range"]{ flex:1 1 50px; min-width:50px; }

#slime .panel-num{ min-width:4.2ch; }

/* ---------- footnotes ---------- */

#slime .sl-note{
  margin:14px 0 0;
  padding-top:14px;
  border-top:1px solid var(--sl-line);
  font-size:var(--fs-md);
  color:var(--sl-dim);
}

#slime .sl-note a{ color:#ffc75a; }

#slime .sl-foot{
  margin-top:var(--space-s);
  font-size:var(--fs-md);
  color:var(--muted);
}

#slime .sl-nojs{
  margin:var(--space-s) 0 0;
  font-size:var(--fs-md);
  color:var(--muted);
}
#slime.sl-ready .sl-nojs{ display:none; }

/* The cross-wire toggle: #slime listening to #euclid's beats. */
#slime .sl-listen{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:var(--fs-xs);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--sl-dim);
  cursor:pointer;
  white-space:nowrap;
}