/* Tutorial reading workspace. This layer never changes lesson wording or code. */
.tutorial-code-frame {
  --code-bg: #090c11;
  --code-chrome: #151c27;
  --code-line: #303c4e;
  --code-ink: #e6edf7;
  margin: 1.5rem 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--code-line);
  border-radius: .85rem;
  background: var(--code-bg);
  box-shadow: 0 4px 14px rgb(15 23 42 / 7%);
  text-align: left;
}
.code-block-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 3.35rem;
  padding: .3rem .65rem .3rem 4.3rem;
  border-bottom: 1px solid var(--code-line);
  background: var(--code-chrome);
  color: #cbd8eb;
  font: 600 .78rem/1.3 Inter, system-ui, sans-serif;
  position: relative;
}
.code-block-toolbar::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27c93f;
}
.code-block-language { min-width: 0; letter-spacing: .025em; }
.code-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex: 0 0 auto;
  min-width: 7rem;
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid #46566d;
  border-radius: .5rem;
  background: #1e2939;
  color: #edf4ff;
  cursor: pointer;
  font: 600 .78rem/1.3 Inter, system-ui, sans-serif;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.code-copy-button:hover { border-color: #91aecf; background: #2b3b51; }
.code-copy-button:disabled { cursor: wait; }
.code-copy-button.is-copied { border-color: #51b9a1; color: #a8f1d9; background: #123a32; }
.code-copy-button svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.code-copy-button:focus-visible { outline: 3px solid #91c9ff; outline-offset: 2px; }
.tutorial-code-frame pre,
.prose .tutorial-code-frame pre {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 1.2rem 1.25rem !important;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: var(--code-bg) !important;
  color: var(--code-ink);
  tab-size: 4;
  text-align: left;
  white-space: pre;
  overscroll-behavior-x: contain;
}
.tutorial-code-frame pre:focus-visible { outline: 2px solid #91c9ff; outline-offset: -3px; }
.tutorial-code-frame pre code,
.prose .tutorial-code-frame pre code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--code-ink) !important;
  font: 400 .84rem/1.8 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  text-shadow: none;
  text-align: left;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.tutorial-code-frame .token.comment,
.tutorial-code-frame .token.prolog,
.tutorial-code-frame .token.doctype,
.tutorial-code-frame .token.cdata { color: #9baec5; }
.tutorial-code-frame .token.punctuation { color: #c8d5e8; }
.tutorial-code-frame .token.property,
.tutorial-code-frame .token.tag,
.tutorial-code-frame .token.constant,
.tutorial-code-frame .token.symbol,
.tutorial-code-frame .token.deleted { color: #ff9aab; }
.tutorial-code-frame .token.boolean,
.tutorial-code-frame .token.number { color: #f4b885; }
.tutorial-code-frame .token.selector,
.tutorial-code-frame .token.attr-name,
.tutorial-code-frame .token.string,
.tutorial-code-frame .token.char,
.tutorial-code-frame .token.inserted { color: #a6e3a1; }
.tutorial-code-frame .token.operator,
.tutorial-code-frame .token.entity,
.tutorial-code-frame .token.url { color: #8cdef0; background: transparent; }
.tutorial-code-frame .token.atrule,
.tutorial-code-frame .token.attr-value,
.tutorial-code-frame .token.keyword { color: #c7a6ff; }
.tutorial-code-frame .token.function,
.tutorial-code-frame .token.class-name { color: #8ac7ff; }
.tutorial-code-frame .token.regex,
.tutorial-code-frame .token.important,
.tutorial-code-frame .token.variable { color: #f3d88d; }
.tutorial-code-frame .token.bold,
.tutorial-code-frame .token.important { font-weight: 700; }
.tutorial-code-frame .token.italic { font-style: italic; }
.code-copy-status:not(.code-feedback-visually-hidden) {
  display: block;
  padding: .75rem 1rem;
  border-top: 1px solid #826a37;
  color: #ffe3a2;
  font: 400 .85rem/1.6 Inter, system-ui, sans-serif;
}
.code-feedback-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* A named analysis stage contains its complete language routes, not just scripts. */
.code-tabs.tutorial-language-group {
  margin: 1.65rem 0 2rem;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cbd8e8;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 3px 14px rgb(17 47 77 / 5%);
}
.tutorial-language-group .code-tabs-heading { padding: 1.05rem 1.2rem .85rem; background: #f6f9fd; }
.prose .code-tabs-heading .code-tabs-title { margin: 0 0 .3rem; color: #183953; font: 700 1rem/1.45 Inter, system-ui, sans-serif; }
.prose .code-tabs-heading .code-tabs-hint { margin: 0; color: #52657c; font: 400 .83rem/1.55 Inter, system-ui, sans-serif; }
.tutorial-language-group .code-tab-list {
  display: flex;
  align-items: stretch;
  gap: .45rem;
  padding: .55rem 1.1rem 0;
  overflow: visible;
  background: #f6f9fd;
  border-bottom: 1px solid #cbd8e8;
}
.tutorial-language-group .code-tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 0;
  min-height: 48px;
  margin: 0 0 -1px;
  padding: .55rem .95rem .7rem;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: .6rem .6rem 0 0;
  color: #52657c;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font: 600 .85rem/1.4 Inter, system-ui, sans-serif;
}
.tutorial-language-group .code-tab-button:hover { color: #183953; background: #e7eff9; }
.tutorial-language-group .code-tab-button[aria-selected="true"] {
  border-color: #cbd8e8;
  border-bottom-color: #2563b8;
  background: #fff;
  color: #133f78;
  box-shadow: none;
}
.tutorial-language-group .code-tab-button:focus-visible { outline: 3px solid #2473bc; outline-offset: -4px; box-shadow: none; }
.code-tab-language-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border-radius: .35rem;
  color: #3e5d82;
  background: #e7eef8;
  font: 700 .72rem/1 ui-monospace, monospace;
}
.tutorial-language-group .code-tab-panel {
  padding: .5rem 1.15rem 1.1rem;
  min-width: 0;
  transition: opacity 120ms ease-in-out;
}
.tutorial-language-group .code-tab-panel[hidden] { display: none; }
.tutorial-language-group .code-tab-panel:focus-visible { outline: 3px solid #2473bc; outline-offset: -4px; }
.prose .tutorial-language-group .code-tab-panel > h3:first-child { margin-top: 1.05rem; }
.tutorial-language-group .code-tab-panel > :last-child { margin-bottom: 0; }
.tutorial-language-group .tutorial-code-frame { margin: 1rem 0 1.25rem; }
@media (max-width: 639px) {
  .tutorial-language-group .code-tabs-heading { padding: .95rem .85rem .7rem; }
  .tutorial-language-group .code-tab-list { padding-inline: .65rem; gap: .25rem; }
  .tutorial-language-group .code-tab-button { padding-inline: .65rem; font-size: .8rem; }
  .tutorial-language-group .code-tab-panel { padding: .3rem .7rem .85rem; }
  .code-block-toolbar { padding-left: 3.8rem; }
  .tutorial-code-frame pre, .prose .tutorial-code-frame pre { padding: 1rem .95rem !important; }
  .tutorial-code-frame pre code, .prose .tutorial-code-frame pre code { font-size: .79rem; }
}
@media (prefers-reduced-motion: reduce) {
  .code-copy-button, .tutorial-language-group .code-tab-button, .tutorial-language-group .code-tab-panel { transition: none; }
}
@media print {
  .tutorial-language-group .code-tab-list, .code-block-toolbar, .code-copy-status, .tutorial-top-tools { display: none !important; }
  .tutorial-language-group .code-tab-panel[hidden] { display: block !important; }
  .tutorial-code-frame { box-shadow: none; overflow: visible; break-inside: auto; }
  .tutorial-code-frame pre, .tutorial-code-frame pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* Enhanced Biological Callout Notice Boxes */
.lesson-page .lesson-summary {
  background: var(--lesson-tint);
  border-color: #cbd8e8;
  border-left: 4px solid var(--lesson-accent);
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04);
}
.lesson-page .lesson-checkpoint {
  background: #f0fdf9;
  border-color: #a7f3d0;
  border-left: 4px solid #059669;
  box-shadow: 0 2px 8px -2px rgba(5, 150, 105, 0.04);
}
.lesson-page .lesson-result {
  background: #f4f8fc;
  border-color: #cfdfed;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.03);
}
.lesson-page .lesson-warning {
  background: #fffbeb;
  border-color: #fde68a;
  border-left: 4px solid #d97706;
  color: #78350f;
  box-shadow: 0 2px 8px -2px rgba(217, 119, 6, 0.04);
}
.lesson-page .lesson-decision {
  background: #faf5ff;
  border-color: #e9d5ff;
  border-left: 4px solid #7c3aed;
  box-shadow: 0 2px 8px -2px rgba(124, 58, 237, 0.04);
}