/* =========================================================================
   /learn2 — minimalist BAML slide deck.
   Refined, HN/Rust-book register: cream paper, ink type, tan hairlines,
   mono labels, generous whitespace. Tokens come from globals.css.
   ========================================================================= */

.l2-deck {
  --l2-ink: #1a1612;
  --l2-body: #2b2520;
  --l2-muted: #6f6a63;
  --l2-soft: #8a8580;
  --l2-rule: #e2ddcf;
  --l2-rule-strong: #d8cfbd;
  --l2-violet: #6d28d9;
  --l2-green: #047857;
  --l2-amber: #b45309;
  --l2-link: #2563eb;
  --l2-red: #b42318;

  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* terminal register: monospace throughout the deck */
  font-family: var(--font-geist-mono), ui-monospace, "SF Mono", monospace;
  font-weight: 300;
  color: var(--l2-body);
  outline: none;
  background-color: var(--background, #fbf7ed);
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(42, 37, 32, 0.04) 1px,
    transparent 0
  );
  background-size: 20px 20px;
}

/* ---- chrome: header ---- */
.l2-deck-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  font-size: 12px;
  border-bottom: 1px solid var(--l2-rule);
}
.l2-wordmark {
  font-weight: 600;
  color: var(--l2-ink);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.l2-wordmark span {
  margin-left: 0.35rem;
  font-weight: 400;
  color: var(--l2-soft);
}
.l2-section-tag {
  font-size: 11px;
  color: var(--l2-soft);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.l2-counter {
  color: var(--l2-muted);
  letter-spacing: 0.08em;
}

/* ---- stage ---- */
.l2-stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  /* `safe center` keeps tall slides scrollable instead of clipping the top */
  justify-content: safe center;
  min-height: 0;
  padding: clamp(1.25rem, 4vw, 3.5rem);
  overflow-x: hidden;
  overflow-y: auto;
}
.l2-slide {
  width: 100%;
  min-width: 0;
  max-width: 1040px;
  animation: l2-slide-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes l2-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- chrome: footer ---- */
.l2-deck-foot {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.5rem;
  border-top: 1px solid var(--l2-rule);
}
.l2-nav-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 14px;
  color: var(--l2-ink);
  cursor: pointer;
  background: #fffdf6;
  border: 1px solid var(--l2-rule-strong);
  border-radius: 8px;
  transition:
    background 120ms ease,
    border-color 120ms ease;
}
.l2-nav-btn:hover:not(:disabled) {
  background: #f4eee0;
}
.l2-nav-btn:disabled {
  cursor: default;
  opacity: 0.35;
}
.l2-dots {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.l2-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  cursor: pointer;
  background: var(--l2-rule-strong);
  border: none;
  border-radius: 999px;
  transition:
    transform 120ms ease,
    background 120ms ease;
}
.l2-dot:hover {
  background: var(--l2-soft);
}
.l2-dot--on {
  background: var(--l2-ink);
  transform: scale(1.35);
}

/* ---- slide content ---- */
.l2-slide-shell {
  max-width: 720px;
  margin: 0 auto;
}
.l2-slide-shell--wide {
  max-width: 1040px;
}
.l2-slide-title {
  margin: 0.6rem 0 1.4rem;
  font-size: clamp(25px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--l2-ink);
  letter-spacing: -0.01em;
}
.l2-slide-body {
  font-size: 17px;
  line-height: 1.7;
}
.l2-lead {
  max-width: 46ch;
  margin: 0 0 1.1rem;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
  color: var(--l2-ink);
}

.l2-quote {
  padding-left: 1.1rem;
  margin: 0 0 1.4rem;
  border-left: 2px solid var(--l2-violet);
}
.l2-quote p {
  margin: 0;
  font-family: inherit;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--l2-ink);
}
.l2-quote-cite {
  display: block;
  margin-top: 0.7rem;
  font-size: 12px;
  font-style: normal;
  color: var(--l2-soft);
  letter-spacing: 0.04em;
}

.l2-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.l2-bullets li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 17px;
  line-height: 1.5;
  color: var(--l2-body);
}
.l2-bullets li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  background: var(--l2-violet);
  border-radius: 999px;
}

/* two-pane */
.l2-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: start;
}
.l2-split-left,
.l2-split-right {
  /* allow grid children to shrink so code can scroll internally instead of
     blowing out the page width */
  min-width: 0;
}
.l2-split-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 840px) {
  .l2-split {
    grid-template-columns: 1fr;
  }
}

/* stacked examples (not a comparison — just two snippets) */
.l2-stack {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}
.l2-example {
  min-width: 0;
}
.l2-example-label {
  margin: 0 0 0.45rem;
  font-size: 11px;
  color: var(--l2-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* section divider */
.l2-section-divider {
  padding: 2rem 0;
  text-align: center;
}
.l2-section-index {
  display: inline-block;
  font-size: 12px;
  color: var(--l2-soft);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.l2-section-title {
  margin: 0.8rem 0 0.6rem;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 600;
  color: var(--l2-ink);
  letter-spacing: -0.01em;
}
.l2-section-blurb {
  font-family: inherit;
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--l2-muted);
}

/* callouts */
.l2-callout {
  padding: 0.7rem 0.9rem;
  font-size: 13.5px;
  line-height: 1.5;
  background: #fffdf6;
  border: 1px solid var(--l2-rule-strong);
  border-radius: 10px;
}
.l2-callout--warn {
  color: #7a5a16;
  background: #fbf3df;
  border-color: #ecd9b0;
}
.l2-callout--good {
  color: #0c5e42;
  background: #eafaf2;
  border-color: #bfe3d2;
}
.l2-callout--note {
  color: var(--l2-muted);
}

.l2-key {
  padding: 1px 6px;
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
  background: #fffdf6;
  border: 1px solid var(--l2-rule-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* cover / closing */
.l2-cover {
  padding: 2rem 0;
  text-align: center;
}
.l2-cover-kicker {
  margin: 0 0 1.2rem;
  font-size: 12px;
  color: var(--l2-soft);
  text-transform: uppercase;
  letter-spacing: 0.24em;
}
.l2-cover-mark {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1.3rem);
  align-items: center;
  justify-content: center;
}
.l2-cover-sheep {
  width: clamp(52px, 11vw, 116px);
  height: auto;
}
.l2-cover-title {
  margin: 0;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-size: clamp(52px, 11vw, 120px);
  font-weight: 500;
  line-height: 0.95;
  color: var(--l2-ink);
  letter-spacing: -0.04em;
}
.l2-cover-sub {
  max-width: 52ch;
  margin: 1.4rem auto 0;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  color: var(--l2-muted);
}
.l2-cover-hint {
  margin-top: 2.4rem;
  font-size: 12px;
  color: var(--l2-soft);
  letter-spacing: 0.12em;
}

/* =================== code blocks =================== */
.l2-code {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  background: #fffdf7;
  border: 1px solid var(--l2-rule-strong);
  border-radius: 10px;
}
.l2-code-head {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.8rem;
  background: #f6f0e2;
  border-bottom: 1px solid var(--l2-rule);
}
.l2-code-dots {
  display: inline-flex;
  gap: 5px;
}
.l2-code-dots i {
  width: 9px;
  height: 9px;
  background: #d8cfbd;
  border-radius: 999px;
}
.l2-code-name {
  font-size: 11.5px;
  color: var(--l2-muted);
  letter-spacing: 0.03em;
}
.l2-code-scroll {
  overflow-x: auto;
}
.l2-pre {
  padding: 0.7rem 0;
  margin: 0;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.65;
  tab-size: 2;
}
.l2-pre code {
  display: block;
  min-width: max-content;
}
.l2-line {
  display: flex;
  align-items: baseline;
  padding: 0 0.9rem;
  white-space: pre;
}
/* Wrap mode: soft-wrap within the column instead of forcing a horizontal
   scrollbar. Used where a long inline diagnostic would otherwise blow the
   line past a narrow pair column. */
.l2-code--wrap .l2-pre code {
  min-width: 0;
}
.l2-code--wrap .l2-line {
  white-space: pre-wrap;
}
.l2-code--wrap .l2-lc {
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.l2-line-hl {
  background: rgba(109, 40, 217, 0.07);
}
.l2-ln {
  flex: 0 0 auto;
  width: 2.2em;
  margin-right: 0.8em;
  font-size: 11.5px;
  color: #b9b2a3;
  text-align: right;
  user-select: none;
}
.l2-lc {
  white-space: pre;
}
.l2-note {
  max-width: 22ch;
  padding-left: 1.2rem;
  margin-left: auto;
  font-size: 11.5px;
  font-style: italic;
  color: var(--l2-violet);
  white-space: normal;
}
.l2-note-arrow {
  margin-right: 0.3rem;
  font-style: normal;
}

/* error-lens inline diagnostics */
.l2-errorlens {
  margin-left: 1.6em;
  font-size: 11.5px;
  font-style: italic;
  white-space: pre-wrap;
  opacity: 0.95;
}
.l2-line-diag.l2-sev-error {
  background: rgba(180, 35, 24, 0.07);
  box-shadow: inset 2px 0 0 var(--l2-red);
}
.l2-line-diag.l2-sev-warning {
  background: rgba(180, 83, 9, 0.07);
  box-shadow: inset 2px 0 0 var(--l2-amber);
}
.l2-errorlens.l2-sev-error {
  color: var(--l2-red);
}
.l2-errorlens.l2-sev-warning {
  color: var(--l2-amber);
}
.l2-errorlens.l2-sev-info {
  color: var(--l2-muted);
}

/* =================== spawn race =================== */
.l2-race {
  padding: 1.1rem 1.2rem 1.4rem;
  background: #fffdf7;
  border: 1px solid var(--l2-rule-strong);
  border-radius: 12px;
}
.l2-race-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.l2-race-lanes {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.l2-lane {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.l2-lane-meta {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
}
.l2-lane-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--l2-ink);
}
.l2-lane-sub {
  font-size: 11.5px;
  color: var(--l2-soft);
}
.l2-lane-bars {
  display: flex;
  gap: 5px;
  height: 26px;
}
.l2-bar {
  flex: 1;
  overflow: hidden;
  background: #efe8d8;
  border-radius: 3px;
}
.l2-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  animation-name: l2-fill;
  animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);
  animation-fill-mode: forwards;
}
@keyframes l2-fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.l2-lane-clock {
  justify-self: end;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  animation: l2-clock-in 200ms ease forwards;
}
@keyframes l2-clock-in {
  to {
    opacity: 1;
  }
}

.l2-btn {
  padding: 0.35rem 0.7rem;
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
  color: var(--l2-ink);
  letter-spacing: 0.04em;
  cursor: pointer;
  background: #fffdf6;
  border: 1px solid var(--l2-rule-strong);
  border-radius: 8px;
  transition: background 120ms ease;
}
.l2-btn:hover {
  background: #f4eee0;
}

.l2-loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #8a8580;
}

@media (prefers-reduced-motion: reduce) {
  .l2-slide,
  .l2-bar-fill,
  .l2-lane-clock {
    animation-duration: 1ms !important;
  }
}

/* =================== live playground (Monaco + ExecutionPanel) =================== */
.l2-live {
  display: flex;
  min-width: 0;
  height: min(58vh, 440px);
  overflow: hidden;
  background: #fffdf7;
  border: 1px solid var(--l2-rule-strong);
  border-radius: 10px;
}
/* Panes are sized by the shadcn Resizable (react-resizable-panels) group;
   these classes only handle inner layout + the handle's paper styling. */
.l2-live-editor {
  min-width: 0;
}
.l2-live-splitter {
  width: 5px;
  background: var(--l2-rule, #e2ddcf);
  transition: background 120ms ease;
}
.l2-live-splitter:hover,
.l2-live-splitter[data-resize-handle-state="hover"],
.l2-live-splitter[data-resize-handle-state="drag"] {
  background: var(--l2-violet, #6d28d9);
}
.l2-live-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.l2-live-panel > * {
  flex: 1 1 auto;
  min-height: 0;
}
.l2-live-loading {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: var(--l2-soft);
}
/* result/graph pane wrapper — hosts the absolutely-positioned loading veil so
   it covers only this pane (never the editor). */
.l2-live-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.l2-live-pane > * {
  flex: 1 1 auto;
  min-height: 0;
}
.l2-live-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  color: var(--l2-soft);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.l2-live-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(128, 128, 128, 0.25);
  border-top-color: rgba(128, 128, 128, 0.75);
  border-radius: 50%;
  animation: l2-live-spin 0.7s linear infinite;
}
@keyframes l2-live-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .l2-live-spinner {
    animation: none;
  }
}
/* Hero/full-bleed embeds (homepage): fill the parent box instead of the
   deck-slide height cap, and let the parent own the frame. */
.l2-live--fill {
  height: 100%;
  border: none;
  border-radius: 0;
}

/* Slides containing the live playground get every pixel we can spare:
   the slide/shell width caps come off and the column stretches so the
   playground (flex: 1) absorbs all remaining stage height. */
.l2-stage:has(.l2-live) {
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
}
.l2-slide:has(.l2-live) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-width: none;
  min-height: 0;
}
.l2-slide:has(.l2-live) .l2-slide-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
}
.l2-slide:has(.l2-live) .l2-slide-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.l2-slide:has(.l2-live) .l2-live {
  flex: 1 1 auto;
  height: auto;
  min-height: 320px;
}

/* =================== multi-editor (scroll demo) =================== */
/* The frame owns the border + radius (and optional filename header); the editor
   box sits flush inside it, so a framed BamlEditor matches the deck's static
   code blocks (.l2-code). */
.l2-bamled-frame {
  overflow: hidden;
  background: #fffdf7;
  border: 1px solid var(--l2-rule-strong);
  border-radius: 10px;
}
.l2-bamled {
  overflow: hidden;
  background: #fffdf7;
}
.l2-bamled-loading {
  display: grid;
  place-items: center;
  min-height: 120px;
  font-size: 12px;
  color: var(--l2-soft);
}
.l2-bamled-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* "try editing me" nudge — a small popup that springs out of the editor's
   top-right corner and bounces, dismissed on first focus/edit. Desktop-only:
   hidden on touch and narrow viewports. */
.l2-edit-hint {
  position: absolute;
  top: -16px;
  right: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  background: #6d28d9;
  border-radius: 9px;
  transform-origin: bottom right;
  opacity: 0;
  animation:
    l2-edit-hint-pop 440ms cubic-bezier(0.34, 1.56, 0.64, 1) 500ms both,
    l2-edit-hint-bounce 1.5s ease-in-out 1000ms infinite;
}
/* tail — a rotated square poking down into the editor */
.l2-edit-hint::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: -4px;
  width: 11px;
  height: 11px;
  background: #6d28d9;
  border-radius: 0 0 2px 0;
  transform: rotate(45deg);
}
.l2-edit-hint-emoji {
  font-size: 14px;
}
@keyframes l2-edit-hint-pop {
  from {
    opacity: 0;
    transform: scale(0.75) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes l2-edit-hint-bounce {
  0%,
  45%,
  100% {
    transform: translateY(0);
  }
  18% {
    transform: translateY(-9px);
  }
  33% {
    transform: translateY(-3px);
  }
}
@media (hover: none), (max-width: 860px) {
  .l2-edit-hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .l2-edit-hint {
    animation: l2-edit-hint-pop 420ms ease 600ms both;
  }
}
.l2-term {
  margin-top: 6px;
  overflow: hidden;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-size: 12px;
  background: #141210;
  border: 1px solid #2a2620;
  border-radius: 8px;
}
.l2-term-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background: #201c18;
  border-bottom: 1px solid #2a2620;
}
.l2-term-title {
  font-size: 11px;
  color: #8a8580;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.l2-term-x {
  padding: 0 4px;
  font-size: 16px;
  line-height: 1;
  color: #8a8580;
  cursor: pointer;
  background: none;
  border: none;
}
.l2-term-x:hover {
  color: #f3ede0;
}
.l2-term-body {
  max-height: 170px;
  padding: 8px 10px;
  overflow: auto;
  color: #f3ede0;
}
.l2-term-line {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 1px 0;
}
.l2-term-check {
  flex: 0 0 auto;
  width: 1em;
}
.l2-term-pass .l2-term-check {
  color: #7ee787;
}
.l2-term-fail .l2-term-check {
  color: #ff7b72;
}
.l2-term-error .l2-term-check {
  color: #e3b341;
}
.l2-term-running .l2-term-check {
  color: #8a8580;
}
.l2-term-name {
  color: #f3ede0;
}
.l2-term-meta {
  font-size: 11px;
  color: #8a8580;
}
.l2-term-err {
  color: #ff7b72;
  word-break: break-word;
  white-space: pre-wrap;
}
.l2-editors-demo {
  min-height: 100vh;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-weight: 300;
  color: #2b2520;
  background-color: #fbf7ed;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(42, 37, 32, 0.04) 1px,
    transparent 0
  );
  background-size: 20px 20px;
}
.l2-editors-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  font-size: 12px;
  color: #6f6a63;
  border-bottom: 1px solid #e2ddcf;
}
.l2-editors-head a {
  color: #6d28d9;
  text-decoration: none;
}
.l2-editors-main {
  max-width: 820px;
  padding: 2rem 1.5rem 6rem;
  margin: 0 auto;
}
.l2-editors-intro {
  margin: 0 0 2rem;
  font-size: 14px;
  line-height: 1.6;
  color: #6f6a63;
}
.l2-editors-intro code {
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}
.l2-editors-cell {
  margin-bottom: 2.2rem;
}
.l2-editors-cell-title {
  margin: 0 0 0.5rem;
  font-size: 11px;
  color: #8a8580;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ---- editor header Run button + in-frame results panel ---- */
.l2-run-btn {
  padding: 3px 12px;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: #fffdf6;
  letter-spacing: 0.05em;
  cursor: pointer;
  background: #047857;
  border: none;
  border-radius: 6px;
  transition:
    background 120ms ease,
    transform 80ms ease;
}
.l2-run-btn:hover:not(:disabled) {
  background: #065f46;
}
.l2-run-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.l2-run-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* results live INSIDE the editor frame, under the code — same paper, not a
   detached terminal */
.l2-runs {
  background: #faf6ea;
  border-top: 1px solid var(--l2-rule, #e2ddcf);
  animation: l2-runs-in 200ms ease;
}
@keyframes l2-runs-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.l2-runs-head {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 5px 12px;
  font-size: 10.5px;
  color: #8a8580;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px dashed #e2ddcf;
}
.l2-runs-summary {
  margin-left: auto;
  color: #6f6a63;
  text-transform: none;
  letter-spacing: 0.03em;
}
.l2-runs-clear {
  padding: 0;
  font: inherit;
  color: #8a8580;
  cursor: pointer;
  background: none;
  border: none;
}
.l2-runs-clear:hover {
  color: #1a1612;
}
.l2-runs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: baseline;
  padding: 5px 12px;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-size: 12.5px;
}
.l2-runs-row + .l2-runs-row {
  border-top: 1px solid rgba(26, 22, 18, 0.05);
}
.l2-runs-check {
  flex: 0 0 auto;
  width: 1em;
}
.l2-runs--pass .l2-runs-check {
  color: #047857;
}
.l2-runs--fail .l2-runs-check {
  color: #b42318;
}
.l2-runs--error .l2-runs-check {
  color: #b45309;
}
.l2-runs--running .l2-runs-check {
  color: #8a8580;
}
.l2-runs-name {
  color: #1a1612;
}
.l2-runs-meta {
  margin-left: auto;
  font-size: 11px;
  color: #8a8580;
}
.l2-runs-meta + .l2-runs-meta {
  margin-left: 0.6rem;
}
.l2-runs-err {
  flex-basis: 100%;
  padding-left: 1.55em;
  font-size: 11.5px;
  color: #b42318;
  word-break: break-word;
  white-space: pre-wrap;
}

/* showcase line highlight inside the Monaco editor (BamlEditor highlightLines) */
.l2-ed-hl {
  background: rgba(4, 120, 87, 0.09);
}

/* ErrorLens-style inline diagnostics in the Monaco editor */
.l2-el-line-error {
  background: rgba(180, 35, 24, 0.06);
}
.l2-el-line-warning {
  background: rgba(180, 83, 9, 0.06);
}
.l2-el-line-info {
  background: rgba(37, 99, 235, 0.05);
}
.l2-el-msg {
  font-style: italic;
  font-weight: 700;
}
.l2-el-msg-error {
  color: #dc2014 !important;
}
.l2-el-msg-warning {
  color: #b45309 !important;
}
.l2-el-msg-info {
  color: #2563eb !important;
}

/* Dark page: the paper-theme reds/blues above are too dark to read on a dark
 * editor — brighten the inline messages and line tints. Scoped to a dark
 * code-theme page (data-code-theme="dark" on the page root), which covers both
 * the LivePlayground and the standalone BamlEditor panes. The light /learn2
 * deck (no data-code-theme) keeps its values. */
[data-code-theme="dark"] .l2-el-line-error {
  background: rgba(248, 113, 113, 0.1);
}
[data-code-theme="dark"] .l2-el-line-warning {
  background: rgba(234, 179, 8, 0.1);
}
[data-code-theme="dark"] .l2-el-line-info {
  background: rgba(96, 165, 250, 0.1);
}
[data-code-theme="dark"] .l2-el-msg-error {
  color: #f87171 !important;
}
[data-code-theme="dark"] .l2-el-msg-warning {
  color: #e0af68 !important;
}
[data-code-theme="dark"] .l2-el-msg-info {
  color: #60a5fa !important;
}

/* =================== terminal box =================== */
.l2-terminal {
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  text-align: left;
  background: #141210;
  border: 1px solid #2a2620;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(20, 18, 16, 0.18);
}
.l2-terminal-bar {
  display: flex;
  gap: 6px;
  padding: 9px 12px;
  background: #201c18;
  border-bottom: 1px solid #2a2620;
}
.l2-terminal-bar i {
  width: 10px;
  height: 10px;
  background: #4a443c;
  border-radius: 999px;
}
.l2-terminal-body {
  padding: 16px 18px;
  margin: 0;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-size: 15px;
  line-height: 1.7;
  color: #f3ede0;
}
.l2-terminal-prompt {
  margin-right: 0.35rem;
  color: #7ee787;
  user-select: none;
}

/* closing slide */
.l2-close {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-items: center;
}
.l2-close-link {
  font-size: 14px;
  color: var(--l2-violet);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.l2-close-link:hover {
  border-bottom-color: var(--l2-violet);
}

/* =========================================================================
   /learn3 — additions layered on top of learn2.css (which it reuses).
   All animation is CSS keyframes with computed delays; replay = key remount.
   ========================================================================= */

/* =================== deck skin (distinct from /learn2) =================== */
/* Plain paper (no pattern), terminal-green accent instead of violet,
   ruled slide titles, a thin progress bar, and a wider stage. */
.l3-deck {
  --l2-violet: #047857;
  --l2-link: #047857;
  background-color: #f7f6f1;
  background-image: none;
  /* pin the deck to mono even if the next/font variable fails to load */
  font-family:
    var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;
}
.l3-deck .l2-slide {
  max-width: 1400px;
}
.l3-deck .l2-slide-shell--wide {
  max-width: 1120px;
}
.l3-deck .l2-slide-title {
  border-bottom: 1px solid var(--l2-rule-strong);
  padding-bottom: 0.55rem;
}
.l3-deck .l2-bullets li::before {
  border-radius: 1px;
}
.l3-progress {
  height: 2px;
  background: #e6e2d6;
}
.l3-progress span {
  display: block;
  height: 100%;
  background: #047857;
  transition: width 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* the full-width playground slide */
.l3-playground-slide {
  max-width: none;
}
.l3-lead-wide {
  max-width: 72ch;
}
.l3-deck .l3-playground-slide .l2-live {
  height: min(72vh, 700px);
}

/* hold all descendant animations (delays included) until scrolled into view;
   useAnimateInView drops this class on first intersection */
.anim-hold,
.anim-hold * {
  animation-play-state: paused !important;
}

/* =================== animated terminal =================== */
.l3-term {
  border: 1px solid #2a2620;
  border-radius: 10px;
  overflow: hidden;
  background: #141210;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  text-align: left;
}
.l3-term-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 7px 12px;
  background: #201c18;
  border-bottom: 1px solid #2a2620;
}
.l3-term-dots {
  display: inline-flex;
  gap: 5px;
}
.l3-term-dots i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #4a443c;
}
.l3-term-title {
  flex: 1;
  color: #8a8580;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.l3-term-replay {
  border: 1px solid #3a352d;
  border-radius: 6px;
  background: none;
  color: #8a8580;
  font-family: inherit;
  font-size: 10.5px;
  padding: 2px 8px;
  cursor: pointer;
}
.l3-term-replay:hover {
  color: #f3ede0;
  border-color: #5a544a;
}
.l3-term-body {
  margin: 0;
  padding: 12px 14px 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #d7d0c0;
  overflow-x: auto;
}
.l3-term-row {
  white-space: pre;
  min-height: 1.7em;
  opacity: 0;
  animation: l3-appear 160ms ease forwards;
}
.l3-term-prompt {
  color: #7ee787;
  user-select: none;
}
.l3-term-cmd {
  display: inline-block;
  vertical-align: bottom;
  white-space: pre;
  overflow: hidden;
  max-width: 0;
  color: #f3ede0;
  animation-name: l3-type;
  animation-fill-mode: forwards;
}
@keyframes l3-type {
  to {
    max-width: var(--l3-w);
  }
}
@keyframes l3-appear {
  to {
    opacity: 1;
  }
}
.l3-tone-dim {
  color: #6f6a63;
}
.l3-tone-ok {
  color: #7ee787;
}
.l3-tone-err {
  color: #ff7b72;
}
.l3-tone-accent {
  color: #d2a8ff;
}
.l3-tone-warn {
  color: #e3b341;
}

/* =================== infection graph =================== */
.l3-inf {
  border: 1px solid var(--l2-rule-strong, #d8cfbd);
  border-radius: 12px;
  background: #fffdf7;
  padding: 1.1rem 1.2rem 1.2rem;
}
.l3-inf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.l3-inf-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 13.5px;
}
.l3-inf-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  white-space: pre;
}
.l3-inf-tree {
  color: #b9b2a3;
  user-select: none;
}
.l3-inf-node {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border: 1px solid #d8cfbd;
  border-radius: 7px;
  background: #fbf7ed;
  color: #2b2520;
}
/* deterministic-stays-deterministic */
.l3-inf-node--clean {
  border-color: #bfe3d2;
  background: #eafaf2;
  color: #0c5e42;
}
/* the nondeterministic source + everything it infects */
.l3-inf-node--hot {
  animation: l3-infect 360ms ease forwards;
}
@keyframes l3-infect {
  to {
    border-color: #ecbf85;
    background: #fcefdb;
    color: #8a4d04;
  }
}
.l3-inf-tag {
  font-size: 11px;
  color: #8a8580;
  opacity: 0;
  animation: l3-appear 240ms ease forwards;
}
.l3-inf-tag--hot {
  color: #b45309;
}
.l3-inf-tag--ok {
  color: #047857;
}
.l3-inf-caption {
  margin: 1rem 0 0;
  font-size: 13px;
  color: #6f6a63;
  opacity: 0;
  animation: l3-appear 300ms ease forwards;
}
.l3-inf-caption strong {
  color: #8a4d04;
  font-weight: 600;
}

/* =================== metrics DAG timeline =================== */
.l3-dag {
  border: 1px solid var(--l2-rule-strong, #d8cfbd);
  border-radius: 12px;
  background: #fffdf7;
  padding: 1rem 1.1rem 1.1rem;
  font-size: 12.5px;
}
.l3-dag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}
.l3-dag-event {
  white-space: pre;
  color: #2b2520;
  font-weight: 600;
  margin: 0.5rem 0 0.4rem;
  opacity: 0;
  animation: l3-appear 220ms ease forwards;
}
.l3-dag-event--later {
  color: #8a4d04;
}
.l3-dag-row {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr auto;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.16rem 0;
  white-space: pre;
}
.l3-dag-name {
  color: #1a1612;
}
.l3-dag-deps {
  color: #8a8580;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l3-dag-status {
  position: relative;
  min-width: 11ch;
  text-align: right;
}
.l3-dag-pending {
  color: #b45309;
  animation: l3-vanish 1ms linear forwards;
}
.l3-dag-fired {
  position: absolute;
  inset: 0;
  text-align: right;
  color: #047857;
  opacity: 0;
  animation: l3-appear 200ms ease forwards;
}
@keyframes l3-vanish {
  to {
    visibility: hidden;
  }
}

/* ---- the metric dependency graph (SVG) ---- */
.mdg {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 0.4rem;
}
.mdg text {
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  fill: #1a1612;
}
.mdg-label {
  font-size: 12px;
}
.mdg-sub {
  font-size: 9.5px;
  fill: #8a8580;
}
/* the metric block "attaching" around the measurements */
.mdg-block {
  opacity: 0;
  animation: mdg-attach 420ms ease forwards;
  animation-delay: var(--d);
}
@keyframes mdg-attach {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.mdg-block-rect {
  fill: none;
  stroke: #b9b2a3;
  stroke-width: 1.3;
  stroke-dasharray: 5 4;
}
.mdg-block-label {
  font-size: 10.5px;
  fill: #8a8580;
}
/* nodes: a pending shell, with the fired state fading in over it */
.mdg-pend {
  fill: #fffdf6;
  stroke: #d8a35c;
  stroke-width: 1.3;
  stroke-dasharray: 4 3;
}
.mdg-pend--root {
  stroke: #1a1612;
  stroke-dasharray: none;
}
.mdg-pend--slot {
  stroke: #b9b2a3;
}
.mdg-fired {
  fill: #eafaf2;
  stroke: #047857;
  stroke-width: 1.5;
  opacity: 0;
  animation: l3-appear 280ms ease forwards;
  animation-delay: var(--d);
}
.mdg-fired--slot {
  fill: #fcefdb;
  stroke: #b45309;
}
.mdg-check {
  font-size: 11px;
  fill: #047857;
  opacity: 0;
  animation: l3-appear 280ms ease forwards;
  animation-delay: var(--d);
}
.mdg-edge {
  fill: none;
  stroke: #d8cfbd;
  stroke-width: 1.4;
}
.mdg-edge--soft {
  opacity: 0.45;
}
.mdg-edge-hot {
  fill: none;
  stroke: #047857;
  stroke-width: 1.6;
  opacity: 0;
  animation: l3-appear 280ms ease forwards;
  animation-delay: var(--d);
}

/* ---- cores-in-use chart ---- */
.cu {
  border: 1px solid var(--l2-rule-strong, #d8cfbd);
  border-radius: 12px;
  background: #fffdf7;
  padding: 1rem 1.1rem 0.9rem;
}
.cu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.cu-chart {
  width: 100%;
  height: auto;
  display: block;
}
.cu-grid {
  stroke: #efe8d8;
  stroke-width: 1;
}
.cu-tick,
.cu-axis {
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-size: 10.5px;
  fill: #8a8580;
}
.cu-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.cu-line--baml {
  stroke: #047857;
}
.cu-line--node {
  stroke: #b45309;
}
/* the time sweep that reveals both series at the same rate */
.cu-sweep {
  width: 0;
  animation: cu-sweep 4.6s linear forwards;
}
@keyframes cu-sweep {
  to {
    width: 566px;
  }
}
.cu-note {
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-size: 11.5px;
  opacity: 0;
  animation: l3-appear 250ms ease forwards;
}
.cu-note--baml {
  fill: #047857;
}
.cu-note--node {
  fill: #b45309;
}
.cu-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-size: 11px;
  padding: 0.4rem 0.2rem 0;
}
.cu-key--baml {
  color: #047857;
}
.cu-key--node {
  color: #b45309;
}
.cu-key--dim {
  color: #8a8580;
  margin-left: auto;
}

/* =================== misc layout =================== */
/* three small code columns (error-handling comparison) */
.l3-cols3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: start;
}
@media (max-width: 920px) {
  .l3-cols3 {
    grid-template-columns: 1fr;
  }
}
/* shrink code inside the 3-up comparison so it fits */
.l3-cols3 .l2-pre {
  font-size: 11.5px;
}

/* the question card on the describe slide */
.l3-task {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  border: 1px solid var(--l2-rule-strong, #d8cfbd);
  border-left: 3px solid #047857;
  border-radius: 10px;
  background: #fffdf6;
  padding: 0.7rem 1rem;
  margin-bottom: 1.1rem;
  font-size: 14.5px;
  color: #1a1612;
}
.l3-task-label {
  flex: 0 0 auto;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #047857;
}

.l3-design-tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a4d04;
  border: 1px solid #ecbf85;
  background: #fcefdb;
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 0.7rem;
}

@media (prefers-reduced-motion: reduce) {
  .l3-term-row,
  .l3-term-cmd,
  .l3-inf-node--hot,
  .l3-inf-tag,
  .l3-inf-caption,
  .l3-dag-event,
  .l3-dag-pending,
  .l3-dag-fired,
  .mdg-block,
  .mdg-fired,
  .mdg-check,
  .mdg-edge-hot,
  .cu-sweep,
  .cu-note {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/* =========================================================================
   /learn4 — a long-scroll story page (bun-v1.0 register): sans-serif prose,
   mono code, one section per viewport with generous air between sections.
   Reuses learn2.css (code blocks, editors) and learn3.css (terminals,
   infection graph, metrics dag) for the embedded components.
   ========================================================================= */

.l4 {
  --l4-ink: #1a1612;
  --l4-body: #2b2520;
  --l4-muted: #6f6a63;
  --l4-soft: #8a8580;
  --l4-rule: #e2ddcf;
  --l4-rule-strong: #d8cfbd;
  --l4-green: #047857;
  --l4-amber: #b45309;
  --l4-red: #b42318;

  background: #fdfbf5;
  color: var(--l4-body);
  font-family:
    var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
.l4 .font-mono,
.l4 code,
.l4 pre,
.l4 kbd {
  font-family: var(--font-geist-mono), ui-monospace, "SF Mono", monospace;
}
.l4 code {
  font-size: 0.92em;
  background: rgba(26, 22, 18, 0.05);
  border-radius: 4px;
  padding: 0.08em 0.32em;
}
.l4 pre code {
  background: none;
  padding: 0;
}

/* ---- top bar ---- */
.l4-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid var(--l4-rule);
  background: rgba(253, 251, 245, 0.92);
  backdrop-filter: blur(4px);
  font-size: 12.5px;
}
.l4-head a {
  color: var(--l4-ink);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.l4-head a span {
  color: var(--l4-soft);
  font-weight: 400;
  margin-left: 0.4rem;
}
.l4-head-install {
  color: var(--l4-green);
}

/* ---- sections: one idea per viewport, centered, air between ---- */
.l4-section {
  min-height: 96vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 9vh 1.5rem;
}
.l4-section--tall {
  min-height: 110vh;
}

/* content widths */
.l4-prose {
  width: 100%;
  max-width: 70ch;
}
.l4-wide {
  width: min(1180px, 96vw);
}
.l4-full {
  width: min(1520px, 97vw);
}

/* section kicker: "01 · the stack" */
.l4-kicker {
  font-family: var(--font-geist-mono), monospace;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--l4-soft);
  margin: 0 0 0.9rem;
}
/* the section number gets a hand-drawn circle */
.l4-kicker b {
  display: inline-block;
  color: var(--l4-green);
  font-weight: 600;
  margin-right: 0.55rem;
  padding: 1px 8px;
  border: 1.4px solid var(--l4-green);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 55%;
  transform: rotate(-2deg);
}
.l4 h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--l4-ink);
  margin: 0 0 1.1rem;
}
.l4-lead {
  font-size: clamp(17.5px, 1.9vw, 20px);
  line-height: 1.6;
  color: var(--l4-ink);
  margin: 0 0 1rem;
}
.l4 p {
  margin: 0 0 1rem;
}
.l4-dim {
  color: var(--l4-muted);
}
.l4-note {
  font-size: 13.5px;
  color: var(--l4-muted);
  border-left: 2px solid var(--l4-rule-strong);
  padding-left: 0.9rem;
  margin-top: 1.1rem;
}

/* ---- hero ---- */
.l4-hero {
  text-align: center;
}
.l4-hero-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.2rem);
  margin-bottom: 1.6rem;
}
.l4-hero-sheep {
  width: clamp(56px, 9vw, 104px);
  height: auto;
}
.l4-hero-title {
  font-family: var(--font-geist-mono), monospace;
  font-size: clamp(54px, 10vw, 112px);
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--l4-ink);
  margin: 0;
}
.l4-hero-sub {
  max-width: 56ch;
  margin: 0 auto 0.6rem;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
}
.l4-hero-tag {
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--l4-ink);
  font-weight: 550;
  margin: 0.4rem 0 1.8rem;
}
.l4-hero .l2-terminal {
  max-width: 420px;
}
.l4-scroll-hint {
  margin-top: 3rem;
  font-family: var(--font-geist-mono), monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--l4-soft);
}

/* ---- two-up grid for before/after & terminal pairs ---- */
.l4-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
  margin-top: 1.4rem;
}
@media (max-width: 880px) {
  .l4-pair {
    grid-template-columns: 1fr;
  }
}
.l4-pane-label {
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l4-soft);
  margin: 0 0 0.5rem;
}
.l4-pane-label--after {
  color: var(--l4-green);
}
.l4-stackv {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

/* ---- hover terms (dotted-underline jargon with a popover) ---- */
.l4-feature-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-size: 17.5px;
}
.l4-feature-list li {
  padding-left: 1.5rem;
  position: relative;
}
.l4-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--l4-green);
  border-radius: 1px;
}
.l4-term {
  position: relative;
  border-bottom: 1.5px dashed var(--l4-green);
  cursor: help;
  font-weight: 550;
  color: var(--l4-ink);
}
.l4-term-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 38ch;
  background: #1f1b17;
  color: #f3ede0;
  font-family: var(--font-geist-mono), monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(20, 18, 16, 0.25);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 140ms;
  pointer-events: none;
  z-index: 10;
}
.l4-term-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f1b17;
}
.l4-term:hover .l4-term-tip,
.l4-term:focus-visible .l4-term-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ---- the stack tower ---- */
.l4-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  align-items: start;
  margin-top: 1.6rem;
}
@media (max-width: 880px) {
  .l4-stack {
    grid-template-columns: 1fr;
  }
}
.l4-stack-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.l4-stack-col-title {
  font-family: var(--font-geist-mono), monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--l4-soft);
}
/* hand-drawn ("excalidraw") borders: two wobble variants so adjacent
   boxes don't share the same imperfections */
.l4-sketch-a {
  border: 1.6px solid var(--l4-ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.l4-sketch-b {
  border: 1.6px solid var(--l4-ink);
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
}
.l4-tower {
  /* room for the slumped layers to lean out of the column */
  padding: 0 14px;
}
.l4-layer {
  background: #fffdf6;
  padding: 0.55rem 0.95rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}
/* the slump: every layer starts straight, then settles into its tilt */
.l4-layer--slump {
  animation: l4-slump 600ms cubic-bezier(0.34, 1.4, 0.5, 1) forwards;
}
@keyframes l4-slump {
  to {
    transform: var(--tilt);
  }
}
.l4-layer-name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--l4-ink);
}
.l4-layer-who {
  font-family: var(--font-geist-mono), monospace;
  font-size: 11.5px;
  color: var(--l4-soft);
  text-align: right;
}
/* a seam: the widening crack between layers, annotated by hand. Sits above
   the tilted boxes (they lean into the gaps) with a paper backing so the
   annotation stays legible. */
.l4-seam {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.4rem;
  font-family: var(--font-geist-mono), monospace;
  font-size: 11.5px;
  color: var(--l4-red);
  opacity: 0;
  animation: l4-seam-in 300ms ease forwards;
}
.l4-seam-label {
  display: inline-block;
  background: #fdfbf5;
  padding: 1px 7px;
  border-radius: 6px;
}
@keyframes l4-seam-in {
  to {
    opacity: 1;
  }
}
/* the integrated column — same sketchbook, standing straight */
.l4-baml-col {
  border-color: var(--l4-green);
  background: #fffdf6;
  overflow: hidden;
}

/* carry the sketchbook look to the other diagram panels on this page —
   diagrams are hand-drawn, code and terminals stay machine-precise */
.l4 .l2-race,
.l4 .l3-inf,
.l4 .l3-dag,
.l4 .cu {
  border: 1.6px solid var(--l4-ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.l4-baml-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.62rem 0.95rem;
}
.l4-baml-row + .l4-baml-row {
  border-top: 1.4px dashed #bcdfd0;
}
.l4-baml-row-name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--l4-ink);
}
.l4-baml-row-what {
  font-family: var(--font-geist-mono), monospace;
  font-size: 11.5px;
  color: var(--l4-green);
  text-align: right;
}
.l4-stack-caption {
  grid-column: 1 / -1;
  font-size: 13.5px;
  color: var(--l4-muted);
  margin: 0.4rem 0 0;
}

/* ---- sdk pipeline (embed section) ---- */
.l4-pipe {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.4rem 0;
  margin: 1.2rem 0 1.6rem;
}
.l4-pipe-item {
  display: flex;
  align-items: center;
}
.l4-pipe-arrow {
  padding: 0 0.55rem;
  font-size: 19px;
  color: var(--l4-soft);
  opacity: 0;
  animation: l4-seam-in 260ms ease forwards;
}
.l4-pipe-step {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #fffdf6;
  padding: 0.5rem 0.9rem;
  opacity: 0;
  animation: l4-seam-in 300ms ease forwards;
}
.l4-pipe-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--l4-ink);
}
.l4-pipe-what {
  font-size: 11.5px;
  color: var(--l4-muted);
}

/* ---- rotating host-language pane ---- */
.l4-rot {
  display: grid;
  min-width: 0;
}
.l4-rot > div {
  grid-area: 1 / 1;
  min-width: 0;
  animation: l4-rot-a 11s linear infinite;
}
.l4-rot > div:nth-child(2) {
  animation-name: l4-rot-b;
}
.l4-rot:hover > div {
  animation-play-state: paused;
}
@keyframes l4-rot-a {
  0%,
  42% {
    opacity: 1;
    visibility: visible;
  }
  50%,
  92% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes l4-rot-b {
  0%,
  42% {
    opacity: 0;
    visibility: hidden;
  }
  50%,
  92% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* ---- pool schedule (TaskGroup limit animation) ---- */
.l4-pool {
  border: 1.6px solid var(--l4-ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: #fffdf6;
  padding: 0.9rem 1rem 1rem;
}
.l4-pool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.l4-pool-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 3px 0;
}
.l4-pool-name {
  flex: 0 0 4.6rem;
  font-size: 11.5px;
  color: var(--l4-ink);
}
.l4-pool-track {
  flex: 1;
  height: 14px;
  background: #efe8d8;
  border-radius: 3px;
  overflow: hidden;
}
.l4-pool-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #047857;
  border-radius: 3px;
  animation: l2-fill linear forwards;
}
.l4-pool-status {
  position: relative;
  flex: 0 0 3.6rem;
  font-size: 10.5px;
  text-align: right;
}
.l4-pool-queued {
  color: var(--l4-amber);
  animation: l4-vanish 1ms linear forwards;
}
.l4-pool-done {
  position: absolute;
  inset: 0;
  text-align: right;
  color: var(--l4-green);
  opacity: 0;
  animation: l4-appear 180ms ease forwards;
}
@keyframes l4-vanish {
  to {
    visibility: hidden;
  }
}
@keyframes l4-appear {
  to {
    opacity: 1;
  }
}

/* ---- big statement (the "program is the visualization" beat) ---- */
.l4-statement {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--l4-ink);
  margin: 1.6rem 0 0;
  text-align: center;
}
.l4-statement em {
  font-style: italic;
  color: var(--l4-green);
}

/* the playground gets real height on this page */
.l4 .l2-live {
  height: min(74vh, 720px);
}

/* design-tag reuse, footer */
.l4-close {
  text-align: center;
}
.l4-close .l2-terminal {
  max-width: 460px;
}
.l4-close-link {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--font-geist-mono), monospace;
  font-size: 14px;
  color: var(--l4-green);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.l4-close-link:hover {
  border-bottom-color: var(--l4-green);
}

@media (prefers-reduced-motion: reduce) {
  .l4-seam,
  .l4-layer--slump {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/* =========================================================================
   /learn6 — "BAML is the programming language for agents": a long-form
   article. Reading column for prose, wide breakouts for editors and
   terminals. Reuses learn2.css (code/editors/playground), learn3.css
   (terminals, infection graph, metrics dag) and learn4.css (sdk pipeline,
   rotating types) for embedded components.
   ========================================================================= */

.l6 {
  --l6-ink: #1a1612;
  --l6-body: #2b2520;
  --l6-muted: #6f6a63;
  --l6-soft: #8a8580;
  --l6-rule: #e7e2d6;
  --l6-accent: #6d28d9;
  --l6-accent-soft: #a78bfa;
  --l6-amber: #b45309;
  /* Combined height of the fixed top chrome — SiteBanner (41px) + the shared
     Navbar (~65px) — used to offset anchor jumps and the "On this page" rail
     so they clear the nav. The Navbar's own nav-spacer reserves the flow room,
     so the page sets no top padding itself. Below 640px the banner is hidden
     and the navbar sits at top:0 (see globals.css), so the chrome shrinks. */
  --l6-chrome: 84px;
  padding-bottom: 5rem;
  font-family:
    var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--l6-body);

  background: #fdfbf5;
}
.l6 .font-mono,
.l6 code,
.l6 pre,
.l6 kbd {
  font-family: var(--font-geist-mono), ui-monospace, "SF Mono", monospace;
}
.l6 code {
  padding: 0.08em 0.32em;
  font-size: 0.9em;
  background: rgba(26, 22, 18, 0.055);
  border-radius: 4px;
}
.l6 pre code {
  padding: 0;
  background: none;
}

/* ---- layout: centered reading column (blogpost style). Text within the
   column stays left-aligned; the whole column is centered on the page. The
   "on this page" rail floats in the right gutter. */
.l6 {
  --l6-gutter: clamp(1.2rem, 5vw, 4.5rem);
}
/* At <=640px the banner is hidden and the navbar drops to top:0 (globals.css),
   so the fixed chrome is just the navbar height. */
@media (max-width: 640px) {
  .l6 {
    --l6-chrome: 58px;
  }
}
/* On wide screens widen the side gutter so the centered content clears the
   fixed "on this page" rail pinned to the right. */
@media (min-width: 1140px) {
  .l6 {
    --l6-gutter: 248px;
  }
}
/* anchor jumps from the rail land below the sticky header */
:root:has(.l6) {
  scroll-behavior: smooth;
}
.l6-section {
  max-width: min(800px, calc(100vw - 2 * var(--l6-gutter)));
  padding: 4.4rem 0 1.2rem;
  margin: 0 auto;
  scroll-margin-top: calc(var(--l6-chrome) + 1rem);
}
/* Breakout: editors, playgrounds, and side-by-side pairs are wider than the
   ~760px reading column but stay centered on the page like the prose above.
   `margin: auto` can't center a child wider than its parent, so we offset the
   left edge to page-center minus half the breakout's own width. (Negative
   margins, not transform: a transform here would create a containing block
   that misplaces the playground's fixed-position Monaco popups.) */
.l6-breakout,
.l6-pair {
  /* ~10% wider than the 800px reading column, so the boxes feel tied to the
     text rather than spanning the full page. */
  --l6-bw: min(880px, calc(100vw - 2 * var(--l6-gutter)));
  width: var(--l6-bw);
  margin-right: 0;
  margin-left: calc(50% - var(--l6-bw) / 2);
}
.l6-breakout--xl {
  --l6-bw: min(1400px, calc(100vw - 2 * var(--l6-gutter)));
}

/* ---- "on this page" rail ---- */
.l6-toc {
  position: fixed;
  /* clear the fixed banner + navbar above */
  top: calc(var(--l6-chrome) + 1rem);
  right: 1.2rem;
  z-index: 15;
  display: none;
  width: 200px;
}
@media (min-width: 1140px) {
  .l6-toc {
    display: block;
  }
}
.l6-toc-cap {
  margin: 0 0 0.5rem;
  font-size: 10.5px;
  color: var(--l6-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.l6-toc ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.l6-toc a {
  display: block;
  padding: 2.5px 9px;
  font-size: 12px;
  color: var(--l6-muted);
  text-decoration: none;
  border-left: 2px solid var(--l6-rule);
}
.l6-toc a:hover {
  color: var(--l6-ink);
}
.l6-toc a.l6-toc-active {
  font-weight: 550;
  color: var(--l6-accent);
  border-left-color: var(--l6-accent);
}
.l6-toc a.l6-toc-sub {
  padding-left: 22px;
  font-size: 11px;
}
/* anchored subsections land below the sticky header too */
.l6 .l6-sub[id] {
  scroll-margin-top: calc(var(--l6-chrome) + 1rem);
}

/* every editor and code block gets the same outline (learn2's border vars
   don't resolve outside the deck, so set it explicitly here) */
.l6 .l2-bamled-frame,
.l6 .l2-code {
  border: 1px solid #d8cfbd;
}

/* Stop mobile Safari from auto-inflating code text. It inflates the Monaco
   editors' wrapped lines but not the static <pre> panes, so the same 13px code
   rendered at two different sizes on iPhone (and the inflated text then
   wrapped while the static didn't). Pin everything to the declared size. */
.l6 .l2-code,
.l6 .l2-bamled-frame,
.l6 .l2-live {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The inline error-lens message in the static panes sits at the end of a line
   inside a horizontal-scroll box, so without a width cap it runs off the right
   edge instead of wrapping (the Monaco editor wraps via wordWrap). It's an
   inline <span>, so it needs inline-block for max-width to apply; then it wraps
   like the BAML editor's diagnostics. */
.l6 .l2-errorlens {
  display: inline-block;
  max-width: 34ch;
  vertical-align: top;
  white-space: pre-wrap;
}

.l6 h1 {
  margin: 1.2rem 0 1.4rem;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 680;
  line-height: 1.08;
  color: var(--l6-ink);
  letter-spacing: -0.02em;
}
.l6 h2 {
  margin: 0 0 1rem;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 650;
  line-height: 1.18;
  color: var(--l6-ink);
  letter-spacing: -0.015em;
}
.l6 h3 {
  margin: 0 0 0.8rem;
  font-size: 19px;
  font-weight: 620;
  color: var(--l6-ink);
}
/* Numbered sub-headers (the AI-workflows 1/2/3) read as top-level entries
   in their own list — match the size of the numbered section headers. */
.l6 h3:has(.l6-num) {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.l6-num {
  display: inline-block;
  padding: 1px 9px;
  margin-right: 0.6rem;
  font-size: 0.72em;
  font-weight: 600;
  color: var(--l6-accent);
  border: 1.4px solid var(--l6-accent);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 55%;
  transform: translateY(-3px) rotate(-2deg);
}
/* ---- part dividers: the two top-level sections (workflows / agents).
   Larger than the numbered subsection headers, with an eyebrow and a rule,
   so each half of the page reads as its own division. */
.l6 .l6-part {
  border-top: 1px solid var(--l6-rule);
}
.l6 .l6-part-eyebrow {
  margin: 0 0 0.55rem;
  font-size: 11px;
  font-weight: 500;
  color: var(--l6-accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.l6 .l6-part-title {
  margin: 0 0 1.1rem;
  font-size: clamp(29px, 3.8vw, 42px);
  font-weight: 680;
  line-height: 1.12;
  color: var(--l6-ink);
  letter-spacing: -0.02em;
}
/* Share anchor revealed on header hover — links to (and copies) the section URL. */
.l6-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4em;
  vertical-align: middle;
  color: var(--l6-soft);
  opacity: 0;
  transition:
    opacity 140ms ease,
    color 140ms ease;
}
.l6-anchor:hover {
  color: var(--l6-accent);
}
.l6 h2:hover .l6-anchor,
.l6 h3:hover .l6-anchor,
.l6 .l6-part-title:hover .l6-anchor,
.l6-anchor:focus-visible {
  opacity: 1;
}
/* Touch devices have no hover — keep the anchor faintly visible so it's tappable. */
@media (hover: none) {
  .l6-anchor {
    opacity: 0.45;
  }
}
.l6 p {
  margin: 0 0 1rem;
}
.l6-lead {
  font-size: clamp(17.5px, 1.9vw, 20px);
  color: var(--l6-ink);
}
.l6-lead em {
  font-style: italic;
  color: var(--l6-accent);
}
.l6-dim {
  font-size: 14.5px;
  color: var(--l6-muted);
}
.l6-note {
  padding-left: 0.9rem;
  margin-top: 1.1rem;
  font-size: 13.5px;
  color: var(--l6-muted);
  border-left: 2px solid var(--l6-rule);
}
.l6-link {
  color: var(--l6-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(109, 40, 217, 0.35);
}
.l6-link:hover {
  border-bottom-color: var(--l6-accent);
}
/* "Spec" chip in a section header linking to its design proposal (BEP). Small,
   monospace, accent-tinted pill that sits after the title and before the share
   anchor. Always visible (unlike the hover-only anchor) so the reference is
   discoverable. */
.l6-bep {
  display: inline-flex;
  gap: 0.2em;
  align-items: center;
  padding: 2px 8px;
  margin-left: 0.55em;
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
  color: var(--l6-accent);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  background: rgba(109, 40, 217, 0.07);
  border: 1px solid rgba(109, 40, 217, 0.28);
  border-radius: 999px;
  transition:
    background 140ms ease,
    border-color 140ms ease;
}
.l6-bep:hover {
  background: rgba(109, 40, 217, 0.14);
  border-color: var(--l6-accent);
}

/* In-prose cross-reference jumps to other sections — keep the underlined look
   of plain emphasis, but make them clickable and tint on hover. */
.l6-xref {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(109, 40, 217, 0.4);
  text-underline-offset: 2px;
  cursor: pointer;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}
.l6-xref:hover {
  color: var(--l6-accent);
  text-decoration-color: var(--l6-accent);
}
.l6-sub {
  margin-top: 3rem;
}
.l6-block {
  margin: 1.1rem 0;
}
.l6-breakout {
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

/* ---- design philosophy: a bare list of aphorisms (Zen-of-Python style).
   Monospace, one principle per line, each tee-ing up a section below — the
   article is where they're demonstrated, so the lines stay unexplained. */
.l6-tenets {
  padding: 0;
  margin: 1.6rem 0 0.5rem;
  list-style: none;
}
.l6-tenet {
  padding: 0.28rem 0 0.28rem 1.5rem;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--l6-ink);
  text-indent: -1.5rem;
}
.l6-tenet::before {
  margin-right: 0.7rem;
  color: var(--l6-accent);
  content: "—";
}

/* ---- eras timeline (homepage hero) ---- */
.l6-tl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 420px;
  padding: 4px 0;
  margin: 1.6rem 0 1rem;
  list-style: none;
}
/* the connecting line: muted at the top (the past), warming to the accent at
   the bottom (the open question BAML is here to answer) */
.l6-tl::before {
  position: absolute;
  top: 10px;
  bottom: 12px;
  left: 6px;
  width: 2px;
  content: "";
  background: linear-gradient(
    to bottom,
    #ddd5c4 0%,
    var(--l6-accent-soft) 62%,
    var(--l6-accent) 100%
  );
  border-radius: 2px;
  transform-origin: top center;
  animation: l6-tl-draw 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.l6-tl-item {
  position: relative;
  padding-left: 30px;
  letter-spacing: -0.01em;
  animation: l6-tl-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.l6-tl-item:nth-child(1) {
  animation-delay: 0.15s;
}
.l6-tl-item:nth-child(2) {
  animation-delay: 0.28s;
}
.l6-tl-item:nth-child(3) {
  animation-delay: 0.41s;
}
.l6-tl-item:nth-child(4) {
  animation-delay: 0.54s;
}
.l6-tl-node {
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 14px;
  height: 14px;
  background: #fdfbf5;
  border: 2.5px solid var(--l6-soft);
  border-radius: 50%;
}
.l6-tl-item:nth-child(2) .l6-tl-node {
  border-color: #9a8fb5;
}
.l6-tl-item:nth-child(3) .l6-tl-node {
  border-color: var(--l6-accent-soft);
}
/* the "now" node: filled accent with a soft halo that gently breathes */
.l6-tl-node--now {
  left: -1px;
  width: 16px;
  height: 16px;
  background: var(--l6-accent);
  border-color: var(--l6-accent);
  box-shadow: 0 0 0 5px rgba(109, 40, 217, 0.14);
  animation: l6-tl-pulse 2.4s ease-in-out 1s infinite;
}
.l6-tl-era {
  font-weight: 600;
  color: var(--l6-ink);
}
.l6-tl-arrow {
  margin: 0 0.5ch;
  color: var(--l6-soft);
}
.l6-tl-lang {
  color: var(--l6-body);
}
.l6-tl-item--now .l6-tl-era {
  color: var(--l6-accent);
}
.l6-tl-item--now .l6-tl-arrow {
  color: var(--l6-accent-soft);
}
.l6-tl-item--now .l6-tl-lang {
  font-family: var(--font-geist-mono), monospace;
  font-weight: 700;
  color: var(--l6-accent);
  letter-spacing: 0.02em;
}
@keyframes l6-tl-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes l6-tl-draw {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes l6-tl-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 5px rgba(109, 40, 217, 0.14);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(109, 40, 217, 0.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .l6-tl::before,
  .l6-tl-item,
  .l6-tl-node--now {
    animation: none;
  }
}

/* ---- homepage CTAs (after the design philosophy list) ---- */
.l6-cta-wrap {
  padding-top: 0.5rem;
}
/* Product screenshots embedded in the article (e.g. the Flame tab): fill the
   breakout width, keep aspect ratio, and clip to rounded corners with a faint
   frame so they sit cleanly on the dark page. */
.l6-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--l6-code-border, #34343a);
  border-radius: 12px;
}

/* subtle, centered text-only community link (between parts) */
.l6-join {
  padding: 0.5rem 0;
  text-align: center;
}
.l6-join-link {
  font-size: 13px;
  color: var(--l6-soft);
  text-decoration: none;
  transition: color 140ms ease;
}
.l6-join-link:hover {
  color: var(--l6-accent);
}
.l6-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.l6-cta {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.7rem 1.3rem;
  font-size: 15px;
  font-weight: 550;
  color: var(--l6-ink);
  text-decoration: none;
  background: #fffdf7;
  border: 1px solid #d8cfbd;
  border-radius: 10px;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease;
}
.l6-cta span {
  transition: transform 140ms ease;
}
.l6-cta:hover {
  border-color: var(--l6-accent);
  transform: translateY(-1px);
}
.l6-cta:hover span {
  transform: translateX(3px);
}
.l6-cta--primary {
  color: #fff;
  background: var(--l6-accent);
  border-color: var(--l6-accent);
}
.l6-cta--primary:hover {
  background: #5b21b6;
  border-color: #5b21b6;
}

/* ---- hero ---- */
.l6-hero {
  padding-top: 4.5rem;
}
/* The sheep flows inline with the text, so it sits on the first line next
   to "BAML" instead of centering against the whole wrapped headline. */
.l6-hero-sheep {
  display: inline-block;
  width: auto;
  height: 0.92em;
  margin-right: 0.22em;
  vertical-align: -0.08em;
}
.l6-hero-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 72ch;
  padding-left: 1.4rem;
  margin: 0.4rem 0 1.6rem;
}
.l6-hero-list li::marker {
  font-weight: 600;
  color: var(--l6-accent);
}
.l6-hero .l2-terminal {
  max-width: 440px;
}

/* ---- pairs & labels ---- */
.l6-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
  /* vertical only — the centering offset (margin-left) is set above */
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}
/* min-width:0 so a pane can shrink below its (wide) code content instead of
   blowing the column out past the viewport. */
.l6-pair > * {
  min-width: 0;
}
@media (max-width: 880px) {
  .l6-pair {
    /* minmax(0, 1fr), not 1fr — plain `1fr` keeps min-width:auto, which lets
       the Monaco editor's content force the column wider than the screen (the
       single-column .l6-block sections fit because they don't do this). */
    grid-template-columns: minmax(0, 1fr);
  }
}
.l6-pane-label {
  margin: 0 0 0.5rem;
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
  color: var(--l6-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.l6-pane-label--after {
  color: var(--l6-accent);
}
.l6-stackv {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

/* ---- benchmark tables ---- */
.l6-table {
  width: 100%;
  margin: 0.4rem 0 0.8rem;
  font-size: 14.5px;
  border-collapse: collapse;
}
.l6-table th {
  padding: 0.35rem 0.9rem 0.35rem 0;
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--l6-soft);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--l6-rule);
}
.l6-table td {
  padding: 0.45rem 0.9rem 0.45rem 0;
  white-space: nowrap;
  border-bottom: 1px solid var(--l6-rule);
}
.l6-table td:first-child {
  font-size: 13px;
}
.l6-table-accent td {
  font-weight: 600;
  color: var(--l6-accent);
}

/* ---- benchmark bar charts ---- */
.l6-chart {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 640px;
  margin: 1.4rem 0 1rem;
}
.l6-chart-cap {
  margin: 0 0 0.55rem;
  font-size: 11px;
  color: var(--l6-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.l6-chart-row {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 5px 0;
}
.l6-chart-name {
  font-size: 12.5px;
  color: var(--l6-body);
}
.l6-chart-track {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  min-width: 0;
}
.l6-chart-fill {
  position: relative;
  flex: none;
  width: 0;
  height: 24px;
  overflow: hidden;
  background: #d9d2c0;
  border-radius: 4px;
  animation: l6-chart-grow 0.6s ease-out forwards;
}
.l6-chart-fill--baml {
  background: var(--l6-accent);
}
@keyframes l6-chart-grow {
  to {
    width: var(--w);
  }
}
/* the lamb rides inside the bar, at its right end; recolored white so it
   reads against the purple */
.l6-chart-sheep {
  position: absolute;
  top: 50%;
  right: 5px;
  width: auto;
  height: 17px;
  filter: brightness(0) invert(1);
  transform: translateY(-50%);
}
.l6-chart-val {
  font-size: 12.5px;
  color: var(--l6-ink);
  white-space: nowrap;
  opacity: 0;
  animation: l6-chart-fade 0.3s ease forwards;
}
.l6-chart-sub {
  font-size: 11px;
  font-style: normal;
  color: var(--l6-muted);
}
@keyframes l6-chart-fade {
  to {
    opacity: 1;
  }
}

/* ---- "try it out" install unit: tabs + command in one light frame,
   styled like the page's code blocks ---- */
.l6-try {
  max-width: 560px;
  overflow: hidden;
  background: #fffdf7;
  border: 1px solid #d8cfbd;
  border-radius: 10px;
}
.l6-try-head {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 6px 8px;
  background: #f6f1e4;
  border-bottom: 1px solid var(--l6-rule);
}
.l6-try-tab {
  padding: 3px 11px;
  font-size: 11px;
  color: var(--l6-muted);
  letter-spacing: 0.06em;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
}
.l6-try-tab:hover {
  color: var(--l6-ink);
}
.l6-try-tab--on {
  color: var(--l6-accent);
  background: #fffdf7;
  border-color: #d8cfbd;
}
.l6-try-copy {
  padding: 3px 9px;
  margin-left: auto;
  font-size: 10.5px;
  color: var(--l6-muted);
  letter-spacing: 0.06em;
  cursor: pointer;
  background: transparent;
  border: 1px solid #d8cfbd;
  border-radius: 6px;
}
.l6-try-copy:hover {
  color: var(--l6-ink);
}
/* Install-method toggle (Homebrew / curl) — a secondary row under the head,
   shown only on the "for humans" tab. Lighter than the main tabs. */
.l6-try-method {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  padding: 8px 10px 0;
}
.l6-try-method-cap {
  margin-right: 0.15rem;
  font-size: 10px;
  color: var(--l6-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.l6-try-method-btn {
  padding: 2px 9px;
  font-size: 10.5px;
  color: var(--l6-muted);
  letter-spacing: 0.06em;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
}
.l6-try-method-btn:hover {
  color: var(--l6-ink);
}
.l6-try-method-btn--on {
  color: var(--l6-accent);
  background: #fffdf7;
  border-color: #d8cfbd;
}
.l6-try-body {
  padding: 0.75rem 0.95rem;
  font-size: 13px;
  line-height: 1.7;
  color: var(--l6-ink);
}
.l6-try-prompt {
  color: var(--l6-accent);
}

/* ---- expandable code (details/summary) ---- */
.l6-details {
  margin: 1rem 0;
}
.l6-details summary {
  font-family: var(--font-geist-mono), monospace;
  font-size: 12px;
  color: var(--l6-muted);
  letter-spacing: 0.06em;
  cursor: pointer;
}
.l6-details summary:hover {
  color: var(--l6-ink);
}
.l6-details[open] summary {
  margin-bottom: 0.7rem;
}

/* ---- the glow hint (error-handling section) ---- */
.l6-glow {
  border-radius: 4px;
  animation: l6-glow 2s ease-in-out infinite;
}
@keyframes l6-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(109, 40, 217, 0);
    background: rgba(26, 22, 18, 0.055);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.18);
    background: rgba(109, 40, 217, 0.14);
  }
}

/* ---- sdk switcher tabs ---- */
.l6-sdk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 0.2rem;
}
.l6-sdk-tab {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.32rem 0.75rem;
  font-size: 12.5px;
  color: var(--l6-muted);
  cursor: pointer;
  background: #fffdf6;
  border: 1px solid var(--l6-rule);
  border-radius: 8px;
  transition:
    border-color 120ms ease,
    color 120ms ease;
}
.l6-sdk-tab:hover {
  color: var(--l6-ink);
}
.l6-sdk-tab--on {
  color: var(--l6-ink);
  border-color: var(--l6-accent);
  box-shadow: inset 0 0 0 1px var(--l6-accent);
}
.l6-sdk-soon {
  font-size: 9.5px;
  color: var(--l6-amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Placeholder shown in the generated-SDK pane for languages that don't ship
   yet (Go, Rust) — a quiet dashed box inviting people to the Discord. */
.l6-sdk-soon-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 1.4rem 1.6rem;
  color: var(--l6-muted);
  text-align: center;
  background: #fffdf6;
  border: 1px dashed var(--l6-rule);
  border-radius: 10px;
}
.l6-sdk-soon-pane p {
  max-width: 28ch;
  margin: 0;
  line-height: 1.5;
}

/* ---- Native LLM Functions: example switcher above the playground ---- */
.l6-wf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}
.l6-wf-tab {
  padding: 0.32rem 0.8rem;
  font-size: 12.5px;
  color: var(--l6-muted);
  cursor: pointer;
  background: #fffdf6;
  border: 1px solid var(--l6-rule);
  border-radius: 8px;
  transition:
    border-color 120ms ease,
    color 120ms ease;
}
.l6-wf-tab:hover {
  color: var(--l6-ink);
}
.l6-wf-tab--on {
  color: var(--l6-ink);
  border-color: var(--l6-accent);
  box-shadow: inset 0 0 0 1px var(--l6-accent);
}
/* entry-function highlight (whole-line tint) inside the live playground */
.l6-wf-hl {
  background: rgba(109, 40, 217, 0.1);
}
/* loading veil shown while a switched workflow's graph compiles + lays out */
/* =========================================================================
   Recursive self-improvement — "the sweep". Ripples of refinement radiate
   from the center (per-cell animation-delay = distance from center); the
   keyframes carry three passes per 9s cycle. Latch classes keep their
   improvement after pass N and deepen on later passes, then the field
   resets with the loop.
   ========================================================================= */
/* centered within the text column */
.l6-si-sweep {
  display: grid;
  grid-template-columns: repeat(16, 8px);
  gap: 3px;
  width: max-content;
  margin: 2.2rem auto 0.6rem;
}
.l6-swp-cell {
  width: 8px;
  height: 8px;
  background: #e9e4d8;
  border-radius: 1.5px;
  animation: l6-swp 9s ease-in-out infinite;
}
.l6-swp-l1 {
  animation-name: l6-swp-l1;
}
.l6-swp-l2 {
  animation-name: l6-swp-l2;
}
.l6-swp-l3 {
  animation-name: l6-swp-l3;
}
/* base: pulse on each of the three wavefronts, never keep anything */
@keyframes l6-swp {
  0% {
    background: #e9e4d8;
    transform: scale(1);
  }
  2.5% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  8%,
  33.3% {
    background: #e9e4d8;
    transform: scale(1);
  }
  35.8% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  41.3%,
  66.7% {
    background: #e9e4d8;
    transform: scale(1);
  }
  69.2% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  74.7%,
  100% {
    background: #e9e4d8;
    transform: scale(1);
  }
}
/* latches after pass 1, deepens on passes 2 and 3 */
@keyframes l6-swp-l1 {
  0% {
    background: #e9e4d8;
    transform: scale(1);
  }
  2.5% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  8%,
  33.3% {
    background: rgba(109, 40, 217, 0.32);
    transform: scale(1);
  }
  35.8% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  41.3%,
  66.7% {
    background: rgba(109, 40, 217, 0.48);
    transform: scale(1);
  }
  69.2% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  74.7%,
  91% {
    background: rgba(109, 40, 217, 0.66);
    transform: scale(1);
  }
  100% {
    background: #e9e4d8;
    transform: scale(1);
  }
}
/* latches after pass 2, deepens on pass 3 */
@keyframes l6-swp-l2 {
  0% {
    background: #e9e4d8;
    transform: scale(1);
  }
  2.5% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  8%,
  33.3% {
    background: #e9e4d8;
    transform: scale(1);
  }
  35.8% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  41.3%,
  66.7% {
    background: rgba(109, 40, 217, 0.32);
    transform: scale(1);
  }
  69.2% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  74.7%,
  91% {
    background: rgba(109, 40, 217, 0.5);
    transform: scale(1);
  }
  100% {
    background: #e9e4d8;
    transform: scale(1);
  }
}
/* latches after the final pass */
@keyframes l6-swp-l3 {
  0% {
    background: #e9e4d8;
    transform: scale(1);
  }
  2.5% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  8%,
  33.3% {
    background: #e9e4d8;
    transform: scale(1);
  }
  35.8% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  41.3%,
  66.7% {
    background: #e9e4d8;
    transform: scale(1);
  }
  69.2% {
    background: #6d28d9;
    transform: scale(1.4);
  }
  74.7%,
  91% {
    background: rgba(109, 40, 217, 0.34);
    transform: scale(1);
  }
  100% {
    background: #e9e4d8;
    transform: scale(1);
  }
}

/* =========================================================================
   Scheduler — two unlabeled lanes, bars draw in on schedule, sweep line.
   Bar keyframes are generated inline by the component.
   ========================================================================= */
.l6-sch {
  position: relative;
  width: min(560px, 100%);
  height: 84px;
  margin: 1.2rem 0 0.4rem;
}
.l6-sch-lane {
  position: absolute;
  right: 8%;
  left: 0;
  height: 14px;
  border-bottom: 1px dashed var(--l6-rule);
}
.l6-sch-lane:first-of-type {
  top: calc(50% - 17px);
}
.l6-sch-lane:last-of-type {
  top: calc(50% + 3px);
}
.l6-sch-bar {
  position: absolute;
  height: 14px;
  background: var(--l6-accent-soft);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
}
.l6-sch-now {
  position: absolute;
  top: calc(50% - 26px);
  bottom: calc(50% - 26px);
  width: 1.5px;
  background: var(--l6-ink);
  opacity: 0.45;
  animation: l6-sch-now 8s linear infinite;
}
@keyframes l6-sch-now {
  0% {
    left: 0%;
    opacity: 0.45;
  }
  82.5% {
    left: 92%;
    opacity: 0.45;
  }
  90% {
    opacity: 0;
  }
  99% {
    left: 0%;
    opacity: 0;
  }
  100% {
    left: 0%;
    opacity: 0.45;
  }
}

/* the playground gets real height on this page */
.l6 .l2-live {
  --color-vsc-green: #6d28d9;
  height: min(76vh, 740px);
  border: 1px solid #d8cfbd;
}

/* =========================================================================
   BAML is purple on this page: run buttons and the editor's run codelens
   follow the accent.
   ========================================================================= */
.l6 .l2-run-btn {
  background: var(--l6-accent);
}
.l6 .l2-run-btn:hover:not(:disabled) {
  background: #5b21b6;
}
.l6 .monaco-editor .codelens-decoration a {
  color: var(--l6-accent) !important;
}
/* On the dark page the deep --l6-accent purple is nearly black against the
   editor; use the lighter accent so the run/test codelens stays legible. Scoped
   to the page code-theme so it reaches both the LivePlayground and the
   standalone BamlEditor panes (the latter isn't a .baml-playground-root). */
.l6[data-code-theme="dark"] .monaco-editor .codelens-decoration a {
  color: #a78bfa !important;
}

/* Reduced motion: only quiet the attention-grabbing inline glow. The
   diagram loops (cubes, scheduler) stay — same policy as /learn4, where
   only layout-shifting one-shots are reduced. */
@media (prefers-reduced-motion: reduce) {
  .l6-glow {
    animation: none;
  }
}

/* =========================================================================
   BAML files get a branded header. Any code block whose filename ends in
   `.baml` (BamlCode or the Monaco BamlEditor) carries .l2-code-head--baml, so
   it's clear which panes are BAML vs TypeScript/Python/etc. Kept tasteful: a
   subtle purple-tinted bar + a 2px accent line + purple filename, not a
   saturated block. `--l6-code-head` falls back to the paper header color when
   no dark theme is set. Works on every code theme.
   ========================================================================= */
.l6 .l2-code-head--baml {
  background: color-mix(
    in srgb,
    var(--l6-accent) 14%,
    var(--l6-code-head, #f3ecdf)
  );
  border-bottom: 2px solid var(--l6-accent);
}
.l6 .l2-code-head--baml .l2-code-name {
  font-weight: 600;
  color: var(--l6-baml-name, #6d28d9);
}
/* swap the generic window dots for the BAML lamb — these are BAML "IDEs". */
.l6 .l2-code-head--baml .l2-code-dots {
  display: none;
}
.l6 .l2-code-head--baml::before {
  flex: none;
  width: 18px;
  height: 18px;
  content: "";
  background: url("/bamllogopurple.svg") center / contain no-repeat;
}
/* on dark frames, use the white lamb + lighten the filename so both read on
   the tinted-dark bar */
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"])
.l2-code-head--baml::before {
  background-image: url("/baml-lamb-white.png");
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) {
  --l6-baml-name: #c4b5fd;
}

/* =========================================================================
   Dark code themes. Driven by CODE_THEME in Article.tsx, which sets
   data-code-theme="<name>" on .l6 (and picks the matching Monaco + Shiki
   themes). Each preset sets frame-chrome variables so the editor *wrapper*
   matches the editor interior; the shared rules below paint the frames from
   those variables. Token colors come from the dark Shiki/Monaco themes
   themselves. Scoped to .l6 so the /learn2 deck is untouched.
   ========================================================================= */
.l6[data-code-theme="dark"] {
  --l6-code-bg: #1e1e1e;
  --l6-code-head: #252526;
  --l6-code-border: #34343a;
  --l6-code-name: #c9c9c9;
  --l6-code-ln: #5a5a5a;
  --l6-code-dot: #4a4a4a;
}
.l6[data-code-theme="midnight"] {
  --l6-code-bg: #1a1b26;
  --l6-code-head: #1f2233;
  --l6-code-border: #2a2e42;
  --l6-code-name: #a9b1d6;
  --l6-code-ln: #3b4261;
  --l6-code-dot: #3b4261;
}

/* static highlighted code (BamlCode) */
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l2-code {
  background: var(--l6-code-bg);
  border-color: var(--l6-code-border);
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"])
  .l2-code-head:not(.l2-code-head--baml) {
  background: var(--l6-code-head);
  border-bottom-color: var(--l6-code-border);
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l2-code-name {
  color: var(--l6-code-name);
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l2-code-dots i {
  background: var(--l6-code-dot);
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l2-ln {
  color: var(--l6-code-ln);
}

/* Monaco editor + live playground wrappers (the editor interior background
   comes from the Monaco theme; these cover the frame, header, and loading
   states so nothing flashes cream). */
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l2-bamled-frame,
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l2-live {
  background: var(--l6-code-bg);
  border-color: var(--l6-code-border);
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l2-bamled,
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"])
  .l2-bamled-loading,
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"])
  .l2-live-loading {
  color: var(--l6-code-name);
  background: var(--l6-code-bg);
}
/* The loading veil over the result pane is a translucent white wash on the
   cream page; on dark frames that flashes a bright box, so swap it for a dark
   wash and lift the label/spinner to a readable tone. */
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l2-live-veil {
  color: var(--l6-code-name);
  background: color-mix(in srgb, var(--l6-code-bg) 72%, transparent);
}

/* Diagnostics + line highlights are tuned for the cream page; on dark frames
   their faint tints disappear. Brighten them and add a left accent bar so the
   highlighted line and the inline runtime error read clearly. */
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l2-line-hl {
  background: rgba(167, 139, 250, 0.16);
  box-shadow: inset 3px 0 0 var(--l6-accent-soft);
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l2-ed-hl {
  background: rgba(167, 139, 250, 0.16);
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l6-wf-hl {
  background: rgba(167, 139, 250, 0.18);
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"])
  .l2-line-diag.l2-sev-error {
  background: rgba(248, 81, 73, 0.14);
  box-shadow: inset 3px 0 0 #f85149;
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"])
  .l2-line-diag.l2-sev-warning {
  background: rgba(210, 153, 34, 0.14);
  box-shadow: inset 3px 0 0 #d29922;
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"]) .l2-errorlens {
  opacity: 1;
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"])
  .l2-errorlens.l2-sev-error {
  color: #ff7b72;
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"])
  .l2-errorlens.l2-sev-warning {
  color: #e3b341;
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"])
  .l2-errorlens.l2-sev-info {
  color: #8b949e;
}
/* Monaco inline-diagnostic line tints */
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"])
.l2-el-line-error {
  background: rgba(248, 81, 73, 0.12);
}
.l6:is([data-code-theme="dark"], [data-code-theme="midnight"])
  .l2-el-line-warning {
  background: rgba(210, 153, 34, 0.12);
}

/* ============================================================================
   Design-philosophy accordion (TenetsAccordion). Ported from the standalone
   mockup and fully scoped under .l6-tenets-accordion so its generic class names
   (.card, .frame, .branch, .tv-*, .fg, .stack) and CSS variables never leak
   into the rest of the site. The mockup's page chrome (dotted-grid .stage, the
   standalone h2 + intro) is dropped; the section supplies its own heading.
   ========================================================================== */
.l6-tenets-accordion {
  --ground: #fdfbf5;
  --card: #fffdf7;
  --ink: #1a1612;
  --body: #2b2520;
  --muted: #6f6a63;
  --soft: #8a8580;
  --rule: #e7e2d6;
  --rule-strong: #ddd5c4;
  --accent: #6d28d9;
  --accent-tint: rgba(109, 40, 217, 0.09);
  --red: #b91c1c;
  --green: #15803d;
  --amber: #b45309;
  --amber-bg: rgba(217, 119, 6, 0.12);
  --amber-line: #d3893f;
  --sans:
    var(--font-geist-sans), system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  color: var(--body);
}
.l6-tenets-accordion *,
.l6-tenets-accordion *::before,
.l6-tenets-accordion *::after {
  box-sizing: border-box;
}

.l6-tenets-accordion .acc {
  padding: 0;
  margin: 0;
  list-style: none;
}
.l6-tenets-accordion .acc-head {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 6px 2px;
  font-family: var(--mono);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
}
.l6-tenets-accordion .acc-title {
  flex: 1;
  font-family: var(--mono);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
}
.l6-tenets-accordion .acc-title::before {
  margin-right: 0.7rem;
  color: var(--accent);
  content: "—";
}
.l6-tenets-accordion .acc-item.is-open .acc-title::before {
  content: "+";
}
.l6-tenets-accordion .acc-chev {
  flex: none;
  width: 9px;
  height: 9px;
  color: var(--soft);
  opacity: 0;
  transition:
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 140ms ease;
}
.l6-tenets-accordion .acc-head:hover .acc-chev {
  opacity: 1;
}
.l6-tenets-accordion .acc-item.is-open .acc-chev {
  opacity: 1;
  transform: rotate(90deg);
}
.l6-tenets-accordion .acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.l6-tenets-accordion .acc-item.is-open .acc-body {
  grid-template-rows: 1fr;
}
.l6-tenets-accordion .acc-body-inner {
  overflow: hidden;
}
.l6-tenets-accordion .acc-body-pad {
  padding: 0 0 20px 25px;
}

.l6-tenets-accordion .why {
  max-width: 56ch;
  margin: 0 0 13px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
}
.l6-tenets-accordion .why code {
  padding: 0.05em 0.35em;
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--body);
  background: rgba(26, 22, 18, 0.05);
  border-radius: 4px;
}
.l6-tenets-accordion .code {
  padding: 11px 13px;
  margin: 0;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--body);
  white-space: pre;
  background: rgba(26, 22, 18, 0.035);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.l6-tenets-accordion .code .cm {
  color: var(--soft);
}
.l6-tenets-accordion .code .bad {
  color: var(--red);
}
.l6-tenets-accordion .code .ok {
  color: var(--green);
}

/* ---- shared demo shell (tenets #4 and #5) ---- */
.l6-tenets-accordion .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
@media (max-width: 620px) {
  .l6-tenets-accordion .cols {
    grid-template-columns: 1fr;
  }
}
.l6-tenets-accordion .panel {
  padding: 13px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(26, 22, 18, 0.04);
  transition: border-color 300ms ease;
}
.l6-tenets-accordion .panel.good {
  border-color: rgba(109, 40, 217, 0.4);
}
.l6-tenets-accordion .panel.bad {
  border-color: rgba(217, 119, 6, 0.4);
}
.l6-tenets-accordion .p-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.l6-tenets-accordion .p-titlegroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.l6-tenets-accordion .p-eyebrow {
  align-self: flex-start;
  padding: 1px 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
}
.l6-tenets-accordion .p-eyebrow--local,
.l6-tenets-accordion .p-eyebrow--one {
  color: #fff;
  background: var(--accent);
}
.l6-tenets-accordion .p-eyebrow--nonlocal,
.l6-tenets-accordion .p-eyebrow--many {
  color: var(--amber);
  background: var(--amber-bg);
}
.l6-tenets-accordion .p-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.l6-tenets-accordion .replay {
  padding: 0;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--soft);
  cursor: pointer;
  background: none;
  border: 0;
}
.l6-tenets-accordion .replay:hover {
  color: var(--accent);
}

/* ---- #5: keep edits local (context window) ---- */
.l6-tenets-accordion .meter {
  display: flex;
  gap: 7px;
  align-items: center;
}
.l6-tenets-accordion .meter-track {
  width: 54px;
  height: 6px;
  overflow: hidden;
  background: var(--rule);
  border-radius: 3px;
}
.l6-tenets-accordion .meter-fill {
  width: 14%;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition:
    width 220ms linear,
    background 400ms ease;
}
.l6-tenets-accordion .meter-pct {
  width: 7ch;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--soft);
  text-align: right;
}
.l6-tenets-accordion .window {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: rgba(26, 22, 18, 0.02);
  border: 1px solid var(--rule);
  border-radius: 9px;
}
.l6-tenets-accordion .stack {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}
.l6-tenets-accordion .row {
  display: flex;
  gap: 8px;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  border-top: 1px solid rgba(26, 22, 18, 0.04);
  animation: l6ta-row-in 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.l6-tenets-accordion .row .file {
  color: var(--ink);
}
.l6-tenets-accordion .row .note {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--soft);
}
.l6-tenets-accordion .row--task,
.l6-tenets-accordion .row--edit {
  background: var(--accent-tint);
}
.l6-tenets-accordion .row--task .file,
.l6-tenets-accordion .row--edit .file {
  font-weight: 600;
  color: var(--accent);
}
.l6-tenets-accordion .row--task .note,
.l6-tenets-accordion .row--edit .note {
  color: var(--accent);
  opacity: 0.75;
}
.l6-tenets-accordion .row--task.evicted {
  opacity: 0.3;
}
.l6-tenets-accordion .dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.l6-tenets-accordion .row--task .dot,
.l6-tenets-accordion .row--edit .dot {
  background: var(--accent);
}
.l6-tenets-accordion .row--junk .dot {
  background: var(--rule-strong);
}
.l6-tenets-accordion .row--call .dot {
  background: var(--soft);
}
.l6-tenets-accordion .window::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 30px;
  pointer-events: none;
  content: "";
  background: linear-gradient(var(--card), rgba(255, 253, 247, 0));
}
.l6-tenets-accordion .tl {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 4px;
  align-items: center;
  min-height: 24px;
  margin-top: 13px;
}
.l6-tenets-accordion .tl-arrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--soft);
  opacity: 0.55;
}
.l6-tenets-accordion .step {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
  opacity: 0.4;
  transition: opacity 220ms ease;
}
.l6-tenets-accordion .step.is-active {
  opacity: 1;
}
.l6-tenets-accordion .step .sdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.l6-tenets-accordion .step--task {
  color: var(--accent);
  background: var(--accent-tint);
}
.l6-tenets-accordion .step--task .sdot {
  background: var(--accent);
}
.l6-tenets-accordion .step--warn {
  color: var(--amber);
  background: var(--amber-bg);
}
.l6-tenets-accordion .step--warn .sdot {
  background: var(--amber);
}
.l6-tenets-accordion .step--ok {
  color: #fff;
  background: var(--accent);
}
.l6-tenets-accordion .step--ok .sdot {
  background: #fff;
}
@keyframes l6ta-row-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- #4: leave one obvious way (branching tree) ---- */
.l6-tenets-accordion .branch {
  position: relative;
  height: 200px;
  margin-top: 8px;
}
.l6-tenets-accordion .branch svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.l6-tenets-accordion .branch line {
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 300ms ease;
}
.l6-tenets-accordion .branch line.in {
  opacity: 0.85;
}
.l6-tenets-accordion .ln-many {
  stroke: var(--amber-line);
}
.l6-tenets-accordion .ln-one {
  stroke: var(--accent);
}
.l6-tenets-accordion .branch line.ln-one.in {
  opacity: 1;
  stroke-width: 2;
}
.l6-tenets-accordion .tnode {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition:
    opacity 220ms ease,
    transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.l6-tenets-accordion .tnode.in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.l6-tenets-accordion .tnode--many {
  background: var(--amber-line);
}
.l6-tenets-accordion .tnode--one {
  width: 11px;
  height: 11px;
  background: var(--accent);
}

/* ---- #3: trace nondeterminism (waterfall) ---- */
.l6-tenets-accordion .tv {
  --labelw: 168px;
  margin-top: 4px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(26, 22, 18, 0.04);
}
.l6-tenets-accordion .tv-head {
  padding: 11px 14px;
  font-family: var(--mono);
  border-bottom: 1px solid var(--rule);
}
.l6-tenets-accordion .tv-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.l6-tenets-accordion .tv-title .m {
  color: var(--accent);
}
.l6-tenets-accordion .tv-body {
  position: relative;
  padding: 8px 14px 12px 0;
}
.l6-tenets-accordion .tv-grid {
  position: absolute;
  top: 8px;
  right: 14px;
  bottom: 12px;
  left: var(--labelw);
  pointer-events: none;
}
.l6-tenets-accordion .tv-gl {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(26, 22, 18, 0.05);
}
.l6-tenets-accordion .tv-playhead {
  position: absolute;
  top: -2px;
  bottom: 0;
  left: 0;
  width: 1.5px;
  background: var(--accent);
  opacity: 0;
}
.l6-tenets-accordion .tv-playhead.on {
  opacity: 0.5;
}
.l6-tenets-accordion .tv-playhead::before {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 5px;
  height: 5px;
  content: "";
  background: var(--accent);
  border-radius: 50%;
  transform: translateX(-50%);
}
.l6-tenets-accordion .tv-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--labelw) 1fr;
  align-items: center;
  height: 25px;
}
.l6-tenets-accordion .tv-label {
  padding-left: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms ease;
}
.l6-tenets-accordion .tv-row.in .tv-label {
  opacity: 1;
}
.l6-tenets-accordion .tv-label .note {
  color: var(--soft);
}
.l6-tenets-accordion .tv-label .fail {
  color: #c2410c;
}
.l6-tenets-accordion .tv-track {
  position: relative;
  height: 100%;
}
.l6-tenets-accordion .tv-bar {
  position: absolute;
  top: 6px;
  width: 0;
  height: 13px;
  border-radius: 3px;
  opacity: 0;
}
.l6-tenets-accordion .tv-bar.on {
  opacity: 1;
}
.l6-tenets-accordion .tv-bar--fail {
  background: repeating-linear-gradient(
    -45deg,
    #e6b8a4,
    #e6b8a4 3px,
    #f3d9cd 3px,
    #f3d9cd 6px
  ) !important;
}

@media (prefers-reduced-motion: reduce) {
  .l6-tenets-accordion .acc-chev,
  .l6-tenets-accordion .acc-body,
  .l6-tenets-accordion .row,
  .l6-tenets-accordion .tnode,
  .l6-tenets-accordion .branch line,
  .l6-tenets-accordion .tv-label,
  .l6-tenets-accordion .tv-bar {
    transition: none;
    animation: none;
  }
}
@media (max-width: 620px) {
  .l6-tenets-accordion .acc-title {
    font-size: 15px;
  }
}