:root {
  --lab-bg: #101522;
  --lab-surface: #1a2133;
  --lab-code: #0c111c;
  --lab-text: #f0f3ff;
  --lab-muted: #b4bfd3;
  --lab-border: #39455e;
  --lab-accent: #ae9bff;
  --lab-mint: #82e6c1;
  --lab-error: #ffb9a8;
  --workshop-code-height: 20rem;
}
.slide-example { position: relative; }
.slide-try {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  border: 1px solid var(--lab-mint); border-radius: 8px;
  background: var(--lab-bg); color: var(--lab-mint);
  font: 600 16px system-ui, sans-serif; padding: 7px 12px; cursor: pointer;
}
.slide-try:hover { color: var(--lab-bg); background: var(--lab-mint); }
.slide-try:focus-visible, .slide-workshop button:focus-visible {
  outline: 3px solid var(--lab-accent); outline-offset: 3px;
}
.slide-workshop {
  box-sizing: border-box; width: min(1150px, 95vw); max-width: 95vw;
  max-height: 92dvh; padding: 28px; border: 1px solid var(--lab-border);
  border-radius: 20px; background: var(--lab-bg); color: var(--lab-text);
  font: 18px/1.5 system-ui, sans-serif; overflow: auto;
}
.slide-workshop::backdrop { background: rgb(4 8 16 / 85%); }
.slide-workshop__heading { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.slide-workshop h2 { font-size: 27px; margin: 0; color: var(--lab-text); }
.slide-workshop__hint { color: var(--lab-muted); margin: 15px 0 20px; }
.slide-workshop__content--columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.slide-workshop__example { min-width: 0; }
.slide-workshop__example h3 { margin: 0 0 12px; font-size: 18px; color: var(--lab-muted); }
.slide-workshop__content--columns .code-editor { height: calc(var(--comparison-lines, 5) * 1.5em + 40px); }
.slide-workshop .btn {
  color: var(--lab-text); background: var(--lab-surface); border: 1px solid var(--lab-border);
  border-radius: 9px; font: inherit; font-size: 15px; padding: 10px 15px; cursor: pointer;
}
.slide-workshop .btn:disabled { opacity: .65; cursor: wait; }
.slide-workshop .code-run__play { color: var(--lab-bg); background: var(--lab-mint); font-weight: 650; }
.slide-workshop .code-run__play svg { vertical-align: -.1em; margin-right: 8px; }
.slide-workshop .code-run__bar { display: flex; gap: 12px; padding: 14px 0; flex-wrap: wrap; }
.slide-workshop pre {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
  font: 20px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.slide-workshop .code-run > pre { background: var(--lab-code); border: 1px solid var(--lab-border); border-radius: 12px; padding: 20px; }
.slide-workshop code { display: block; outline: none; min-height: 3em; }
.slide-workshop code:focus { outline: 2px solid var(--lab-mint); outline-offset: 3px; }
.slide-workshop .code-run__out { display: block; }
.slide-workshop .code-run__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.slide-workshop .code-run__panel { background: var(--lab-surface); border-radius: 12px; padding: 18px; min-width: 0; }
.slide-workshop .code-run__panel:only-child { grid-column: 1 / -1; }
.slide-workshop .code-run__label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--lab-muted); margin: 0 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide-workshop .code-run__stream { box-sizing: border-box; height: 6rem; min-height: 6rem; max-height: 6rem; overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.slide-workshop .code-run__stream--error { color: var(--lab-error); }
.slide-workshop .code-run__plot { box-sizing: border-box; height: 22rem; min-width: 0; overflow: auto; overscroll-behavior: contain; }
.slide-workshop .code-run__plot > p { display: grid; place-items: center; box-sizing: border-box; height: 100%; margin: 0; padding: 20px; color: var(--lab-muted); background: var(--lab-surface); border: 1px solid var(--lab-border); border-radius: 12px; text-align: center; }
.slide-workshop .code-run__plot .elixir-plot { display: flex; flex-direction: column; box-sizing: border-box; height: 100%; margin: 0; overflow: auto; }
.slide-workshop .code-run__plot .elixir-plot > svg { flex: 1 1 auto; min-height: 0; }
.slide-workshop .code-run__plot .elixir-plot__controls { flex: 0 0 auto; }
@media (min-width: 1000px) {
  .slide-workshop .code-run--plot { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
  .slide-workshop .code-run--plot > pre,
  .slide-workshop .code-run--plot > .code-editor { grid-column: 1; grid-row: 1; height: var(--workshop-code-height); min-height: 0; box-sizing: border-box; font-size: 17px; }
  .slide-workshop .code-run--plot > .code-run__bar { grid-column: 1; grid-row: 2; }
  .slide-workshop .code-run--plot > .code-run__plot { grid-column: 2; grid-row: 1; height: var(--workshop-code-height); margin-top: 0; }
  .slide-workshop .code-run--plot .elixir-plot { margin-top: 0; }
  .slide-workshop .code-run--plot > .code-run__out { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .slide-workshop { padding: 16px; }
  .slide-workshop__heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .slide-workshop .code-run__panels { grid-template-columns: 1fr; }
  .slide-workshop__content--columns { grid-template-columns: 1fr; }
  .slide-workshop pre { font-size: 16px; }
}
@media print { .slide-try, .slide-workshop { display: none !important; } }