:root {
  /* ── Colors ──────────────────────────── */
  --bg:         #f5f6f8;
  --panel:      #ffffff;
  --plot-bg:    #eef0f5;
  --border:     #dde2ed;
  --text-1:     #1c2033;
  --text-2:     #515978;
  --text-3:     #8a94b2;
  --accent:      #5469d4;
  --accent-dim:  #eef1fb;
  --accent-warm: #7c5cbf;            /* t-SNE: warm violet */
  --accent-warm-dim: #f0ebfa;
  --code-bg:    #f0f2f8;
  --header:     #1c2033;
  --track:      #d4d9ec;
  --shadow-card: 0 2px 20px color-mix(in srgb, var(--text-1) 10%, transparent);

  /* Dark-surface tokens (modals, data table) */
  --dark-surface: #252a40;
  --dark-text:    #e2e6f0;
  --dark-text-2:  #c8d0e8;
  --dark-border:  rgba(255, 255, 255, 0.08);
  --modal-overlay: rgba(28, 32, 51, 0.55);

  /* ── Type scale (4 categories) ──────── */
  --font-footnote: 0.75rem;   /* 11.25px */
  --font-body:     0.867rem;  /* 13px    */
  --font-ui:       0.933rem;  /* 14px    */
  --font-title:    1.067rem;  /* 16px    */

  /* ── Spacing ─────────────────────────── */
  --gap-section: 0.875rem;   /* sidebar section gap */

  /* ── Radii ───────────────────────────── */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  /* ── Shared dropdown arrow SVG ───────── */
  --arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a94b2' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-1);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.5;
}

/* ── Header ──────────────────────────────── */
header {
  height: 48px;
  padding: 0 1.5rem;
  background: var(--header);
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  flex-shrink: 0;
  position: relative;
  border-bottom: 2px solid var(--accent);
}

.header-home {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  cursor: pointer;
  transition: opacity 0.15s;
}

.header-home:hover { opacity: 0.75; }

h1 {
  font-size: var(--font-title);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
}

.header-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-footnote);
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.01em;
  padding-top: 1px;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-icon-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.45);
  font-size: 1rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
}

.header-icon-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
}

.header-icon-btn.active {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}

/* ── Plot style dropdown (from header ⚙) ─── */
.plot-settings-dropdown {
  position: absolute;
  top: 100%;
  right: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0.625rem 0.875rem;
  min-width: 230px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

.plot-settings-dropdown[hidden] { display: none; }

/* ── Main layout ─────────────────────────── */
main {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* ── Controls panel ──────────────────────── */
#controls {
  width: 290px;
  min-width: 250px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 1rem;
  overflow-y: auto;          /* scrollable content */
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  transition: width 0.25s ease, padding 0.25s ease, min-width 0.25s ease;
}

#controls.collapsed {
  width: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;          /* hide content while collapsing */
}

/* ── Sidebar toggle ──────────────────────── */
.sidebar-toggle {
  position: absolute;
  left: 290px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 20px;
  height: 48px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  color: var(--text-3);
  font-size: var(--font-ui);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.25s ease, color 0.15s;
  padding: 0;
  line-height: 1;
}

.sidebar-toggle:hover { color: var(--accent); }
.sidebar-toggle.collapsed { left: 0; }

/* ── Sidebar tabs ────────────────────────── */
.sidebar-tabs {
  display: flex;
  flex-shrink: 0;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}

.sidebar-tab {
  flex: 1;
  padding: 0.45rem 0.5rem;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius) - 2px);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-ui);
  font-weight: 700;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-align: center;
  line-height: 1.3;
}

.sidebar-tab.active {
  background: var(--accent);
  color: #fff;
}

.sidebar-tab:hover:not(.active) {
  background: var(--accent-dim);
  color: var(--accent);
}

.tab-content { display: flex; flex-direction: column; gap: var(--gap-section); }
.tab-content[hidden] { display: none; }

/* ── Section explainers (UMAP + HDBSCAN) ─── */
.section-explainer {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--code-bg);
}

.section-explainer summary {
  cursor: pointer;
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text-2);
  padding: 0.55rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  user-select: none;
  list-style: none;
}

.section-explainer summary::-webkit-details-marker { display: none; }

.section-explainer summary::before {
  content: '▸';
  font-size: var(--font-footnote);
  color: var(--text-3);
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.section-explainer[open] summary::before { transform: rotate(90deg); }

.section-explainer p {
  font-size: var(--font-body);
  line-height: 1.6;
  color: var(--text-2);
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--border);
}

/* ── Explainer links ─────────────────────── */
.explainer-links {
  display: flex;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem 0.5rem;
  border-top: 1px solid var(--border);
}

.explainer-links a {
  font-size: var(--font-body);
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.explainer-links a:hover { text-decoration: underline; }

/* ── Dataset field ───────────────────────── */
.field-label {
  display: block;
  font-size: var(--font-footnote);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 0.3rem;
}

select {
  width: 100%;
  padding: 0.45rem 2rem 0.45rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text-1);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-ui);
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--arrow-svg);
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
}

select:focus, select:hover { border-color: var(--accent); }

/* ── Dataset info card ───────────────────── */
.dataset-info {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dataset-stats {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-footnote);
  color: var(--text-3);
}

.dataset-stats .stat-sep { margin: 0 0.3em; }

.dataset-desc {
  font-size: var(--font-body);
  color: var(--text-2);
  line-height: 1.5;
}

/* ── Parameters divider ──────────────────── */
.params-divider {
  font-size: var(--font-footnote);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.params-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Method-specific param sections ─────────────────────────────────────── */
#umap-params, #tsne-params, #pca-params {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}

#umap-params[hidden], #tsne-params[hidden], #pca-params[hidden] { display: none; }

/* ── Control groups ──────────────────────── */
.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.param-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text-2);
}

/* Shared base: value badge and editable input */
.param-value,
.param-input {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-ui);
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  text-align: center;
}

/* Read-only value badge (UMAP sliders) */
.param-value {
  background: var(--accent-dim);
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-sm);
  min-width: 3ch;
}

/* Auto toggle for min_samples */
.param-auto {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-footnote);
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-3);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
  line-height: 1.4;
}
.param-auto.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

/* Editable numeric input (HDBSCAN) */
.param-input {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  padding: 0.1rem 0.5rem;
  width: 6.5ch;
  outline: none;
  cursor: text;
  transition: border-color 0.15s, background 0.15s;
  -moz-appearance: textfield;
}
.param-input::-webkit-outer-spin-button,
.param-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.param-input:hover  { border-color: var(--text-3); }
.param-input:focus  { border-color: var(--accent); background: var(--accent-dim); }
.param-input:disabled { opacity: 0.4; cursor: not-allowed; }

input[type="range"]:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Signature element: code-block param display */
.param-block {
  display: flex;
  align-items: center;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.625rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-ui);
  line-height: 1;
  gap: 0;
  cursor: default;
}

/* ── t-SNE warm accent (violet) ──────────── */
#method-tsne.active { background: var(--accent-warm); }

#perp-slider::-webkit-slider-thumb {
  background: var(--accent-warm);
  box-shadow: 0 0 0 1.5px var(--accent-warm);
}
#perp-slider::-moz-range-thumb {
  background: var(--accent-warm);
  box-shadow: 0 0 0 1.5px var(--accent-warm);
}

#perp-value {
  color: var(--accent-warm);
  background: var(--accent-warm-dim);
}

/* Full-width param select (metric, color_by) */
.param-select {
  width: 100%;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--code-bg);
  color: var(--text-1);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-ui);
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--arrow-svg);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.param-select:focus, .param-select:hover { border-color: var(--accent); }

/* Toggle inside param-block — flex:1 so it fills the block when used alone */
.param-block .toggle-group {
  display: flex;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.param-block .toggle {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border: none;
  background: var(--panel);
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-align: center;
  line-height: 1.3;
}

.param-block .toggle:not(:last-child) { border-right: 1px solid var(--border); }

.param-block .toggle.active {
  background: var(--accent);
  color: #fff;
}

.param-block .toggle:not(.active):hover {
  background: var(--accent-dim);
  color: var(--accent);
}

/* ── Sliders ─────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: var(--track);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--accent);
  cursor: pointer;
  transition: transform 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover  { transform: scale(1.25); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }

input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--accent);
  cursor: pointer;
}

/* ── Slider tick labels ───────────────────── */
.slider-ticks {
  position: relative;
  height: 1.1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-footnote);
  color: var(--text-3);
  margin-top: 0.1rem;
  user-select: none;
}

.slider-ticks span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ── Reset button ────────────────────────── */
.reset-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-body);
  cursor: pointer;
  padding: 0.15rem 0.45rem;
  line-height: 1.4;
  transition: color 0.15s, border-color 0.15s;
  margin-left: auto;
  flex-shrink: 0;
}

.reset-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Param ? tooltip icon ─────────────────── */
.param-q {
  margin-left: 0.4rem;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--text-3);
  color: #fff;
  font-size: var(--font-footnote);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  line-height: 1;
  transition: background 0.15s;
  user-select: none;
}

.param-q:hover { background: var(--accent); }

/* ── Tooltip bubble (created by JS at body level) */
.param-tip {
  position: fixed;
  background: var(--header);
  color: var(--dark-text);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-body);
  line-height: 1.55;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  max-width: 230px;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  pointer-events: none;
}

/* ── Bottom action buttons ───────────────── */
.bottom-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.action-btn {
  flex: 1;
  padding: 0.5rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-ui);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.action-btn:hover {
  background: var(--code-bg);
  border-color: var(--accent);
  color: var(--accent);
}

.action-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.ps-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ps-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-body);
  color: var(--text-3);
  min-width: 8ch;
  flex-shrink: 0;
}

.ps-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--accent);
  min-width: 3.5ch;
  text-align: right;
  flex-shrink: 0;
}

.ps-row input[type="range"] { flex: 1; }

/* ── Data table ──────────────────────────── */
.data-table-wrap {
  max-height: 70vh;
  overflow: auto;
}

.data-table {
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-body);
  white-space: nowrap;
  width: 100%;
}

.data-table th {
  position: sticky;
  top: 0;
  background: var(--dark-surface);
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  padding: 0.45rem 0.75rem;
  text-align: right;
  border-bottom: var(--dark-border);
  letter-spacing: 0.01em;
}

.data-table th:first-child,
.data-table th:nth-child(2) { text-align: left; }

.data-table td {
  padding: 0.3rem 0.75rem;
  color: var(--dark-text-2);
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.data-table td:first-child { color: rgba(255,255,255,0.3); text-align: left; }
.data-table td:nth-child(2) { color: var(--dark-text); text-align: left; }

.data-table tr:hover td { background: rgba(255,255,255,0.04); }

.data-footer {
  padding: 0.375rem 1rem;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-footnote);
  color: rgba(255,255,255,0.28);
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

/* ── Code / data modals ──────────────────── */
.code-modal {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(2px);
}

.code-modal[hidden] { display: none; }

.code-modal-box {
  background: #1e2235;
  border-radius: var(--radius-lg);
  width: min(680px, 94vw);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.06);
}

.code-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.code-modal-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-body);
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0;
}

.code-modal-actions { display: flex; gap: 0.5rem; align-items: center; }

.code-action-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.5);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-body);
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.code-action-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

.code-action-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Prism overrides — keep background from .code-block, match app typography */
.code-block {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-ui);
  line-height: 1.75;
  color: #d0d8f0;               /* default token colour — overridden per token below */
  padding: 1.5rem 1.25rem;
  margin: 0;
  overflow-x: auto;
  background: transparent !important;
  tab-size: 4;
}

/* Prism token colours tuned to our palette */
.token.keyword    { color: #7eb3fb; }              /* soft blue  */
.token.builtin    { color: #7eb3fb; }
.token.function   { color: #c3a6ff; }              /* soft violet */
.token.class-name { color: #c3a6ff; }
.token.string     { color: #7bd49c; }              /* soft green  */
.token.number     { color: #f7c06a; }              /* amber       */
.token.operator   { color: #89c4e1; }              /* sky         */
.token.punctuation{ color: rgba(210,220,240,0.5); }
.token.comment    { color: var(--text-3); font-style: italic; }
.token.decorator  { color: #f7c06a; }

/* ── Plot area ───────────────────────────── */
#plot-container {
  flex: 1;
  background: var(--plot-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

#plot-wrapper {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, calc(100svh - 48px - 1.5rem));
  max-width: 900px;
  box-shadow: var(--shadow-card);
}

#plot { width: 100%; height: 100%; cursor: crosshair; }

/* ── Condensed tree view (Plotly) ────────── */
#tree-wrapper {
  width: min(100%, 900px);
  max-width: 900px;
  height: min(calc(100svh - 48px - 1.5rem), 500px);
  transition: opacity 0.25s ease;
}

#tree-wrapper[hidden] { display: none; }  /* prevent height from leaking into flex layout */

/* ── Loading progress bar ────────────────── */
#loading {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 20;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

#loading::after {
  content: '';
  position: absolute;
  top: 0; height: 100%;
  left: -50%; width: 50%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  animation: loading-sweep 1s ease-in-out infinite;
}

@keyframes loading-sweep {
  0%   { left: -50%; }
  100% { left: 110%; }
}

/* ── Loading message ─────────────────────── */
#loading-msg {
  display: none;
  position: absolute;
  top: 0.625rem;
  right: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-footnote);
  color: var(--text-2);
  background: rgba(238, 240, 245, 0.92);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  z-index: 10;
  backdrop-filter: blur(4px);
}

/* ── Reduced motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  input[type="range"]::-webkit-slider-thumb { transition: none; }
  .section-explainer summary::before { transition: none; }
  #loading::after { animation: none; width: 100%; left: 0; }
}

/* ── Mobile / narrow screens ─────────────── */
@media (max-width: 640px) {
  #controls {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 40;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }

  #controls:not(.mobile-open) {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .sidebar-toggle { left: 0 !important; }
  .sidebar-toggle.mobile-open { left: 290px !important; }
}