:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: #24394a; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: #f5f7f8; height: 100dvh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
button, select { font: inherit; }
a { color: inherit; text-underline-offset: .2em; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 3px solid #087cae; outline-offset: 3px; }
.reader-toolbar { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 10px 18px; background: #fff; border-bottom: 1px solid #dfe5ea; }
.reader-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
.reader-controls button, .reader-controls select { border: 1px solid #cfd9df; border-radius: 4px; background: #fff; color: #24394a; min-height: 36px; padding: 5px 9px; }
.reader-controls button:hover { background: #f0f5f8; }
.reader-controls select { max-width: 116px; }
.zoom-controls { display: flex; align-items: center; gap: 5px; }
.zoom-controls button:first-child, .zoom-controls button:nth-of-type(2) { width: 36px; font-size: 20px; line-height: 1; }
#zoom-level { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.path-controls { display: flex; justify-content: space-between; gap: 8px; flex: 1; min-width: 280px; max-width: 490px; }
.path-controls button { border: 0; border-bottom: 2px solid transparent; min-height: 34px; padding: 3px 0; color: #5c7180; background: none; font-size: 12px; }
.path-controls button::before { content: ""; width: 6px; height: 6px; display: inline-block; background: #8a9eac; border-radius: 50%; margin-right: 4px; }
.path-controls button[data-path="reading"]::before { background: #ffbf00; }
.path-controls button[data-path="writing"]::before { background: #06b0f0; }
.path-controls button[data-path="sharing"]::before { background: #82f5b1; }
.path-controls button[data-path="world_model"]::before { background: #cd93e3; }
.path-controls button[aria-pressed="true"] { border-bottom-color: #59768b; color: #24394a; font-weight: 600; }
html:not(.reader-ready) .reader-controls, html:not(.reader-ready) .path-controls { display: none; }
#viewport { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: auto; scrollbar-gutter: stable; padding: 18px; position: relative; }
#sheet { width: 100%; margin-inline: auto; background: #fffefa; box-shadow: 0 1px 8px #24394a10; }
#sheet svg { display: block; width: 100%; height: auto; }
#sheet .tag:hover rect, #sheet .tag:focus-visible rect { stroke: #173c60; stroke-width: 2.5px; }
#sheet .tag:focus-visible { outline: none; }
@media (max-width: 560px) {
  .reader-toolbar { padding: 10px 10px 5px; }
  .reader-controls { gap: 6px; width: 100%; }
  .reader-controls button, .reader-controls select { padding-inline: 7px; }
  .path-controls { gap: 5px; flex-basis: 100%; min-width: 0; }
  .path-controls button { font-size: 11px; white-space: nowrap; }
  #viewport { padding: 10px; }
}
@media print {
  @page { size: A4 portrait; margin: 8mm; }
  body { height: auto; background: #fff; }
  .reader-toolbar { display: none; }
  #viewport { display: block; overflow: visible; padding: 0; }
  #sheet { width: 194mm !important; margin: 0; box-shadow: none; }
  #sheet svg { width: 194mm; height: 281mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}