:root{
  --lab-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --lab-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  --lab-blue: #1f6feb;
  --lab-blue-bg: #e8f3ff;
  --lab-blue-title: #d5e9ff;

  --lab-green: #2da44e;
  --lab-green-bg: #e7f6ea;
  --lab-green-title: #d2f0d8;

  --lab-yellow: #bf8700;
  --lab-yellow-bg: #fff6d8;
  --lab-yellow-title: #ffebb0;

  --lab-border: #d0d7de;
  --lab-text: #24292f;
}

body {
  font-family: var(--lab-font);
  margin: 0;
  padding: 0;
  background: #ffffff;
}

.lab-content {
  font-family: var(--lab-font);
  color: var(--lab-text);
  line-height: 1.55;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.lab-content h2, .lab-content h3 {
  line-height: 1.2;
  margin: 1.4rem 0 0.6rem;
}
.lab-content h2 {
  font-size: 1.8rem;
  border-bottom: 1px solid var(--lab-border);
  padding-bottom: 0.5rem;
}
.lab-content h3 {
  font-size: 1.35rem;
}
.lab-content p {
  margin: 0.6rem 0;
}
.lab-content ul {
  margin: 0.4rem 0 0.8rem 1.3rem;
}
.lab-content li {
  margin: 0.2rem 0;
}

.lab-content a {
  color: var(--lab-blue);
  text-decoration: none;
}
.lab-content a:hover {
  text-decoration: underline;
}

/* Inline code */
.lab-content code {
  font-family: var(--lab-mono);
  background: #f6f8fa;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  border: 1px solid #d0d7de;
}

/* Callouts */
.lab-callout {
  border: 1px solid var(--lab-border);
  border-left: 6px solid var(--lab-accent, var(--lab-blue));
  background: var(--lab-bg, var(--lab-blue-bg));
  border-radius: 6px;
  overflow: hidden;
  margin: 1rem 0;
}
.lab-callout-title {
  background: var(--lab-title-bg, var(--lab-blue-title));
  font-weight: 700;
  padding: 0.55rem 0.75rem;
}
.lab-callout-body {
  padding: 0.75rem;
}

.lab-note {
  --lab-accent: var(--lab-blue);
  --lab-bg: var(--lab-blue-bg);
  --lab-title-bg: var(--lab-blue-title);
}
.lab-aims {
  --lab-accent: var(--lab-green);
  --lab-bg: var(--lab-green-bg);
  --lab-title-bg: var(--lab-green-title);
}
.lab-question {
  --lab-accent: var(--lab-green);
  --lab-bg: var(--lab-green-bg);
  --lab-title-bg: var(--lab-green-title);
}
.lab-tip {
  --lab-accent: var(--lab-yellow);
  --lab-bg: var(--lab-yellow-bg);
  --lab-title-bg: var(--lab-yellow-title);
}
.lab-answer {
  --lab-accent: var(--lab-blue);
  --lab-bg: var(--lab-blue-bg);
  --lab-title-bg: var(--lab-blue-title);
}

/* Collapsible Answer using <details>/<summary> */
details.lab-callout > summary.lab-callout-title {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
details.lab-callout > summary.lab-callout-title::-webkit-details-marker {
  display: none;
}
details.lab-callout > summary.lab-callout-title::after {
  content: "▸";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
}
details.lab-callout[open] > summary.lab-callout-title::after {
  content: "▾";
}

/* Code blocks */
.lab-codeblock {
  border: 1px solid var(--lab-border);
  border-radius: 6px;
  overflow: hidden;
  margin: 0.8rem 0;
  background: #f6f8fa;
}
.lab-codeblock-header {
  font-family: var(--lab-mono);
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  background: #eaeef2;
  border-bottom: 1px solid var(--lab-border);
  font-weight: 600;
}
.lab-codeblock pre {
  margin: 0;
  padding: 0.8rem;
  overflow-x: auto;
  font-family: var(--lab-mono);
  font-size: 0.95rem;
  white-space: pre;
}
.lab-codeblock code {
  font-family: inherit;
  background: transparent;
  padding: 0;
  border: none;
}

/* Copy button styles */
.lab-codeblock-with-copy {
  position: relative;
}
.lab-copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--lab-blue);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--lab-font);
  font-weight: 500;
  transition: background 0.2s;
}
.lab-copy-button:hover {
  background: #1a5dc8;
}
.lab-copy-button:active {
  background: #164a99;
}
.lab-copy-button.copied {
  background: var(--lab-green);
}