:root {
      --bg-paper: #f4f2ed;
      --bg-page: #faf9f5;
      --bg-card: #faf9f5;
      --bg-inset: #f0ede6;

      --ink-primary: #18181b;
      --ink-secondary: #3f3f46;
      --ink-muted: #71717a;
      --ink-faint: #a1a1aa;

      --rule-dark: #d6d3cd;
      --rule-light: #e6e3dd;
      --rule-subtle: #f0ede6;
      --shadow-hard: 0 1px 2px rgba(24, 24, 27, 0.05);
      --shadow-hard-lg: 0 12px 28px -4px rgba(24, 24, 27, 0.12), 0 2px 6px rgba(24, 24, 27, 0.05);

      --accent-oxford: #18181b;
      --accent-oxford-soft: rgba(24, 24, 27, 0.05);
      --accent-crimson: #991b1b;
      --accent-crimson-soft: rgba(153, 27, 27, 0.06);
      --accent-brass: #92400e;
      --accent-brass-soft: rgba(146, 64, 14, 0.06);

      --fig-green: #166534;
      --fig-blue: #1e40af;
      --fig-amber: #b45309;
      --fig-red: #991b1b;

      --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-serif: "Crimson Pro", Georgia, "Times New Roman", serif;
      --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

      --header-h: 46px;
      --left-page-w: clamp(344px, 25vw, 408px);
      --right-page-w: clamp(340px, 23vw, 372px);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: var(--bg-paper);
      font-family: var(--font-sans);
      color: var(--ink-primary);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    }

    #canvas-container {
      position: fixed;
      inset: 0;
      z-index: 1;
    }

    /* ==========================================================================
       ВЕРХНЯ ПАНЕЛЬ НАВІГАЦІЇ (КОМПАКТНИЙ DESKTOP TOOLBAR, 48PX)
       ========================================================================== */
    .book-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--header-h);
      z-index: 40;
      background: var(--bg-page);
      border-bottom: 1px solid var(--rule-dark);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      gap: 12px;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .chapter-nav-group {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }

    .chapter-step-btn {
      width: 28px;
      height: 28px;
      border-radius: 3px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--ink-secondary);
      font-family: var(--font-sans);
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
      flex-shrink: 0;
    }

    .chapter-step-btn:hover {
      background: rgba(15, 23, 42, 0.05);
      border-color: var(--rule-light);
      color: var(--ink-primary);
    }

    .chapter-step-btn:active {
      background: rgba(15, 23, 42, 0.09);
    }

    .exp-dropdown-wrapper {
      position: relative;
      width: 420px;
      flex: 0 0 420px;
      min-width: 420px;
      max-width: 420px;
    }

    .exp-dropdown-trigger {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      height: 32px;
      padding: 0 11px;
      border-radius: 3px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--ink-primary);
      cursor: pointer;
      transition: background 0.12s ease, border-color 0.12s ease;
      justify-content: space-between;
    }

    .exp-dropdown-trigger:hover,
    .exp-dropdown-wrapper.open .exp-dropdown-trigger {
      background: rgba(15, 23, 42, 0.045);
      border-color: var(--rule-light);
    }

    .trigger-text-wrap {
      display: flex;
      align-items: baseline;
      gap: 6px;
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
    }

    .trigger-sec-sym {
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: var(--accent-oxford);
      flex-shrink: 0;
    }

    .trigger-title {
      font-family: var(--font-serif);
      font-size: 15px;
      font-weight: 600;
      color: var(--ink-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: -0.01em;
    }

    .trigger-cat-pill {
      display: none;
    }

    .trigger-chevron {
      font-size: 10px;
      color: var(--ink-muted);
      transition: transform 0.18s ease;
      flex-shrink: 0;
    }

    .exp-dropdown-wrapper.open .trigger-chevron {
      transform: rotate(180deg);
      color: var(--ink-primary);
    }

    /* Випадний каталог експериментів */
    .exp-dropdown-menu {
      position: absolute;
      top: calc(100% + 5px);
      left: 0;
      width: min(540px, 90vw);
      max-height: min(74vh, 600px);
      overflow-y: auto;
      background: var(--bg-page);
      border: 1px solid var(--rule-dark);
      border-radius: 2px;
      box-shadow: var(--shadow-hard-lg);
      padding: 10px 12px 12px;
      z-index: 100;
      display: none;
      flex-direction: column;
      gap: 2px;
    }

    .exp-dropdown-wrapper.open .exp-dropdown-menu {
      display: flex;
      animation: menuSlideIn 0.14s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes menuSlideIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .dropdown-filter-bar {
      display: flex;
      gap: 4px;
      padding-bottom: 8px;
      margin-bottom: 4px;
      border-bottom: 1px solid var(--rule-light);
      flex-wrap: wrap;
    }

    .filter-pill-btn {
      padding: 4px 9px;
      border-radius: 2px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--ink-secondary);
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.12s ease;
    }

    .filter-pill-btn:hover {
      background: rgba(15, 23, 42, 0.05);
      color: var(--ink-primary);
    }

    .filter-pill-btn.active {
      background: var(--ink-primary);
      color: #ffffff;
      font-weight: 600;
    }

    .dropdown-group-title {
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink-secondary);
      padding: 10px 8px 4px;
    }

    .dropdown-exp-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 7px 10px;
      border-radius: 3px;
      background: transparent;
      cursor: pointer;
      text-align: left;
      text-decoration: none;
      color: inherit;
      transition: background 0.1s ease;
    }

    .dropdown-exp-item:hover {
      background: var(--bg-inset);
    }

    .dropdown-exp-item.active {
      background: var(--bg-inset);
    }

    .exp-item-left {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
    }

    .exp-item-sec {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--accent-oxford);
      min-width: 28px;
      flex-shrink: 0;
    }

    .exp-item-info {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .exp-item-title {
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-primary);
      line-height: 1.25;
    }

    .exp-item-sub {
      font-size: 11px;
      color: var(--ink-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .exp-item-badge {
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 500;
      padding: 0;
      background: transparent;
      color: var(--ink-muted);
      flex-shrink: 0;
    }

    .exp-item-badge.optics {
      background: transparent;
      color: var(--ink-muted);
    }

    /* Права частина хедера: чіткий інженерний Segmented Control */
    .header-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .phase-breadcrumbs {
      display: none !important;
    }

    .phase-breadcrumbs > span:not(.phase-crumb) {
      display: none;
    }

    .phase-crumb {
      padding: 4px 10px;
      border-radius: 2px;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: all 0.14s ease;
      user-select: none;
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 500;
      color: var(--ink-secondary);
      white-space: nowrap;
    }

    .phase-crumb:hover {
      color: var(--ink-primary);
    }

    .phase-crumb.current {
      color: var(--ink-primary);
      background: var(--bg-card);
      font-weight: 600;
    }

    .phase-crumb.done {
      color: var(--ink-secondary);
    }

    .lang-switcher {
      display: inline-flex;
      align-items: center;
      background: transparent;
      border: 1px solid var(--rule-dark);
      border-radius: 2px;
      padding: 1px;
      gap: 1px;
    }

    .lang-btn {
      border: none;
      background: transparent;
      color: var(--ink-secondary);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      padding: 3px 7px;
      border-radius: 1px;
      cursor: pointer;
      transition: all 0.12s ease;
      line-height: 1.1;
    }

    .lang-btn:hover {
      color: var(--ink-primary);
    }

    .lang-btn.active {
      background: var(--ink-primary);
      color: #faf9f5;
    }

    /* ==========================================================================
       НИЖНІЙ ДОК КАМЕРИ (ЧІТКА ПРЯМОКУТНА ШКАЛА ПРОЄКЦІЙ)
       ========================================================================== */
    .viewport-cam-dock {
      position: fixed;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 35;
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 3px 5px;
      background: var(--bg-page);
      border: 1px solid var(--rule-dark);
      border-radius: 2px;
      box-shadow: 0 2px 8px rgba(24, 24, 27, 0.06);
      max-width: calc(100vw - var(--left-page-w) - var(--right-page-w) - 32px);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .viewport-cam-dock::-webkit-scrollbar {
      display: none;
    }

    .cam-dock-label {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink-muted);
      padding: 3px 9px 3px 6px;
      border-right: 1px solid var(--rule-dark);
      margin-right: 2px;
      white-space: nowrap;
    }

    .view-projections {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .proj-btn {
      padding: 3px 9px;
      border-radius: 1px;
      border: none;
      background: transparent;
      color: var(--ink-secondary);
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.12s ease;
      white-space: nowrap;
    }

    .proj-btn:hover {
      background: var(--bg-inset);
      color: var(--ink-primary);
    }

    .proj-btn.active {
      background: var(--ink-primary);
      color: #faf9f5;
      font-weight: 500;
    }

    /* ==========================================================================
       БІЧНІ ПАНЕЛІ: АСИМЕТРИЧНИЙ РИТМ І РІЗНІ ВІДСТУПИ
       ========================================================================== */
    .book-page-left,
    .book-page-right {
      position: fixed;
      top: var(--header-h);
      bottom: 0;
      z-index: 30;
      background-color: var(--bg-page);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      gap: 0; /* Відступи індивідуальні для кожного смислового блока! */
      scrollbar-width: thin;
      scrollbar-color: rgba(15, 23, 42, 0.16) transparent;
      transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
    }

    .book-page-left {
      left: 0;
      width: var(--left-page-w);
      padding: 26px 22px 40px 26px;
      border-right: 1px solid var(--rule-dark);
    }

    .book-page-right {
      right: 0;
      width: var(--right-page-w);
      padding: 20px 22px 34px 18px;
      border-left: 1px solid var(--rule-dark);
    }

    .book-page-left.panel-hidden {
      transform: translateX(-102%);
      opacity: 0;
      pointer-events: none;
    }

    .book-page-right.panel-hidden {
      transform: translateX(102%);
      opacity: 0;
      pointer-events: none;
    }

    .panel-collapse-btn {
      position: fixed;
      top: calc(var(--header-h) + 14px);
      z-index: 36;
      width: 20px;
      height: 40px;
      background: var(--bg-page);
      border: 1px solid var(--rule-dark);
      color: var(--ink-muted);
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: left 0.26s cubic-bezier(0.22, 1, 0.36, 1), right 0.26s cubic-bezier(0.22, 1, 0.36, 1), color 0.12s ease;
    }

    .panel-collapse-btn:hover {
      background: var(--bg-inset);
      color: var(--ink-primary);
    }

    .panel-collapse-left {
      left: var(--left-page-w);
      border-left: none;
      border-radius: 0 3px 3px 0;
    }

    .panel-collapse-left.collapsed {
      left: 0;
      border-left: 1px solid var(--rule-dark);
    }

    .panel-collapse-right {
      right: var(--right-page-w);
      border-right: none;
      border-radius: 3px 0 0 3px;
    }

    .panel-collapse-right.collapsed {
      right: 0;
      border-right: 1px solid var(--rule-dark);
    }

    .book-page-left::-webkit-scrollbar,
    .book-page-right::-webkit-scrollbar {
      width: 4px;
    }
    .book-page-left::-webkit-scrollbar-thumb,
    .book-page-right::-webkit-scrollbar-thumb {
      background: rgba(15, 23, 42, 0.16);
      border-radius: 2px;
    }

    /* ==========================================================================
       ЛІВА ПАНЕЛЬ: ЖУРНАЛЬНА ТИПОГРАФІКА ТА ЖИВИЙ РИТМ
       ========================================================================== */
    .chapter-header {
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--rule-dark);
    }

    .chapter-meta {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink-muted);
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      font-variant-numeric: tabular-nums;
      line-height: 1.4;
    }

    .chapter-title {
      font-family: var(--font-serif);
      font-size: 24px;
      font-weight: 600;
      line-height: 1.18;
      color: var(--ink-primary);
      margin-bottom: 8px;
      letter-spacing: -0.015em;
      overflow-wrap: break-word;
      text-wrap: balance;
    }

    .chapter-epigraph {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 15.2px;
      line-height: 1.5;
      color: var(--ink-secondary);
      padding: 2px 0 4px;
      border: none;
      background: transparent;
      text-align: left;
      text-wrap: pretty;
      overflow-wrap: break-word;
    }

    /* ==========================================================================
       РОЗГОРТАЄМИЙ ТЕОРЕТИЧНИЙ КОНСПЕКТ (ПЛОСКИЙ КНИЖКОВИЙ РЯДОК БЕЗ РАМКИ)
       ========================================================================== */
    .btn-theory-book {
      margin-top: 10px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 0 2px;
      border-radius: 0;
      border: none;
      border-top: 1px solid var(--rule-light);
      background: transparent;
      color: var(--ink-primary);
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: none;
      transition: color 0.12s ease;
    }

    .theory-book-left {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .theory-book-right {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }

    .theory-book-hint {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink-muted);
    }

    .btn-theory-book:hover .theory-book-hint,
    .btn-theory-book.open .theory-book-hint {
      color: var(--ink-primary);
    }

    .theory-book-chev,
    .theory-book-chevron,
    .ref-book-chev {
      font-size: 11px;
      color: var(--ink-muted);
      transition: transform 0.18s ease;
      margin-left: 2px;
      display: inline-block;
    }

    .btn-theory-book.open .theory-book-chev,
    .btn-theory-book.open .theory-book-chevron {
      transform: rotate(180deg);
      color: var(--ink-primary);
    }

    /* Розгортаємий блок теоретичного конспекту */
    .theory-drawer-box {
      display: none;
      margin-top: 8px;
      background: transparent;
      border: none;
      border-top: 1px solid var(--rule-light);
      border-radius: 0;
      padding: 12px 0 4px;
      box-shadow: none;
      animation: fadeBook 0.18s ease;
    }

    .theory-drawer-box.open {
      display: block;
    }

    .theory-drawer-box-right {
      margin-top: 6px;
    }

    .theory-drawer-content {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .theory-note-block {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--rule-light);
    }

    .theory-note-block:last-of-type {
      padding-bottom: 2px;
      border-bottom: none;
    }

    .theory-note-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 2px;
    }

    .theory-note-subtitle {
      font-family: var(--font-sans);
      font-style: normal;
      font-size: 11.5px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink-secondary);
      line-height: 1.38;
    }

    .theory-note-body,
    .theory-note-para {
      font-family: var(--font-serif);
      font-size: 15px;
      line-height: 1.56;
      color: var(--ink-primary);
      text-align: left;
      text-wrap: pretty;
      overflow-wrap: break-word;
      margin: 0;
    }

    .textbook-thesis-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .textbook-thesis-item {
      position: relative;
      padding-left: 14px;
      font-family: var(--font-serif);
      font-size: 15px;
      line-height: 1.54;
      color: var(--ink-primary);
      text-align: left;
      text-wrap: pretty;
      overflow-wrap: break-word;
    }

    .textbook-thesis-item::before {
      content: "•";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--ink-muted);
      font-weight: 400;
    }

    .theory-note-para strong,
    .textbook-thesis-item strong,
    .proof-text strong {
      color: var(--ink-primary);
      font-weight: 600;
      background: transparent;
      padding: 0;
    }

    .theory-note-para .katex,
    .textbook-thesis-item .katex,
    .problem-question .katex,
    .book-option-btn .katex,
    .proof-text .katex {
      font-size: 0.96em;
      padding: 0 1px;
    }

    .theory-note-formula {
      margin-top: 4px;
      padding: 8px 0 2px;
      background: transparent;
      border: none;
      border-top: 1px solid var(--rule-light);
      border-radius: 0;
      text-align: center;
      font-size: 13.2px;
      color: var(--ink-primary);
      overflow: hidden;
    }

    /* Панель запуску: чітка лабораторна кнопка + компактний рядок інструментів */
    .experiment-controls {
      display: none;
      flex-direction: column;
      gap: 8px;
      margin: 2px 0 18px;
      padding: 4px 0 16px;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--rule-dark);
      border-radius: 0;
    }

    .experiment-controls.visible {
      display: flex;
    }

    .btn-oxford-primary {
      width: 100%;
      height: 36px;
      padding: 0 16px;
      border-radius: 2px;
      border: 1px solid var(--ink-primary);
      background: var(--ink-primary);
      color: #faf9f5;
      font-family: var(--font-sans);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.01em;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: none;
      transition: background 0.12s ease, border-color 0.12s ease;
    }

    .btn-oxford-primary:hover {
      background: #27272a;
      border-color: #27272a;
    }

    .btn-oxford-primary:active {
      background: #09090b;
    }

    .secondary-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .btn-paper-secondary {
      height: 26px;
      padding: 0 10px;
      border-radius: 2px;
      border: 1px solid var(--rule-dark);
      background: transparent;
      color: var(--ink-secondary);
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.12s ease;
    }

    .btn-paper-secondary:hover {
      background: var(--bg-inset);
      color: var(--ink-primary);
      border-color: var(--ink-muted);
    }

    .speed-group {
      display: inline-flex;
      background: transparent;
      border: 1px solid var(--rule-dark);
      border-radius: 2px;
      padding: 1px;
      gap: 1px;
    }

    .speed-opt {
      padding: 2px 7px;
      border: none;
      border-radius: 1px;
      background: transparent;
      color: var(--ink-muted);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.12s ease;
    }

    .speed-opt:hover {
      color: var(--ink-primary);
    }

    .speed-opt.active {
      background: var(--ink-primary);
      color: #faf9f5;
      font-weight: 500;
    }

    /* Секція Задачі: плоский книжковий виклад питання та варіантів без плашок */
    .problem-box {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 20px;
      padding-top: 2px;
    }

    .problem-label {
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink-secondary);
    }

    .problem-question {
      font-family: var(--font-serif);
      font-size: 16px;
      line-height: 1.52;
      color: var(--ink-primary);
      font-weight: 400;
      margin-bottom: 2px;
      padding: 2px 0 4px;
      background: transparent;
      border: none;
      text-align: left;
      text-wrap: pretty;
      overflow-wrap: break-word;
    }

    .options-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 2px;
      border-top: 1px solid var(--rule-light);
    }

    .book-option-btn {
      width: 100%;
      text-align: left;
      text-wrap: pretty;
      padding: 9px 4px;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid var(--rule-light);
      background: transparent;
      color: var(--ink-primary);
      font-family: var(--font-sans);
      font-size: 13.2px;
      line-height: 1.5;
      cursor: pointer;
      display: flex;
      align-items: baseline;
      gap: 10px;
      box-shadow: none;
      transition: background 0.1s ease;
    }

    .book-option-btn > span:last-child {
      flex: 1;
      text-align: left;
      text-wrap: pretty;
    }

    .book-option-btn:hover {
      background: var(--bg-inset);
    }

    .book-option-btn.selected {
      background: var(--bg-inset);
      font-weight: 500;
    }

    /* Індекс варіанта у стилі друкованого переліку */
    .option-letter {
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 600;
      width: 18px;
      height: 18px;
      border-radius: 2px;
      border: 1px solid var(--rule-dark);
      background: transparent;
      color: var(--ink-secondary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .book-option-btn.selected .option-letter {
      background: var(--ink-primary);
      color: #faf9f5;
      border-color: var(--ink-primary);
    }

    .collapsed-hypothesis {
      display: none;
      align-items: center;
      justify-content: space-between;
      padding: 7px 0;
      margin-bottom: 10px;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid var(--rule-light);
      background: transparent;
      font-size: 12.5px;
      color: var(--ink-secondary);
    }

    .collapsed-hypothesis.visible {
      display: flex;
    }

    .text-link-btn {
      background: none;
      border: none;
      color: var(--ink-primary);
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      padding: 2px 4px;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .text-link-btn:hover {
      color: var(--ink-secondary);
    }

    /* Секція Доведення (Proof Section) */
    .proof-section {
      display: none;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px;
      padding-top: 2px;
      animation: fadeBook 0.2s ease;
    }

    .proof-section.visible {
      display: flex;
    }

    @keyframes fadeBook {
      from { opacity: 0; transform: translateY(2px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .proof-verdict {
      font-family: var(--font-sans);
      font-size: 12.5px;
      font-weight: 500;
      padding: 6px 10px;
      border-radius: 0;
      border: none;
      border-left: 2px solid var(--ink-primary);
      background: var(--bg-inset);
      line-height: 1.45;
    }

    .proof-verdict.correct {
      border-left-color: var(--fig-green);
      color: var(--ink-primary);
    }

    .proof-verdict.incorrect {
      border-left-color: var(--fig-red);
      color: var(--ink-primary);
    }

    .proof-text {
      font-family: var(--font-serif);
      font-size: 15.4px;
      line-height: 1.56;
      color: var(--ink-primary);
      padding: 2px 0 4px;
      background: transparent;
      border: none;
      text-align: left;
      text-wrap: pretty;
      overflow-wrap: break-word;
    }

    .proof-text strong {
      color: var(--ink-primary);
      font-weight: 600;
    }

    .equation-card {
      background: transparent;
      border: none;
      border-top: 1px solid var(--rule-light);
      border-bottom: 1px solid var(--rule-light);
      border-radius: 0;
      padding: 10px 0;
      overflow: hidden;
    }

    .equation-header {
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink-secondary);
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between;
    }

    .katex-display-wrap {
      padding: 4px 0;
      text-align: center;
      font-size: 14px;
      color: var(--ink-primary);
      max-width: 100%;
      overflow: hidden;
    }

    .katex-live-sub {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid var(--rule-light);
      font-size: 12px;
      color: var(--ink-secondary);
      text-align: center;
      max-width: 100%;
      overflow: hidden;
    }

    .katex-display {
      margin: 0.2em 0 !important;
      overflow: visible !important;
    }

    .math-stack {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }

    .math-fit-outer {
      width: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .math-fit-inner {
      display: inline-block;
      white-space: nowrap;
    }

    .math-chips-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 10px;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .math-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 1px 4px;
      max-width: 100%;
      overflow: hidden;
      font-size: 11.8px;
      color: var(--ink-secondary);
    }

    /* ==========================================================================
       ТЕЛЕМЕТРІЯ ТА ЕНЕРГІЯ (ЧИСТИЙ ТАБЛИЧНИЙ І КНИЖКОВИЙ СТИЛЬ)
       ========================================================================== */
    .figure-section {
      padding-top: 16px;
      margin-bottom: 18px;
      border-top: 1px solid var(--rule-dark);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .figure-caption-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink-secondary);
      font-variant-numeric: tabular-nums;
    }

    .energy-bar-book {
      height: 4px;
      width: 100%;
      background: var(--bg-inset);
      border: none;
      border-radius: 0;
      display: flex;
      overflow: hidden;
    }

    .bar-ek { background: var(--fig-green); transition: width 0.08s linear; }
    .bar-ep { background: var(--fig-blue); transition: width 0.08s linear; }
    .bar-q  { background: var(--fig-amber); transition: width 0.08s linear; }

    /* Три колонки показників енергії у табличному стилі */
    .energy-metrics-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      padding: 3px 0;
    }

    .metric-box {
      padding: 0 6px 0 0;
      border-left: none;
      border-right: 1px solid var(--rule-light);
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .metric-box:last-child {
      border-right: none;
      padding-right: 0;
    }

    .metric-label {
      font-size: 10.5px;
      font-weight: 500;
      line-height: 1.25;
      color: var(--ink-muted);
      display: flex;
      align-items: baseline;
      gap: 5px;
      margin-bottom: 3px;
      min-width: 0;
    }

    #ek-label,
    #ep-label,
    #q-label {
      min-width: 0;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .swatch-dot {
      display: inline-block;
      width: 8px;
      height: 2px;
      border-radius: 0;
      flex-shrink: 0;
    }

    .metric-val {
      font-family: var(--font-mono);
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink-primary);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #chart-canvas {
      width: 100%;
      height: 68px;
      background: transparent;
      border: none;
      border-top: 1px solid var(--rule-light);
      border-bottom: 1px solid var(--rule-light);
      border-radius: 0;
      display: block;
    }

    .figure-caption-bottom {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 13.8px;
      color: var(--ink-secondary);
      line-height: 1.48;
      padding-left: 0;
      border-left: none;
      text-align: left;
      text-wrap: pretty;
    }

    /* Таблиця телеметрії */
    .measurements-table {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 2px;
      border-top: 1px solid var(--rule-dark);
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }

    .meas-cell {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: baseline;
      gap: 2px 10px;
      padding: 6px 0;
      border-bottom: 1px solid var(--rule-light);
      font-size: 12.2px;
      min-width: 0;
      max-width: 100%;
    }

    .meas-name {
      color: var(--ink-secondary);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.35;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
      min-width: 0;
      max-width: 100%;
    }

    .meas-num {
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 11.8px;
      line-height: 1.35;
      color: var(--ink-primary);
      font-variant-numeric: tabular-nums;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      text-align: right;
      margin-left: auto;
      min-width: 0;
      max-width: 100%;
    }

    /* ==========================================================================
       ПРАВА ПАНЕЛЬ: РІВНЯННЯ, ПОВЗУНКИ ТА ПЕРЕМИКАЧІ
       ========================================================================== */
    .journal-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 18px;
    }

    .journal-section + .journal-section {
      padding-top: 15px;
      border-top: 1px solid var(--rule-dark);
    }

    .section-heading-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink-secondary);
      margin-bottom: 2px;
    }

    /* Блок базових рівнянь (без вкладеної картки) */
    .laws-reference-box {
      background: transparent;
      border: none;
      border-top: 1px solid var(--rule-light);
      border-bottom: 1px solid var(--rule-light);
      border-radius: 0;
      padding: 10px 0;
      box-shadow: none;
      font-size: 13.8px;
      color: var(--ink-primary);
      text-align: center;
      overflow: hidden;
    }

    /* Повзунки параметрів */
    .param-control {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 6px 0 8px;
      border-bottom: 1px solid var(--rule-light);
    }

    .param-control:last-child {
      border-bottom: none;
      padding-bottom: 2px;
    }

    .param-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
    }

    .param-title {
      font-size: 12.8px;
      font-weight: 400;
      color: var(--ink-primary);
      min-width: 0;
      overflow-wrap: break-word;
      line-height: 1.4;
    }

    .param-readout {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-primary);
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    input[type="range"].book-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 2px;
      border-radius: 0;
      background: linear-gradient(
        to right,
        var(--ink-primary) 0%,
        var(--ink-primary) var(--progress, 50%),
        var(--rule-dark) var(--progress, 50%),
        var(--rule-dark) 100%
      );
      outline: none;
      cursor: pointer;
      border: none;
      margin: 6px 0 3px;
    }

    input[type="range"].book-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--ink-primary);
      border: none;
      box-shadow: none;
      cursor: grab;
    }

    input[type="range"].book-slider::-moz-range-thumb {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--ink-primary);
      border: none;
      box-shadow: none;
      cursor: grab;
    }

    /* Перемикачі шарів (квадратні чекбокси замість iOS-пігулок) */
    .drawing-toggles {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid var(--rule-light);
    }

    .toggle-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 0;
      border-bottom: 1px solid var(--rule-light);
      cursor: pointer;
      font-size: 12.8px;
      font-weight: 400;
      color: var(--ink-primary);
    }

    .book-switch {
      appearance: none;
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      background: transparent;
      border-radius: 2px;
      border: 1px solid #a1a1aa;
      position: relative;
      cursor: pointer;
      flex-shrink: 0;
    }

    .book-switch::after {
      content: '';
      position: absolute;
      display: none;
      width: 4px;
      height: 8px;
      border: solid #faf9f5;
      border-width: 0 1.5px 1.5px 0;
      top: 1px;
      left: 4px;
      transform: rotate(45deg);
    }

    .book-switch:checked {
      background: var(--ink-primary);
      border-color: var(--ink-primary);
    }

    .book-switch:checked::after {
      display: block;
    }

    /* Кольорова легенда векторів */
    .legend-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px 12px;
      padding-top: 10px;
    }

    .legend-entry {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12.2px;
      color: var(--ink-secondary);
      padding: 2px 0;
      background: transparent;
      border: none;
    }

    .legend-bar {
      width: 12px;
      height: 3.5px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    /* ==========================================================================
       МІСЦЯ ПІД РЕКЛАМУ GOOGLE ADS / ADSENSE
       ========================================================================== */
    .ad-viewport-leaderboard {
      position: fixed;
      top: calc(var(--header-h) + 10px);
      left: 50%;
      transform: translateX(-50%);
      width: min(728px, calc(100vw - var(--left-page-w) - var(--right-page-w) - 48px));
      min-height: 52px;
      height: auto;
      z-index: 25;
      background: rgba(250, 249, 245, 0.94);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px dashed var(--rule-dark);
      border-radius: 3px;
      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0;
    }

    .ad-viewport-leaderboard.ad-closed {
      display: none !important;
    }

    .ad-lb-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .ad-lb-badge {
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 2px 6px;
      border-radius: 2px;
      background: var(--bg-inset);
      border: 1px solid var(--rule-dark);
      color: var(--ink-secondary);
      flex-shrink: 0;
    }

    .ad-lb-copy {
      display: flex;
      flex-direction: column;
      min-width: 0;
      text-align: left;
    }

    .ad-lb-headline {
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 600;
      color: var(--ink-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ad-lb-subline {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--ink-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ad-lb-actions {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
      margin-left: auto;
    }

    .ad-lb-close {
      width: 22px;
      height: 22px;
      border-radius: 2px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--ink-muted);
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .ad-lb-close:hover {
      background: var(--bg-inset);
      border-color: var(--rule-dark);
      color: var(--ink-primary);
    }

    .ad-sidebar-card {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--rule-dark);
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
    }

    .ad-card-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--ink-muted);
    }

    .ad-card-frame {
      width: 100%;
      height: auto;
      background: var(--bg-inset);
      border: 1px dashed var(--rule-dark);
      border-radius: 3px;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
    }

    .ad-card-frame.ad-rect-compact {
      min-height: 90px;
    }

    .ad-card-frame.ad-rect-mrec {
      min-height: 110px;
    }

    .ad-card-frame:has(ins.adsbygoogle[data-ad-status="filled"]),
    .ad-viewport-leaderboard:has(ins.adsbygoogle[data-ad-status="filled"]),
    .mobile-unsupported-ad:has(ins.adsbygoogle[data-ad-status="filled"]) {
      border-style: solid;
      background: transparent;
    }

    .ad-viewport-leaderboard ins.adsbygoogle,
    .ad-card-frame ins.adsbygoogle,
    .mobile-ad-frame ins.adsbygoogle {
      position: relative;
      z-index: 1;
      width: 100%;
      min-width: 160px;
      display: block;
    }

    ins.adsbygoogle[data-ad-status="unfilled"] {
      display: none !important;
    }

    .ad-viewport-leaderboard ins.adsbygoogle[data-ad-status="filled"] ~ .ad-fallback-content,
    .ad-card-frame ins.adsbygoogle[data-ad-status="filled"] ~ .ad-fallback-content,
    .mobile-ad-frame ins.adsbygoogle[data-ad-status="filled"] ~ .mobile-ad-fallback {
      display: none !important;
    }

    .ad-card-frame .ad-fallback-content,
    .mobile-ad-frame .mobile-ad-fallback {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px;
      gap: 3px;
      pointer-events: none;
    }

    .ad-viewport-leaderboard .ad-fallback-content {
      position: absolute;
      inset: 0 38px 0 12px;
      z-index: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      pointer-events: none;
    }

    .ad-slot-title {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-secondary);
      line-height: 1.3;
    }

    .ad-slot-sub {
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--ink-muted);
      line-height: 1.35;
      max-width: 28ch;
    }

    .ad-slot-spec {
      font-family: var(--font-mono);
      font-size: 9.5px;
      color: var(--ink-faint);
      margin-top: 2px;
    }

    @media (max-width: 1200px) {
      .ad-viewport-leaderboard {
        display: none;
      }
    }

    @media (max-width: 1080px) {
      :root {
        --left-page-w: 315px;
        --right-page-w: 288px;
      }
      .phase-breadcrumbs {
        display: none;
      }
      .exp-dropdown-wrapper {
        width: 340px;
        flex: 0 0 340px;
        min-width: 340px;
        max-width: 340px;
      }
    }

    /* ==========================================================================
       ЕКРАН ДЛЯ МОБІЛЬНИХ ТЕЛЕФОНІВ
       ========================================================================== */
    .mobile-unsupported-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99999;
      background-color: #eef1f5;
      color: var(--ink-primary);
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 24px 18px 16px;
      text-align: center;
      overflow-y: auto;
    }

    .mobile-unsupported-card {
      margin: auto 0;
      width: 100%;
      max-width: 380px;
      background: #ffffff;
      border: 1px solid var(--rule-dark);
      border-radius: 4px;
      box-shadow: var(--shadow-hard-lg);
      padding: 22px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .mobile-unsupported-toprow {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--rule-light);
    }

    .mobile-unsupported-logo {
      width: 48px;
      height: 48px;
      border-radius: 3px;
    }

    .mobile-unsupported-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 3px 8px;
      border-radius: 2px;
      background: var(--accent-oxford-soft);
      color: var(--accent-oxford);
    }

    .mobile-unsupported-title {
      font-family: var(--font-sans);
      font-size: 19px;
      font-weight: 700;
      line-height: 1.25;
      color: var(--ink-primary);
      letter-spacing: -0.02em;
    }

    .mobile-unsupported-sub {
      font-family: var(--font-sans);
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink-secondary);
    }

    .mobile-unsupported-ad {
      width: 100%;
      max-width: 380px;
      background: #ffffff;
      border: 1px solid var(--rule-light);
      border-radius: 3px;
      padding: 8px 10px;
      margin-top: 14px;
      flex-shrink: 0;
    }

    .mobile-ad-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--ink-muted);
      margin-bottom: 4px;
    }

    .mobile-ad-frame {
      position: relative;
      min-height: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 4px;
      overflow: hidden;
    }

    .mobile-ad-frame ins.adsbygoogle[data-ad-status="filled"] ~ .mobile-ad-fallback {
      display: none !important;
    }

    @media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
      .mobile-unsupported-overlay {
        display: flex !important;
      }
      #canvas-container,
      .book-header,
      .ad-viewport-leaderboard,
      .viewport-cam-dock,
      .panel-collapse-btn,
      .book-page-left,
      .book-page-right {
        display: none !important;
      }
    }

    body.is-mobile-phone .mobile-unsupported-overlay {
      display: flex !important;
    }
    body.is-mobile-phone #canvas-container,
    body.is-mobile-phone .book-header,
    body.is-mobile-phone .ad-viewport-leaderboard,
    body.is-mobile-phone .viewport-cam-dock,
    body.is-mobile-phone .panel-collapse-btn,
    body.is-mobile-phone .book-page-left,
    body.is-mobile-phone .book-page-right {
      display: none !important;
    }

    .sr-only-seo-nav {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* ==========================================================================
       ОСВІТНЯ ЛОГІКА ДЛЯ ДІТЕЙ ТА СТУДЕНТІВ (ШКОЛА / ВНЗ, ГІПОТЕЗА → ДОСЛІД → ДОВЕДЕННЯ)
       ========================================================================== */

    /* Індикатор прогресу учня у верхній панелі */
    .edu-progress-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 26px;
      padding: 0 8px;
      border-radius: 4px;
      border: 1px solid var(--rule-dark);
      background: transparent;
      color: var(--ink-muted);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      transition: all 0.14s ease;
    }

    .edu-progress-pill:hover {
      border-color: var(--accent-oxford);
      background: var(--bg-inset);
      color: var(--ink-primary);
    }

    .edu-prog-check {
      color: var(--fig-green);
      font-weight: 600;
    }

    /* Заголовок блоку гіпотези + кнопка підказки */
    .problem-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .btn-question-hint {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--ink-muted);
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }

    .btn-question-hint:hover,
    .btn-question-hint.active {
      color: var(--ink-primary);
    }

    .question-hint-box {
      display: none;
      padding: 8px 0 4px 12px;
      border-radius: 0;
      background: transparent;
      border: none;
      border-left: 2px solid var(--rule-dark);
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 14.5px;
      line-height: 1.5;
      color: var(--ink-secondary);
      text-align: left;
      text-wrap: pretty;
    }

    .question-hint-box.open {
      display: block;
    }

    /* Банер активного спостереження на етапі «ІІ. Дослід» (Predict → Observe → Explain) */
    .observe-stage-banner {
      display: none;
      flex-direction: column;
      gap: 8px;
      padding: 12px 0;
      margin-bottom: 16px;
      border-radius: 0;
      background: transparent;
      border-top: 1px solid var(--rule-light);
      border-bottom: 1px solid var(--rule-light);
    }

    .observe-stage-banner.visible {
      display: flex;
    }

    .observe-status-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 14.8px;
      line-height: 1.5;
      color: var(--ink-secondary);
      font-weight: 400;
      text-align: left;
      text-wrap: pretty;
    }

    .btn-reveal-proof-now {
      align-self: flex-start;
      padding: 4px 10px;
      border-radius: 2px;
      border: 1px solid var(--rule-dark);
      background: var(--bg-card);
      color: var(--ink-primary);
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
    }

    .btn-reveal-proof-now:hover {
      background: var(--ink-primary);
      color: #faf9f5;
      border-color: var(--ink-primary);
    }

    /* Кнопка переходу до наступного уроку знизу блоку Доведення */
    .btn-next-lesson-cta {
      margin-top: 4px;
      width: 100%;
      padding: 7px 12px;
      border-radius: 2px;
      border: 1px solid var(--rule-dark);
      background: transparent;
      color: var(--ink-primary);
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
    }

    .btn-next-lesson-cta:hover {
      background: var(--bg-inset);
      border-color: var(--ink-primary);
    }

    /* Пошук у каталозі дослідів */
    .dropdown-search-wrap {
      padding: 6px 8px 4px;
      background: transparent;
    }

    .dropdown-search-input {
      width: 100%;
      height: 30px;
      padding: 0 9px;
      border-radius: 2px;
      border: 1px solid var(--rule-dark);
      background: var(--bg-card);
      color: var(--ink-primary);
      font-family: var(--font-sans);
      font-size: 12px;
      outline: none;
    }

    .dropdown-search-input:focus {
      border-color: var(--ink-primary);
    }

    /* ==========================================================================
       ШАПКА САЙТУ: ПЕРЕМИКАЧ ДИСЦИПЛІН
       ========================================================================== */
    .header-brand-discipline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .discipline-switcher {
      display: inline-flex;
      align-items: center;
      gap: 0;
      padding: 0;
      border-radius: 2px;
      background: transparent;
      border: 1px solid var(--rule-dark);
      flex-shrink: 0;
      overflow: hidden;
    }

    .disc-tab {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 28px;
      padding: 0 11px;
      border-radius: 0;
      border: none;
      background: transparent;
      color: var(--ink-secondary);
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
    }

    .disc-tab + .disc-tab {
      border-left: 1px solid var(--rule-dark);
    }

    .disc-tab:hover {
      color: var(--ink-primary);
      background: var(--bg-inset);
    }

    .disc-tab.active {
      background: var(--ink-primary);
      color: #faf9f5;
      font-weight: 600;
    }

    .disc-tab-chem.active {
      color: #faf9f5;
    }

    .header-v-divider {
      width: 1px;
      height: 20px;
      background: var(--rule-dark);
      flex-shrink: 0;
    }

    /* Модальне вікно анонсу розділу «3D Хімія» (#chemistry-preview-modal) */
    .chemistry-preview-backdrop {
      position: fixed;
      inset: 0;
      z-index: 120;
      background: rgba(15, 23, 42, 0.42);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .chemistry-preview-backdrop.open {
      display: flex;
      animation: chemFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes chemFadeIn {
      from { opacity: 0; transform: scale(0.98); }
      to { opacity: 1; transform: scale(1); }
    }

    .chemistry-preview-dialog {
      width: min(760px, 94vw);
      max-height: 88vh;
      overflow-y: auto;
      background: #ffffff;
      border: 1px solid var(--rule-dark);
      border-radius: 4px;
      box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.24), 0 4px 12px rgba(15, 23, 42, 0.08);
      padding: 22px 25px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .chem-modal-top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .chem-modal-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 4px 10px;
      border-radius: 3px;
      background: rgba(13, 148, 136, 0.1);
      border: 1px solid rgba(13, 148, 136, 0.25);
      color: #0f766e;
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.05em;
    }

    .chem-badge-dot {
      width: 7px;
      height: 7px;
      border-radius: 2px;
      background: #0d9488;
    }

    .chem-modal-close {
      width: 30px;
      height: 30px;
      border-radius: 3px;
      border: 1px solid var(--rule-light);
      background: #f8fafc;
      color: var(--ink-secondary);
      font-size: 14px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.12s ease;
    }

    .chem-modal-close:hover {
      background: #f1f5f9;
      color: var(--ink-primary);
      border-color: var(--rule-dark);
    }

    .chem-modal-title {
      font-family: var(--font-sans);
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink-primary);
      line-height: 1.25;
    }

    .chem-modal-sub {
      font-family: var(--font-sans);
      font-size: 13.5px;
      line-height: 1.62;
      color: var(--ink-secondary);
    }

    .chem-modules-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-top: 2px;
    }

    .chem-module-card {
      padding: 12px 14px;
      border-radius: 3px;
      border: 1px solid var(--rule-dark);
      background: #f8fafc;
      display: flex;
      flex-direction: column;
      gap: 4px;
      transition: border-color 0.14s ease, background 0.14s ease;
    }

    .chem-module-card:hover {
      background: #f0fdfa;
      border-color: rgba(13, 148, 136, 0.4);
    }

    .chem-module-sec {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      color: #0f766e;
    }

    .chem-module-title {
      font-family: var(--font-sans);
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink-primary);
      line-height: 1.3;
    }

    .chem-module-desc {
      font-family: var(--font-sans);
      font-size: 12px;
      line-height: 1.52;
      color: var(--ink-muted);
    }

    .chem-modal-footer {
      display: flex;
      justify-content: flex-end;
      padding-top: 8px;
      border-top: 1px solid var(--rule-light);
    }

    .btn-chem-back-physics {
      padding: 9px 16px;
      border-radius: 3px;
      border: 1px solid var(--accent-oxford);
      background: var(--accent-oxford);
      color: #ffffff;
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.14s ease;
    }

    .btn-chem-back-physics:hover {
      background: #1e40af;
    }