@font-face {
  font-family: "Prisma Manrope";
  src: url("./assets/Manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Prisma Newsreader";
  src: url("./assets/Newsreader.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

html.study-v2-enabled {
  color-scheme: light;
  --study-paper: #faf9f5;
  --study-sidebar: #efeee7;
  --study-canvas: #f1f3ef;
  --study-card: #fdfcf8;
  --study-ink: #172f40;
  --study-copy: #526872;
  /* U14 (WCAG 1.4.3): support text tokens. Same hues as the original
     #738080 / #69817d / #087c91, darkened until they reach 4.5:1 on the
     darkest surface they sit on (sidebar #efeee7, instrument canvas
     #e9eeea); 12 px is the smallest text size in the study room. */
  --study-muted: #616c6c;
  --study-muted-figure: #5a6e6b;
  --study-support-size: 12px;
  --study-line: #dcded6;
  --study-accent: #077487;
  --study-accent-soft: #e4eeea;
  --study-ochre: #b8844c;
  /* U7: height of the "more text below" fade at the foot of a scrolling
     step. */
  --study-scroll-fade: 40px;
  --study-heading: "Prisma Newsreader", Georgia, serif;
  --study-body: "Prisma Manrope", "Segoe UI", sans-serif;
  /* U25: every other colour of the study room is a token too, so the dark
     mode (html[data-study-theme="dark"], at the end of this file) redefines
     tokens only. Light values are the ones these rules always had. */
  --study-on-ink: #ffffff;
  --study-ink-hover: #244b5d;
  --study-entry-bg: rgba(255, 255, 251, 0.8);
  --study-rule: #aeb7af;
  --study-quote-em: #425c59;
  --study-topbar-bg: rgba(250, 249, 245, 0.96);
  --study-note: #71807d;
  --study-scrollbar: #c9cec6;
  --study-user-bubble: rgba(239, 238, 231, 0.62);
  --study-field-line: #cfd5cd;
  --study-field-bg: rgba(255, 255, 251, 0.84);
  --study-icon: #829389;
  --study-avatar: #dfe4da;
  --study-instrument-canvas: #e9eeea;
  --study-instrument-copy: #304b58;
  --study-instrument-grid: #879b8c14;
  --study-accent-glow: rgba(8, 124, 145, 0.08);
  --study-control-line: #d4dad2;
  --study-control-bg: rgba(250, 249, 245, 0.6);
  --study-canvas-glow: rgba(255, 255, 255, 0.48);
  --study-tool-bg: rgba(250, 249, 245, 0.88);
  --study-panel-glass: rgba(250, 249, 245, 0.93);
  --study-pill-bg: rgba(255, 255, 251, 0.82);
  --study-accent-sweep: rgba(8, 124, 145, 0.035);
  --study-nav-bg: rgba(250, 249, 245, 0.98);
  --study-dot: #d8ddd5;
  --study-dot-visited: #9eb8ae;
  --study-shadow: #1c3b4325;
  --study-backdrop: #1d303957;
  --study-input-line: #cbd4ca;
  --study-input-bg: #fffefa;
  --study-overlay: rgba(250, 249, 245, 0.92);
  --study-highlight-outline: #155c6d;
  --study-paper-rule: rgba(23, 47, 64, 0.012);
  --study-paper-rule-2: rgba(23, 47, 64, 0.01);
  --study-accent-line: rgba(8, 124, 145, 0.42);
  --study-accent-hover: #066c7f;
  --study-accent-wash: rgba(8, 124, 145, 0.055);
}

html.study-v2-enabled body {
  --bg-app: var(--study-paper);
  --bg-panel: var(--study-card);
  --bg-panel-secondary: var(--study-sidebar);
  --border-color: var(--study-line);
  --border-color-active: var(--study-accent-line);
  --text-main: var(--study-ink);
  --text-muted: var(--study-copy);
  --text-muted-2: var(--study-muted);
  --accent-color: var(--study-accent);
  --accent-color-hover: var(--study-accent-hover);
  --accent-color-bg: var(--study-accent-wash);
  --accent-color-bg-active: var(--study-accent-soft);
  --cta-bg: var(--study-ink);
  --cta-bg-hover: var(--study-accent);
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --sidebar-w: 236px;
  --chat-open-width: 420px;
  background: var(--study-paper);
  color: var(--study-ink);
  font-family: var(--study-body);
}

html.study-v2-enabled body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--study-paper-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--study-paper-rule-2) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  pointer-events: none;
}

/* Notebook */
html.study-v2-enabled #global-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  padding: 0 18px;
  border-right-color: var(--study-line);
  background: var(--study-sidebar);
  transition: none;
}

html.study-v2-enabled #global-sidebar.collapsed {
  width: 0;
  min-width: 0;
  padding-inline: 0;
}

html.study-v2-enabled .sidebar-logo {
  min-height: 96px;
  padding: 25px 10px 20px;
  border: 0;
}

html.study-v2-enabled .sidebar-logo img {
  width: 38px;
  height: 38px;
  mix-blend-mode: multiply;
}

html.study-v2-enabled .sidebar-logo-text {
  color: var(--study-ink);
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

html.study-v2-enabled .sidebar-nav {
  display: none;
}

.study-v2-notebook {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  padding-bottom: 32px;
}

.study-v2-new,
.study-v2-search,
.study-v2-notebook-entry {
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.study-v2-new {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 3px;
  background: var(--study-ink);
  color: var(--study-on-ink);
  font-size: 12px;
  font-weight: 720;
}

.study-v2-new:hover {
  background: var(--study-ink-hover);
}

.study-v2-new span {
  font-size: 20px;
  font-weight: 300;
}

.study-v2-search {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 5px;
  background: transparent;
  color: var(--study-muted);
  font-size: var(--study-support-size);
}

.study-v2-search:hover {
  color: var(--study-accent);
}

.study-v2-search span {
  font-size: 19px;
}

.study-v2-notebook-heading {
  display: flex;
  justify-content: space-between;
  margin: 30px 10px 14px;
  color: var(--study-muted);
  font-size: var(--study-support-size);
  font-weight: 760;
  letter-spacing: 0.13em;
}

.study-v2-notebook-entry {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 14px 11px;
  border: 1px solid var(--study-line);
  border-radius: 3px;
  background: var(--study-entry-bg);
  color: var(--study-ink);
}

.study-v2-entry-symbol {
  color: var(--study-accent);
  font-family: var(--study-heading);
  font-size: 25px;
  font-style: italic;
  line-height: 1;
}

.study-v2-notebook-entry b,
.study-v2-notebook-entry small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-v2-notebook-entry b {
  font-size: var(--study-support-size);
  font-weight: 720;
}

.study-v2-notebook-entry small {
  margin-top: 5px;
  color: var(--study-muted);
  font-size: var(--study-support-size);
}

.study-v2-notebook blockquote {
  margin: auto 12px 0;
  padding-top: 23px;
  border-top: 1px solid var(--study-rule);
  color: var(--study-muted);
  font-family: var(--study-heading);
  font-size: 17px;
  line-height: 1.38;
}

.study-v2-notebook blockquote em {
  display: block;
  color: var(--study-quote-em);
}

html.study-v2-enabled #sidebar-toggle {
  width: 28px;
  height: 54px;
  border-color: var(--study-line);
  border-radius: 0 3px 3px 0;
  background: var(--study-paper);
  box-shadow: none;
}

/* Four-row study shell */
html.study-v2-enabled #view-chat.active {
  display: grid;
  grid-template-rows: 64px 0 minmax(0, 1fr) 0;
  background: var(--study-paper);
}

html.study-v2-enabled body.study-v2-has-lesson.board-mode #view-chat.active {
  grid-template-rows: 64px 112px minmax(0, 1fr) 88px;
}

html.study-v2-enabled
  body.study-v2-has-exploration.board-mode
  #view-chat.active {
  grid-template-rows: 64px 112px minmax(0, 1fr) 0;
}

html.study-v2-enabled .chat-topbar {
  min-height: 64px;
  height: 64px;
  padding: 0 34px;
  border-bottom-color: var(--study-line);
  background: var(--study-topbar-bg);
}

html.study-v2-enabled .chat-topbar-brand {
  gap: 10px;
}

html.study-v2-enabled .chat-topbar-brand h1 {
  display: none;
  color: var(--study-ink);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.study-v2-enabled .chat-topbar-brand > span:not(.study-v2-mode-marker) {
  display: none;
}

.study-v2-mode-marker {
  padding-left: 6px;
  color: var(--study-muted) !important;
  font-size: var(--study-support-size) !important;
  font-weight: 400 !important;
  letter-spacing: 0;
}

.study-v2-classic-link {
  color: var(--study-muted);
  font-size: var(--study-support-size);
  font-weight: 730;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.study-v2-classic-link:hover {
  color: var(--study-accent);
}

html.study-v2-enabled .mode-selector,
html.study-v2-enabled #btnChatHistory,
html.study-v2-enabled #btnBilling {
  display: none;
}

html.study-v2-enabled .topbar-actions {
  gap: 9px;
}

html.study-v2-enabled .status-badge,
html.study-v2-enabled .btn-secondary {
  min-height: 34px;
  padding: 0 13px;
  border-color: var(--study-line);
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  font-size: var(--study-support-size);
}

html.study-v2-enabled .status-dot {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

.study-v2-lesson-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  overflow: hidden;
  border-bottom: 1px solid var(--study-line);
  background: var(--study-paper);
}

.study-v2-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--study-accent);
  font-size: var(--study-support-size);
  font-weight: 780;
  letter-spacing: 0.16em;
}

.study-v2-eyebrow b {
  margin-left: 8px;
}

/* U20: the title's box may shrink, so a long title ends in an ellipsis
   instead of being cut by the header; the full title is its tooltip. */
.study-v2-lesson-header > div {
  min-width: 0;
}

.study-v2-lesson-header h1 {
  margin: 0;
  overflow: hidden;
  color: var(--study-ink);
  font-family: var(--study-heading);
  font-size: clamp(27px, 2.35vw, 36px);
  font-weight: 430;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-v2-lesson-note {
  display: none;
  max-width: 260px;
  padding-left: 24px;
  border-left: 1px solid var(--study-line);
  color: var(--study-note);
  font-family: var(--study-heading);
  font-size: 15px;
  font-style: italic;
  line-height: 1.45;
}

html.study-v2-enabled .workspace {
  display: flex;
  min-height: 0;
  padding: 0 34px;
  overflow: hidden;
  background: var(--study-paper);
}

html.study-v2-enabled body.board-mode .workspace {
  display: grid;
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
}

/* Reading pane */
html.study-v2-enabled .chat-container,
html.study-v2-enabled body.board-mode .chat-container {
  display: grid;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 100%;
  /* U7: a 12 px gutter taken from the workspace margin; the thread and the
     composer pad it back, so the text stays where it was and the inset U12
     focus ring of the keyboard-scrollable thread sits in it, clear of the
     text and inside this box, which clips. */
  margin-left: -12px;
  grid-template-rows: minmax(0, 1fr) auto;
  border-right: 1px solid var(--study-line);
  background: var(--study-paper);
  transition: none;
}

html.study-v2-enabled .thread-area,
html.study-v2-enabled body.board-mode .thread-area {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  /* U7: 12 px of left gutter (see .chat-container); the fade below replaces
     the bottom padding. */
  padding: 24px 36px 0 12px;
  scroll-behavior: smooth;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* U7: long step text scrolls in this column, between the step header and the
   composer, which stay put. A fade sticks to the bottom edge while more text
   follows; at the end of the text it sits in its own space below the last
   line, so it never covers it. It is paint only (no text, no pointer). */
html.study-v2-enabled .thread-area::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: var(--study-scroll-fade);
  background: linear-gradient(to bottom, transparent, var(--study-paper) 85%);
  pointer-events: none;
}

/* The fade is a positioned child and would paint over the bottom edge of the
   inset focus ring; while the thread has keyboard focus it stops above it. */
html.study-v2-enabled .thread-area:focus-visible::after {
  bottom: calc(var(--study-focus-width) - var(--study-focus-offset));
}

html.study-v2-enabled .thread-area::-webkit-scrollbar {
  width: 4px;
}

html.study-v2-enabled .thread-area::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: var(--study-scrollbar);
}

html.study-v2-enabled .study-v2-lesson-prelude,
html.study-v2-enabled .lesson-intro-message,
html.study-v2-enabled .lesson-conclusion-message,
html.study-v2-enabled .lesson-step-message:not(.lesson-step-active) {
  display: none;
}

html.study-v2-enabled .message {
  gap: 9px;
  padding: 14px 0;
  border-bottom-color: var(--study-line);
}

html.study-v2-enabled .avatar {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--study-accent);
  font-size: var(--study-support-size);
  letter-spacing: 0.08em;
}

html.study-v2-enabled .bubble {
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.7;
  min-width: 0;
  overflow-wrap: anywhere;
}

html.study-v2-enabled .message.assistant .bubble {
  border-color: transparent;
  background: transparent;
}

html.study-v2-enabled .message.user .bubble {
  border: 1px solid var(--study-line);
  background: var(--study-user-bubble);
}

html.study-v2-enabled .message.lesson-step-active {
  display: block;
  padding: 0;
  border: 0;
}

html.study-v2-enabled .message.lesson-step-active > .avatar {
  display: none;
}

html.study-v2-enabled .message.lesson-step-active .bubble {
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.study-v2-enabled body.study-v2-has-exploration #chatEmpty,
html.study-v2-enabled
  body.study-v2-has-exploration
  #chatThread
  > :not(.study-v2-direct-answer) {
  display: none;
}

html.study-v2-enabled .message.study-v2-direct-answer {
  display: block;
  padding: 0;
  border: 0;
}

html.study-v2-enabled .message.study-v2-direct-answer > .avatar {
  display: none;
}

html.study-v2-enabled .message.study-v2-direct-answer .bubble {
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--study-copy);
  font-size: 14px;
  line-height: 1.78;
}

html.study-v2-enabled .message.study-v2-direct-answer .bubble > p:first-child {
  margin-top: 0;
  color: var(--study-ink);
  font-family: var(--study-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.78;
}

html.study-v2-enabled .message.study-v2-direct-answer .bubble p,
html.study-v2-enabled .message.study-v2-direct-answer .bubble ul,
html.study-v2-enabled .message.study-v2-direct-answer .bubble ol {
  margin-bottom: 18px;
}

html.study-v2-enabled .lesson-step-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
}

html.study-v2-enabled .lesson-step-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--study-accent) !important;
  font-size: var(--study-support-size);
  font-weight: 780;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

html.study-v2-enabled .lesson-step-header::after {
  height: 1px;
  background: var(--study-line);
  content: "";
  grid-column: 2;
  grid-row: 1;
}

html.study-v2-enabled .lesson-step-caption {
  grid-column: 1 / -1;
  margin-top: 5px;
  color: var(--study-ink);
  font-family: var(--study-heading);
  font-size: clamp(32px, 3vw, 42px);
  font-style: normal;
  font-weight: 430;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

/* U7: on short desktop windows the step heading alone filled the column
   (4 lines at 1280x720); a smaller heading leaves the first lines of the
   text in view, so the student sees that the step goes on. */
@media (min-width: 981px) and (max-height: 820px) {
  html.study-v2-enabled .lesson-step-header {
    margin-bottom: 16px;
  }

  html.study-v2-enabled .lesson-step-caption {
    font-size: clamp(26px, 2.2vw, 30px);
  }
}

html.study-v2-enabled .lesson-step-body {
  display: block;
  color: var(--study-copy);
  font-size: 14px;
  line-height: 1.78;
}

html.study-v2-enabled .lesson-step-body > p:first-child {
  margin-top: 0;
  color: var(--study-copy);
  font-family: var(--study-body);
  font-size: 14px;
  line-height: 1.75;
}

html.study-v2-enabled .lesson-step-body p {
  margin: 0 0 18px;
}

html.study-v2-enabled .math-block {
  margin: 22px 0;
  padding: 19px 10px;
  border: solid var(--study-line);
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
  color: var(--study-ink);
}

html.study-v2-enabled .composer-panel {
  padding: 12px 32px 20px 12px;
  border-top: 0;
  background: var(--study-paper);
}

.study-v2-composer-context {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 1px 8px;
  color: var(--study-muted);
  font-size: var(--study-support-size);
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.study-v2-context-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--study-accent);
}

html.study-v2-enabled .input-wrapper {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border-color: var(--study-field-line);
  border-radius: 3px;
  background: var(--study-field-bg);
  box-shadow: none;
}

html.study-v2-enabled #chatInput {
  display: block;
  width: 100%;
  min-height: 46px;
  max-height: 110px;
  padding: 13px 14px 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  resize: none;
  font: 12px/1.65 var(--study-body);
}

.study-v2-composer-bottom {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px 8px;
}

html.study-v2-enabled .study-v2-composer-bottom #btnSend {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex: none;
}

html.study-v2-enabled .study-v2-composer-bottom #btnAttachDocument {
  width: 30px;
  height: 30px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--study-icon);
}

html.study-v2-enabled #btnCancelAI {
  display: none !important;
}

html.study-v2-enabled body.ai-busy #btnSend {
  display: inline-flex !important;
  pointer-events: auto;
  opacity: 1;
}

.study-v2-composer-bottom #btnSend svg,
.study-v2-composer-bottom #btnAttachDocument svg,
#studyV2Expand svg,
html.study-v2-enabled #sidebar-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
}

html.study-v2-enabled .quick-card span {
  font-size: var(--study-support-size);
}

html.study-v2-enabled #sidebar-toggle {
  position: static !important;
  transform: none !important;
  width: 30px;
  height: 32px;
  min-width: 30px;
  padding: 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--study-muted);
}

html.study-v2-enabled .sidebar-logo img {
  width: 160px;
  height: auto;
  max-height: 60px;
  object-fit: contain;
}

html.study-v2-enabled .sidebar-logo-text {
  display: none;
}

#studyV2History {
  min-height: 0;
  overflow-y: auto;
}

#studyV2History .study-v2-notebook-entry {
  width: 100%;
  margin-bottom: 8px;
  text-align: left;
  background: transparent;
  border-color: transparent;
}

#studyV2History .study-v2-notebook-entry[aria-current="page"] {
  border-color: var(--study-line);
  background: var(--study-card);
}

.study-v2-account {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--study-line);
}

.study-v2-account button,
#studyV2Style {
  border: 0;
  background: transparent;
  color: var(--study-ink);
  font: var(--study-support-size) var(--study-body);
  cursor: pointer;
  padding: 8px;
}

.study-v2-account > button::before {
  content: "P";
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--study-avatar);
}

html.study-v2-enabled .study-v2-account #btnBilling {
  display: inline-flex;
}

html.study-v2-enabled .study-v2-account #btnReset,
html.study-v2-enabled .study-v2-account .study-v2-classic-link {
  display: inline-flex;
}

.study-v2-account > div:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
}

html.study-v2-enabled .board-header {
  grid-template-columns: minmax(0, 1fr) auto;
}

#studyV2Expand {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--study-icon);
  cursor: pointer;
}

html.study-v2-enabled body.study-v2-expanded .whiteboard-container {
  position: fixed;
  inset: 0;
  z-index: 1100;
  width: 100vw;
  height: 100dvh;
  padding: 20px;
}

#studyV2Legend {
  position: absolute;
  z-index: 5;
  bottom: 32px;
  left: 24px;
  right: 70px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  pointer-events: none;
  color: var(--study-muted-figure);
  font: var(--study-support-size) var(--study-body);
}

/* Direct children only: the entries hold KaTeX markup, whose own spans must
   keep KaTeX's layout. */
#studyV2Legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: min(100%, 320px);
}

#studyV2Legend .study-v2-legend-math {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

#studyV2Legend > span > i {
  width: 17px;
  height: 4px;
  border-radius: 1px;
  flex: none;
}

html.study-v2-enabled body.study-v2-instrument {
  --study-heading: var(--study-body);
  --study-canvas: var(--study-instrument-canvas);
  --study-copy: var(--study-instrument-copy);
}

html.study-v2-enabled body.study-v2-instrument .board-canvas-area {
  background-color: var(--study-canvas);
  background-image:
    linear-gradient(var(--study-instrument-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--study-instrument-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

html.study-v2-enabled .input-wrapper:focus-within {
  border-color: var(--study-accent);
  box-shadow: 0 0 0 2px var(--study-accent-glow);
}

html.study-v2-enabled .composer-suggestions,
html.study-v2-enabled .demo-bar,
html.study-v2-enabled .sequence-bar {
  display: none !important;
}

html.study-v2-enabled .composer-mode-toggle {
  min-width: 34px;
  padding: 0 7px;
  border-radius: 2px;
}

html.study-v2-enabled .composer-mode-toggle .mode-label {
  display: none;
}

html.study-v2-enabled .btn-send {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  background: var(--study-ink);
  color: var(--study-on-ink);
}

/* Figure */
html.study-v2-enabled .whiteboard-container {
  display: none;
}

html.study-v2-enabled body.board-mode .whiteboard-container {
  display: grid;
  min-width: 0;
  height: 100%;
  padding: 20px 0 18px 22px;
  grid-template-rows: 44px minmax(0, 1fr) 26px;
  overflow: hidden;
  border: 0;
  background: var(--study-paper);
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: none;
}

html.study-v2-enabled .board-header {
  display: grid;
  height: 44px;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 0 12px 0 16px;
  border: 0;
  background: var(--study-canvas);
}

html.study-v2-enabled .board-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
}

.study-v2-figure-kicker {
  color: var(--study-muted-figure);
  font-size: var(--study-support-size);
  font-weight: 780;
  letter-spacing: 0.13em;
  white-space: nowrap;
}

.study-v2-board-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* U11: "Zoom: Vista · Dominio", one radio group for what the wheel and the
   +/- tools change. The checked option is filled with the editorial ink. */
/* The 6 px gap keeps a focused option's ring (2 px offset + 2 px) off the
   filled neighbour, so it always reads against the header. */
.study-v2-zoom-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.study-v2-zoom-label {
  margin-right: 2px;
  color: var(--study-muted-figure);
  font: 700 var(--study-support-size) var(--study-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.study-v2-zoom-mode [role="radio"] {
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid var(--study-control-line);
  border-radius: 2px;
  background: var(--study-control-bg);
  color: var(--study-muted-figure);
  font: 700 var(--study-support-size) var(--study-body);
  cursor: pointer;
}

.study-v2-zoom-mode [role="radio"]:hover {
  border-color: var(--study-accent);
  color: var(--study-accent);
}

.study-v2-zoom-mode [role="radio"][aria-checked="true"] {
  border-color: var(--study-ink);
  background: var(--study-ink);
  color: var(--study-paper);
}

/* U8: unavailable for this figure; text keeps its contrast, the dashed
   border and cursor say it cannot be chosen. */
.study-v2-zoom-mode [role="radio"][aria-disabled="true"] {
  border-style: dashed;
  border-color: var(--study-control-line);
  background: transparent;
  color: var(--study-muted-figure);
  cursor: not-allowed;
}

.study-v2-figure-kicker b {
  color: var(--study-accent);
}

html.study-v2-enabled .board-meta h2 {
  color: var(--study-muted-figure);
  font-family: var(--study-heading);
  font-size: 14px;
  font-weight: 430;
  letter-spacing: 0;
}

html.study-v2-enabled .board-meta p,
html.study-v2-enabled .board-steps {
  display: none;
}

.study-v2-domain-toggle {
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid var(--study-control-line);
  border-radius: 2px;
  background: var(--study-control-bg);
  color: var(--study-muted-figure);
  font: 700 var(--study-support-size) var(--study-body);
  cursor: pointer;
}

.study-v2-domain-toggle:hover,
.study-v2-domain-toggle[aria-expanded="true"] {
  border-color: var(--study-accent);
  color: var(--study-accent);
}

html.study-v2-enabled .board-canvas-area {
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 52% 42%,
      var(--study-canvas-glow),
      transparent 48%
    ),
    var(--study-canvas);
}

html.study-v2-enabled .board-toolbar {
  top: 12px;
  right: 12px;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--study-line);
  border-radius: 3px;
}

html.study-v2-enabled .toolbar-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-bottom: 1px solid var(--study-line);
  border-radius: 0;
  background: var(--study-tool-bg);
  backdrop-filter: blur(8px);
  color: var(--study-icon);
}

html.study-v2-enabled #btnHomeCam svg,
html.study-v2-enabled #btnMathZoomIn svg,
html.study-v2-enabled #btnMathZoomOut svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke-width: 1.3;
}

html.study-v2-enabled .toolbar-btn:last-child {
  border-bottom: 0;
}

html.study-v2-enabled .viewport-panel {
  right: auto;
  bottom: 14px;
  left: 14px;
  display: flex !important;
  width: min(330px, calc(100% - 80px));
  max-width: none;
  padding: 10px;
  border-color: var(--study-line);
  border-radius: 3px;
  background: var(--study-panel-glass);
  box-shadow: none;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

html.study-v2-enabled body.study-v2-domain-open .viewport-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

html.study-v2-enabled .viewport-pill,
html.study-v2-enabled select#viewportQuality {
  border-color: var(--study-line);
  border-radius: 2px;
  background: var(--study-pill-bg);
}

.study-v2-board-hint {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 5;
  color: var(--study-muted-figure);
  font-size: var(--study-support-size);
  pointer-events: none;
}

html.study-v2-enabled .board-footer {
  height: 26px;
  padding: 0 4px 0 16px;
  border: 0;
  background: var(--study-paper);
  color: var(--study-muted-figure);
  font-size: var(--study-support-size);
}

html.study-v2-enabled
  body[data-study-phase="preparing"]
  .board-canvas-area::after,
html.study-v2-enabled
  body[data-study-phase="animating"]
  .board-canvas-area::after {
  position: absolute;
  inset: 0;
  z-index: 8;
  border-top: 2px solid var(--study-accent);
  background: linear-gradient(
    90deg,
    transparent,
    var(--study-accent-sweep),
    transparent
  );
  content: "";
  pointer-events: none;
}

/* Shared lesson navigation */
.study-v2-step-navigation {
  position: relative;
  z-index: 90;
  display: none;
  min-width: 0;
  grid-template-columns: 1fr minmax(280px, 390px) 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 34px;
  border-top: 1px solid var(--study-line);
  background: var(--study-nav-bg);
}

html.study-v2-enabled body.study-v2-has-lesson .study-v2-step-navigation {
  display: grid;
}

.study-v2-previous {
  justify-self: start;
}

.study-v2-next {
  justify-self: end;
}

html.study-v2-enabled #btnPrevStep,
html.study-v2-enabled #btnNextStep {
  display: inline-flex;
  min-width: 148px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid var(--study-line);
  border-radius: 3px;
  background: transparent;
  color: var(--study-copy);
}

html.study-v2-enabled #btnNextStep {
  border-color: var(--study-ink);
  background: var(--study-ink);
  color: var(--study-on-ink);
}

html.study-v2-enabled #btnNextStep:hover:not(:disabled) {
  border-color: var(--study-accent);
  background: var(--study-accent);
}

html.study-v2-enabled #btnPrevStep:disabled,
html.study-v2-enabled #btnNextStep:disabled {
  opacity: 0.3;
}

.study-v2-control-label {
  font-size: var(--study-support-size);
  font-weight: 730;
  white-space: nowrap;
}

html.study-v2-enabled #btnPrevStep svg,
html.study-v2-enabled #btnNextStep svg {
  width: 20px;
  height: 20px;
  flex: none;
}

html.study-v2-enabled #btnPrevStep svg {
  transform: rotate(180deg);
}

html.study-v2-enabled #btnPrevStep {
  border-color: transparent;
  background: transparent;
}

html.study-v2-enabled #btnNextStep svg {
  order: 2;
}

.study-v2-step-progress {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 10px;
}

.study-v2-progress-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 9px;
}

.study-v2-progress-copy b {
  color: var(--study-ink);
  font-size: var(--study-support-size);
  font-weight: 740;
}

.study-v2-progress-copy > span {
  overflow: hidden;
  max-width: 220px;
  color: var(--study-muted);
  font-size: var(--study-support-size);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-v2-step-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.study-v2-step-dots button {
  width: 44px;
  height: 3px;
  padding: 0;
  border: 0;
  background: var(--study-dot);
  cursor: pointer;
}

.study-v2-step-dots button.visited {
  background: var(--study-dot-visited);
}

.study-v2-step-dots button.active {
  height: 4px;
  background: var(--study-accent);
}

/* U10: end of a lesson. On the last step "Lección completada" and the first
   sentence of the lesson's conclusion take the place of the progress text,
   above the step dots, which stay usable; two actions take the place of the
   disabled "Siguiente paso". Text uses the U14 tokens; both buttons keep the
   46 px height of the step buttons; focus uses the U12 ring (the action group
   itself takes focus when the button that led here disappears). */
.study-v2-step-navigation.is-complete {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.study-v2-step-navigation.is-complete .study-v2-progress-copy,
.study-v2-step-navigation.is-complete .study-v2-next {
  display: none;
}

.study-v2-step-navigation.is-complete .study-v2-step-progress {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: 12px;
}

.study-v2-complete-copy {
  display: grid;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-items: center;
  gap: 2px;
  margin-top: 10px;
  text-align: center;
}

.study-v2-complete-copy[hidden],
.study-v2-lesson-complete[hidden] {
  display: none;
}

.study-v2-complete-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--study-ink);
  font: 500 17px/1.2 var(--study-heading);
}

.study-v2-complete-title svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--study-accent);
  stroke-width: 2;
}

.study-v2-complete-recap {
  display: -webkit-box;
  overflow: hidden;
  max-width: 70ch;
  color: var(--study-copy);
  font-size: var(--study-support-size);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.study-v2-complete-recap[hidden] {
  display: none;
}

.study-v2-complete-recap p {
  margin: 0;
}

.study-v2-lesson-complete {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  align-items: center;
  justify-self: end;
  gap: 10px;
}

html.study-v2-enabled .study-v2-lesson-complete button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--study-ink);
  border-radius: 3px;
  background: transparent;
  color: var(--study-ink);
  font-size: var(--study-support-size);
  font-weight: 730;
  white-space: nowrap;
  cursor: pointer;
}

html.study-v2-enabled .study-v2-lesson-complete .study-v2-complete-review {
  background: var(--study-ink);
  color: var(--study-on-ink);
}

html.study-v2-enabled .study-v2-lesson-complete button:hover {
  border-color: var(--study-accent);
  background: var(--study-accent-soft);
}

html.study-v2-enabled .study-v2-lesson-complete .study-v2-complete-review:hover {
  background: var(--study-accent);
}

.study-v2-lesson-complete svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* U23: the narrow layout (U9) has a 72 px bar. Title, recap and dots in the
   middle column did not fit beside "Anterior" and the two actions: at 730 px
   with a classic scrollbar the title wrapped and the recap sat on the dots.
   Here, as on phones, the title sits on its own line above the two actions,
   never wraps, and the dots and recap give way (the recap stays in the
   thread, where the whole conclusion is; "Anterior" and "Repasar desde el
   principio" still reach the other steps). Title and actions share one
   column, capped so the buttons keep a readable width on wide tablets. */
@media (max-width: 980px) {
  .study-v2-step-navigation.is-complete {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .study-v2-step-navigation.is-complete .study-v2-step-progress,
  .study-v2-complete-recap {
    display: none;
  }

  .study-v2-step-navigation.is-complete .study-v2-previous {
    align-self: end;
    padding-bottom: 4px;
  }

  .study-v2-complete-copy {
    width: min(100%, 440px);
    justify-self: end;
    justify-items: start;
    margin-top: 4px;
  }

  .study-v2-complete-title {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.15;
  }

  .study-v2-complete-title > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .study-v2-lesson-complete {
    width: min(100%, 440px);
    grid-column: 2;
    align-self: end;
    justify-self: end;
    gap: 6px;
    margin-bottom: 4px;
  }

  html.study-v2-enabled .study-v2-lesson-complete button {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 0;
    padding: 2px 10px;
    line-height: 1.2;
    white-space: normal;
  }
}

/* Phones: the dots are already hidden, so the progress gives way; the title
   sits above two equal buttons whose labels may wrap; the recap stays in the
   thread, where the whole conclusion is. */
@media (max-width: 680px) {
  .study-v2-step-navigation.is-complete {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .study-v2-step-navigation.is-complete .study-v2-step-progress {
    display: none;
  }

  .study-v2-step-navigation.is-complete .study-v2-previous {
    align-self: end;
    padding-bottom: 4px;
  }

  .study-v2-complete-copy {
    justify-items: start;
    margin-top: 4px;
  }

  .study-v2-complete-title {
    font-size: 14px;
    line-height: 1.15;
  }

  .study-v2-complete-title svg {
    width: 14px;
    height: 14px;
  }

  .study-v2-complete-recap {
    display: none;
  }

  .study-v2-lesson-complete {
    grid-column: 2;
    align-self: end;
    justify-self: stretch;
    gap: 6px;
    margin-bottom: 4px;
  }

  html.study-v2-enabled .study-v2-lesson-complete button {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 0;
    padding: 2px 8px;
    line-height: 1.2;
    white-space: normal;
  }

  .study-v2-lesson-complete svg {
    display: none;
  }
}

@media (max-width: 1180px) {
  html.study-v2-enabled body {
    --sidebar-w: 196px;
    --chat-open-width: 380px;
  }

  html.study-v2-enabled .workspace {
    padding-inline: 24px;
  }

  html.study-v2-enabled body.board-mode .workspace {
    grid-template-columns: minmax(330px, 380px) minmax(0, 1fr);
  }

  html.study-v2-enabled .chat-topbar,
  .study-v2-lesson-header,
  .study-v2-step-navigation {
    padding-inline: 24px;
  }

  .study-v2-lesson-note {
    display: none;
  }
}

@media (max-width: 980px) {
  html.study-v2-enabled body {
    --sidebar-w: 0px;
  }

  html.study-v2-enabled #global-sidebar {
    position: absolute;
    width: 236px;
    min-width: 236px;
    padding-inline: 18px;
  }

  html.study-v2-enabled #global-sidebar.collapsed {
    width: 0;
    min-width: 0;
    padding-inline: 0;
  }

  html.study-v2-enabled .chat-topbar {
    min-height: 56px;
    height: 56px;
    padding: 0 18px;
  }

  .study-v2-lesson-header {
    padding: 11px 18px 12px;
  }

  .study-v2-lesson-header h1 {
    font-size: 26px;
  }

  html.study-v2-enabled body.board-mode .workspace {
    grid-template-columns: 1fr;
    overflow-y: auto;
    padding: 0;
  }

  html.study-v2-enabled .chat-container,
  html.study-v2-enabled body.board-mode .chat-container {
    margin-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--study-line);
  }

  html.study-v2-enabled .thread-area,
  html.study-v2-enabled body.board-mode .thread-area {
    padding: 18px 22px 0;
  }

  html.study-v2-enabled .composer-panel {
    padding: 10px 18px 12px;
  }

  html.study-v2-enabled body.board-mode .whiteboard-container {
    padding: 0;
    grid-template-rows: auto minmax(0, 1fr) 24px;
  }

  /* U9: below the two-column breakpoint the figure comes first (owner
     decision, 2026-09-25). The study view is one column that scrolls as a
     page: exploration header, figure, step, composer. The top bar and the
     step navigation stick to the edges, and the scroll padding keeps what is
     scrolled into view (focus, the figure on a new step) 4 px clear of both
     (a control scrolled flush against a bar lost its edge pixel to it). The
     drawing is 45% of the viewport height and never under 220 px; its tools
     sit in a row below it, outside the canvas. With the board hidden the
     fixed rows further down still apply. */
  html.study-v2-enabled body.board-mode:not(.study-v2-board-hidden) {
    --study-figure-height: max(220px, 45dvh);
  }

  html.study-v2-enabled
    body.board-mode:not(.study-v2-board-hidden)
    #view-chat.active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px 70px 1fr;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-top: 60px;
  }

  html.study-v2-enabled
    body.study-v2-has-lesson.board-mode:not(.study-v2-board-hidden)
    #view-chat.active {
    grid-template-rows: 56px 70px 1fr 72px;
    scroll-padding-bottom: 76px;
  }

  html.study-v2-enabled body.board-mode:not(.study-v2-board-hidden) .chat-topbar {
    position: sticky;
    top: 0;
    z-index: 95;
    background: var(--study-paper);
  }

  html.study-v2-enabled
    body.board-mode:not(.study-v2-board-hidden)
    .study-v2-step-navigation {
    position: sticky;
    bottom: 0;
  }

  /* Visual order follows the rows; reading-flow makes Tab and assistive
     technology follow it too where supported (DOM order is chat, figure). */
  html.study-v2-enabled body.board-mode:not(.study-v2-board-hidden) .workspace {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    overflow: visible;
    reading-flow: grid-rows;
  }

  html.study-v2-enabled
    body.board-mode:not(.study-v2-board-hidden)
    .whiteboard-container {
    grid-row: 1;
  }

  html.study-v2-enabled
    body.board-mode:not(.study-v2-board-hidden):not(.study-v2-expanded)
    .whiteboard-container {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto calc(var(--study-figure-height) + 44px) 24px;
  }

  /* The step and the composer follow the figure at their natural height;
     the page scrolls, not the thread. */
  html.study-v2-enabled body.board-mode:not(.study-v2-board-hidden) .chat-container {
    display: flex;
    height: auto;
    flex-direction: column;
    grid-row: 2;
    border-top: 1px solid var(--study-line);
    border-bottom: 0;
  }

  html.study-v2-enabled body.board-mode:not(.study-v2-board-hidden) .thread-area {
    flex: 1 0 auto;
    overflow-x: clip;
    overflow-y: visible;
    padding-bottom: 8px;
  }

  html.study-v2-enabled body.board-mode:not(.study-v2-board-hidden) .composer-panel {
    flex: none;
  }

  /* U7's fade sticks above the step navigation while more text follows. */
  html.study-v2-enabled
    body.study-v2-has-lesson.board-mode:not(.study-v2-board-hidden)
    .thread-area::after {
    bottom: 72px;
  }

  /* U20: the title keeps the first line; the zoom control and the interval
     button wrap to a second row when the width cannot hold both. */
  html.study-v2-enabled .board-header {
    display: flex;
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
  }

  html.study-v2-enabled .board-meta {
    min-height: 44px;
    flex: 1 1 180px;
  }

  .study-v2-board-tools {
    min-height: 44px;
    max-width: 100%;
    flex-wrap: wrap;
    margin-left: auto;
  }

  html.study-v2-enabled .board-toolbar {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    height: 44px;
    flex-direction: row;
    align-items: center;
    padding: 0 12px 0 16px;
    border: 0;
    border-top: 1px solid var(--study-line);
    border-radius: 0;
    background: var(--study-paper);
  }

  html.study-v2-enabled .toolbar-btn {
    border-bottom: 0;
    border-right: 1px solid var(--study-line);
  }

  html.study-v2-enabled .toolbar-btn:first-child {
    border-left: 1px solid var(--study-line);
  }

  html.study-v2-enabled #pizarraApp {
    bottom: 44px;
  }

  #studyV2Legend {
    right: 16px;
    bottom: 56px;
  }

  html.study-v2-enabled .viewport-panel,
  .study-v2-board-hint {
    bottom: 58px;
  }

  .study-v2-step-navigation {
    grid-template-columns: auto minmax(130px, 1fr) auto;
    gap: 10px;
    padding: 0 18px;
  }

  html.study-v2-enabled #btnPrevStep,
  html.study-v2-enabled #btnNextStep {
    min-width: 126px;
    min-height: 44px;
  }
}

@media (max-width: 680px) {
  html.study-v2-enabled .chat-topbar-brand {
    display: flex;
  }

  html.study-v2-enabled .study-v2-mode-marker {
    display: none;
  }
  html.study-v2-enabled .study-v2-classic-link,
  html.study-v2-enabled .status-badge,
  html.study-v2-enabled #btnReset {
    display: none;
  }

  html.study-v2-enabled .chat-topbar-brand h1 {
    font-size: 13px;
  }

  .study-v2-eyebrow {
    margin-bottom: 3px;
  }

  .study-v2-lesson-header h1 {
    font-size: 22px;
  }

  /* U9: whole-pixel rows keep the 44 px board controls on whole pixels. */
  html.study-v2-enabled
    body.board-mode:not(.study-v2-board-hidden)
    #view-chat.active {
    grid-template-rows: 56px 64px 1fr;
  }

  html.study-v2-enabled
    body.study-v2-has-lesson.board-mode:not(.study-v2-board-hidden)
    #view-chat.active {
    grid-template-rows: 56px 64px 1fr 72px;
  }

  html.study-v2-enabled .lesson-step-caption {
    font-size: 30px;
  }

  html.study-v2-enabled
    .message.study-v2-direct-answer
    .bubble
    > p:first-child {
    margin-bottom: 11px;
    font-size: 12px;
    line-height: 1.58;
  }

  html.study-v2-enabled .message.study-v2-direct-answer .bubble {
    font-size: 12px;
    line-height: 1.58;
  }

  html.study-v2-enabled .message.study-v2-direct-answer .bubble p,
  html.study-v2-enabled .message.study-v2-direct-answer .bubble ul,
  html.study-v2-enabled .message.study-v2-direct-answer .bubble ol {
    margin-bottom: 10px;
  }

  html.study-v2-enabled .message.study-v2-direct-answer .math-block {
    margin-block: 12px;
    padding-block: 12px;
  }

  html.study-v2-enabled .thread-area,
  html.study-v2-enabled body.board-mode .thread-area {
    padding: 16px 18px 0;
  }

  html.study-v2-enabled .composer-panel {
    padding: 9px 14px;
  }

  html.study-v2-enabled .input-wrapper {
    min-height: 62px;
  }

  html.study-v2-enabled body.study-v2-has-exploration .input-wrapper {
    min-height: 54px;
  }

  .study-v2-progress-copy > span,
  .study-v2-step-dots {
    display: none;
  }

  .study-v2-step-navigation {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 0 10px;
  }

  html.study-v2-enabled #btnPrevStep,
  html.study-v2-enabled #btnNextStep {
    min-width: 0;
    width: 100%;
    padding-inline: 10px;
  }

  html.study-v2-enabled #btnPrevStep svg,
  html.study-v2-enabled #btnNextStep svg,
  .study-v2-board-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.study-v2-enabled *,
  html.study-v2-enabled *::before,
  html.study-v2-enabled *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Notebook dialog follows the study-room prototype's dimensions and hierarchy. */
html.study-v2-enabled .study-history-modal {
  margin: auto;
  width: 470px;
  max-width: calc(100vw - 30px);
  max-height: calc(100dvh - 48px);
  padding: 39px;
  border: 1px solid var(--study-line);
  border-radius: 7px;
  background: var(--study-paper);
  color: var(--study-ink);
  box-shadow: 0 25px 100px var(--study-shadow);
  overflow: auto;
}
html.study-v2-enabled .study-history-modal::backdrop {
  background: var(--study-backdrop);
  backdrop-filter: blur(5px);
}
html.study-v2-enabled .study-history-modal .history-panel {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.study-history-eyebrow {
  font-size: var(--study-support-size);
  letter-spacing: .13em;
  color: var(--study-muted);
}
html.study-v2-enabled .study-history-modal h2 {
  font: 450 36px/1.08 var(--study-heading);
  letter-spacing: -.025em;
  margin: 13px 0 20px;
}
html.study-v2-enabled .study-history-modal #btnCloseHistory {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  color: var(--study-muted);
}
html.study-v2-enabled .study-history-modal .history-note,
html.study-v2-enabled .study-history-modal .section-label,
html.study-v2-enabled .study-history-modal .history-empty,
html.study-v2-enabled .study-history-documents .compact strong { display: none; }
html.study-v2-enabled .study-history-documents { margin-top: 22px; font-size: 12px; }
html.study-v2-enabled .study-history-documents summary { cursor: pointer; color: var(--study-muted); }
html.study-v2-enabled .study-history-modal input[type=search] {
  width: 100%;
  border: 1px solid var(--study-input-line);
  border-radius: 4px;
  padding: 13px;
  margin-bottom: 10px;
  font: 12px var(--study-body);
  color: var(--study-ink);
  background: var(--study-input-bg);
}
html.study-v2-enabled .study-history-modal .history-list {
  display: grid;
  gap: 0;
  max-height: 45dvh;
}
html.study-v2-enabled .study-history-modal .history-item {
  padding: 20px 28px 20px 0;
  border: 0;
  border-bottom: 1px solid var(--study-line);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
html.study-v2-enabled .study-history-modal .history-item:hover {
  background: var(--study-accent-soft);
}
html.study-v2-enabled .study-history-modal .history-item strong {
  font: 450 22px/1.25 var(--study-heading);
  white-space: normal;
  overflow-wrap: anywhere;
}
html.study-v2-enabled .study-history-modal .history-item small {
  margin-top: 7px;
  color: var(--study-muted);
  font-size: var(--study-support-size);
}
html.study-v2-enabled #studyHistoryEmpty {
  margin: 20px 0 0;
  color: var(--study-muted);
  font-size: 12px;
}
html.study-v2-enabled #studyHistoryEmpty[hidden] { display: none; }
html.study-v2-enabled .math-block {
  margin: 17px 0;
  padding: 14px 0;
  border-block: 1px solid var(--study-line);
  overflow-x: auto;
  max-width: 100%;
}
html.study-v2-enabled .katex-display { margin: 0; overflow-x: auto; overflow-y: hidden; }
html.study-v2-enabled .bubble p { margin: 0 0 17px; }
html.study-v2-enabled .bubble ul,
html.study-v2-enabled .bubble ol { padding-left: 1.4em; }

/* Conversation and board visibility are presentation choices, not resets. */
.study-v2-view-control {
  border: 1px solid var(--study-line);
  border-radius: 4px;
  padding: 8px 11px;
  background: transparent;
  color: var(--study-ink);
  font: var(--study-support-size) var(--study-body);
  cursor: pointer;
}
html.study-v2-enabled #studyV2RetryScene { display: none; }
html.study-v2-enabled body[data-study-phase="error"] #studyV2RetryScene { display: inline-block; }
html.study-v2-enabled body:not(.board-mode) #studyV2BoardVisibility,
html.study-v2-enabled body:not(.study-v2-has-lesson) #studyV2Conversation { display: none; }
html.study-v2-enabled body.study-v2-conversation #chatThread .message {
  display: flex;
}
html.study-v2-enabled body.study-v2-conversation .lesson-step-caption {
  font-size: 24px;
}
html.study-v2-enabled body.study-v2-conversation .lesson-step-message {
  border-bottom: 1px solid var(--study-line);
  padding-block: 22px;
}
html.study-v2-enabled body.study-v2-board-hidden.board-mode .workspace {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
html.study-v2-enabled body.study-v2-board-hidden .whiteboard-container,
html.study-v2-enabled body.study-v2-board-hidden .study-v2-step-navigation { display: none; }
html.study-v2-enabled body.study-v2-board-hidden.study-v2-has-lesson.board-mode #view-chat.active {
  grid-template-rows: 72px 100px minmax(0, 1fr);
}
html.study-v2-enabled body.study-v2-board-hidden .chat-container { border-right: 0; }
@media (max-width: 680px) {
  .study-v2-view-control { padding: 6px; }
  html.study-v2-enabled body.study-v2-board-hidden.study-v2-has-lesson.board-mode #view-chat.active {
    grid-template-rows: 56px 82px minmax(0, 1fr);
  }
}

/* Focus (U12, WCAG 2.4.7 and 1.4.11): one token for every control. A 2 px ring
   in the editorial ink with a 2 px gap, so on the dark filled buttons it sits
   on the light page. Colour, width and offset are also set on the resting state
   so inherited `transition: all` rules have nothing to animate; they used to
   fade the ring in from currentColor, which is white on the dark buttons.
   Controls inside a clipping or scrolling container, and the notebook search
   that sits flush under the dark "new" button, draw the ring inside their own
   box, where it cannot be cut off or lost. Mouse focus without :focus-visible
   keeps no ring. */
html.study-v2-enabled {
  --study-focus-ring: var(--study-ink);
  --study-focus-width: 2px;
  --study-focus-offset: 2px;
}

html.study-v2-enabled :is(button, input, textarea, select, a[href], [tabindex]) {
  outline-color: var(--study-focus-ring);
  outline-width: var(--study-focus-width);
  outline-offset: var(--study-focus-offset);
}

html.study-v2-enabled
  :is(
    .board-toolbar .toolbar-btn,
    #studyV2History .study-v2-notebook-entry,
    .study-v2-search,
    #chatThread,
    #chatInput
  ) {
  --study-focus-offset: calc(-2 * var(--study-focus-width));
}

html.study-v2-enabled :is(button, input, textarea, select, a[href], [tabindex]):focus-visible {
  outline: var(--study-focus-width) solid var(--study-focus-ring) !important;
  outline-offset: var(--study-focus-offset) !important;
}

/* Targets (U16, WCAG 2.5.8 and 2.5.5). Every control is at least 24x24 px;
   on screens up to 768 px wide, 44x44. The step dots keep their thin bar and
   take a transparent hit area 27 px tall and as wide as the bar, so the gap
   between dots stays clear for the U12 ring, which still follows the bar.
   On phones the board tools sit in a row below the drawing (U9) and the
   domain presets wrap inside their panel. */
.study-v2-step-dots button {
  position: relative;
}

.study-v2-step-dots button::before {
  content: "";
  position: absolute;
  inset: -12px 0;
}

html.study-v2-enabled .viewport-pill,
html.study-v2-enabled select#viewportQuality {
  min-height: 26px;
}

@media (max-width: 768px) {
  html.study-v2-enabled #sidebar-toggle,
  html.study-v2-enabled .toolbar-btn,
  html.study-v2-enabled .study-v2-composer-bottom #btnAttachDocument,
  html.study-v2-enabled .study-v2-composer-bottom #btnSend,
  #studyV2Expand {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  html.study-v2-enabled
    :is(
      .study-v2-view-control,
      #studyV2Style,
      .composer-mode-toggle,
      .study-v2-domain-toggle,
      .study-v2-zoom-mode [role="radio"],
      .viewport-pill,
      select#viewportQuality
    ) {
    min-width: 44px;
    min-height: 44px;
  }
}

/* U18: the sign-in dialog and the billing drawer in the editorial style.
   Serif titles like the study room headings, sentence-case support labels at
   the U14 size and colour, the "Siguiente paso" primary button (ink fill,
   3 px corners, 12 px 730 label, 46 px tall), a paper-toned notice instead
   of the pilot blue box, and the U12 ring (from the shared rule above) in
   place of the blue focus glow. Same structure and copy; the classic view
   keeps the pilot style from prisma_app.css. */
html.study-v2-enabled .pilot-auth-overlay {
  background: var(--study-overlay);
}

html.study-v2-enabled .pilot-auth-card {
  border: 1px solid var(--study-line);
  border-radius: 7px;
  background: var(--study-paper);
  box-shadow: 0 25px 100px var(--study-shadow);
  color: var(--study-ink);
  font-family: var(--study-body);
}

html.study-v2-enabled .pilot-auth-card h2,
html.study-v2-enabled .billing-panel .history-panel-header h2 {
  color: var(--study-ink);
  font: 450 28px/1.12 var(--study-heading);
  letter-spacing: -0.02em;
}

html.study-v2-enabled .pilot-auth-card p {
  color: var(--study-copy);
}

html.study-v2-enabled .pilot-auth-card label,
html.study-v2-enabled .billing-panel .section-label,
html.study-v2-enabled .billing-kicker {
  color: var(--study-muted);
  font-family: var(--study-body);
  font-size: var(--study-support-size);
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

html.study-v2-enabled .billing-panel .section-label {
  display: block;
  margin-bottom: 4px;
}

html.study-v2-enabled .pilot-auth-card input {
  border: 1px solid var(--study-input-line);
  border-radius: 4px;
  background: var(--study-input-bg);
  color: var(--study-ink);
  font: 15px var(--study-body);
}

html.study-v2-enabled .pilot-auth-card input:focus {
  border-color: var(--study-ink);
  box-shadow: none;
}

html.study-v2-enabled .pilot-auth-card button,
html.study-v2-enabled .billing-primary {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--cta-bg);
  border-radius: 3px;
  background: var(--cta-bg);
  color: var(--study-on-ink);
  font: 730 var(--study-support-size) / 1.2 var(--study-body);
}

html.study-v2-enabled .pilot-auth-card button:hover:not(:disabled),
html.study-v2-enabled .billing-primary:hover:not(:disabled) {
  border-color: var(--cta-bg-hover);
  background: var(--cta-bg-hover);
}

html.study-v2-enabled .pilot-auth-error {
  font-family: var(--study-body);
}

/* U17: the sign-in instruction reads as copy, not as an error. */
html.study-v2-enabled .pilot-auth-hint {
  color: var(--study-copy);
  font-family: var(--study-body);
}

html.study-v2-enabled .pilot-notice {
  border: 1px solid var(--study-line);
  border-radius: 3px;
  background: var(--study-sidebar);
  color: var(--study-copy);
}

html.study-v2-enabled .billing-card {
  border-radius: 5px;
  background: var(--study-paper);
}

html.study-v2-enabled .billing-card h3 {
  color: var(--study-ink);
  font: 500 22px/1.2 var(--study-heading);
}

html.study-v2-enabled .billing-meter {
  border-radius: 2px;
  background: var(--study-line);
}

html.study-v2-enabled .billing-meter span {
  background: var(--study-accent);
}

html.study-v2-enabled .billing-actions .btn-secondary {
  min-height: 46px;
  padding: 0 16px;
  color: var(--study-copy);
  font-weight: 730;
}

html.study-v2-enabled #btnCloseBilling {
  min-height: 44px;
}

/* U5: a lesson's highlight action on a label (the overlay adapter sets the
   attribute). Static, so it is the same with reduced motion; the label's own
   inline styles do not set an outline. */
html.study-v2-enabled .pizarra-label[data-prisma-highlighted="true"] {
  outline: 2px solid var(--study-highlight-outline);
  outline-offset: 2px;
}

/* U25: "Tema" in the top bar. A button naming the current mode opens three
   radios (Claro, Oscuro, Sistema); the checked one is filled with the ink,
   like the U11 zoom control, and 6 px apart so a focus ring never sits on a
   filled neighbour. On phones the button is its 44 px icon. */
.study-v2-theme {
  position: relative;
  display: inline-flex;
}

.study-v2-theme-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
}

.study-v2-theme-icon,
.study-v2-theme-icon svg,
.study-v2-theme-menu [role="radio"] svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}

.study-v2-theme-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 130;
  display: grid;
  min-width: 168px;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--study-line);
  border-radius: 4px;
  background: var(--study-card);
  box-shadow: 0 18px 48px var(--study-shadow);
}

.study-v2-theme-menu[hidden] {
  display: none;
}

.study-v2-theme-menu [role="radio"] {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--study-ink);
  font: 650 var(--study-support-size) var(--study-body);
  text-align: left;
  cursor: pointer;
}

.study-v2-theme-menu [role="radio"]:hover {
  border-color: var(--study-accent);
}

.study-v2-theme-menu [role="radio"][aria-checked="true"] {
  border-color: var(--study-ink);
  background: var(--study-ink);
  color: var(--study-paper);
}

@media (max-width: 768px) {
  .study-v2-theme-menu [role="radio"] {
    min-height: 44px;
  }
}

@media (max-width: 680px) {
  html.study-v2-enabled .study-v2-theme-button {
    width: 44px;
    justify-content: center;
    padding: 0;
  }

  .study-v2-theme-label {
    display: none;
  }
}

/* U25: dark mode. Tokens change; every rule above reads them (the few rules
   after this block cover colours prisma_app.css hard-codes). A warm,
   low-glare charcoal (never pure black) with the paper's cream as the ink.
   Measured (WCAG, on the darkest surface each sits on): ink #e6e1d3 13.2:1
   on the page; copy 9.0:1 on the notebook; muted 5.2:1 on a card; figure
   muted 5.9:1 and accent 7.0:1 on the board #1e2220; text on the ink
   buttons 13.2:1; the focus ring is the ink; sign-in fields 3.8:1. The board itself follows through
   PrismaStudyVisualTheme (the same #1e2220). */
html.study-v2-enabled[data-study-theme="dark"] {
  color-scheme: dark;
  --study-paper: #1a1b18;
  --study-sidebar: #20211d;
  --study-canvas: #1e2220;
  --study-card: #252621;
  --study-ink: #e6e1d3;
  --study-copy: #b9c3c1;
  --study-muted: #8f9895;
  --study-muted-figure: #8ea19b;
  --study-line: #3a3c35;
  --study-accent: #62b8c6;
  --study-accent-soft: #1f3235;
  --study-ochre: #cf9a5e;
  --study-on-ink: #1a1b18;
  --study-ink-hover: #cfc9b9;
  --study-entry-bg: rgba(37, 38, 33, 0.8);
  --study-rule: #4d5049;
  --study-quote-em: #b3c6c1;
  --study-topbar-bg: rgba(26, 27, 24, 0.96);
  --study-note: #a3b0ad;
  --study-scrollbar: #4a4d46;
  --study-user-bubble: rgba(44, 45, 40, 0.62);
  --study-field-line: #5f635b;
  --study-field-bg: rgba(33, 34, 30, 0.84);
  --study-icon: #8a9c93;
  --study-avatar: #34382f;
  --study-instrument-canvas: #202523;
  --study-instrument-copy: #c3ccca;
  --study-instrument-grid: #9fb2a414;
  --study-accent-glow: rgba(98, 184, 198, 0.16);
  --study-control-line: #4a4e46;
  --study-control-bg: rgba(26, 27, 24, 0.6);
  --study-canvas-glow: rgba(255, 255, 255, 0.025);
  --study-tool-bg: rgba(30, 34, 32, 0.88);
  --study-panel-glass: rgba(30, 32, 29, 0.95);
  --study-pill-bg: rgba(37, 38, 33, 0.82);
  --study-accent-sweep: rgba(98, 184, 198, 0.06);
  --study-nav-bg: rgba(26, 27, 24, 0.98);
  --study-dot: #3e423b;
  --study-dot-visited: #6e8a80;
  --study-shadow: #00000066;
  --study-backdrop: #0a0b0a99;
  --study-input-line: #74786f;
  --study-input-bg: #22231f;
  --study-overlay: rgba(20, 21, 18, 0.92);
  --study-highlight-outline: #7fd0dc;
  --study-paper-rule: rgba(236, 231, 218, 0.018);
  --study-paper-rule-2: rgba(236, 231, 218, 0.014);
  --study-accent-line: rgba(98, 184, 198, 0.45);
  --study-accent-hover: #7cc6d2;
  --study-accent-wash: rgba(98, 184, 198, 0.08);
  --study-label-card: rgba(37, 38, 33, 0.94);
}

/* prisma_app.css paints the "show on the board" toggle white and its active
   state with white on the accent; in dark mode, the card and the page. */
html.study-v2-enabled[data-study-theme="dark"]
  .composer-mode-toggle:not(:hover):not(.active) {
  background: var(--study-card);
}

html.study-v2-enabled[data-study-theme="dark"] .composer-mode-toggle.active {
  color: var(--study-on-ink);
}

/* The logo is dark ink on paper; multiply would hide it on the dark page. */
html.study-v2-enabled[data-study-theme="dark"] .sidebar-logo img {
  mix-blend-mode: normal;
  filter: invert(1) hue-rotate(180deg);
}

/* Lesson labels on the board: P.etiqueta draws a white card inline; in dark
   mode it is the dark card (the text is the theme's label ink). */
html.study-v2-enabled[data-study-theme="dark"]
  #pizarraApp
  .pizarra-label:not([data-axis-label="true"]) {
  border-color: var(--study-line) !important;
  background: var(--study-label-card) !important;
  box-shadow: 0 10px 26px var(--study-shadow) !important;
}