/* "Inside the six voices" lab. Everything is scoped under #voices-lab. */
#voices-lab {
  --vl-line: var(--md-default-fg-color--lightest, rgba(0,0,0,.12));
  --vl-muted: var(--md-default-fg-color--light, rgba(0,0,0,.54));
  --vl-c1: #8a4f2f; --vl-c2: #25679a; --vl-c3: #2e7d3c; --vl-c4: #8a3f94; --vl-c5: #8c6a00; --vl-c6: #0f7d77;
  display: block; text-align: left; max-width: none; width: 100%; box-sizing: border-box;
  margin: 1.5em 0; padding: 1rem 1.2rem 1.2rem;
  border: .05rem solid var(--vl-line); border-radius: .2rem;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color);
}
[data-md-color-scheme="slate"] #voices-lab {
  --vl-c1: #e0a07e; --vl-c2: #76b6e6; --vl-c3: #7fcb8c; --vl-c4: #d29be0; --vl-c5: #e0c15a; --vl-c6: #5fd0c8;
}
#voices-lab *, #voices-lab *::before, #voices-lab *::after { box-sizing: border-box; }
#voices-lab figcaption { max-width: none; margin: 0 0 1rem; padding: 0; text-align: left; font-size: .75rem; line-height: 1.5; color: var(--md-default-fg-color); }
#voices-lab figcaption strong { font-size: 1rem; }
#voices-lab p { max-width: none; margin: .6em 0; font-size: .75rem; line-height: 1.55; }
#voices-lab .vl-h { margin: 1.2em 0 .2em; font-size: .9rem; font-weight: 700; }
#voices-lab .vl-note, #voices-lab .vl-explain { color: var(--vl-muted); }
#voices-lab .vl-explain { min-height: 3.2em; }
#voices-lab .vl-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; }
#voices-lab label { display: flex; justify-content: space-between; gap: .5rem; margin-top: .8rem; font-size: .7rem; font-weight: 600; }
#voices-lab output { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--vl-muted); }
#voices-lab input[type="range"] { display: block; width: 100%; min-height: 1.8rem; margin: 0; accent-color: var(--md-primary-fg-color); }
#voices-lab select, #voices-lab button {
  font: inherit; font-size: .75rem; padding: .4em .8em; border-radius: .15rem;
  border: .05rem solid var(--md-default-fg-color--light); background: var(--md-default-bg-color); color: var(--md-default-fg-color); cursor: pointer;
}
#voices-lab select { margin-top: .3rem; min-height: 2rem; }
#voices-lab button { min-height: 2rem; background: var(--md-primary-fg-color); border-color: var(--md-primary-fg-color); color: var(--md-primary-bg-color); }
#voices-lab input:focus-visible, #voices-lab select:focus-visible, #voices-lab button:focus-visible, #voices-lab summary:focus-visible {
  outline: .125rem solid var(--md-accent-fg-color); outline-offset: .15rem;
}
#voices-lab .vl-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
#voices-lab .vl-buffer { display: block; width: 100%; height: auto; margin: .4rem 0 0; border: .05rem solid var(--vl-line); background: var(--md-code-bg-color); color: var(--md-default-fg-color); }
#voices-lab .vl-buffer text { fill: currentColor; font-family: inherit; }
#voices-lab .vl-rail { stroke: var(--md-default-fg-color--lighter, rgba(0,0,0,.3)); fill: none; }
#voices-lab .vl-now { stroke: currentColor; stroke-dasharray: 3 3; fill: none; }
#voices-lab .vl-v { opacity: 1; }
#voices-lab .vl-c1 { color: var(--vl-c1); } #voices-lab .vl-c2 { color: var(--vl-c2); } #voices-lab .vl-c3 { color: var(--vl-c3); }
#voices-lab .vl-c4 { color: var(--vl-c4); } #voices-lab .vl-c5 { color: var(--vl-c5); } #voices-lab .vl-c6 { color: var(--vl-c6); }
#voices-lab .vl-off { opacity: .35; }
#voices-lab .vl-tablewrap { overflow-x: auto; }
#voices-lab .vl-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
#voices-lab .vl-table th, #voices-lab .vl-table td { padding: .45rem .5rem; text-align: left; vertical-align: middle; border-bottom: .05rem solid var(--vl-line); }
#voices-lab .vl-table td:first-child { width: 15%; font-weight: 700; }
#voices-lab .vl-table td:last-child { width: 40%; }
#voices-lab .vl-table svg { display: block; width: 100%; min-width: 100px; height: auto; }
#voices-lab details { margin-top: 1rem; font-size: .75rem; }
#voices-lab summary { cursor: pointer; font-weight: 600; }
@media (max-width: 600px) {
  #voices-lab { padding: .8rem; margin-left: 0; margin-right: 0; }
  #voices-lab .vl-controls { grid-template-columns: 1fr; }
  #voices-lab .vl-table { font-size: .65rem; }
  #voices-lab .vl-table td:last-child { width: 34%; }
}
@media print { #voices-lab button, #voices-lab input[type="range"] { display: none; } }