/* Shared page style for every experiment page (tab bar, panels, sliders, 8-line code box). */
:root { color-scheme: dark; font-family: system-ui, sans-serif; }
body { margin: 0; padding: 1rem 1.25rem 2rem; background: #111; color: #e8e8e8; }
h1 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.75rem; }
.eq {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem; line-height: 1.45; white-space: pre; background: #1a1a1a;
  border: 1px solid #333; border-radius: 8px; padding: 0.75rem 1rem; margin: 0 0 1rem;
  height: 8lh; overflow: auto; /* fixed 8 lines; scrolls when longer */
  scrollbar-width: thin; scrollbar-color: #444 #1a1a1a;
}
.layout { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
.panel { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 0.85rem 1rem; }
label.row { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; margin-bottom: 0.65rem; font-size: 0.85rem; }
label.row span.val { font-variant-numeric: tabular-nums; color: #9ad; min-width: 4.5rem; text-align: right; }
input[type=range] { width: 100%; grid-column: 1 / -1; }
.overlays { margin-top: 0.5rem; border-top: 1px solid #333; padding-top: 0.65rem; }
.overlays h2 { font-size: 0.85rem; color: #ddd !important; margin: 0 0 0.45rem; color: #aaa; font-weight: 600; }
.ov { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; font-size: 0.82rem; }
.ov button {
  margin-left: auto; font-size: 0.72rem; padding: 0.15rem 0.45rem; border-radius: 4px;
  border: 1px solid #444; background: #222; color: #ccc; cursor: pointer;
}
.ov button:hover { background: #2a2a2a; }
.view { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.view button {
  font-size: 0.8rem; padding: 0.3rem 0.65rem; border-radius: 6px;
  border: 1px solid #444; background: #222; color: #ddd; cursor: pointer;
}
.view button.active { border-color: #6af; color: #fff; background: #1a2a40; }
.hint { font-size: 0.75rem; color: #888; margin-top: 0.5rem; }
.tabs { display: flex; gap: 0.5rem; margin: 0 0 0.75rem; }
.tabs a {
  font: inherit; font-size: 1.05rem; font-weight: 600; padding: 0.4rem 1rem; border-radius: 6px;
  border: 1px solid #444; background: #1a1a1a; color: #bbb; cursor: pointer; text-decoration: none;
}
.tabs a:hover { background: #222; }
.tabs a.active { border-color: #6af; color: #fff; background: #1a2a40; }
.tabs a.logo, .tabs a.logo:hover {
  padding: 0; border: 0; background: none; width: calc(1lh + 0.8rem + 2px); height: calc(1lh + 0.8rem + 2px);
}
.tabs a.logo svg { display: block; width: 100%; height: 100%; }
.tabs a.logo { filter: brightness(0.85); opacity: 0.75; transition: filter 0.6s ease, opacity 0.6s ease; outline: none; }
.tabs a.logo:hover, .tabs a.logo:focus-visible { filter: brightness(1.25) drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)); opacity: 1; }
.tabs .tab-divider { flex: none; width: 1px; align-self: stretch; margin: 0.35rem 0.15rem; background: #3a3a3a; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 1100px) { .duo { grid-template-columns: 1fr; } }
.frame-tab iframe { display: block; width: 100%; border: 0; background: #0b0c12; }
.subtabs { display: flex; gap: 0.4rem; margin: 0 0 0.75rem; flex-wrap: wrap; align-items: center; }
.subtabs a {
  font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 5px;
  border: 1px solid #444; background: #1a1a1a; color: #bbb; cursor: pointer; text-decoration: none;
}
.subtabs a:hover { background: #222; }
.subtabs a.active { border-color: #6af; color: #fff; background: #1a2a40; }
.subtabs[hidden] { display: none; }
.subtabs.nested { gap: 0.35rem; margin-top: -0.35rem; }
.subtabs.nested a { font-size: 0.78rem; padding: 0.18rem 0.6rem; border-radius: 4px; }
/* Inside the slider panel: sit at the top of the box (Soft Triangle / Decay Envelopes / …). */
.panel > .subtabs { margin: 0 0 0.55rem; }
.panel > .subtabs.nested { margin: -0.15rem 0 0.55rem; }