:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  --nb-bg: #fff;
  --nb-fg: #19352f;
  --nb-panel: #f4f7f6;
  --nb-selected: #e3f3ef;
  --line: #d8e3df;
  --accent: #086f64;
  --muted: #546e65;
  --code: #183d34;
  color: var(--nb-fg);
  background: var(--nb-bg);
  color-scheme: light;
}
:root[data-notebook-theme=dark] {
  --nb-bg: #0b141b;
  --nb-fg: #e3eeed;
  --nb-panel: #12232e;
  --nb-selected: #164437;
  --line: #2c424b;
  --accent: #6bdac7;
  --muted: #abc0c2;
  --code: #e3eeed;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--nb-bg); color: var(--nb-fg); }
button, select, textarea { font-family: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nb-shell { width: min(940px, 100%); margin: 0 auto; padding: 0 24px 80px; }
.nb-topbar { min-height: 72px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-block: 10px; position: sticky; top: 0; z-index: 90; border-bottom: 1px solid var(--line); background: var(--nb-bg); box-shadow: 0 8px 22px rgba(8, 45, 39, .055); }
.nb-header-identity { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 2px; }
.nb-brand { font-size: 20px; line-height: 1.25; font-weight: 850; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.nb-header-identity > span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.nb-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; color: var(--nb-fg); text-decoration: none; }
.nb-back svg { width: 20px; height: 20px; flex: none; }
.nb-intro { padding: 40px 0 28px; }
.nb-intro > span, .nb-settings > strong, .nb-cell-label { font-size: 11px; font-weight: 750; letter-spacing: .1em; color: var(--accent); }
h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.2; margin: 12px 0 18px; letter-spacing: -.035em; overflow-wrap: anywhere; }
.nb-intro p { max-width: 76ch; color: var(--muted); }
.nb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.nb-actions button, .nb-file-button, .nb-cell button { min-height: 44px; border: 1px solid var(--accent); border-radius: 7px; padding: 8px 12px; background: var(--accent); color: var(--nb-bg); font-size: 13px; font-weight: 650; cursor: pointer; }
.nb-actions button.secondary, .nb-file-button.secondary, .nb-cell button.secondary { background: transparent; color: var(--accent); border-color: var(--line); }
button:disabled { opacity: .5; cursor: default; }
.nb-file-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.nb-runtime { min-width: 0; overflow-wrap: anywhere; padding: 10px 0; color: var(--muted); font-size: 13px; }
.nb-runtime.error, .nb-output.error { color: #b14335; }
:root[data-notebook-theme=dark] :is(.nb-runtime.error, .nb-output.error) { color: #ffb4a8; }
.nb-settings { margin: 4px 0 28px; padding: 0; }
.nb-settings pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--code); font-size: 13px; padding: 12px; background: var(--nb-panel); border-radius: 8px; }
.nb-settings small { color: var(--muted); }
.nb-picker-row { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 24px 0 6px; }
.nb-picker-row label { display: grid; gap: 6px; min-width: 0; flex: 1; }
.nb-picker-row label > span { font-size: 10px; font-weight: 750; letter-spacing: .1em; color: var(--accent); }
.nb-picker-row select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 7px; padding: 8px 12px; background: var(--nb-bg); color: var(--nb-fg); font-size: 14px; }
.nb-picker-row p { margin: 0; font-size: 12px; color: var(--muted); }
.nb-cells { display: grid; gap: 28px; }
/* Markdown is prose, not a card. Code and output have their own single panels. */
.nb-cell { min-width: 0; padding: 0; border: 0; background: transparent; }
.nb-markdown h1, .nb-markdown h2, .nb-markdown h3 { letter-spacing: -.025em; line-height: 1.3; }
.nb-markdown h2, .nb-markdown h3 { scroll-margin-top: 80px; }
.nb-markdown h1 { font-size: 30px; }
.nb-markdown h2 { font-size: 25px; margin-top: 10px; }
.nb-markdown h3 { font-size: 20px; }
.nb-markdown p, .nb-markdown li { color: var(--nb-fg); overflow-wrap: anywhere; }
.nb-markdown strong { color: inherit; }
.nb-markdown code { padding: 2px 5px; border-radius: 4px; background: var(--nb-panel); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.nb-code textarea { width: 100%; min-height: 190px; margin: 8px 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; background: var(--nb-panel); color: var(--code); font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
.nb-code textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.nb-code-disclosure { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--nb-panel); }
.nb-code-disclosure summary { cursor: pointer; min-height: 44px; padding: 10px 12px; font-size: 11px; font-weight: 750; color: var(--accent); }
.nb-code-disclosure summary span { float: right; font-weight: 500; color: var(--muted); }
.nb-code-disclosure textarea { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.nb-cell-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nb-cell-state { color: var(--muted); font-size: 12px; }
.nb-output { margin: 12px 0 0; padding: 12px; border-radius: 8px; background: var(--nb-panel); color: var(--code); white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Saved Python charts preserve their explicit light plotting palette. */
.nb-rich-output { margin-top: 14px; border: 1px solid #d8e4df; border-radius: 8px; background: #fbfdfc; color: #153c35; padding: 10px; overflow: auto; }
.nb-rich-output svg { display: block; width: 100%; height: auto; min-width: 0; max-height: 420px; }
.nb-rich-output + * { margin-top: 10px; }
@media (max-width: 600px) {
  .nb-shell { padding: 0 16px max(48px, env(safe-area-inset-bottom)); }
  .nb-topbar { min-height: 64px; gap: 8px; padding-block: 8px; }
  .nb-intro { padding-top: 28px; }
  .nb-picker-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .nb-picker-row p { font-size: 11px; }
  .nb-code textarea { padding: 10px; }
  .nb-rich-output { padding: 8px; }
}

/* V16.9.31 — fluid desktop notebook workspace
   Desktop notebooks use the available viewport for interactive cells and outputs,
   while prose keeps a readable line length. Mobile/tablet rules remain unchanged. */
@media (min-width: 900px) {
  .nb-shell {
    width: min(1920px, calc(100% - clamp(32px, 4vw, 80px)));
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .nb-intro p,
  .nb-markdown p,
  .nb-markdown li {
    max-width: 76ch;
  }

  .nb-picker-row label {
    flex: 1 1 620px;
    max-width: 820px;
  }

  .nb-picker-row p {
    flex: 0 1 360px;
    text-align: right;
  }
}


/* Shared Notebook Lab utility — ModelOrigen original back-to-top interaction.
   Idle: compact arrow. Hover/focus: expand, move the arrow up, reveal the label. */
.nb-back-to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 90;
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 92%, #0b141b 8%);
  color: var(--nb-bg);
  box-shadow: 0 10px 28px color-mix(in srgb, #000 22%, transparent);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.96);
  transition: width .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease, transform .18s ease, visibility .18s linear, background .2s ease, box-shadow .2s ease;
}
.nb-back-to-top-icon, .nb-back-to-top-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.nb-back-to-top-icon {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .24s cubic-bezier(.2,.8,.2,1);
}
.nb-back-to-top svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nb-back-to-top-label {
  opacity: 0;
  transform: translateY(17px);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .17s ease, transform .24s cubic-bezier(.2,.8,.2,1);
}
.nb-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
@media (hover: hover) and (pointer: fine) {
  .nb-back-to-top:is(:hover, :focus-visible) {
    width: 132px;
    background: color-mix(in srgb, var(--accent) 84%, #123d38 16%);
    box-shadow: 0 14px 34px color-mix(in srgb, #000 27%, transparent);
  }
  .nb-back-to-top:is(:hover, :focus-visible) .nb-back-to-top-icon {
    opacity: 0;
    transform: translateY(-20px);
  }
  .nb-back-to-top:is(:hover, :focus-visible) .nb-back-to-top-label {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .nb-back-to-top {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
    width: 42px;
    height: 42px;
  }
  .nb-back-to-top svg { width: 16px; height: 16px; }
}
@media (max-width: 360px) {
  .nb-back-to-top {
    right: max(10px, env(safe-area-inset-right));
    width: 38px;
    height: 38px;
  }
  .nb-back-to-top svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-back-to-top, .nb-back-to-top-icon, .nb-back-to-top-label { transition: none; }
}

/* V16.9.31 — adaptive Notebook Lab navigation shell
   Small screens keep the original single-column notebook. Medium desktops add
   only the contextual contents rail. Wide desktops use three columns: model
   navigation, notebook, and page contents. The top header spans the whole
   workspace and never competes with either sidebar. */
.nb-workspace { display: block; }
.nb-layout { display: block; }
.nb-desktop-sidebar { display: none; }

/* The header lives outside the notebook body so it can span every desktop rail,
   while matching the legacy notebook measure on smaller screens. It stays pinned
   to the viewport while the notebook scrolls; the desktop rails sit below it. */
.nb-topbar {
  width: min(940px, 100%);
  margin-inline: auto;
  padding: 10px 24px;
}

@media (max-width: 600px) {
  .nb-topbar {
    width: 100%;
    padding: 8px 16px;
  }
}

@media (min-width: 900px) and (max-width: 1179px) {
  .nb-topbar {
    width: min(1920px, calc(100% - clamp(32px, 4vw, 80px)));
    padding-left: 0;
    padding-right: 0;
  }
}

/* Medium desktop / landscape tablet: notebook + contextual contents. The
   top model picker stays visible as the global notebook switcher. */
@media (min-width: 1180px) {
  .nb-workspace {
    width: min(1920px, calc(100% - clamp(32px, 3vw, 72px)));
    margin-inline: auto;
  }

  .nb-topbar {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .nb-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    gap: clamp(18px, 2vw, 32px);
    align-items: start;
  }

  .nb-shell {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .nb-toc-sidebar {
    display: block;
    position: sticky;
    top: 90px;
    align-self: start;
    min-width: 0;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0 8px 14px;
  }

  .nb-sidebar-inner {
    min-width: 0;
    padding-top: 40px;
  }

  .nb-sidebar-kicker {
    margin: 0 8px 3px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
  }

  .nb-sidebar-title {
    display: block;
    margin: 0 8px 14px;
    color: var(--nb-fg);
    font-size: 15px;
    line-height: 1.3;
  }

  .nb-model-nav,
  .nb-page-toc {
    display: grid;
    gap: 2px;
  }

  .nb-model-group {
    margin: 13px 8px 5px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .nb-model-group:first-child { margin-top: 0; }

  .nb-model-nav a,
  .nb-page-toc a {
    position: relative;
    display: block;
    min-width: 0;
    border-radius: 7px;
    color: var(--muted);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color .15s ease, color .15s ease;
  }

  .nb-model-nav a {
    padding: 7px 9px;
    font-size: 11px;
    line-height: 1.35;
  }

  .nb-page-toc a {
    padding: 6px 8px 6px 13px;
    font-size: 10.5px;
    line-height: 1.35;
  }

  .nb-page-toc a::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-radius: 2px;
    background: transparent;
  }

  .nb-page-toc a.is-subsection { padding-left: 22px; }

  .nb-model-nav a.is-active,
  .nb-page-toc a.is-active {
    color: var(--nb-fg);
    background: var(--nb-selected);
  }

  .nb-model-nav a.is-active {
    color: var(--accent);
    font-weight: 760;
  }

  .nb-page-toc a.is-active::before { background: var(--accent); }

  .nb-toc-empty {
    padding: 7px 9px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
  }

  /* The contextual rail replaces only the ANN chapter's duplicate inline TOC. */
  #ann-lesson .ch-toc { display: none; }

  .nb-markdown h2,
  .nb-markdown h3,
  #ann-lesson h2,
  #ann-lesson h3 {
    scroll-margin-top: 92px;
  }
}

/* Wide desktop: persistent model navigation + notebook + contextual contents.
   The top model picker becomes redundant here, so only this widest mode hides it. */
@media (min-width: 1440px) {
  .nb-layout {
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(190px, 220px);
    gap: clamp(20px, 2vw, 34px);
  }

  .nb-model-sidebar {
    display: block;
    position: sticky;
    top: 90px;
    align-self: start;
    min-width: 0;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0 8px 14px;
  }

  .nb-picker-row { display: none; }
}

@media (min-width: 1760px) {
  .nb-layout {
    grid-template-columns: minmax(210px, 248px) minmax(0, 1fr) minmax(210px, 248px);
    gap: clamp(24px, 2.2vw, 42px);
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1180px) {
  .nb-model-nav a:hover,
  .nb-page-toc a:hover {
    color: var(--nb-fg);
    background: color-mix(in srgb, var(--nb-selected) 62%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1180px) {
  .nb-model-nav a,
  .nb-page-toc a { transition: none; }
}