@layer components {
:root {
  --hl-yellow: #f5d76e;
  --hl-green: #a8d5ba; /* Legacy annotations keep their original color. */
  --hl-terracotta: #E5B19A;
  --hl-blue: #a9c8f0;
  --hl-pink: #f2b8c6;
}
/* PDF.js appends its font-measurement canvas to body, outside the reader root. */
.hiddenCanvasElement {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: none;
}
body:not([data-workspace="reader"]) .reader-only,
body[data-workspace="reader"] .homework-only,
.workspace-switch[hidden], main.layout[hidden], .reader-root[hidden] {
  display: none !important;
}
.topbar:has(.workspace-switch:not([hidden])) { justify-content: flex-start; }
.topbar:has(.workspace-switch:not([hidden])) .topbar-actions { margin-left: auto; }
.workspace-switch {
  display: flex;
  flex-shrink: 0;
  padding: 3px;
  border: 1px solid var(--border);


  gap: 2px;
}
.workspace-switch button {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.workspace-switch button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--accent);
}
.workspace-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.workspace-mobile { display: none; }
.reader-root {
  flex: 1;
  min-height: 0;
  overflow: auto;

  font-family: var(--font-ui);
}
.reader-empty { max-width: 600px; margin: 12vh auto; text-align: center; }
.reader-empty h1 { font-family: var(--font-serif); color: var(--ink); }
.reader-empty p { color: var(--muted); }
.reader-root:has(.reader-reading:not([hidden])) { padding: 0; overflow: hidden; }
.reader-root [hidden] { display: none !important; }
:where(.reader-root button, .reader-dialog button) { min-height: 44px; cursor: pointer; font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--border);  padding: 6px 12px; }
:where(.reader-root button:hover, .reader-dialog button:hover) { background: var(--panel-2); }
.reader-root button:focus-visible, .reader-root input:focus-visible, .reader-root select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(.reader-root input, .reader-root select, .reader-dialog input, .reader-dialog textarea) { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 10px; min-height: 44px; max-width: 100%; }
.reader-primary { background: var(--ink); color: var(--on-ink); }
.reader-shelf {   }
.reader-shelf-heading { display: flex; align-items: center; justify-content: space-between;   }
.reader-shelf h1 { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 38px); margin: 8px 0; }
.reader-eyebrow {   color: var(--accent); }
.reader-shelf-heading p, .reader-book p, .reader-capacity { color: var(--muted); }
.reader-shelf-filters { display: flex;   }
.reader-shelf-filters input { flex: 1; }
.reader-book-grid { display: grid;   }
.reader-book { position: relative; min-width: 0; }
.reader-cover { width: 100%;  padding: 0; overflow: hidden;   }
.reader-cover img { width: 100%; height: 100%; object-fit: contain; }
.reader-cover-placeholder {  padding-top: 70px; }
.reader-book-title { border: 0; padding: 8px 0; text-align: left; width: calc(100% - 34px); font-weight: 600; }
.reader-book p {  margin: 0; }
.reader-book-more { position: absolute;   padding: 0 8px; border: 0; }
.reader-add-card {  border-style: dashed; color: var(--accent); }
.reader-shelf-empty { grid-column: 1 / -1;  }
.reader-continue { width: 100%; text-align: left;   }
.reader-capacity { font-size: 12px;  border-top: 1px solid var(--border); padding-top: 16px; }
.reader-status {   padding: 16px; border: 1px solid var(--border); background: var(--panel); z-index: 15; }
.reader-reading { height: 100%; display: flex; flex-direction: column; }
.reader-toolbar { display: flex; align-items: center;   border-bottom: 1px solid var(--border); background: var(--panel);  }
.reader-toolbar button { border: 0; padding: 4px 8px; }
.reader-mouse-tools { display: flex; align-items: center;    border-bottom: 1px solid var(--border); flex-shrink: 0; }
.reader-mouse-tools button {  white-space: nowrap;  }
.reader-mouse-tools [aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.reader-mouse-tools [data-tool="highlight"]::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background: var(--active-marker,var(--hl-yellow)); }
.reader-mouse-tools [data-tool="explain"] { font-weight: 600; }
.reader-mouse-hint { color: var(--muted);   }
.reader-marker-colors { display: flex;   border-inline: 1px solid var(--border); }
.reader-marker-colors button { width: 30px;  padding: 4px; border: 2px solid transparent; border-radius: 50%; }
.reader-marker-colors button::before { content: ''; display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--marker-color); }
.reader-marker-colors button[aria-pressed="true"] { border-color: var(--ink); background: transparent; }
.reader-marker-preview { position: absolute; opacity: .45; mix-blend-mode: multiply; border-radius: 3px; pointer-events: none; }
.reader-marker-mode { cursor: crosshair; touch-action: none; }
@media (max-width: 639px) { .reader-mouse-tools { flex-wrap: wrap; padding: 6px 10px; } .reader-mouse-hint { flex-basis: 100%; margin-left: 0; font-size: 11px; } }
.reader-breadcrumb { flex: 1; min-width: 100px; display: flex; overflow: hidden; align-items: center; white-space: nowrap; font-size: 12px; }
.reader-breadcrumb button { overflow: hidden; text-overflow: ellipsis; }
.reader-page-input {  }
.reader-zoom-label { min-width: 42px; text-align: center; font-size: 12px; }
.reader-body { display: flex; flex: 1; min-height: 0; position: relative; }
.reader-assistant { display: flex; flex-direction: column; flex-shrink: 0;   background: var(--panel); position: relative; border-left: 1px solid var(--border); }
.reader-assistant.collapsed { display: none; }
.reader-assistant-heading { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.reader-assistant-heading .reader-tabs {  min-width: 0; overflow-x: auto; }
.reader-assistant-content { flex: 1; min-height: 0; overflow: auto;  }
.reader-assistant-resize { position: absolute; left: -4px; width: 8px; top: 0; bottom: 0; cursor: col-resize; touch-action: none; z-index: 12; }
.reader-assistant-handle { display: none; }
.reader-usage { margin: 0; padding: 10px 16px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); }
.reader-translation-controls, .reader-paragraph-actions, .reader-popover-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.reader-translation-controls button, .reader-paragraph-actions button, .reader-popover-actions button { font-size: 12px; padding: 4px 8px; }
.reader-translation-paragraph { padding: 16px 0; border-bottom: 1px solid var(--border); }
.reader-original { font: 15px/1.7 Georgia, serif; color: var(--muted); }
.reader-translation-paragraph .markdown { font-size: 14px; line-height: 1.8; }
.reader-paragraph-outline { position: absolute; border: 2px solid var(--accent); background: var(--accent-soft); border-radius: 3px; pointer-events: none; }
.reader-skeleton { color: var(--muted); background: var(--panel-2); padding: 12px; border-radius: 4px; }
.reader-translate-popover { position: absolute; z-index: 18; right: 20px; top: 120px; width: min(420px, calc(100% - 32px)); max-height: calc(100% - 150px); overflow: auto; padding: 18px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 5px 20px #0002; }
.reader-popover-heading { display: flex; gap: 12px; justify-content: space-between; align-items: center; }
.reader-popover-result { margin: 12px 0; font-size: 14px; line-height: 1.8; }
.reader-popover-result h3 { font-size: 14px; color: var(--accent); }
.reader-ai-error { padding: 14px; background: var(--panel-2); border-left: 3px solid var(--accent); }
.reader-settings-fields { display: grid; gap: 16px; }
.reader-settings-fields label { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.reader-settings-fields input[type="checkbox"] { width: auto; }
.reader-word-list article { border-bottom: 1px solid var(--border); padding: 12px 0; }
.reader-word-list h3 { font-family: Georgia, serif; font-size: 22px; }
.reader-word-list blockquote { color: var(--muted); font-family: Georgia, serif; margin: 12px 0; }
.reader-glossary-row { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 1023px) {
  .reader-assistant { position: absolute; right: 0; top: 0; bottom: 0; z-index: 10; box-shadow: -3px 0 15px #0002; }
}
@media (max-width: 639px) {
  .reader-assistant { position: fixed; inset: auto 0 0; height: var(--assistant-height, 35dvh); width: 100% !important; max-width: none; min-width: 0; border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom); z-index: 16; }
  .reader-assistant.expanded { --assistant-height: 70dvh; }
  .reader-assistant-handle { display: block; flex-shrink: 0; touch-action: none; border: 0; }
  .reader-assistant-resize { display: none; }
  .reader-translate-popover { position: fixed; inset: auto 0 0; width: 100%; max-height: 70dvh; border-radius: 12px 12px 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}
.reader-sidebar {  flex-shrink: 0; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--border); }
.reader-sidebar.collapsed { display: none; }
.reader-tabs { display: flex; padding: 6px; gap: 4px; }
.reader-tabs button { flex: 1; border: 0; }
.reader-tabs button[aria-pressed="true"] { color: var(--accent); background: var(--panel-2); }
.reader-sidebar-list { overflow: auto;  }
.reader-outline-row, .reader-bookmark-row { display: flex; }
.reader-outline-row button { border: 0; text-align: left; flex: 1; min-width: 0; }
.reader-outline-row button[aria-expanded] { flex: 0; }
.reader-outline-row.current {  border-radius: 6px; }
.reader-outline-row.current button { color: var(--accent); }
.reader-bookmark-row button:first-child { flex: 1; text-align: left; border: 0; }
.reader-pages { overflow: auto; flex: 1; min-width: 0;  position: relative;  overscroll-behavior: contain; }
.reader-page { position: relative; background: white; margin: 0 auto 16px;  flex-shrink: 0; }
.reader-page canvas { display: block; }
.reader-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.reader-progress { height: 2px; flex-shrink: 0; background: linear-gradient(to right, var(--accent) var(--progress, 0%), var(--border) var(--progress, 0%)); }
.reader-root { position: relative; }
.reader-page .textLayer { z-index: 3; }
.reader-page .hl-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.reader-page .reader-overlay { z-index: 4; }
.reader-highlight { position: absolute; opacity: .45; mix-blend-mode: multiply; }
.reader-region { border: 0; border-radius: 3px; }
.reader-thread-line { background: transparent; border-bottom: 2px dashed var(--accent); opacity: 1; }
.reader-note-marker, .reader-thread-marker { position: absolute; right: 0; min-width: 32px; min-height: 32px; padding: 2px; pointer-events: auto; background: var(--panel); font-size: 14px; }
.reader-selection-bar { position: absolute; z-index: 20; display: flex;     background: var(--panel); border: 1px solid var(--border-strong); border-radius: 9px; box-shadow: 0 3px 16px #0003; }
.reader-selection-bar button { border: 0; font-size: 12px; padding: 6px 8px; }
.reader-selection-bar {  }
.reader-selection-bar [data-action="explain"] { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.reader-selection-bar [data-action="yellow"] { border-bottom: 4px solid var(--hl-yellow); }
.reader-selection-bar [data-action="terracotta"] { border-bottom: 4px solid var(--hl-terracotta); }
.reader-selection-bar [data-action="blue"] { border-bottom: 4px solid var(--hl-blue); }
.reader-selection-bar [data-action="pink"] { border-bottom: 4px solid var(--hl-pink); }
.reader-color-filters { display: flex; flex-wrap: wrap; gap: 3px; }
.reader-color-filters button { font-size: 11px; padding: 4px 6px; }
.reader-color-filters button[aria-pressed="true"] { background: var(--accent-soft); outline: 1px solid var(--accent); }
.reader-annotation { display: flex; flex-direction: column; text-align: left; width: 100%; gap: 7px; margin: 6px 0; }
.reader-annotation strong { font-weight: 400; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reader-annotation span, .reader-annotation small { font-size: 11px; color: var(--muted); }
.reader-annotation small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.reader-sidebar-list h3 { font-size: 12px; margin: 22px 0 8px; color: var(--accent); }
.reader-sidebar-list input { width: 100%; margin-top: 10px; }
.reader-scan-badge { position: absolute; top: 8px; right: 8px; z-index: 5; font-size: 12px; background: var(--panel); }
.reader-pages.region-mode { touch-action: none; cursor: crosshair; }
.reader-pages.region-mode .textLayer { pointer-events: none; user-select: none; }
.reader-undo-toast { position: absolute; bottom: 20px; left: 16px; z-index: 22; background: var(--panel); border: 1px solid var(--border); padding: 8px 12px; border-radius: 8px; }
@media (max-width: 639px) {
  .reader-selection-bar { position: fixed; top: auto !important; left: 8px !important; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); }
  .reader-selection-bar button { flex: 1; }
  .reader-dialog:has(textarea) { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 12px 12px 0 0; }
}
.reader-dialog { max-width: min(620px, calc(100vw - 32px)); width: 480px; border: 1px solid var(--border);  background: var(--panel); color: var(--ink);  }
.reader-dialog::backdrop {  }
.reader-dialog h2 { margin-top: 0; font-family: var(--font-serif); }
.reader-dialog input, .reader-dialog textarea { width: 100%; }
.reader-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.reader-note-discard { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; }
.reader-note-discard button + button { margin-left: 8px; }
.reader-book-menu { display: grid; gap: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .reader-flash { animation: reader-flash .6s ease-in-out 2; }
  @keyframes reader-flash { 50% { outline: 3px solid var(--accent); } }
}
@media (max-width: 900px) {
  .reader-sidebar { position: absolute; inset: 0 auto 0 0; z-index: 8; box-shadow: 5px 0 15px #0002; }
  .reader-toolbar .reader-breadcrumb { flex-basis: calc(100% - 120px); }
}
@media (max-width: 639px) {
  body[data-workspace="reader"] .brand,
  body:has(.workspace-switch:not([hidden])) .brand { display: flex; }
  body[data-workspace="reader"] .brand-name,
  body:has(.workspace-switch:not([hidden])) .brand-name { display: none; }
  .workspace-desktop { display: none; }
  .workspace-mobile { display: inline; }
  .workspace-switch button { padding: 0 10px; }
  .reader-root { padding: 16px; }
  .reader-book-grid { gap: 24px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader-cover { height: 210px; }
  .reader-shelf-heading { flex-direction: column; align-items: flex-start; }
  .reader-shelf-filters { flex-wrap: wrap; }
  .reader-toolbar { gap: 0; padding: 4px; font-size: 12px; }
  .reader-sidebar { width: min(280px, 85vw); }
}
/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* Source: https://cdn.jsdelivr.net/npm/pdfjs-dist@4.10.38/web/pdf_viewer.css */
.textLayer{
  position:absolute;
  text-align:initial;
  inset:0;
  overflow:clip;
  opacity:1;
  line-height:1;
  -webkit-text-size-adjust:none;
     -moz-text-size-adjust:none;
          text-size-adjust:none;
  forced-color-adjust:none;
  transform-origin:0 0;
  caret-color:CanvasText;
  z-index:0;
}

.textLayer.highlighting{
    touch-action:none;
  }

.textLayer :is(span,br){
    color:transparent;
    position:absolute;
    white-space:pre;
    cursor:text;
    transform-origin:0% 0%;
  }

.textLayer  > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){
    z-index:1;
  }

.textLayer span.markedContent{
    top:0;
    height:0;
  }

.textLayer span[role="img"]{
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
    cursor:default;
  }

.textLayer .highlight{
    --highlight-bg-color:rgb(180 0 170 / 0.25);
    --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
    --highlight-backdrop-filter:none;
    --highlight-selected-backdrop-filter:none;
  }

@media screen and (forced-colors: active){

.textLayer .highlight{
      --highlight-bg-color:transparent;
      --highlight-selected-bg-color:transparent;
      --highlight-backdrop-filter:var(--hcm-highlight-filter);
      --highlight-selected-backdrop-filter:var(
        --hcm-highlight-selected-filter
      );
  }
    }

.textLayer .highlight{

    margin:-1px;
    padding:1px;
    background-color:var(--highlight-bg-color);
    -webkit-backdrop-filter:var(--highlight-backdrop-filter);
            backdrop-filter:var(--highlight-backdrop-filter);
    border-radius:4px;
  }

.appended:is(.textLayer .highlight){
      position:initial;
    }

.begin:is(.textLayer .highlight){
      border-radius:4px 0 0 4px;
    }

.end:is(.textLayer .highlight){
      border-radius:0 4px 4px 0;
    }

.middle:is(.textLayer .highlight){
      border-radius:0;
    }

.selected:is(.textLayer .highlight){
      background-color:var(--highlight-selected-bg-color);
      -webkit-backdrop-filter:var(--highlight-selected-backdrop-filter);
              backdrop-filter:var(--highlight-selected-backdrop-filter);
    }

.textLayer ::-moz-selection{
    background:rgba(0 0 255 / 0.25);

  }

.textLayer ::selection{
    background:rgba(0 0 255 / 0.25);

  }

.textLayer br::-moz-selection{
    background:transparent;
  }

.textLayer br::selection{
    background:transparent;
  }

.textLayer .endOfContent{
    display:block;
    position:absolute;
    inset:100% 0 0;
    z-index:0;
    cursor:default;
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
  }

.textLayer.selecting .endOfContent{
    top:0;
  }
/* Original-text conversations */
.reader-thread-card { display:flex; flex-direction:column; text-align:left; gap:6px; width:100%; padding:16px; margin:10px 0; }
.reader-thread-card small { color:var(--muted); font-weight:400; }
.reader-thread-heading,.reader-explain-settings,.reader-quick-asks,.reader-chat-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0; }
.reader-thread-quote { border-left:3px solid var(--accent); padding:8px 12px; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.reader-thread-quote.expanded { display:block; }
.reader-crop-thumb img { max-width:100%; max-height:150px; object-fit:contain; }
.reader-chat-message {   overflow-wrap:anywhere;   }
.reader-chat-message.user { background:var(--panel-2); white-space:pre-wrap; }
.reader-explain-panel textarea { width:100%; min-height:90px; resize:vertical; box-sizing:border-box; }
.reader-quick-asks button { min-height:44px; }
.reader-quiz-panel label { display:block; margin:12px 0; }
.reader-quiz-panel input[type=number] { width:85px; }
.reader-quiz-range,.reader-quiz-panel nav { display:flex; gap:8px; flex-wrap:wrap; }
.reader-quiz-panel fieldset { border:1px solid var(--border); border-radius:8px; }
.reader-quiz-panel input[type=checkbox] { margin-right:8px; }
.reader-quiz-choices { display:grid; gap:10px; }
.reader-quiz-choices button { text-align:left; min-height:48px; padding:12px; }
.reader-quiz-choices button[aria-pressed=true] { border-color:var(--accent); background:var(--panel-2); outline:2px solid var(--accent); }
.reader-quiz-choices textarea { width:100%; box-sizing:border-box; }
.reader-quiz-history { margin-top:30px; }
.reader-quiz-history button { display:block; margin:8px 0; width:100%; text-align:left; }
.reader-score { display:grid; place-items:center; width:120px; height:120px; border:8px solid var(--accent); border-radius:50%; font-size:30px; margin:24px auto; }
.reader-card-row { border-bottom:1px solid var(--border); padding:18px 0; }
.reader-card-row button { margin:8px 8px 0 0; }
.reader-review-dialog { width:min(700px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); border:1px solid var(--border); border-radius:20px; padding:24px; color:var(--text); background:var(--panel); }
.reader-review-dialog::backdrop { background:rgb(0 0 0 / .45); }
.reader-review-face { display:block; width:100%; min-height:260px; text-align:center; padding:28px; font:inherit; color:var(--text); background:var(--panel-2); border:1px solid var(--border); border-radius:16px; cursor:pointer; }
.reader-review-face h2 { font:26px/1.5 Georgia,serif; }
.reader-review-face p { line-height:1.8; }
.reader-review-ratings { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:20px; }
.reader-review-dialog button { min-height:44px; color:var(--text); }
.reader-search-panel { display:flex; gap:8px; padding:10px 14px; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--border); background:var(--panel); }
.reader-search-panel input[type=search] { min-width:180px; flex:1; min-height:44px; }
.reader-search-panel label { display:flex; gap:6px; align-items:center; }
.reader-search-panel p { flex-basis:100%; margin:0; font-size:12px; color:var(--muted); }
.reader-search-results button { display:block; text-align:left; width:100%; margin:8px 0; padding:12px; line-height:1.7; }
.reader-search-results mark {  background:#ecd779; }
.reader-search-results [aria-current=true] { outline:2px solid var(--accent); }
.reader-search-hit { position:absolute; outline:2px solid var(--accent); background:rgb(84 125 98 / .12); pointer-events:none; animation:reader-search-fade 3s ease forwards; }
@keyframes reader-search-fade { 0%,75%{opacity:1}100%{opacity:0} }
.reader-root[data-reading-mode=sepia] .reader-pages { background:#e9dfca; }
.reader-root[data-reading-mode=sepia] .reader-page canvas { filter:sepia(.25) brightness(.98); }
.reader-root[data-reading-mode=night] { --text:#F4EFE9; --muted:#C6BBB0; --panel:#302D2A; --panel-2:#3B3631; --border:#62594F; --accent:#E4AB96; background:#24211F; color:var(--text); }
.reader-root[data-reading-mode=night] .reader-pages { background:#1D1B19; }
.reader-root[data-reading-mode=night] .reader-page canvas { filter:invert(.9) hue-rotate(180deg); }
.reader-root[data-reading-mode=night] .hl-layer { mix-blend-mode:screen; opacity:.7; }
.reader-root[data-reading-mode=night] .reader-page { background:#292623; }
.reader-root[data-reading-mode=night] .reader-toolbar,.reader-root[data-reading-mode=night] .reader-sidebar { background:var(--panel); }
.reader-thread-line.reader-region { border:2px dashed var(--accent); background: transparent; opacity:.8; }
.reader-chat-message.streaming::after { content:'▍'; color:var(--accent); }
.reader-review-dialog button,.reader-dialog button { padding:8px 12px; background:var(--panel-2); border:1px solid var(--border); border-radius:8px; font:inherit; }
.reader-root button:focus-visible,.reader-dialog button:focus-visible,.reader-review-dialog button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .reader-root *,.reader-root *::before,.reader-root *::after,.reader-dialog *,.reader-review-dialog * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.reader-root[data-reading-mode=night] { --ink:#F4EFE9; --on-ink:#24211F; color-scheme:dark; }
.reader-root .reader-primary { color: var(--on-ink); }
.reader-search-results mark { color:#292725; }
.reader-sidebar>.reader-tabs { overflow-x:auto; flex-shrink:0; }
.reader-sidebar>.reader-tabs button { flex:0 0 auto; white-space:nowrap; padding:6px 10px; }
body:has(.reader-root:not([hidden])[data-reading-mode=night]) .reader-dialog,
body:has(.reader-root:not([hidden])[data-reading-mode=night]) .reader-review-dialog { --text:#F4EFE9; --muted:#C6BBB0; --panel:#302D2A; --panel-2:#3B3631; --border:#62594F; --accent:#E4AB96; --ink:#F4EFE9; --on-ink:#24211F; color-scheme:dark; }

/* Reading desk: the same warm paper, ink and interaction rhythm as homework. */
.reader-root { padding: 36px clamp(20px, 4vw, 64px); color: var(--text); background: var(--bg); }
.reader-root button, .reader-dialog button { border-radius: var(--radius-sm); transition: background .18s ease, border-color .18s ease, color .18s ease; }
.reader-root button:disabled { opacity: .38; cursor: default; }
.reader-root input, .reader-root select { border-radius: var(--radius-sm); }
.reader-shelf { max-width: 1200px; margin: 0 auto; }
.reader-shelf-heading { gap: 12px;  }
.reader-shelf-heading > div { flex: 1; }
.reader-shelf-heading h1 { font-family: var(--font-ui); font-size: clamp(28px, 3vw, 38px); letter-spacing: -.06em; font-weight: 600; }
.reader-shelf-heading .reader-eyebrow { margin: 0; }
.reader-eyebrow { font-size: 11px; letter-spacing: .12em; font-weight: 600; }
.reader-title-dot { color: var(--accent); }
.reader-shelf-intro { display: grid;  align-items: center;   border: 1px solid var(--border); border-radius: 18px; background: radial-gradient(ellipse at 90% 0%, var(--accent-soft), transparent 65%), var(--panel); overflow: hidden; }
.reader-intro-copy h2 {   color: var(--ink);  }
.reader-intro-description {  font-size: 14px; line-height: 1.9; color: var(--muted); }
.reader-start { margin: 12px 0; padding: 12px 20px; min-height: 48px; }
.reader-intro-copy > small { display: block; font-size: 11px; color: var(--muted); }
.reader-shelf-art { position: relative; width: 280px; height: 290px; margin: auto; color: var(--ink); }
.reader-art-page { position: absolute; inset: 10px 20px 15px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 3px; box-shadow: 0 12px 32px #29272510; }
.reader-art-back { transform: rotate(-10deg); background: var(--panel-2); }
.reader-art-front { transform: rotate(5deg); padding: 25px; }
.reader-art-front > span { display: block; font: 8px/1.5 Georgia, serif; letter-spacing: .12em; padding-bottom: 12px; border-bottom: 1px solid var(--border-strong); }
.reader-art-front > strong { display: block; white-space: pre-line; font: 32px/1.15 Georgia, serif; margin-top: 20px; letter-spacing: -.04em; }
.reader-art-front > strong::first-line { background: var(--hl-yellow); }
.reader-art-front small { display: block; font-size: 9px; margin-top: 18px; }
.reader-art-lines { display: grid; gap: 8px; margin-top: 20px; }
.reader-art-lines i { height: 3px; width: 90%; background: var(--border); }
.reader-art-lines i:last-child { width: 65%; }
.reader-art-note { position: absolute; right: -12px; bottom: 44px; transform: rotate(-6deg); font-size: 12px; padding: 10px 16px; background: var(--ink); color: var(--on-ink); border-radius: 5px; }
.reader-shelf.has-books .reader-shelf-intro { min-height: 240px; padding-block: 22px; }
.reader-shelf.has-books .reader-intro-copy h2 { font-size: 32px; margin: 10px 0; }
.reader-shelf.has-books .reader-shelf-art { transform: scale(.75); height: 230px; transform-origin: center; }
.reader-shelf-steps { display: flex; justify-content: space-between; gap: 20px; list-style: none; padding: 20px 0; margin: 0 0 24px; border-bottom: 1px solid var(--border); }
.reader-shelf-steps li { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.reader-shelf-steps li > span { font: italic 16px Georgia, serif; color: var(--accent); }
.reader-collection-heading { display: flex; justify-content: space-between; align-items: baseline; }
.reader-collection-heading h2 { font-size: 20px; font-weight: 500; margin: 8px 0; }
.reader-shelf-count { font-size: 12px; color: var(--muted); }
.reader-shelf-filters { margin: 16px 0 28px; gap: 20px; }
.reader-shelf-filters label { display: grid; gap: 8px; font-size: 11px; color: var(--muted); }
.reader-shelf-filters label:first-child { flex: 1; }
.reader-shelf-filters input { width: 100%; box-sizing: border-box; background: var(--panel); }
.reader-book-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
.reader-book { padding: 16px; background: var(--panel); border: 1px solid var(--border);  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.reader-book:hover, .reader-book:focus-within { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: 0 8px 24px #2927250c; }
.reader-cover { height: 230px; border: 0; border-radius: 4px; background: var(--panel-2); box-shadow: 0 3px 10px #29272510; }
.reader-cover-placeholder { font: 24px/1.4 var(--font-serif); padding: 30px 18px; text-align: left; color: var(--ink); }
.reader-book-title { margin-top: 10px; font-size: 14px; line-height: 1.6; min-height: 44px; overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.reader-book-more { right: 12px; bottom: 62px; }
.reader-book p { line-height: 1.7; font-size: 11px; }
.reader-book-position { display: grid; gap: 9px; color: var(--muted); font-size: 11px; margin-top: 18px; }
.reader-book-progress { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--book-progress), var(--border) var(--book-progress)); }
.reader-add-card { border-radius: 12px;  min-height: 240px; }
.reader-shelf-empty { padding: 24px; border-left: 2px solid var(--accent); margin-bottom: 4px; background: var(--panel); }
.reader-shelf-empty h2 { font-size: 18px; font-weight: 500; margin-top: 0; }
.reader-shelf-empty p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.reader-continue { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 20px; position: relative; border-radius: 12px;  padding: 20px 56px 20px 24px; background: var(--ink); color: var(--on-ink); border-color: transparent; }
.reader-continue .reader-eyebrow { color: inherit; opacity: .7; grid-column: 1 / -1; }
.reader-continue strong { font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.reader-continue > span:not(.reader-eyebrow):not(.reader-resume-arrow) { font-size: 12px; opacity: .75; }
.reader-resume-arrow { position: absolute; right: 22px; font-size: 24px; }
.reader-capacity { margin-top: 32px; line-height: 1.7; }
.reader-reading { background: var(--panel); }
.reader-toolbar { flex-shrink: 0; flex-wrap: nowrap; padding: 12px 20px; gap: 24px; }
.reader-document-heading { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.reader-document-heading > button { flex-shrink: 0; color: var(--muted); }
.reader-document-name { min-width: 0; }
.reader-document-name > strong { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-document-name .reader-breadcrumb { margin-top: 3px; font-size: 11px; color: var(--muted); min-width: 0; }
.reader-breadcrumb button { min-height: 24px; padding: 0 6px 0 0; font-size: 11px; color: var(--muted); }
.reader-breadcrumb button + button::before { content: '/'; padding-right: 6px; color: var(--border-strong); }
.reader-toolbar-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.reader-toolbar-actions button { font-size: 12px; min-height: 40px; }
.reader-toolbar-actions .reader-assistant-toggle { background: var(--ink); color: var(--on-ink); padding-inline: 14px; margin-left: 6px; }
.reader-root .reader-toolbar-actions .reader-assistant-toggle:hover { background: var(--accent); color: var(--on-ink); }
.reader-mouse-tools { padding: 8px 20px; gap: 6px; background: var(--panel-2); }
.reader-mouse-tools button { min-height: 38px; border-color: transparent; font-size: 12px; }
.reader-mouse-tools [aria-pressed=true]:not([data-color]) { border-color: var(--border-strong); background: var(--panel); color: var(--ink); }
.reader-mouse-tools [data-tool=explain] { color: var(--accent); }
.reader-mouse-hint { margin-left: auto; font-size: 11px; max-width: 380px; line-height: 1.6; }
.reader-marker-colors { gap: 2px; padding: 0 6px; }
.reader-marker-colors button { min-height: 30px; }
.reader-pages { padding: 24px 16px; background: var(--bg);  background-size: 12px 12px; }
.reader-page { box-shadow: 0 3px 18px #29272514; }
.reader-footer { display: flex; flex-shrink: 0; align-items: center;   padding: 8px 20px; border-top: 1px solid var(--border); background: var(--panel); }
.reader-page-nav, .reader-view-controls { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.reader-footer button { border: 0; padding: 4px 10px; min-height: 36px; font-size: 12px; }
.reader-page-nav > span { color: var(--muted); margin-right: 6px; }
.reader-page-input { width: 52px; min-height: 36px; padding: 6px; text-align: center; font-size: 12px; }
.reader-footer-hint { font-size: 11px; color: var(--muted); }
.reader-sidebar { position: absolute; inset: 0 auto 0 0; z-index: 8; width: 280px; box-shadow: 8px 0 24px #29272512; }
.reader-sidebar-list { flex: 1; padding: 14px; }
.reader-outline-row { margin-bottom: 4px; }
.reader-outline-row button { font-size: 12px; line-height: 1.6; }
.reader-outline-row.current { background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent); }
.reader-studio-heading { display: flex; align-items: center; justify-content: space-between;  gap: 12px; }
.reader-studio-heading h2 {    letter-spacing: -.04em; color: var(--ink); }
.reader-studio-heading > button { border: 0; font-size: 22px; padding: 4px 10px; }
.reader-assistant { min-width: 240px; max-width: calc(100% - 160px); }
.reader-assistant-heading .reader-tabs { padding: 0 20px;  flex-wrap: wrap; }
.reader-assistant-heading .reader-tabs button { position: relative; flex: 0 0 auto; min-height: 46px; padding: 8px 0; border-radius: 0; font-size: 12px; white-space: nowrap; }
.reader-assistant-heading .reader-tabs button[aria-pressed=true] { background: transparent; font-weight: 600; }
.reader-assistant-heading .reader-tabs button[aria-pressed=true]::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--accent); }
.reader-assistant-content { padding: 24px; scrollbar-gutter: stable; }
.reader-study-panel { display: grid; gap: 18px; animation: reader-view-enter .24s ease both; }
.reader-study-panel > h3, .reader-study-panel > p { margin: 0; }
.reader-study-note { color: var(--muted); font-size: 12px; line-height: 1.8; }
.reader-study-select { display: grid; gap: 10px; font-size: 13px; }
.reader-study-select select { width: 100%; min-width: 0; }
.reader-study-chapter { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.reader-study-chapter h4 { margin: 0; font-size: 18px; }
.reader-study-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.reader-study-overview { padding: 16px 20px; border: 1px solid var(--border); border-radius: 12px; }
.reader-study-overview summary { cursor: pointer; font-size: 14px; }
.reader-study-overview p { white-space: pre-wrap; line-height: 1.9; font-size: 13px; }
.reader-quiz-range[hidden] { display: none; }
.reader-assistant-content h3 { font-size: 16px; font-weight: 500; color: var(--ink); }
.reader-explain-panel > input[type=search] { width: 100%; box-sizing: border-box; background: var(--panel-2); font-size: 12px; }
.reader-explain-welcome {  line-height: 1.9; }
.reader-welcome-symbol { display: grid; place-items: center; width: 58px; height: 58px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--border); border-radius: 50%; font: 32px Georgia, serif; margin-bottom: 28px; }
.reader-explain-welcome h3 {  margin: 12px 0; }
.reader-explain-welcome p:not(.reader-eyebrow) { color: var(--muted);  }
.reader-explain-welcome ol { list-style: decimal-leading-zero; padding-left: 24px; font-size: 12px; color: var(--muted); margin: 24px 0; }
.reader-explain-welcome li { padding: 5px 0 5px 6px; }
.reader-explain-welcome li::marker { color: var(--accent); }
.reader-explain-welcome small { display: block; color: var(--muted); font-size: 11px;  }
.reader-chat-message { padding: 18px 0; border: 0; border-radius: 0; margin: 0; font-size: 14px; line-height: 1.85; }
.reader-chat-message.user { padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; margin: 16px 0; }
.reader-thread-quote { background: var(--panel-2); border-radius: 0 8px 8px 0; color: var(--muted); font: 14px/1.8 Georgia, var(--font-ui), serif; }
.reader-thread-heading button, .reader-explain-settings, .reader-quick-asks button { font-size: 12px; }
.reader-thread-card { background: var(--panel-2); border-radius: 10px; border-color: transparent; }
.reader-thread-card:hover { border-color: var(--border-strong); }
.reader-thread-card strong { font-size: 13px; line-height: 1.6; }
.reader-thread-card small { font-size: 10px; line-height: 1.6; }
.reader-explain-panel textarea { font: 13px/1.8 var(--font-ui); padding: 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--panel); color: var(--text); }
.reader-chat-actions { justify-content: flex-end; }
.reader-chat-actions button { font-size: 12px; }
.reader-translation-controls { gap: 8px; }
.reader-translation-controls button { font-size: 12px; }
.reader-usage:empty { display: none; }
.reader-status { position: fixed; inset: auto 24px 24px auto; max-width: min(420px, calc(100vw - 48px)); border-radius: 12px; box-shadow: var(--shadow); }
.reader-dialog { border-radius: 16px; padding: 28px; }
.reader-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: no-preference) {
  .reader-shelf, .reader-reading { animation: reader-desk-enter .38s ease both; }
  .reader-assistant:not(.collapsed), .reader-sidebar:not(.collapsed) { animation: reader-panel-enter .24s ease both; }
  .reader-assistant-content > *, .reader-dialog[open] { animation: reader-desk-enter .22s ease both; }
  .reader-art-front { animation: reader-paper-enter .65s cubic-bezier(.2,.7,.2,1) both; }
  .reader-progress { transition: background .25s ease; }
  @keyframes reader-desk-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes reader-panel-enter { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes reader-paper-enter { from { opacity: 0; transform: translateY(18px) rotate(0); } to { opacity: 1; transform: translateY(0) rotate(5deg); } }
}
@media (max-width: 1100px) {
  .reader-mouse-hint { max-width: 240px; }
  .reader-footer-hint { display: none; }
}
@media (max-width: 1023px) {
  .reader-assistant { max-width: calc(100% - 160px); }
  .reader-shelf-intro { padding-inline: 5%; }
  .reader-mouse-hint { display: none; }
}
@media (max-width: 639px) {
  .reader-root { padding: 20px 16px; }
  .reader-shelf-heading { flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
  .reader-shelf-heading h1 { font-size: 28px; }
  .reader-shelf-heading > button { font-size: 11px; padding: 8px 10px; }
  .reader-shelf-intro { grid-template-columns: 1fr; padding: 28px 24px; min-height: 0; }
  .reader-intro-copy h2 { font-size: 34px; }
  .reader-shelf-art { height: 245px; width: 245px; margin-top: 28px; }
  .reader-art-front > strong { font-size: 27px; }
  .reader-shelf.has-books .reader-shelf-art { display: none; }
  .reader-shelf.has-books .reader-shelf-intro { padding: 18px 20px; min-height: 0; }
  .reader-shelf.has-books .reader-intro-copy h2 { font-size: 23px; margin: 10px 0; }
  .reader-shelf.has-books .reader-intro-copy h2 br,
  .reader-shelf.has-books .reader-intro-description,
  .reader-shelf.has-books .reader-intro-copy > small { display: none; }
  .reader-shelf.has-books .reader-start { margin: 6px 0 0; font-size: 12px; padding: 8px 12px; }
  .reader-shelf-steps { gap: 12px; padding: 18px 0; }
  .reader-shelf-steps li { flex: 1; align-items: flex-start; flex-direction: column; gap: 8px; font-size: 10px; line-height: 1.6; }
  .reader-shelf-filters { flex-wrap: nowrap; gap: 10px; }
  .reader-shelf-filters input { min-width: 0; }
  .reader-shelf-filters select { max-width: 115px; font-size: 12px; }
  .reader-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .reader-book { padding: 10px; }
  .reader-cover { height: 170px; }
  .reader-book-more { right: 5px; bottom: 64px; }
  .reader-continue { padding: 18px 40px 18px 18px; gap: 8px; }
  .reader-continue strong { font-size: 15px; }
  .reader-continue > span:not(.reader-resume-arrow) { grid-column: 1 / -1; }
  .reader-toolbar { padding: 8px 12px; gap: 10px; flex-wrap: wrap; }
  .reader-document-heading { flex-basis: 100%; }
  .reader-document-heading > button { padding-left: 0; font-size: 12px; min-height: 36px; }
  .reader-document-name > strong { font-size: 12px; }
  .reader-toolbar-actions { width: 100%; justify-content: flex-start; gap: 2px; }
  .reader-toolbar-actions button { min-height: 44px; padding-inline: 7px; }
  .reader-mouse-tools { flex-wrap: nowrap; gap: 3px; padding: 6px 10px; overflow-x: auto; }
  .reader-mouse-tools > button { flex-shrink: 0; padding-inline: 8px; font-size: 11px; }
  .reader-marker-colors { flex-shrink: 0; gap: 0; padding-inline: 4px; }
  .reader-marker-colors button { width: 25px; min-height: 28px; padding: 3px; }
  .reader-marker-colors button::before { width: 15px; height: 15px; }
  .reader-footer { padding: 6px 8px max(6px, env(safe-area-inset-bottom)); flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
  .reader-footer button { padding-inline: 9px; min-height: 44px; }
  .reader-footer .reader-page-input { min-height: 44px; }
  .reader-footer .reader-view-controls { gap: 0; }
  .reader-assistant { width: 100% !important; min-width: 0; max-width: none; height: var(--assistant-height, 65dvh); }
  .reader-assistant-handle { min-height: 28px; font-size: 11px; color: var(--muted); }
  .reader-studio-heading { padding: 8px 20px 12px; }
  .reader-studio-heading h2 { font-size: 18px; }
  .reader-assistant-content { padding: 18px 20px; }
  .reader-explain-welcome { padding-top: 18px; }
  .reader-welcome-symbol { width: 44px; height: 44px; margin-bottom: 16px; }
  .reader-pages { padding-top: 16px; }
}

/* One reading flow. Secondary tools appear only when asked for. */
body[data-workspace=reader] #reader-shelf-btn,
body[data-workspace=reader] #reader-add-btn,
body[data-workspace=reader] #reader-cards-btn { display: none !important; }
.reader-shelf-intro { grid-template-columns: 1fr; min-height: 220px; padding: 32px; }
.reader-intro-copy h2 { font: 500 clamp(26px, 3vw, 36px)/1.5 var(--font-ui); margin: 0 0 12px; }
.reader-intro-description { max-width: 600px; }
.reader-shelf.has-books .reader-shelf-intro,
.reader-shelf.has-books .reader-shelf-steps { display: none; }
.reader-shelf:not(.has-books) .reader-shelf-heading > .reader-primary,
.reader-shelf:not(.has-books) .reader-collection-heading,
.reader-shelf:not(.has-books) .reader-shelf-filters { display: none; }
.reader-shelf-heading { margin-bottom: 20px; }
.reader-resume { margin-bottom: 24px; }
.reader-continue { margin-top: 0; }
.reader-shelf-maintenance { margin-top: 18px; color: var(--muted); font-size: 12px; }
.reader-shelf-maintenance summary { cursor: pointer; padding: 12px 0; width: fit-content; }
.reader-shelf-maintenance-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.reader-disclosure { position: relative; flex-shrink: 0; font-size: 12px; }
.reader-disclosure > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); list-style: none; cursor: pointer; color: var(--muted); white-space: nowrap; }
.reader-disclosure > summary::-webkit-details-marker { display: none; }
.reader-disclosure > summary:hover, .reader-disclosure[open] > summary { background: var(--panel-2); color: var(--ink); }
.reader-disclosure > summary:focus-visible, .reader-shelf-maintenance summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reader-menu-content { position: absolute; z-index: 25; right: 0; top: calc(100% + 6px); width: 230px; max-width: calc(100vw - 32px); max-height: 60dvh; overflow: auto; padding: 8px; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); background: var(--panel); color: var(--text); }
.reader-menu-content > button { display: block; width: 100%; text-align: left; min-height: 44px; border: 0; padding: 10px 14px; font-size: 13px; }
.reader-display-menu .reader-menu-content { top: auto; bottom: calc(100% + 10px); }
.reader-display-menu .reader-view-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.reader-display-menu .reader-view-controls > button { min-height: 44px; font-size: 13px; }
.reader-display-menu .reader-view-controls > button:nth-child(n+4) { grid-column: 1 / -1; text-align: left; padding-left: 14px; }
.reader-footer { justify-content: space-between; position: relative; padding-block: 8px; gap: 12px; }
.reader-footer .reader-display-menu { position: static; }
.reader-footer > .reader-view-controls { margin-left: auto; }
.reader-page-nav { gap: 8px; }
.reader-page-nav button { min-width: 44px; min-height: 44px; font-size: 20px; }
.reader-action-row { display: flex; align-items: center; gap: 12px; padding: 6px 20px; border-bottom: 1px solid var(--border); background: var(--panel-2); flex-shrink: 0; }
.reader-action-hint { flex: 1; font-size: 12px; line-height: 1.6; color: var(--muted); }
.reader-action-row > button { border: 0; min-height: 44px; font-size: 12px; }
.reader-action-row .reader-select-explain { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.reader-action-row .reader-select-explain[aria-pressed=true] { background: var(--ink); color: var(--on-ink); }
.reader-action-row .reader-stop-tool { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.reader-mark-menu .reader-menu-content { width: 300px; }
.reader-mark-menu .reader-mouse-tools { flex-wrap: wrap; padding: 8px; border: 0; background: var(--panel); gap: 6px; }
.reader-mark-menu .reader-mouse-tools > button { flex: 1 0 42%; min-height: 44px; font-size: 13px; text-align: center; border: 1px solid var(--border); }
.reader-mark-menu .reader-mouse-tools [data-tool=explain] { display: none; }
.reader-mark-menu .reader-marker-colors { order: 2; width: 100%; justify-content: center; border: 0; padding: 12px 0; }
.reader-mark-menu .reader-marker-colors button { width: 44px; min-height: 44px; display: grid; place-items: center; }
.reader-mark-menu .reader-mouse-hint { display: none; }
.reader-toolbar { position: relative; z-index: 11; }
.reader-action-row { position: relative; z-index: 10; }
.reader-tools-visible { gap: 16px; flex-wrap: wrap; background: var(--panel-2); }
.reader-tools-label { color: var(--muted); font-size: 11px; white-space: nowrap; }
.reader-tools-visible .reader-mouse-tools { padding: 0; border: 0; background: transparent; flex-wrap: wrap; gap: 4px; }
.reader-tools-visible .reader-mouse-tools > button { min-height: 38px; border: 1px solid transparent; padding: 6px 12px; font-size: 12px; }
.reader-tools-visible .reader-mouse-tools > button[aria-pressed=true] { border-color: var(--border-strong); background: var(--panel); box-shadow: 0 2px 5px #29272509; }
.reader-tools-visible .reader-mouse-tools > button[title="復原上一個標註"] { margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--border); color: var(--muted); }
.reader-tools-visible .reader-mouse-hint { display: none; }
.reader-tools-visible .reader-marker-colors[hidden] { display: none; }
.reader-tools-visible .reader-marker-colors { order: 2; padding: 0 8px; }
.reader-tools-visible .reader-action-hint { margin-left: auto; text-align: right; flex: 1 1 200px; font-size: 11px; }
.reader-practice-tools { display: flex; align-items: center; gap: 12px; padding: 8px 24px; border-bottom: 1px solid var(--border); background: var(--panel-2); flex-shrink: 0; }
.reader-practice-tools > span { color: var(--muted); font-size: 11px; }
.reader-practice-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.reader-practice-actions button { min-height: 36px; padding: 6px 12px; border: 1px solid transparent; font-size: 12px; }
.reader-practice-actions button[aria-pressed=true] { background: var(--panel); border-color: var(--border-strong); color: var(--accent); }
.reader-assistant-heading { position: relative; z-index: 2; justify-content: space-between; padding-right: 16px; }
.reader-assistant-heading .reader-tabs { flex: 0 1 auto; overflow: visible; gap: 20px; }
.reader-studio-heading { padding: 16px 24px 12px; }
.reader-studio-heading h2 { margin: 0; font-size: 17px; font-weight: 600; }
.reader-study-menu summary { font-size: 11px; padding: 0 8px; }
.reader-study-menu { margin-left: auto; }
.reader-explain-welcome { padding: 36px 0 24px; }
.reader-explain-welcome h3 { font: 500 23px/1.5 var(--font-ui); }
.reader-explain-welcome p:not(.reader-eyebrow) { font-size: 14px; line-height: 1.9; margin: 16px 0 24px; }
.reader-explain-welcome button { min-height: 48px; padding: 10px 16px; }
.reader-explain-welcome small { line-height: 1.8; margin-top: 20px; }
.reader-selection-bar { flex-wrap: nowrap; align-items: center; padding: 5px; gap: 2px; max-width: calc(100% - 16px); }
.reader-selection-bar > button, .reader-selection-bar > details > summary { min-height: 44px; font-size: 12px; padding: 8px 12px; white-space: nowrap; }
.reader-selection-more .reader-menu-content { bottom: calc(100% + 8px); top: auto; width: 200px; max-height: 40dvh; }
.reader-inline-options { font-size: 12px; color: var(--muted); }
.reader-inline-options > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; width: fit-content; list-style: none; }
.reader-inline-options > summary::after { content: '⌄'; }
.reader-inline-options[open] > summary::after { content: '⌃'; }
.reader-inline-options > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.reader-thread-heading { justify-content: space-between; align-items: flex-start; }
.reader-explain-settings { flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px; background: var(--panel-2); border-radius: 8px; }
.reader-explain-settings label { display: flex; align-items: center; gap: 8px; }
.reader-explain-settings input[type=checkbox] { min-height: 20px; width: 20px; }
.reader-followup-ideas { margin: 12px 0; }
.reader-translation-controls { align-items: flex-start; justify-content: space-between; }
.reader-translation-controls > button { min-height: 44px; padding: 8px 14px; }
.reader-translation-extra-controls { display: grid; gap: 8px; padding: 12px; background: var(--panel-2); border-radius: 8px; }
.reader-translation-extra-controls button { min-height: 44px; font-size: 12px; text-align: left; }
.reader-translation-empty { padding: 28px 0; }
.reader-translation-empty h3 { font-size: 22px; font-weight: 500; }
.reader-translation-empty p { font-size: 14px; line-height: 1.9; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .reader-disclosure[open] > .reader-menu-content { animation: reader-desk-enter .16s ease both; }
}
@media (max-width: 639px) {
  .reader-toolbar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .reader-document-heading { flex-basis: auto; gap: 10px; }
  .reader-document-heading > button { font-size: 0; width: 36px; padding: 0; min-height: 44px; }
  .reader-document-heading > button::before { content: '‹'; font-size: 26px; }
  .reader-document-name > strong { font-size: 12px; }
  .reader-document-name .reader-breadcrumb { display: none; }
  .reader-toolbar-actions { width: 100%; flex-wrap: nowrap; gap: 0; overflow-x: auto; }
  .reader-toolbar-actions > button { font-size: 11px; padding: 4px 8px; }
  .reader-toolbar-actions .reader-assistant-toggle { margin-left: 2px; padding-inline: 10px; }
  .reader-document-menu > summary { padding-inline: 8px; font-size: 11px; gap: 4px; }
  .reader-action-row { gap: 6px; padding: 4px 12px; flex-wrap: wrap; }
  .reader-action-hint { flex-basis: 100%; font-size: 11px; }
  .reader-action-row > button { padding-inline: 10px; }
  .reader-action-row .reader-mark-menu { margin-left: auto; }
  .reader-footer { justify-content: flex-start; min-height: 60px; padding: 6px 12px; }
  .reader-footer .reader-display-menu { right: 8px; }
  .reader-footer .reader-display-menu > summary { padding-inline: 8px; gap: 6px; }
  .reader-page-nav { gap: 2px; }
  .reader-page-nav > button { padding-inline: 8px; }
  .reader-studio-heading { padding: 12px 20px; }
  .reader-assistant-heading { padding-right: 12px; }
  .reader-assistant-heading .reader-tabs { padding-inline: 20px; gap: 16px; }
  .reader-explain-welcome { padding-top: 16px; }
  .reader-selection-bar > button, .reader-selection-bar > details > summary { padding-inline: 10px; }
  .reader-shelf-intro { padding: 24px; min-height: 0; }
  .reader-shelf-heading { margin-bottom: 16px; }
}
@media (max-width: 639px) {
  .reader-tools-visible { padding: 8px 12px; gap: 4px 8px; }
  .reader-tools-visible .reader-tools-label { display: none; }
  .reader-tools-visible .reader-action-hint { flex-basis: 100%; text-align: left; margin-left: 0; }
  .reader-tools-visible .reader-mouse-tools > button { padding: 6px 8px; min-height: 40px; }
  .reader-footer { flex-wrap: wrap; justify-content: space-between; }
  .reader-footer .reader-display-menu { position: static; }
  .reader-footer > .reader-view-controls { margin-left: 0; }
  .reader-practice-tools { padding-inline: 20px; }
}

/* Reading room: quiet surfaces, typographic hierarchy, neutral night mode. */
.workspace-switch { border-color: transparent; background: var(--panel-2); border-radius: 9px; }
.workspace-switch button[aria-pressed=true] { color: var(--text); box-shadow: 0 1px 4px #2927250a; }
.reader-pages { background-image: none; }
.reader-intro-copy h2 { letter-spacing: .015em; line-height: 1.5; }
.reader-book { border-radius: 9px; box-shadow: none; }
.reader-add-card { background: var(--panel-2); border-color: var(--border-strong); }
.reader-assistant-content { line-height: 1.85; }
.reader-root[data-reading-mode=night] { --accent-soft: rgba(228,171,150,.12); --border-strong:#897D70; --bg:#24211F; }
.reader-root[data-reading-mode=night] .reader-primary { color: var(--on-ink); }
@media (max-width: 639px), (pointer: coarse) {
  .reader-root button, .reader-dialog button, .reader-review-dialog button { min-height: 44px; }
  .reader-marker-colors button { width: 44px; min-width: 44px; display: grid; place-items: center; }
}

}